├── .all-contributorsrc ├── .babelrc.json ├── .github ├── FUNDING.yml └── workflows │ ├── deploy-storybook.yml │ └── pr-ui-check.yml ├── .gitignore ├── .hygen ├── .hygen.js ├── _templates │ └── block │ │ ├── hook │ │ ├── Component.ejs.t │ │ ├── Component.stories.ejs.t │ │ ├── docs.ejs.t │ │ ├── index.ejs.t │ │ └── prompt.js │ │ └── new │ │ ├── Component.ejs.t │ │ ├── Component.stories.ejs.t │ │ ├── docs.ejs.t │ │ ├── index.ejs.t │ │ └── prompt.js └── package.json ├── .storybook ├── carbon-ads │ ├── CarbonAds.css │ ├── CarbonAds.tsx │ └── useCarbonAds.ts ├── decorators │ ├── Author.tsx │ ├── BlockPicker.tsx │ ├── BlockUsage.tsx │ ├── draggableIframe.tsx │ ├── googleFont.tsx │ └── storyDialog.tsx ├── global.css ├── main.ts ├── manager.css ├── manager.tsx ├── preview-head.html ├── preview.tsx └── tailwind.css ├── .vscode └── settings.json ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── blocks ├── avatar-google │ ├── AvatarGoogle.stories.tsx │ ├── AvatarGoogle.tsx │ ├── index.ts │ └── usage.mdx ├── avatar-gradient │ ├── AvatarGradient.stories.tsx │ ├── AvatarGradient.tsx │ ├── index.ts │ └── usage.mdx ├── avatar-grow │ ├── AvatarGrow.stories.tsx │ ├── AvatarGrow.tsx │ ├── index.ts │ └── usage.mdx ├── button-github │ ├── ButtonGithub.stories.tsx │ ├── ButtonGithub.tsx │ ├── index.ts │ └── usage.mdx ├── button-graphic │ ├── ButtonGraphic.stories.tsx │ ├── ButtonGraphic.tsx │ ├── index.ts │ └── usage.mdx ├── card-blog │ ├── CardBlog.stories.tsx │ ├── CardBlog.tsx │ ├── index.ts │ └── usage.mdx ├── card-engagement │ ├── CardEngagement.stories.tsx │ ├── CardEngagement.tsx │ ├── index.ts │ └── usage.mdx ├── card-galaxy │ ├── CardGalaxy.stories.tsx │ ├── CardGalaxy.tsx │ ├── index.ts │ └── usage.mdx ├── card-highlight │ ├── CardHighlight.stories.tsx │ ├── CardHighlight.tsx │ ├── index.ts │ └── usage.mdx ├── card-kanban │ ├── CardKanban.stories.tsx │ ├── CardKanban.tsx │ ├── index.ts │ └── usage.mdx ├── card-music │ ├── CardMusic.stories.tsx │ ├── CardMusic.tsx │ ├── index.ts │ └── usage.mdx ├── card-news │ ├── CardNews.stories.tsx │ ├── CardNews.tsx │ ├── index.ts │ └── usage.mdx ├── card-news2 │ ├── CardNews2.stories.tsx │ ├── CardNews2.tsx │ ├── index.ts │ └── usage.mdx ├── card-news3 │ ├── CardNews3.stories.tsx │ ├── CardNews3.tsx │ ├── index.ts │ └── usage.mdx ├── card-offer │ ├── CardOffer.stories.tsx │ ├── CardOffer.tsx │ ├── index.ts │ └── usage.mdx ├── card-post │ ├── CardPost.stories.tsx │ ├── CardPost.tsx │ ├── index.ts │ └── usage.mdx ├── card-profile │ ├── CardProfile.stories.tsx │ ├── CardProfile.tsx │ ├── index.ts │ └── usage.mdx ├── card-project │ ├── CardProject.stories.tsx │ ├── CardProject.tsx │ ├── index.ts │ └── usage.mdx ├── card-review │ ├── CardReview.stories.tsx │ ├── CardReview.tsx │ ├── index.ts │ └── usage.mdx ├── card-review2 │ ├── CardReview2.stories.tsx │ ├── CardReview2.tsx │ ├── index.ts │ └── usage.mdx ├── card-reward │ ├── CardReward.stories.tsx │ ├── CardReward.tsx │ ├── index.ts │ └── usage.mdx ├── card-social │ ├── CardSocial.stories.tsx │ ├── CardSocial.tsx │ ├── index.ts │ └── usage.mdx ├── card-solid-game │ ├── CardSolidGame.stories.tsx │ ├── CardSolidGame.tsx │ ├── index.ts │ └── usage.mdx ├── card-sysi │ ├── CardSysi.stories.tsx │ ├── CardSysi.tsx │ ├── index.ts │ └── usage.mdx ├── card-tag │ ├── CardTag.stories.tsx │ ├── CardTag.tsx │ ├── index.ts │ └── usage.mdx ├── card-team │ ├── CardTeam.stories.tsx │ ├── CardTeam.tsx │ ├── index.ts │ └── usage.mdx ├── card-tutor │ ├── CardTutor.stories.tsx │ ├── CardTutor.tsx │ ├── index.ts │ └── usage.mdx ├── checkbox-banner │ ├── CheckboxBanner.stories.tsx │ ├── CheckboxBanner.tsx │ ├── index.ts │ └── usage.mdx ├── checkbox-neon │ ├── CheckboxNeon.stories.tsx │ ├── CheckboxNeon.tsx │ ├── index.ts │ └── usage.mdx ├── color-scheme-select-basic │ ├── ColorSchemeSelectBasic.stories.tsx │ ├── ColorSchemeSelectBasic.tsx │ ├── index.ts │ └── usage.mdx ├── color-scheme-select-icon │ ├── ColorSchemeSelectIcon.stories.tsx │ ├── ColorSchemeSelectIcon.tsx │ ├── index.ts │ └── usage.mdx ├── color-scheme-select-minimal │ ├── ColorSchemeSelectMinimal.stories.tsx │ ├── ColorSchemeSelectMinimal.tsx │ ├── index.ts │ └── usage.mdx ├── color-scheme-tabs-basic │ ├── ColorSchemeTabsBasic.stories.tsx │ ├── ColorSchemeTabsBasic.tsx │ ├── index.ts │ └── usage.mdx ├── field-birthdate-basic │ ├── FieldBirthdateBasic.stories.tsx │ ├── FieldBirthdateBasic.tsx │ ├── index.ts │ └── usage.mdx ├── field-combo-basic │ ├── ComboBoxCompounds.tsx │ ├── ComboBoxContext.tsx │ ├── FieldComboBasic.stories.tsx │ ├── FieldComboBasic.tsx │ ├── index.ts │ └── usage.mdx ├── field-credit-card-basic │ ├── FieldCreditCardBasic.stories.tsx │ ├── FieldCreditCardBasic.tsx │ ├── index.ts │ └── usage.mdx ├── field-day-month-year-basic │ ├── FieldDayMonthYearBasic.stories.tsx │ ├── FieldDayMonthYearBasic.tsx │ ├── index.ts │ └── usage.mdx ├── field-number-input │ ├── FieldNumberInput.stories.tsx │ ├── FieldNumberInput.tsx │ ├── index.ts │ └── usage.mdx ├── field-number-spinner │ ├── FieldNumberSpinner.stories.tsx │ ├── FieldNumberSpinner.tsx │ ├── index.ts │ └── usage.mdx ├── field-pin-input │ ├── FieldPinInput.stories.tsx │ ├── FieldPinInput.tsx │ ├── index.ts │ └── usage.mdx ├── info-apex │ ├── InfoApex.stories.tsx │ ├── InfoApex.styles.ts │ ├── InfoApex.tsx │ ├── index.ts │ └── usage.mdx ├── info-basic │ ├── Info.tsx │ ├── InfoBasic.stories.tsx │ ├── InfoCaption.tsx │ ├── InfoEyebrow.tsx │ ├── InfoSubtitle.tsx │ ├── InfoTitle.tsx │ ├── index.ts │ ├── infoClasses.ts │ └── usage.mdx ├── info-beats │ ├── InfoBeats.stories.tsx │ ├── InfoBeats.styles.ts │ ├── InfoBeats.tsx │ ├── index.ts │ └── usage.mdx ├── info-blog │ ├── InfoBlog.stories.tsx │ ├── InfoBlog.styles.ts │ ├── InfoBlog.tsx │ ├── index.ts │ └── usage.mdx ├── info-chatz │ ├── InfoChatz.stories.tsx │ ├── InfoChatz.styles.ts │ ├── InfoChatz.tsx │ ├── index.ts │ └── usage.mdx ├── info-n01 │ ├── InfoN01.stories.tsx │ ├── InfoN01.styles.ts │ ├── InfoN01.tsx │ ├── index.ts │ └── usage.mdx ├── info-n02 │ ├── InfoN02.stories.tsx │ ├── InfoN02.styles.ts │ ├── InfoN02.tsx │ ├── index.ts │ └── usage.mdx ├── info-n03 │ ├── InfoN03.stories.tsx │ ├── InfoN03.styles.ts │ ├── InfoN03.tsx │ ├── index.ts │ └── usage.mdx ├── info-n04 │ ├── InfoN04.stories.tsx │ ├── InfoN04.styles.ts │ ├── InfoN04.tsx │ ├── index.ts │ └── usage.mdx ├── layout-core-v5 │ ├── Content │ │ ├── Content.tsx │ │ ├── SidebarContent.tsx │ │ ├── getContentSxProps.test.ts │ │ └── getContentSxProps.ts │ ├── EdgeSidebar │ │ ├── EdgeOffset.tsx │ │ ├── EdgeSidebar.tsx │ │ ├── EdgeSidebarBuilder.test.ts │ │ ├── EdgeSidebarBuilder.ts │ │ ├── EdgeTrigger.tsx │ │ ├── getEdgeOffsetSxProps.test.ts │ │ ├── getEdgeOffsetSxProps.ts │ │ ├── useEdgeSidebar.test.tsx │ │ └── useEdgeSidebar.ts │ ├── Footer │ │ └── Footer.tsx │ ├── Fullscreen │ │ ├── Fullscreen.tsx │ │ └── FullscreenContext.tsx │ ├── Header │ │ ├── Header.tsx │ │ ├── HeaderBuilder.test.ts │ │ └── HeaderBuilder.ts │ ├── InsetSidebar │ │ ├── InsetAvoidingView.tsx │ │ ├── InsetContainer.tsx │ │ ├── InsetOffset.tsx │ │ ├── InsetSidebar.tsx │ │ ├── InsetSidebarBuilder.test.ts │ │ └── InsetSidebarBuilder.ts │ ├── Margin │ │ ├── MarginModel.test.ts │ │ └── MarginModel.ts │ ├── MultiHeaders │ │ ├── HeadersCompiler.test.ts │ │ ├── HeadersCompiler.ts │ │ ├── StackedHeaders.test.ts │ │ └── StackedHeaders.ts │ ├── Root │ │ ├── Root.test.tsx │ │ └── Root.tsx │ ├── Width │ │ ├── WidthModel.test.ts │ │ └── WidthModel.ts │ ├── WindowContext.tsx │ ├── hooks │ │ ├── useInsetHeaderMagnet.ts │ │ ├── useScreen.ts │ │ ├── useScrollY.ts │ │ ├── useSidebarAutoCollapse.test.ts │ │ └── useSidebarAutoCollapse.ts │ ├── index.ts │ ├── presets │ │ ├── contentBased.test.ts │ │ ├── contentBased.ts │ │ ├── cozy.test.ts │ │ ├── cozy.ts │ │ ├── fixed.test.ts │ │ ├── fixed.ts │ │ ├── standard.test.ts │ │ └── standard.ts │ ├── shared │ │ ├── ResponsiveBuilder.test.ts │ │ └── ResponsiveBuilder.ts │ ├── theme-augment.ts │ └── utils │ │ ├── calc.ts │ │ ├── combineBreakpoints.test.ts │ │ ├── combineBreakpoints.ts │ │ ├── constant.ts │ │ ├── createSxResult.test.ts │ │ ├── createSxResult.ts │ │ ├── flattenResponsive.test.ts │ │ ├── flattenResponsive.ts │ │ ├── isNil.ts │ │ ├── isNilOrEmpty.ts │ │ ├── mapWidthToScreen.test.ts │ │ ├── mapWidthToScreen.ts │ │ ├── muiBreakpoints.ts │ │ ├── pickNearestBreakpoint.test.ts │ │ ├── pickNearestBreakpoint.ts │ │ ├── toValidCssValue.ts │ │ └── types.ts ├── layout-core-v6 │ ├── Content.tsx │ ├── EdgeSidebar.tsx │ ├── EdgeSidebarContent.tsx │ ├── EdgeSidebarRight.tsx │ ├── EdgeTemporaryClose.tsx │ ├── Footer.tsx │ ├── Header.tsx │ ├── InsetAvoidingView.tsx │ ├── InsetSidebar.tsx │ ├── InsetSidebarContent.tsx │ ├── Root.tsx │ ├── SharedEdgeSidebar.tsx │ ├── index.ts │ ├── layoutClasses.ts │ └── zero-styled │ │ └── index.ts ├── layout-v5-app-analytics │ ├── LayoutV5AppAnalytics.stories.tsx │ ├── LayoutV5AppAnalytics.tsx │ ├── index.ts │ └── usage.mdx ├── layout-v5-app-messenger │ ├── LayoutV5AppMessenger.stories.tsx │ ├── LayoutV5AppMessenger.tsx │ ├── components │ │ ├── ChatBar.js │ │ ├── ChatDialog.js │ │ ├── ChatList.js │ │ ├── ChatListItem.js │ │ ├── ChatMsg.js │ │ ├── ChatSettings.js │ │ ├── ChatsHeader.js │ │ ├── ConversationHead.js │ │ ├── MessengerSearch.js │ │ └── index.js │ ├── index.ts │ └── usage.mdx ├── layout-v5-app-reactLegacy │ ├── LayoutV5AppReactLegacy.stories.tsx │ ├── LayoutV5AppReactLegacy.tsx │ ├── components │ │ ├── ReactContent.js │ │ ├── ReactHeader.js │ │ ├── ReactNextArticle.js │ │ └── index.js │ ├── index.ts │ └── usage.mdx ├── layout-v5-app-shoppingCart │ ├── LayoutV5AppShoppingCart.stories.tsx │ ├── LayoutV5AppShoppingCart.tsx │ ├── components │ │ ├── DailyCart.js │ │ ├── DailyCheckout.js │ │ ├── DailyHeader.js │ │ ├── DailyInteger.js │ │ ├── DailyLogo.js │ │ ├── DailySearch.js │ │ ├── DailySizeSelector.js │ │ ├── DailySummary.js │ │ ├── dailyShoppingTheme.js │ │ └── index.js │ ├── index.ts │ └── usage.mdx ├── layout-v5-example-controlEdgeSidebar │ ├── LayoutV5ExampleControlEdgeSidebar.stories.tsx │ ├── LayoutV5ExampleControlEdgeSidebar.tsx │ ├── index.ts │ └── usage.mdx ├── layout-v5-example-globalTheme │ ├── LayoutV5ExampleGlobalTheme.stories.tsx │ ├── LayoutV5ExampleGlobalTheme.tsx │ ├── index.ts │ └── usage.mdx ├── layout-v5-example-insetSidebarPosition │ ├── LayoutV5ExampleInsetSidebarPosition.stories.tsx │ ├── LayoutV5ExampleInsetSidebarPosition.tsx │ ├── index.ts │ └── usage.mdx ├── layout-v5-example-multipleHeaders │ ├── LayoutV5ExampleMultipleHeaders.stories.tsx │ ├── LayoutV5ExampleMultipleHeaders.tsx │ ├── index.ts │ └── usage.mdx ├── layout-v5-example-rightEdgeSidebar │ ├── LayoutV5ExampleRightEdgeSidebar.stories.tsx │ ├── LayoutV5ExampleRightEdgeSidebar.tsx │ ├── index.ts │ └── usage.mdx ├── layout-v5-example-rtl │ ├── LayoutV5ExampleRtl.stories.tsx │ ├── LayoutV5ExampleRtl.tsx │ ├── index.ts │ └── usage.mdx ├── layout-v5-preset-contentBased │ ├── LayoutV5PresetContentBased.stories.tsx │ ├── LayoutV5PresetContentBased.tsx │ ├── index.ts │ └── usage.mdx ├── layout-v5-preset-cozy │ ├── LayoutV5PresetCozy.stories.tsx │ ├── LayoutV5PresetCozy.tsx │ ├── index.ts │ └── usage.mdx ├── layout-v5-preset-fixed │ ├── LayoutV5PresetFixed.stories.tsx │ ├── LayoutV5PresetFixed.tsx │ ├── index.ts │ └── usage.mdx ├── layout-v5-preset-standard │ ├── LayoutV5PresetStandard.stories.tsx │ ├── LayoutV5PresetStandard.tsx │ ├── index.ts │ └── usage.mdx ├── layout-v6-app-analytics │ ├── LayoutV6AppAnalytics.stories.tsx │ ├── LayoutV6AppAnalytics.tsx │ ├── index.ts │ └── usage.mdx ├── layout-v6-app-claude │ ├── LayoutV6AppClaude.stories.tsx │ ├── LayoutV6AppClaude.tsx │ ├── index.ts │ └── usage.mdx ├── layout-v6-app-cloudflare │ ├── LayoutV6AppCloudflare.stories.tsx │ ├── LayoutV6AppCloudflare.tsx │ ├── index.ts │ └── usage.mdx ├── layout-v6-app-gmail │ ├── LayoutV6AppGmail.stories.tsx │ ├── LayoutV6AppGmail.tsx │ ├── index.ts │ └── usage.mdx ├── layout-v6-app-messenger │ ├── LayoutV6AppMessenger.stories.tsx │ ├── LayoutV6AppMessenger.tsx │ ├── index.ts │ └── usage.mdx ├── layout-v6-app-react-legacy │ ├── LayoutV6AppReactLegacy.stories.tsx │ ├── LayoutV6AppReactLegacy.tsx │ ├── index.ts │ └── usage.mdx ├── layout-v6-app-shopping-cart │ ├── LayoutV6AppShoppingCart.stories.tsx │ ├── LayoutV6AppShoppingCart.tsx │ ├── index.ts │ └── usage.mdx ├── layout-v6-preset-content-based │ ├── LayoutV6PresetContentBased.stories.tsx │ ├── LayoutV6PresetContentBased.tsx │ ├── index.ts │ └── usage.mdx ├── layout-v6-preset-cozy │ ├── LayoutV6PresetCozy.stories.tsx │ ├── LayoutV6PresetCozy.tsx │ ├── index.ts │ └── usage.mdx ├── layout-v6-preset-fixed │ ├── LayoutV6PresetFixed.stories.tsx │ ├── LayoutV6PresetFixed.tsx │ ├── index.ts │ └── usage.mdx ├── layout-v6-preset-standard │ ├── LayoutV6PresetStandard.stories.tsx │ ├── LayoutV6PresetStandard.tsx │ ├── index.ts │ └── usage.mdx ├── layout-v6-theme-dashboard-curve │ ├── LayoutV6ThemeDashboardCurve.stories.tsx │ ├── LayoutV6ThemeDashboardCurve.tsx │ ├── index.ts │ └── usage.mdx ├── layout-v6-theme-dashboard-inset │ ├── LayoutV6ThemeDashboardInset.stories.tsx │ ├── LayoutV6ThemeDashboardInset.tsx │ ├── index.ts │ └── usage.mdx ├── menu-download │ ├── MenuDownload.stories.tsx │ ├── MenuDownload.tsx │ ├── index.ts │ └── usage.mdx ├── mockup-dashboard │ ├── IconNav.tsx │ ├── LinkNav.tsx │ ├── MockupDashboard.stories.tsx │ ├── SideNavUserInfo.tsx │ ├── StatCard.tsx │ ├── TopUsersCard.tsx │ ├── UserActiveCard.tsx │ ├── index.ts │ └── usage.mdx ├── mockup-layout │ ├── ContentMockup.tsx │ ├── FooterMockup.tsx │ ├── HeaderMockup.tsx │ ├── MockupLayout.stories.tsx │ ├── NavSidebarMockup.tsx │ ├── index.ts │ └── usage.mdx ├── mockup-shape │ ├── Circle.tsx │ ├── MockupShape.stories.tsx │ ├── Pill.tsx │ ├── Square.tsx │ ├── index.ts │ └── usage.mdx ├── mockup-tabs │ ├── MockupTabs.stories.tsx │ ├── MockupTabs.tsx │ ├── index.ts │ └── usage.mdx ├── mockup-typography │ ├── MockupTypography.stories.tsx │ ├── MockupTypography.tsx │ ├── index.ts │ └── usage.mdx ├── mockup-utils │ └── index.ts ├── navigation-basic │ ├── NavItem.tsx │ ├── Navigation.test.tsx │ ├── Navigation.tsx │ ├── NavigationBasic.stories.tsx │ ├── index.ts │ ├── navigationClasses.ts │ └── usage.mdx ├── navigation-bulb │ ├── NavigationBulb.stories.tsx │ ├── NavigationBulb.styles.ts │ ├── NavigationBulb.tsx │ ├── index.ts │ └── usage.mdx ├── navigation-float │ ├── NavigationFloat.stories.tsx │ ├── NavigationFloat.styles.ts │ ├── NavigationFloat.tsx │ ├── index.ts │ └── usage.mdx ├── navigation-line │ ├── NavigationLine.stories.tsx │ ├── NavigationLine.styles.ts │ ├── NavigationLine.tsx │ ├── index.ts │ └── usage.mdx ├── navigation-plain │ ├── NavigationPlain.stories.tsx │ ├── NavigationPlain.styles.ts │ ├── NavigationPlain.tsx │ ├── index.ts │ └── usage.mdx ├── navigation-point │ ├── NavigationPoint.stories.tsx │ ├── NavigationPoint.styles.ts │ ├── NavigationPoint.tsx │ ├── index.ts │ └── usage.mdx ├── navigation-zoom │ ├── NavigationZoom.stories.tsx │ ├── NavigationZoom.styles.ts │ ├── NavigationZoom.tsx │ ├── index.ts │ └── usage.mdx ├── select-border │ ├── SelectBorder.stories.tsx │ ├── SelectBorder.tsx │ ├── index.ts │ └── usage.mdx ├── select-minimal │ ├── SelectMinimal.stories.tsx │ ├── SelectMinimal.tsx │ ├── index.ts │ └── usage.mdx ├── select-shadcn │ ├── SelectShadcn.stories.tsx │ ├── SelectShadcn.tsx │ ├── index.ts │ └── usage.mdx ├── switch-airbnb │ ├── SwitchAirbnb.stories.tsx │ ├── SwitchAirbnb.tsx │ ├── index.ts │ └── usage.mdx ├── switch-ios │ ├── SwitchIos.stories.tsx │ ├── SwitchIos.tsx │ ├── index.ts │ └── usage.mdx ├── switch-lovely │ ├── SwitchLovely.stories.tsx │ ├── SwitchLovely.tsx │ ├── index.ts │ └── usage.mdx ├── switch-text-track │ ├── SwitchTextTrack.stories.tsx │ ├── SwitchTextTrack.tsx │ ├── index.ts │ └── usage.mdx ├── tabs-apple │ ├── TabsApple.stories.tsx │ ├── TabsApple.tsx │ ├── index.ts │ └── usage.mdx ├── tabs-chrome │ ├── TabsChrome.stories.tsx │ ├── TabsChrome.tsx │ ├── index.ts │ └── usage.mdx ├── tabs-contained │ ├── TabsContained.stories.tsx │ ├── TabsContained.tsx │ ├── index.ts │ └── usage.mdx ├── tabs-elevated │ ├── TabsElevated.stories.tsx │ ├── TabsElevated.tsx │ ├── index.ts │ └── usage.mdx ├── tabs-firebase │ ├── TabsFirebase.stories.tsx │ ├── TabsFirebase.tsx │ ├── index.ts │ └── usage.mdx ├── tabs-inside-triangle │ ├── TabsInsideTriangle.stories.tsx │ ├── TabsInsideTriangle.tsx │ ├── index.ts │ └── usage.mdx ├── tabs-instagram │ ├── TabsInstagram.stories.tsx │ ├── TabsInstagram.tsx │ ├── index.ts │ └── usage.mdx ├── tabs-pill │ ├── TabsPill.stories.tsx │ ├── TabsPill.tsx │ ├── index.ts │ └── usage.mdx ├── tabs-plain │ ├── TabsPlain.stories.tsx │ ├── TabsPlain.tsx │ ├── index.ts │ └── usage.mdx ├── tabs-serrated │ ├── TabsSerrated.stories.tsx │ ├── TabsSerrated.tsx │ ├── index.ts │ └── usage.mdx ├── tabs-twitter │ ├── TabsTwitter.stories.tsx │ ├── TabsTwitter.tsx │ ├── index.ts │ └── usage.mdx ├── tailwind-preset │ └── material-ui-tailwind-preset.js ├── text-field-shadcn │ ├── TextFieldShadcn.stories.tsx │ ├── TextFieldShadcn.tsx │ ├── index.ts │ └── usage.mdx ├── text-field-shade │ ├── TextFieldShade.stories.tsx │ ├── TextFieldShade.tsx │ ├── index.ts │ └── usage.mdx ├── use-birthdate-input │ ├── index.ts │ ├── usage.mdx │ ├── useBirthdateInput.stories.tsx │ └── useBirthdateInput.ts ├── use-card-input │ ├── index.ts │ ├── usage.mdx │ ├── useCardInput.stories.tsx │ └── useCardInput.tsx ├── use-day-month-year-input │ ├── index.ts │ ├── usage.mdx │ ├── useDayMonthYearInput.stories.tsx │ └── useDayMonthYearInput.tsx ├── use-expiry-input │ ├── index.ts │ ├── usage.mdx │ ├── useExpiryInput.stories.tsx │ └── useExpiryInput.tsx ├── use-input-siblings │ ├── index.ts │ ├── types.ts │ ├── usage.mdx │ ├── useInput.ts │ ├── useInputSiblings.stories.tsx │ ├── useInputSiblings.test.tsx │ ├── useInputSiblings.ts │ └── useSeparatorInput.ts ├── use-number-input │ ├── index.ts │ ├── usage.mdx │ ├── useNumberInput.stories.tsx │ ├── useNumberInput.ts │ └── useSpinner.ts └── use-pin-input │ ├── index.ts │ ├── usage.mdx │ ├── usePinInput.stories.tsx │ ├── usePinInput.test.tsx │ └── usePinInput.ts ├── chromatic.config.json ├── docs ├── AvatarIntro.mdx ├── ButtonIntro.mdx ├── CardIntro.mdx ├── CheckboxIntro.mdx ├── Introduction.mdx ├── MenuIntro.mdx ├── SelectIntro.mdx ├── SwitchIntro.mdx ├── TabsIntro.mdx ├── TextFieldIntro.mdx ├── cli.mdx ├── how-to-use.mdx ├── layout-v5 │ ├── Installation.mdx │ ├── configuration │ │ ├── edgeSidebar-config.mdx │ │ ├── header-config.mdx │ │ ├── insetSidebar-config.mdx │ │ └── overall-config.mdx │ ├── core-concept.mdx │ ├── feature │ │ ├── auto-collapse.mdx │ │ ├── header-magnet.mdx │ │ ├── multiple-headers.mdx │ │ ├── persistent-behavior.mdx │ │ ├── right-to-left.mdx │ │ └── uncollapsed-on-hover.mdx │ ├── layout-intro.mdx │ ├── migration-v5.mdx │ ├── starter-templates.mdx │ └── tutorial │ │ ├── blog-layout.mdx │ │ └── dashboard-layout.mdx ├── layout-v6 │ ├── configuration │ │ ├── content-config.mdx │ │ ├── edgeSidebar-config.mdx │ │ ├── footer-config.mdx │ │ ├── header-config.mdx │ │ ├── insetSidebar-config.mdx │ │ └── root-config.mdx │ ├── design-principle.mdx │ ├── installation.mdx │ ├── layout-intro.mdx │ ├── quick-start.mdx │ └── tutorial │ │ ├── blog-layout.mdx │ │ └── dashboard-layout.mdx └── tailwind-css.mdx ├── jest-setup.ts ├── jest.config.ts ├── mui-theme-vars.ts ├── package.json ├── postcss.config.cjs ├── prettier.config.cjs ├── public └── mui-treasury-logo.png ├── scripts └── attach-block-deps.ts ├── src ├── index.ts ├── program.test.ts └── program.ts ├── starters ├── material-ui-nextjs-pages-router-ts │ ├── .gitignore │ ├── README.md │ ├── next.config.js │ ├── package.json │ ├── pages │ │ ├── _app.tsx │ │ ├── _document.tsx │ │ ├── about.tsx │ │ └── index.tsx │ ├── public │ │ └── favicon.ico │ ├── src │ │ ├── Copyright.tsx │ │ ├── Link.tsx │ │ ├── ProTip.tsx │ │ └── theme.ts │ └── tsconfig.json ├── material-ui-nextjs-pages-router │ ├── .gitignore │ ├── README.md │ ├── next.config.js │ ├── package.json │ ├── pages │ │ ├── _app.js │ │ ├── _document.js │ │ ├── about.js │ │ └── index.js │ ├── public │ │ └── favicon.ico │ └── src │ │ ├── Copyright.js │ │ ├── Link.js │ │ ├── ProTip.js │ │ └── theme.js ├── material-ui-nextjs-ts │ ├── .gitignore │ ├── README.md │ ├── next-env.d.ts │ ├── next.config.mjs │ ├── package.json │ ├── public │ │ └── .gitkeep │ ├── src │ │ ├── app │ │ │ ├── about │ │ │ │ └── page.tsx │ │ │ ├── favicon.ico │ │ │ ├── layout.tsx │ │ │ └── page.tsx │ │ ├── components │ │ │ ├── Copyright.tsx │ │ │ └── ProTip.tsx │ │ └── theme.ts │ └── tsconfig.json ├── material-ui-nextjs │ ├── README.md │ ├── jsconfig.json │ ├── next.config.mjs │ ├── package.json │ └── src │ │ ├── app │ │ ├── about │ │ │ └── page.js │ │ ├── favicon.ico │ │ ├── layout.js │ │ └── page.js │ │ ├── components │ │ ├── Copyright.js │ │ └── ProTip.js │ │ └── theme.js ├── material-ui-pigment-css-nextjs-ts │ ├── .gitignore │ ├── README.md │ ├── next-env.d.ts │ ├── next.config.mjs │ ├── package.json │ ├── public │ │ └── .gitkeep │ ├── src │ │ ├── app │ │ │ ├── favicon.ico │ │ │ ├── layout.tsx │ │ │ └── page.tsx │ │ └── material-ui-pigment-css.d.ts │ └── tsconfig.json ├── material-ui-pigment-css-vite-ts │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package.json │ ├── public │ │ └── vite.svg │ ├── src │ │ ├── App.tsx │ │ ├── main.tsx │ │ ├── material-ui-pigment-css.d.ts │ │ └── vite-env.d.ts │ ├── tsconfig.app.json │ ├── tsconfig.json │ ├── tsconfig.node.json │ └── vite.config.ts ├── material-ui-vite-ts │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package.json │ ├── public │ │ └── vite.svg │ ├── src │ │ ├── App.tsx │ │ ├── ProTip.tsx │ │ ├── main.tsx │ │ ├── theme.tsx │ │ └── vite-env.d.ts │ ├── tsconfig.json │ ├── tsconfig.node.json │ └── vite.config.ts ├── material-ui-vite │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package.json │ ├── public │ │ └── vite.svg │ ├── src │ │ ├── App.jsx │ │ ├── Copyright.jsx │ │ ├── ProTip.jsx │ │ ├── main.jsx │ │ └── theme.js │ └── vite.config.js ├── mui-treasury-layout-nextjs │ ├── .gitignore │ ├── README.md │ ├── next.config.mjs │ ├── package.json │ ├── public │ │ └── next.svg │ ├── src │ │ ├── app │ │ │ ├── MuiProvider.tsx │ │ │ ├── favicon.ico │ │ │ ├── layout.tsx │ │ │ └── page.tsx │ │ └── mui-treasury │ │ │ └── layout-core-v6 │ │ │ ├── Content.tsx │ │ │ ├── EdgeSidebar.tsx │ │ │ ├── EdgeSidebarContent.tsx │ │ │ ├── EdgeSidebarRight.tsx │ │ │ ├── EdgeTemporaryClose.tsx │ │ │ ├── Footer.tsx │ │ │ ├── Header.tsx │ │ │ ├── InsetAvoidingView.tsx │ │ │ ├── InsetSidebar.tsx │ │ │ ├── InsetSidebarContent.tsx │ │ │ ├── Root.tsx │ │ │ ├── SharedEdgeSidebar.tsx │ │ │ ├── index.ts │ │ │ ├── layoutClasses.ts │ │ │ └── zero-styled │ │ │ └── index.ts │ └── tsconfig.json ├── mui-treasury-layout-vite │ ├── .gitignore │ ├── README.md │ ├── eslint.config.js │ ├── index.html │ ├── package.json │ ├── public │ │ └── vite.svg │ ├── src │ │ ├── App.tsx │ │ ├── assets │ │ │ └── react.svg │ │ ├── main.tsx │ │ ├── mui-treasury │ │ │ └── layout-core-v6 │ │ │ │ ├── Content.tsx │ │ │ │ ├── EdgeSidebar.tsx │ │ │ │ ├── EdgeSidebarContent.tsx │ │ │ │ ├── EdgeSidebarRight.tsx │ │ │ │ ├── EdgeTemporaryClose.tsx │ │ │ │ ├── Footer.tsx │ │ │ │ ├── Header.tsx │ │ │ │ ├── InsetAvoidingView.tsx │ │ │ │ ├── InsetSidebar.tsx │ │ │ │ ├── InsetSidebarContent.tsx │ │ │ │ ├── Root.tsx │ │ │ │ ├── SharedEdgeSidebar.tsx │ │ │ │ ├── index.ts │ │ │ │ ├── layoutClasses.ts │ │ │ │ └── zero-styled │ │ │ │ └── index.ts │ │ └── vite-env.d.ts │ ├── tsconfig.app.json │ ├── tsconfig.json │ ├── tsconfig.node.json │ └── vite.config.ts └── mui-treasury-playground │ ├── .gitignore │ ├── README.md │ ├── eslint.config.js │ ├── index.html │ ├── package.json │ ├── public │ └── vite.svg │ ├── src │ ├── App.tsx │ ├── assets │ │ └── react.svg │ ├── main.tsx │ └── vite-env.d.ts │ ├── tsconfig.app.json │ ├── tsconfig.json │ ├── tsconfig.node.json │ └── vite.config.ts ├── tsconfig.js.json ├── tsconfig.json ├── tsup.config.ts └── yarn.lock /.babelrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "sourceType": "unambiguous", 3 | "presets": [ 4 | [ 5 | "@babel/preset-env", 6 | { 7 | "targets": { 8 | "chrome": 100 9 | } 10 | } 11 | ], 12 | "@babel/preset-typescript", 13 | "@babel/preset-react" 14 | ], 15 | "plugins": [] 16 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | *.log 2 | .DS_Store 3 | node_modules 4 | .cache 5 | dist 6 | 7 | # storybook build directory 8 | storybook-static 9 | 10 | # local test 11 | mui-treasury.config.js 12 | /mui-treasury 13 | /src/mui-treasury 14 | 15 | build-storybook.log 16 | chromatic.log 17 | chromatic-build-*.xml 18 | chromatic-diagnostics.json -------------------------------------------------------------------------------- /.hygen/.hygen.js: -------------------------------------------------------------------------------- 1 | const changeCase = require("change-case"); 2 | 3 | module.exports = { 4 | helpers: { 5 | toName: (s) => changeCase.pascal(s), 6 | toNameCamel: (s) => changeCase.camel(s), 7 | toFolder: (s) => changeCase.param(s), 8 | getFirstPascal: (s) => changeCase.pascal(s.split("-")[0]), 9 | getFirstTitle: (s) => changeCase.title(s.split("-")[0]), 10 | getSecondPascal: (s) => changeCase.pascal(s.split("-")[1]), 11 | getSecondTitle: (s) => changeCase.title(s.split("-")[1]), 12 | getThirdPascal: (s) => changeCase.pascal(s.split("-")[2]), 13 | getThirdTitle: (s) => changeCase.title(s.split("-")[2]), 14 | }, 15 | }; 16 | -------------------------------------------------------------------------------- /.hygen/_templates/block/hook/Component.ejs.t: -------------------------------------------------------------------------------- 1 | --- 2 | to: ../blocks/<%=name%>/src/<%= h.toNameCamel(name) %>.ts 3 | unless_exists: true 4 | --- 5 | import React from "react"; 6 | 7 | export type <%= h.toName(name) %>Options = {}; 8 | 9 | export function <%= h.toNameCamel(name) %>(options: <%= h.toName(name) %>Options) { 10 | const [state, setState] = React.useState(options); 11 | return state; 12 | } 13 | -------------------------------------------------------------------------------- /.hygen/_templates/block/hook/docs.ejs.t: -------------------------------------------------------------------------------- 1 | --- 2 | to: ../blocks/<%=name%>/usage.mdx 3 | unless_exists: true 4 | --- 5 | import { Meta, Source } from "@storybook/blocks"; 6 | import raw from "./src/<%=h.toNameCamel(name)%>?raw"; 7 | 8 | 9 | 10 | ## CLI 11 | 12 | ```sh 13 | npx mui-treasury@latest clone <%=name%> 14 | ``` 15 | 16 | ## <%=h.toName(name)%> 17 | 18 | 19 | -------------------------------------------------------------------------------- /.hygen/_templates/block/hook/index.ejs.t: -------------------------------------------------------------------------------- 1 | --- 2 | to: ../blocks/<%=name%>/src/index.ts 3 | unless_exists: true 4 | --- 5 | export * from "./<%=h.toNameCamel(name)%>"; 6 | -------------------------------------------------------------------------------- /.hygen/_templates/block/hook/prompt.js: -------------------------------------------------------------------------------- 1 | module.exports = [ 2 | { 3 | type: "input", 4 | name: "name", 5 | message: "Hook name? (kebab-case)", 6 | }, 7 | ]; 8 | -------------------------------------------------------------------------------- /.hygen/_templates/block/new/Component.ejs.t: -------------------------------------------------------------------------------- 1 | --- 2 | to: ../blocks/<%= h.toFolder(name) %>/<%= h.toName(name) %>.tsx 3 | unless_exists: true 4 | --- 5 | import React from "react"; 6 | import Box from "@mui/material/Box"; 7 | 8 | export function <%= h.toName(name) %>() { 9 | return ( 10 | It's working 11 | ); 12 | } 13 | -------------------------------------------------------------------------------- /.hygen/_templates/block/new/docs.ejs.t: -------------------------------------------------------------------------------- 1 | --- 2 | to: ../blocks/<%= h.toFolder(name) %>/usage.mdx 3 | unless_exists: true 4 | --- 5 | import { Meta, Source } from "@storybook/blocks"; 6 | import raw from "./<%=h.toName(name)%>?raw"; 7 | 8 | 9 | 10 | ## CLI 11 | 12 | ```sh 13 | npx mui-treasury@latest clone <%= h.toFolder(name) %> 14 | ``` 15 | 16 | ## <%=h.toName(name)%> 17 | 18 | 19 | -------------------------------------------------------------------------------- /.hygen/_templates/block/new/index.ejs.t: -------------------------------------------------------------------------------- 1 | --- 2 | to: ../blocks/<%= h.toFolder(name) %>/index.ts 3 | unless_exists: true 4 | --- 5 | export * from "./<%=h.toName(name)%>"; 6 | -------------------------------------------------------------------------------- /.hygen/_templates/block/new/prompt.js: -------------------------------------------------------------------------------- 1 | module.exports = [ 2 | { 3 | type: "input", 4 | name: "name", 5 | message: "Block name? (kebab-case)", 6 | }, 7 | ]; 8 | -------------------------------------------------------------------------------- /.hygen/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "type": "commonjs" 3 | } 4 | -------------------------------------------------------------------------------- /.storybook/decorators/googleFont.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export default function googleFont(fonts: string[] = []) { 4 | return (Story: any) => { 5 | return ( 6 | 7 | 8 | 13 | 17 | {fonts.map((font) => ( 18 | 23 | ))} 24 | 25 | 26 | ); 27 | }; 28 | } 29 | -------------------------------------------------------------------------------- /.storybook/manager.css: -------------------------------------------------------------------------------- 1 | [src="mui-treasury-logo.png"] { 2 | height: 32px; 3 | } 4 | .dark [src="mui-treasury-logo.png"] { 5 | filter: invert(1); 6 | } 7 | -------------------------------------------------------------------------------- /.storybook/preview-head.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 7 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "prettier.configPath": "prettier.config.cjs" 3 | } 4 | -------------------------------------------------------------------------------- /blocks/avatar-google/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./AvatarGoogle"; 2 | -------------------------------------------------------------------------------- /blocks/avatar-google/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./AvatarGoogle?raw"; 3 | 4 | 5 | 6 | ## CLI 7 | 8 | ```sh 9 | npx mui-treasury@latest clone avatar-google 10 | ``` 11 | 12 | ## AvatarGoogle 13 | 14 | 15 | -------------------------------------------------------------------------------- /blocks/avatar-gradient/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./AvatarGradient"; 2 | -------------------------------------------------------------------------------- /blocks/avatar-gradient/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./AvatarGradient?raw"; 3 | 4 | 5 | 6 | ## CLI 7 | 8 | ```sh 9 | npx mui-treasury@latest clone avatar-gradient 10 | ``` 11 | 12 | ## AvatarGradient 13 | 14 | 15 | -------------------------------------------------------------------------------- /blocks/avatar-grow/AvatarGrow.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import type { Meta, StoryObj } from "@storybook/react"; 3 | import googleFont from "../../.storybook/decorators/googleFont"; 4 | import storyDialog from "../../.storybook/decorators/storyDialog"; 5 | import { AvatarGrow } from "./index"; 6 | import Usage from "./usage.mdx"; 7 | 8 | const meta = { 9 | title: "Avatar/Grow", 10 | component: AvatarGrow, 11 | parameters: { 12 | layout: "centered", 13 | githubUsername: "siriwatknp", // (optional) Your github username. If provided, your avatar will be displayed in the story toolbar 14 | }, 15 | decorators: [storyDialog(Usage), googleFont([])], 16 | } satisfies Meta; 17 | 18 | export default meta; 19 | type Story = StoryObj; 20 | 21 | export const Grow: Story = { 22 | render: () => , 23 | }; 24 | -------------------------------------------------------------------------------- /blocks/avatar-grow/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./AvatarGrow"; 2 | -------------------------------------------------------------------------------- /blocks/avatar-grow/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./AvatarGrow?raw"; 3 | 4 | 5 | 6 | ## CLI 7 | 8 | ```sh 9 | npx mui-treasury@latest clone avatar-grow 10 | ``` 11 | 12 | ## AvatarGrow 13 | 14 | 15 | -------------------------------------------------------------------------------- /blocks/button-github/ButtonGithub.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import type { Meta, StoryObj } from "@storybook/react"; 3 | import googleFont from "../../.storybook/decorators/googleFont"; 4 | import storyDialog from "../../.storybook/decorators/storyDialog"; 5 | import Usage from "./usage.mdx"; 6 | import { ButtonGithub } from "./index"; 7 | 8 | const meta = { 9 | title: "Button/Github", 10 | component: ButtonGithub, 11 | parameters: { 12 | layout: "centered", 13 | githubUsername: "siriwatknp", // (optional) Your github username. If provided, your avatar will be displayed in the story toolbar 14 | }, 15 | decorators: [storyDialog(Usage), googleFont([])], 16 | } satisfies Meta; 17 | 18 | export default meta; 19 | type Story = StoryObj; 20 | 21 | export const Github: Story = { 22 | render: () => , 23 | }; 24 | 25 | 26 | -------------------------------------------------------------------------------- /blocks/button-github/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./ButtonGithub"; 2 | -------------------------------------------------------------------------------- /blocks/button-github/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./ButtonGithub?raw"; 3 | 4 | 5 | 6 | ## CLI 7 | 8 | ```sh 9 | npx mui-treasury@latest clone button-github 10 | ``` 11 | 12 | ## ButtonGithub 13 | 14 | 15 | -------------------------------------------------------------------------------- /blocks/button-graphic/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./ButtonGraphic"; 2 | -------------------------------------------------------------------------------- /blocks/button-graphic/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./ButtonGraphic?raw"; 3 | 4 | 5 | 6 | ## CLI 7 | 8 | ```sh 9 | npx mui-treasury@latest clone button-graphic 10 | ``` 11 | 12 | ## ButtonGraphic 13 | 14 | 15 | -------------------------------------------------------------------------------- /blocks/card-blog/CardBlog.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import type { Meta, StoryObj } from "@storybook/react"; 3 | import googleFont from "../../.storybook/decorators/googleFont"; 4 | import storyDialog from "../../.storybook/decorators/storyDialog"; 5 | import { CardBlog } from "./index"; 6 | import Usage from "./usage.mdx"; 7 | 8 | const meta = { 9 | title: "Card/Blog", 10 | component: CardBlog, 11 | parameters: { 12 | layout: "centered", 13 | githubUsername: "siriwatknp", // (optional) Your github username. If provided, your avatar will be displayed in the story toolbar 14 | }, 15 | decorators: [storyDialog(Usage), googleFont([])], 16 | } satisfies Meta; 17 | 18 | export default meta; 19 | type Story = StoryObj; 20 | 21 | export const Blog: Story = { 22 | render: () => , 23 | }; 24 | -------------------------------------------------------------------------------- /blocks/card-blog/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./CardBlog"; 2 | -------------------------------------------------------------------------------- /blocks/card-blog/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./CardBlog?raw"; 3 | 4 | 5 | 6 | ## CLI 7 | 8 | ```sh 9 | npx mui-treasury@latest clone card-blog 10 | ``` 11 | 12 | ## CardBlog 13 | 14 | 15 | -------------------------------------------------------------------------------- /blocks/card-engagement/index.ts: -------------------------------------------------------------------------------- 1 | "use client"; 2 | export * from "./CardEngagement"; 3 | -------------------------------------------------------------------------------- /blocks/card-engagement/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./CardEngagement?raw"; 3 | 4 | 5 | 6 | ## CLI 7 | 8 | ```sh 9 | npx mui-treasury@latest clone card-engagement info-basic 10 | ``` 11 | 12 | ## CardEngagement 13 | 14 | 15 | -------------------------------------------------------------------------------- /blocks/card-galaxy/index.ts: -------------------------------------------------------------------------------- 1 | "use client"; 2 | export * from "./CardGalaxy"; 3 | -------------------------------------------------------------------------------- /blocks/card-galaxy/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./CardGalaxy?raw"; 3 | 4 | 5 | 6 | ## CLI 7 | 8 | ```sh 9 | npx mui-treasury@latest clone card-galaxy info-basic 10 | ``` 11 | 12 | ## CardGalaxy 13 | 14 | 15 | -------------------------------------------------------------------------------- /blocks/card-highlight/index.ts: -------------------------------------------------------------------------------- 1 | "use client"; 2 | export * from "./CardHighlight"; 3 | -------------------------------------------------------------------------------- /blocks/card-highlight/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./CardHighlight?raw"; 3 | 4 | 5 | 6 | ## Dependencies 7 | 8 | - [Qix-/Color](https://github.com/Qix-/color) 9 | 10 | ```sh 11 | yarn add color @types/color 12 | ``` 13 | 14 | ## CLI 15 | 16 | ```sh 17 | npx mui-treasury@latest clone card-highlight 18 | ``` 19 | 20 | ## CardHighlight 21 | 22 | 23 | -------------------------------------------------------------------------------- /blocks/card-kanban/CardKanban.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import type { Meta, StoryObj } from "@storybook/react"; 3 | import googleFont from "../../.storybook/decorators/googleFont"; 4 | import storyDialog from "../../.storybook/decorators/storyDialog"; 5 | import Usage from "./usage.mdx"; 6 | import { CardKanban } from "./index"; 7 | 8 | const meta = { 9 | title: "Card/Kanban", 10 | component: CardKanban, 11 | parameters: { 12 | layout: "centered", 13 | githubUsername: "siriwatknp", // (optional) Your github username. If provided, your avatar will be displayed in the story toolbar 14 | }, 15 | decorators: [storyDialog(Usage), googleFont([])], 16 | } satisfies Meta; 17 | 18 | export default meta; 19 | type Story = StoryObj; 20 | 21 | export const Kanban: Story = { 22 | render: () => , 23 | }; 24 | 25 | 26 | -------------------------------------------------------------------------------- /blocks/card-kanban/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./CardKanban"; 2 | -------------------------------------------------------------------------------- /blocks/card-kanban/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./CardKanban?raw"; 3 | 4 | 5 | 6 | ## CLI 7 | 8 | ```sh 9 | npx mui-treasury@latest clone card-kanban 10 | ``` 11 | 12 | ## CardKanban 13 | 14 | 15 | -------------------------------------------------------------------------------- /blocks/card-music/index.ts: -------------------------------------------------------------------------------- 1 | "use client"; 2 | export * from "./CardMusic"; 3 | -------------------------------------------------------------------------------- /blocks/card-music/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./CardMusic?raw"; 3 | 4 | 5 | 6 | ## CLI 7 | 8 | ```sh 9 | npx mui-treasury@latest clone card-music info-basic info-n04 10 | ``` 11 | 12 | ## CardMusic 13 | 14 | 15 | -------------------------------------------------------------------------------- /blocks/card-news/CardNews.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import type { Meta, StoryObj } from "@storybook/react"; 3 | import googleFont from "../../.storybook/decorators/googleFont"; 4 | import storyDialog from "../../.storybook/decorators/storyDialog"; 5 | import Usage from "./usage.mdx"; 6 | import { CardNews } from "./index"; 7 | 8 | const meta = { 9 | title: "Card/News", 10 | component: CardNews, 11 | parameters: { 12 | layout: "centered", 13 | githubUsername: "siriwatknp", // (optional) Your github username. If provided, your avatar will be displayed in the story toolbar 14 | }, 15 | decorators: [storyDialog(Usage), googleFont([])], 16 | } satisfies Meta; 17 | 18 | export default meta; 19 | type Story = StoryObj; 20 | 21 | export const News: Story = { 22 | render: () => , 23 | }; 24 | 25 | 26 | -------------------------------------------------------------------------------- /blocks/card-news/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./CardNews"; 2 | -------------------------------------------------------------------------------- /blocks/card-news/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./CardNews?raw"; 3 | 4 | 5 | 6 | ## CLI 7 | 8 | ```sh 9 | npx mui-treasury@latest clone card-news 10 | ``` 11 | 12 | ## CardNews 13 | 14 | 15 | -------------------------------------------------------------------------------- /blocks/card-news2/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./CardNews2"; 2 | -------------------------------------------------------------------------------- /blocks/card-news2/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./CardNews2?raw"; 3 | 4 | 5 | 6 | ## CLI 7 | 8 | ```sh 9 | npx mui-treasury@latest clone card-news2 10 | ``` 11 | 12 | ## Font 13 | 14 | ```jsx 15 | 16 | 17 | 21 | ``` 22 | 23 | ## CardNews2 24 | 25 | 26 | -------------------------------------------------------------------------------- /blocks/card-news3/index.ts: -------------------------------------------------------------------------------- 1 | "use client"; 2 | export * from "./CardNews3"; 3 | -------------------------------------------------------------------------------- /blocks/card-news3/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./CardNews3?raw"; 3 | 4 | 5 | 6 | ## CLI 7 | 8 | ```sh 9 | npx mui-treasury@latest clone card-news3 info-basic 10 | ``` 11 | 12 | ## Font 13 | 14 | ```jsx 15 | 16 | 17 | 21 | ``` 22 | 23 | ## CardNews3 24 | 25 | 26 | -------------------------------------------------------------------------------- /blocks/card-offer/CardOffer.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import type { Meta, StoryObj } from "@storybook/react"; 3 | import googleFont from "../../.storybook/decorators/googleFont"; 4 | import storyDialog from "../../.storybook/decorators/storyDialog"; 5 | import { CardOffer } from "./index"; 6 | import Usage from "./usage.mdx"; 7 | 8 | const meta = { 9 | title: "Card/Offer", 10 | component: CardOffer, 11 | parameters: { 12 | layout: "centered", 13 | githubUsername: "siriwatknp", // (optional) Your github username. If provided, your avatar will be displayed in the story toolbar 14 | modules: ["info-basic"], 15 | }, 16 | decorators: [storyDialog(Usage), googleFont([])], 17 | } satisfies Meta; 18 | 19 | export default meta; 20 | type Story = StoryObj; 21 | 22 | export const Offer: Story = { 23 | render: () => , 24 | }; 25 | -------------------------------------------------------------------------------- /blocks/card-offer/index.ts: -------------------------------------------------------------------------------- 1 | "use client"; 2 | export * from "./CardOffer"; 3 | -------------------------------------------------------------------------------- /blocks/card-offer/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./CardOffer?raw"; 3 | 4 | 5 | 6 | ## CLI 7 | 8 | ```sh 9 | npx mui-treasury@latest clone card-offer info-basic 10 | ``` 11 | 12 | ## CardOffer 13 | 14 | 15 | -------------------------------------------------------------------------------- /blocks/card-post/CardPost.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import type { Meta, StoryObj } from "@storybook/react"; 3 | import googleFont from "../../.storybook/decorators/googleFont"; 4 | import storyDialog from "../../.storybook/decorators/storyDialog"; 5 | import Usage from "./usage.mdx"; 6 | import { CardPost } from "./index"; 7 | 8 | const meta = { 9 | title: "Card/Post", 10 | component: CardPost, 11 | parameters: { 12 | layout: "centered", 13 | githubUsername: "siriwatknp", // (optional) Your github username. If provided, your avatar will be displayed in the story toolbar 14 | }, 15 | decorators: [storyDialog(Usage), googleFont([])], 16 | } satisfies Meta; 17 | 18 | export default meta; 19 | type Story = StoryObj; 20 | 21 | export const Post: Story = { 22 | render: () => , 23 | }; 24 | 25 | 26 | -------------------------------------------------------------------------------- /blocks/card-post/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./CardPost"; 2 | -------------------------------------------------------------------------------- /blocks/card-post/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./CardPost?raw"; 3 | 4 | 5 | 6 | ## CLI 7 | 8 | ```sh 9 | npx mui-treasury@latest clone card-post 10 | ``` 11 | 12 | ## CardPost 13 | 14 | 15 | -------------------------------------------------------------------------------- /blocks/card-profile/CardProfile.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import type { Meta, StoryObj } from "@storybook/react"; 3 | import googleFont from "../../.storybook/decorators/googleFont"; 4 | import storyDialog from "../../.storybook/decorators/storyDialog"; 5 | import Usage from "./usage.mdx"; 6 | import { CardProfile } from "./index"; 7 | 8 | const meta = { 9 | title: "Card/Profile", 10 | component: CardProfile, 11 | parameters: { 12 | layout: "centered", 13 | githubUsername: "siriwatknp", // (optional) Your github username. If provided, your avatar will be displayed in the story toolbar 14 | }, 15 | decorators: [storyDialog(Usage), googleFont([])], 16 | } satisfies Meta; 17 | 18 | export default meta; 19 | type Story = StoryObj; 20 | 21 | export const Profile: Story = { 22 | render: () => , 23 | }; 24 | 25 | 26 | -------------------------------------------------------------------------------- /blocks/card-profile/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./CardProfile"; 2 | -------------------------------------------------------------------------------- /blocks/card-profile/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./CardProfile?raw"; 3 | 4 | 5 | 6 | ## CLI 7 | 8 | ```sh 9 | npx mui-treasury@latest clone card-profile 10 | ``` 11 | 12 | ## CardProfile 13 | 14 | 15 | -------------------------------------------------------------------------------- /blocks/card-project/CardProject.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import type { Meta, StoryObj } from "@storybook/react"; 3 | import googleFont from "../../.storybook/decorators/googleFont"; 4 | import storyDialog from "../../.storybook/decorators/storyDialog"; 5 | import Usage from "./usage.mdx"; 6 | import { CardProject } from "./index"; 7 | 8 | const meta = { 9 | title: "Card/Project", 10 | component: CardProject, 11 | parameters: { 12 | layout: "centered", 13 | githubUsername: "siriwatknp", // (optional) Your github username. If provided, your avatar will be displayed in the story toolbar 14 | }, 15 | decorators: [storyDialog(Usage), googleFont([])], 16 | } satisfies Meta; 17 | 18 | export default meta; 19 | type Story = StoryObj; 20 | 21 | export const Project: Story = { 22 | render: () => , 23 | }; 24 | 25 | 26 | -------------------------------------------------------------------------------- /blocks/card-project/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./CardProject"; 2 | -------------------------------------------------------------------------------- /blocks/card-project/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./CardProject?raw"; 3 | 4 | 5 | 6 | ## CLI 7 | 8 | ```sh 9 | npx mui-treasury@latest clone card-project 10 | ``` 11 | 12 | ## CardProject 13 | 14 | 15 | -------------------------------------------------------------------------------- /blocks/card-review/CardReview.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import type { Meta, StoryObj } from "@storybook/react"; 3 | import googleFont from "../../.storybook/decorators/googleFont"; 4 | import storyDialog from "../../.storybook/decorators/storyDialog"; 5 | import Usage from "./usage.mdx"; 6 | import { CardReview } from "./index"; 7 | 8 | const meta = { 9 | title: "Card/Review", 10 | component: CardReview, 11 | parameters: { 12 | layout: "centered", 13 | githubUsername: "siriwatknp", // (optional) Your github username. If provided, your avatar will be displayed in the story toolbar 14 | }, 15 | decorators: [storyDialog(Usage), googleFont([])], 16 | } satisfies Meta; 17 | 18 | export default meta; 19 | type Story = StoryObj; 20 | 21 | export const Review: Story = { 22 | render: () => , 23 | }; 24 | 25 | 26 | -------------------------------------------------------------------------------- /blocks/card-review/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./CardReview"; 2 | -------------------------------------------------------------------------------- /blocks/card-review/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./CardReview?raw"; 3 | 4 | 5 | 6 | ## CLI 7 | 8 | ```sh 9 | npx mui-treasury@latest clone card-review 10 | ``` 11 | 12 | ## CardReview 13 | 14 | 15 | -------------------------------------------------------------------------------- /blocks/card-review2/CardReview2.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import type { Meta, StoryObj } from "@storybook/react"; 3 | import googleFont from "../../.storybook/decorators/googleFont"; 4 | import storyDialog from "../../.storybook/decorators/storyDialog"; 5 | import Usage from "./usage.mdx"; 6 | import { CardReview2 } from "./index"; 7 | 8 | const meta = { 9 | title: "Card/Review2", 10 | component: CardReview2, 11 | parameters: { 12 | layout: "centered", 13 | githubUsername: "siriwatknp", // (optional) Your github username. If provided, your avatar will be displayed in the story toolbar 14 | }, 15 | decorators: [storyDialog(Usage), googleFont([])], 16 | } satisfies Meta; 17 | 18 | export default meta; 19 | type Story = StoryObj; 20 | 21 | export const Review2: Story = { 22 | render: () => , 23 | }; 24 | 25 | 26 | -------------------------------------------------------------------------------- /blocks/card-review2/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./CardReview2"; 2 | -------------------------------------------------------------------------------- /blocks/card-review2/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./CardReview2?raw"; 3 | 4 | 5 | 6 | ## CLI 7 | 8 | ```sh 9 | npx mui-treasury@latest clone card-review2 10 | ``` 11 | 12 | ## CardReview2 13 | 14 | 15 | -------------------------------------------------------------------------------- /blocks/card-reward/CardReward.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import type { Meta, StoryObj } from "@storybook/react"; 3 | import googleFont from "../../.storybook/decorators/googleFont"; 4 | import storyDialog from "../../.storybook/decorators/storyDialog"; 5 | import { CardReward } from "./index"; 6 | import Usage from "./usage.mdx"; 7 | 8 | const meta = { 9 | title: "Card/Reward", 10 | component: CardReward, 11 | parameters: { 12 | layout: "centered", 13 | githubUsername: "siriwatknp", // (optional) Your github username. If provided, your avatar will be displayed in the story toolbar 14 | }, 15 | decorators: [storyDialog(Usage), googleFont([])], 16 | } satisfies Meta; 17 | 18 | export default meta; 19 | type Story = StoryObj; 20 | 21 | export const Reward: Story = { 22 | render: () => , 23 | }; 24 | -------------------------------------------------------------------------------- /blocks/card-reward/index.ts: -------------------------------------------------------------------------------- 1 | "use client"; 2 | export * from "./CardReward"; 3 | -------------------------------------------------------------------------------- /blocks/card-reward/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./CardReward?raw"; 3 | 4 | 5 | 6 | ## CLI 7 | 8 | ```sh 9 | npx mui-treasury@latest clone card-reward 10 | ``` 11 | 12 | ## CardReward 13 | 14 | 15 | -------------------------------------------------------------------------------- /blocks/card-social/index.ts: -------------------------------------------------------------------------------- 1 | "use client"; 2 | export * from "./CardSocial"; 3 | -------------------------------------------------------------------------------- /blocks/card-social/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./CardSocial?raw"; 3 | 4 | 5 | 6 | ## CLI 7 | 8 | ```sh 9 | npx mui-treasury@latest clone card-social 10 | ``` 11 | 12 | ## CardSocial 13 | 14 | 15 | -------------------------------------------------------------------------------- /blocks/card-solid-game/index.ts: -------------------------------------------------------------------------------- 1 | "use client"; 2 | export * from "./CardSolidGame"; 3 | -------------------------------------------------------------------------------- /blocks/card-solid-game/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./CardSolidGame?raw"; 3 | 4 | 5 | 6 | ## Dependencies 7 | 8 | - [Qix-/Color](https://github.com/Qix-/color) 9 | 10 | ```sh 11 | yarn add color @types/color 12 | ``` 13 | 14 | ## CLI 15 | 16 | ```sh 17 | npx mui-treasury@latest clone card-solid-game 18 | ``` 19 | 20 | ## CardSolidGame 21 | 22 | 23 | -------------------------------------------------------------------------------- /blocks/card-sysi/CardSysi.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import type { Meta, StoryObj } from "@storybook/react"; 3 | import googleFont from "../../.storybook/decorators/googleFont"; 4 | import storyDialog from "../../.storybook/decorators/storyDialog"; 5 | import { CardSysi } from "./index"; 6 | import Usage from "./usage.mdx"; 7 | 8 | const meta = { 9 | title: "Card/Sysi", 10 | component: CardSysi, 11 | parameters: { 12 | layout: "centered", 13 | githubUsername: "siriwatknp", // (optional) Your github username. If provided, your avatar will be displayed in the story toolbar 14 | }, 15 | decorators: [storyDialog(Usage), googleFont([])], 16 | } satisfies Meta; 17 | 18 | export default meta; 19 | type Story = StoryObj; 20 | 21 | export const Sysi: Story = { 22 | render: () => , 23 | }; 24 | -------------------------------------------------------------------------------- /blocks/card-sysi/index.ts: -------------------------------------------------------------------------------- 1 | "use client"; 2 | export * from "./CardSysi"; 3 | -------------------------------------------------------------------------------- /blocks/card-sysi/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./CardSysi?raw"; 3 | 4 | 5 | 6 | ## CLI 7 | 8 | ```sh 9 | npx mui-treasury@latest clone card-sysi 10 | ``` 11 | 12 | ## CardSysi 13 | 14 | 15 | -------------------------------------------------------------------------------- /blocks/card-tag/index.ts: -------------------------------------------------------------------------------- 1 | "use client"; 2 | export * from "./CardTag"; 3 | -------------------------------------------------------------------------------- /blocks/card-tag/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./CardTag?raw"; 3 | 4 | 5 | 6 | ## Dependencies 7 | 8 | - [MUI icons](https://mui.com/material-ui/material-icons/) 9 | 10 | ```sh 11 | yarn add @mui/icons-material 12 | ``` 13 | 14 | ## CLI 15 | 16 | ```sh 17 | npx mui-treasury@latest clone card-tag 18 | ``` 19 | 20 | ## CardTag 21 | 22 | 23 | -------------------------------------------------------------------------------- /blocks/card-team/index.ts: -------------------------------------------------------------------------------- 1 | "use client"; 2 | export * from "./CardTeam"; 3 | -------------------------------------------------------------------------------- /blocks/card-team/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./CardTeam?raw"; 3 | 4 | 5 | 6 | ## CLI 7 | 8 | ```sh 9 | npx mui-treasury@latest clone card-team info-basic info-apex 10 | ``` 11 | 12 | ## Font 13 | 14 | ```jsx 15 | 16 | 17 | 21 | ``` 22 | 23 | ## CardTeam 24 | 25 | 26 | -------------------------------------------------------------------------------- /blocks/card-tutor/index.ts: -------------------------------------------------------------------------------- 1 | "use client"; 2 | export * from "./CardTutor"; 3 | -------------------------------------------------------------------------------- /blocks/card-tutor/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./CardTutor?raw"; 3 | 4 | 5 | 6 | ## CLI 7 | 8 | ```sh 9 | npx mui-treasury@latest clone card-tutor 10 | ``` 11 | 12 | ## CardTutor 13 | 14 | 15 | -------------------------------------------------------------------------------- /blocks/checkbox-banner/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./CheckboxBanner"; 2 | -------------------------------------------------------------------------------- /blocks/checkbox-banner/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./CheckboxBanner?raw"; 3 | 4 | 5 | 6 | ## CLI 7 | 8 | ```sh 9 | npx mui-treasury@latest clone checkbox-banner 10 | ``` 11 | 12 | ## CheckboxBanner 13 | 14 | 15 | -------------------------------------------------------------------------------- /blocks/checkbox-neon/CheckboxNeon.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import type { Meta, StoryObj } from "@storybook/react"; 3 | import googleFont from "../../.storybook/decorators/googleFont"; 4 | import storyDialog from "../../.storybook/decorators/storyDialog"; 5 | import Usage from "./usage.mdx"; 6 | import { CheckboxNeon } from "./index"; 7 | 8 | const meta = { 9 | title: "Checkbox/Neon", 10 | component: CheckboxNeon, 11 | parameters: { 12 | layout: "centered", 13 | githubUsername: "siriwatknp", // (optional) Your github username. If provided, your avatar will be displayed in the story toolbar 14 | }, 15 | decorators: [storyDialog(Usage), googleFont([])], 16 | } satisfies Meta; 17 | 18 | export default meta; 19 | type Story = StoryObj; 20 | 21 | export const Neon: Story = { 22 | render: () => , 23 | }; 24 | 25 | 26 | -------------------------------------------------------------------------------- /blocks/checkbox-neon/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./CheckboxNeon"; 2 | -------------------------------------------------------------------------------- /blocks/checkbox-neon/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./CheckboxNeon?raw"; 3 | 4 | 5 | 6 | ## CLI 7 | 8 | ```sh 9 | npx mui-treasury@latest clone checkbox-neon 10 | ``` 11 | 12 | ## CheckboxNeon 13 | 14 | 15 | -------------------------------------------------------------------------------- /blocks/color-scheme-select-basic/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./ColorSchemeSelectBasic"; 2 | -------------------------------------------------------------------------------- /blocks/color-scheme-select-basic/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./ColorSchemeSelectBasic?raw"; 3 | 4 | 5 | 6 | ## CLI 7 | 8 | ```sh 9 | npx mui-treasury@latest clone color-scheme-select-basic 10 | ``` 11 | 12 | ## ColorSchemeSelectBasic 13 | 14 | 15 | -------------------------------------------------------------------------------- /blocks/color-scheme-select-icon/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./ColorSchemeSelectIcon"; 2 | -------------------------------------------------------------------------------- /blocks/color-scheme-select-icon/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./ColorSchemeSelectIcon?raw"; 3 | 4 | 5 | 6 | ## CLI 7 | 8 | ```sh 9 | npx mui-treasury@latest clone color-scheme-select-icon 10 | ``` 11 | 12 | ## ColorSchemeSelectIcon 13 | 14 | 15 | -------------------------------------------------------------------------------- /blocks/color-scheme-select-minimal/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./ColorSchemeSelectMinimal"; 2 | -------------------------------------------------------------------------------- /blocks/color-scheme-select-minimal/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./ColorSchemeSelectMinimal?raw"; 3 | 4 | 5 | 6 | ## CLI 7 | 8 | ```sh 9 | npx mui-treasury@latest clone color-scheme-select-minimal 10 | ``` 11 | 12 | ## ColorSchemeSelectMinimal 13 | 14 | 15 | -------------------------------------------------------------------------------- /blocks/color-scheme-tabs-basic/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./ColorSchemeTabsBasic"; 2 | -------------------------------------------------------------------------------- /blocks/color-scheme-tabs-basic/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./ColorSchemeTabsBasic?raw"; 3 | 4 | 5 | 6 | ## CLI 7 | 8 | ```sh 9 | npx mui-treasury@latest clone color-scheme-tabs-basic 10 | ``` 11 | 12 | ## ColorSchemeTabsBasic 13 | 14 | 15 | -------------------------------------------------------------------------------- /blocks/field-birthdate-basic/FieldBirthdateBasic.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import type { TextFieldProps } from "@mui/material/TextField"; 3 | import type { UseBirthdateInputOptions } from "../use-birthdate-input"; 4 | import TextField from "@mui/material/TextField"; 5 | import { useBirthdateInput } from "../use-birthdate-input"; 6 | 7 | export function FieldBirthdateBasic( 8 | props: TextFieldProps & UseBirthdateInputOptions 9 | ) { 10 | const { getInputProps } = useBirthdateInput(props); 11 | return ( 12 | 16 | ); 17 | } 18 | -------------------------------------------------------------------------------- /blocks/field-birthdate-basic/index.ts: -------------------------------------------------------------------------------- 1 | "use client"; 2 | export * from "./FieldBirthdateBasic"; 3 | -------------------------------------------------------------------------------- /blocks/field-birthdate-basic/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./FieldBirthdateBasic?raw"; 3 | 4 | 5 | 6 | ## CLI 7 | 8 | ```sh 9 | npx mui-treasury@latest clone field-birthdate-basic use-birthdate-input use-input-siblings 10 | ``` 11 | 12 | ## FieldBirthdateBasic 13 | 14 | 15 | -------------------------------------------------------------------------------- /blocks/field-combo-basic/index.ts: -------------------------------------------------------------------------------- 1 | "use client"; 2 | export * from "./FieldComboBasic"; 3 | export * from "./ComboBoxCompounds"; 4 | -------------------------------------------------------------------------------- /blocks/field-combo-basic/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./FieldComboBasic?raw"; 3 | 4 | 5 | 6 | ## CLI 7 | 8 | ```sh 9 | npx mui-treasury@latest clone field-combo-basic 10 | ``` 11 | 12 | ## FieldComboBasic 13 | 14 | 15 | -------------------------------------------------------------------------------- /blocks/field-credit-card-basic/index.ts: -------------------------------------------------------------------------------- 1 | "use client"; 2 | export * from "./FieldCreditCardBasic"; 3 | -------------------------------------------------------------------------------- /blocks/field-credit-card-basic/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./FieldCreditCardBasic?raw"; 3 | 4 | 5 | 6 | ## CLI 7 | 8 | ```sh 9 | npx mui-treasury@latest clone field-credit-card-basic use-card-input use-expiry-input use-input-siblings 10 | ``` 11 | 12 | ## FieldCreditcardBasic 13 | 14 | 15 | -------------------------------------------------------------------------------- /blocks/field-day-month-year-basic/index.ts: -------------------------------------------------------------------------------- 1 | "use client"; 2 | export * from "./FieldDayMonthYearBasic"; 3 | -------------------------------------------------------------------------------- /blocks/field-day-month-year-basic/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./FieldDayMonthYearBasic?raw"; 3 | 4 | 5 | 6 | ## CLI 7 | 8 | ```sh 9 | npx mui-treasury@latest clone field-day-month-year-basic use-day-month-year-input use-input-siblings 10 | ``` 11 | 12 | ## FieldDayMonthYearBasic 13 | 14 | 15 | -------------------------------------------------------------------------------- /blocks/field-number-input/index.ts: -------------------------------------------------------------------------------- 1 | "use client"; 2 | export * from "./FieldNumberInput"; 3 | -------------------------------------------------------------------------------- /blocks/field-number-input/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./FieldNumberInput?raw"; 3 | 4 | 5 | 6 | ## CLI 7 | 8 | ```sh 9 | npx mui-treasury@latest clone field-number-input use-number-input 10 | ``` 11 | 12 | ## FieldNumberInput 13 | 14 | 15 | -------------------------------------------------------------------------------- /blocks/field-number-spinner/index.ts: -------------------------------------------------------------------------------- 1 | "use client"; 2 | export * from "./FieldNumberSpinner"; 3 | -------------------------------------------------------------------------------- /blocks/field-number-spinner/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./FieldNumberSpinner?raw"; 3 | 4 | 5 | 6 | ## CLI 7 | 8 | ```sh 9 | npx mui-treasury@latest clone field-number-spinner use-number-input 10 | ``` 11 | 12 | ## FieldNumberSpinner 13 | 14 | 15 | -------------------------------------------------------------------------------- /blocks/field-pin-input/index.ts: -------------------------------------------------------------------------------- 1 | "use client"; 2 | export * from "./FieldPinInput"; 3 | -------------------------------------------------------------------------------- /blocks/field-pin-input/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./FieldPinInput?raw"; 3 | 4 | 5 | 6 | ## CLI 7 | 8 | ```sh 9 | npx mui-treasury@latest clone field-pin-input use-pin-input use-input-siblings 10 | ``` 11 | 12 | ## FieldPinInput 13 | 14 | 15 | -------------------------------------------------------------------------------- /blocks/info-apex/InfoApex.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Info, InfoSubtitle, InfoTitle } from "../info-basic"; 3 | import { getInfoApexStyles } from "./InfoApex.styles"; 4 | 5 | export function InfoApex() { 6 | return ( 7 | 8 | APEX Legends: Assemble! 9 | Created by siriwatknp 10 | 11 | ); 12 | } 13 | -------------------------------------------------------------------------------- /blocks/info-apex/index.ts: -------------------------------------------------------------------------------- 1 | "use client"; 2 | export * from "./InfoApex"; 3 | export * from "./InfoApex.styles"; 4 | -------------------------------------------------------------------------------- /blocks/info-apex/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./InfoApex?raw"; 3 | import raw2 from "./InfoApex.styles?raw"; 4 | 5 | 6 | 7 | ## CLI 8 | 9 | ```sh 10 | npx mui-treasury@latest clone info-apex info-basic 11 | ``` 12 | 13 | ## Font 14 | 15 | ```jsx 16 | 17 | 18 | 22 | ``` 23 | 24 | ## InfoApex 25 | 26 | 27 | 28 | ### InfoApex.styles.ts 29 | 30 | 31 | -------------------------------------------------------------------------------- /blocks/info-basic/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./Info"; 2 | export * from "./InfoTitle"; 3 | export * from "./InfoSubtitle"; 4 | export * from "./InfoCaption"; 5 | export * from "./InfoEyebrow"; 6 | export * from "./infoClasses"; 7 | -------------------------------------------------------------------------------- /blocks/info-basic/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./Info?raw"; 3 | import raw2 from "./InfoCaption?raw"; 4 | import raw3 from "./infoClasses?raw"; 5 | import raw4 from "./InfoSubtitle?raw"; 6 | import raw5 from "./InfoTitle?raw"; 7 | 8 | 9 | 10 | ## CLI 11 | 12 | ```sh 13 | npx mui-treasury@latest clone info-basic 14 | ``` 15 | 16 | ## InfoBasic 17 | 18 | ### `Info.tsx` 19 | 20 | 21 | 22 | ### `InfoCaption.tsx` 23 | 24 | 25 | 26 | ### `InfoSubtitle.tsx` 27 | 28 | 29 | 30 | ### `InfoTitle.tsx` 31 | 32 | 33 | 34 | ### `infoClasses.ts` 35 | 36 | 37 | -------------------------------------------------------------------------------- /blocks/info-beats/InfoBeats.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Info, InfoEyebrow, InfoSubtitle, InfoTitle } from "../info-basic"; 3 | import { getInfoBeatsStyles } from "./InfoBeats.styles"; 4 | 5 | export function InfoBeats() { 6 | return ( 7 | 8 | Beats 9 | Headphone X 10 | Price starts from $345 11 | 12 | ); 13 | } 14 | -------------------------------------------------------------------------------- /blocks/info-beats/index.ts: -------------------------------------------------------------------------------- 1 | "use client"; 2 | export * from "./InfoBeats"; 3 | export * from "./InfoBeats.styles"; 4 | -------------------------------------------------------------------------------- /blocks/info-beats/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./InfoBeats?raw"; 3 | import raw2 from "./InfoBeats.styles?raw"; 4 | 5 | 6 | 7 | ## CLI 8 | 9 | ```sh 10 | npx mui-treasury@latest clone info-beats info-basic 11 | ``` 12 | 13 | ## Font 14 | 15 | ```jsx 16 | 17 | 18 | 22 | ``` 23 | 24 | ## InfoBeats 25 | 26 | 27 | 28 | ### InfoBeats.styles.ts 29 | 30 | 31 | -------------------------------------------------------------------------------- /blocks/info-blog/InfoBlog.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Info, InfoEyebrow, InfoSubtitle, InfoTitle } from "../info-basic"; 3 | import { getInfoBlogStyles } from "./InfoBlog.styles"; 4 | 5 | export function InfoBlog() { 6 | return ( 7 | 8 | 28 MAR 2019 9 | What is Git ? 10 | 11 | Git is a distributed version control system. Every dev has a working 12 | copy of the code and... 13 | 14 | 15 | ); 16 | } 17 | -------------------------------------------------------------------------------- /blocks/info-blog/index.ts: -------------------------------------------------------------------------------- 1 | "use client"; 2 | export * from "./InfoBlog"; 3 | export * from "./InfoBlog.styles"; 4 | -------------------------------------------------------------------------------- /blocks/info-blog/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./InfoBlog?raw"; 3 | import raw2 from "./InfoBlog.styles?raw"; 4 | 5 | 6 | 7 | ## CLI 8 | 9 | ```sh 10 | npx mui-treasury@latest clone info-blog info-basic 11 | ``` 12 | 13 | ## Font 14 | 15 | ```jsx 16 | 17 | 18 | 22 | ``` 23 | 24 | ## InfoBlog 25 | 26 | 27 | 28 | ### InfoBlog.styles.ts 29 | 30 | 31 | -------------------------------------------------------------------------------- /blocks/info-chatz/InfoChatz.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Info, InfoEyebrow, InfoSubtitle, InfoTitle } from "../info-basic"; 3 | import { getInfoChatzStyles } from "./InfoChatz.styles"; 4 | 5 | export function InfoChatz() { 6 | return ( 7 | 8 | Phawta Tuntayakul 9 | Great, I'll join you tomorrow... 10 | 10 m 11 | 12 | ); 13 | } 14 | -------------------------------------------------------------------------------- /blocks/info-chatz/index.ts: -------------------------------------------------------------------------------- 1 | "use client"; 2 | export * from "./InfoChatz"; 3 | export * from "./InfoChatz.styles"; 4 | -------------------------------------------------------------------------------- /blocks/info-chatz/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./InfoChatz?raw"; 3 | import raw2 from "./InfoChatz.styles?raw"; 4 | 5 | 6 | 7 | ## CLI 8 | 9 | ```sh 10 | npx mui-treasury@latest clone info-chatz info-basic 11 | ``` 12 | 13 | ## Font 14 | 15 | ```jsx 16 | 17 | 18 | 22 | ``` 23 | 24 | ## InfoChatz 25 | 26 | 27 | 28 | ## InfoChatz.styles.ts 29 | 30 | 31 | -------------------------------------------------------------------------------- /blocks/info-n01/InfoN01.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Info, InfoEyebrow, InfoSubtitle, InfoTitle } from "../info-basic"; 3 | import { getInfoN01Styles } from "./InfoN01.styles"; 4 | 5 | export function InfoN01() { 6 | return ( 7 | 8 | March 20, 2019 9 | Nature Around Us 10 | 11 | We are going to learn different kinds of species in nature that live 12 | together to form amazing environment. 13 | 14 | 15 | ); 16 | } 17 | -------------------------------------------------------------------------------- /blocks/info-n01/index.ts: -------------------------------------------------------------------------------- 1 | "use client"; 2 | export * from "./InfoN01"; 3 | export * from "./InfoN01.styles"; 4 | -------------------------------------------------------------------------------- /blocks/info-n01/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./InfoN01?raw"; 3 | import raw2 from "./InfoN01.styles?raw"; 4 | 5 | 6 | 7 | ## CLI 8 | 9 | ```sh 10 | npx mui-treasury@latest clone info-n01 info-basic 11 | ``` 12 | 13 | ## InfoN01 14 | 15 | 16 | 17 | ## InfoN01.styles.ts 18 | 19 | 20 | -------------------------------------------------------------------------------- /blocks/info-n02/InfoN02.styles.ts: -------------------------------------------------------------------------------- 1 | import { Theme } from "@mui/material/styles"; 2 | import { CSSObject } from "@mui/system"; 3 | import { InfoSlotStyles } from "../info-basic"; 4 | 5 | export const getInfoN02Styles = ( 6 | arg: Theme | { theme: Theme } 7 | ): CSSObject & Partial => { 8 | const { palette } = "theme" in arg ? arg.theme : arg; 9 | return { 10 | eyebrow: { 11 | textTransform: "uppercase", 12 | color: palette.text.secondary, 13 | fontWeight: "bold", 14 | letterSpacing: "1px", 15 | fontSize: 14, 16 | display: "inline-block", 17 | }, 18 | title: { 19 | fontSize: 24, 20 | fontWeight: 900, 21 | marginBottom: "0.4em", 22 | }, 23 | subtitle: { 24 | fontSize: 18, 25 | color: palette.text.secondary, 26 | }, 27 | }; 28 | }; 29 | -------------------------------------------------------------------------------- /blocks/info-n02/InfoN02.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Info, InfoEyebrow, InfoSubtitle, InfoTitle } from "../info-basic"; 3 | import { getInfoN02Styles } from "./InfoN02.styles"; 4 | 5 | export function InfoN02() { 6 | return ( 7 | 8 | MARCH 8, 2016 9 | First Snow Storm 10 | 11 | Snow storm coming in Sommaroy island, Arctic Norway. This is something 12 | that you definitely wanna see in your life. 13 | 14 | 15 | ); 16 | } 17 | -------------------------------------------------------------------------------- /blocks/info-n02/index.ts: -------------------------------------------------------------------------------- 1 | "use client"; 2 | export * from "./InfoN02"; 3 | export * from "./InfoN02.styles"; 4 | -------------------------------------------------------------------------------- /blocks/info-n02/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./InfoN02?raw"; 3 | import raw2 from "./InfoN02.styles?raw"; 4 | 5 | 6 | 7 | ## CLI 8 | 9 | ```sh 10 | npx mui-treasury@latest clone info-n02 info-basic 11 | ``` 12 | 13 | ## InfoN02 14 | 15 | 16 | 17 | ## InfoN02.styles.ts 18 | 19 | 20 | -------------------------------------------------------------------------------- /blocks/info-n03/InfoN03.styles.ts: -------------------------------------------------------------------------------- 1 | import { Theme } from "@mui/material/styles"; 2 | import { CSSObject } from "@mui/system"; 3 | import { InfoSlotStyles } from "../info-basic"; 4 | 5 | export const getInfoN03Styles = ( 6 | arg: Theme | { theme: Theme } 7 | ): CSSObject & Partial => { 8 | const { palette } = "theme" in arg ? arg.theme : arg; 9 | return { 10 | eyebrow: { 11 | textTransform: "uppercase", 12 | color: "#9e9e9e", 13 | marginBottom: "0.35em", 14 | fontWeight: "bold", 15 | letterSpacing: "2px", 16 | fontSize: 16, 17 | display: "inline-block", 18 | }, 19 | title: { 20 | fontSize: 24, 21 | fontWeight: 900, 22 | marginBottom: "0.72em", 23 | }, 24 | subtitle: { 25 | fontSize: 16, 26 | color: palette.text.primary, 27 | lineHeight: 1.75, 28 | }, 29 | }; 30 | }; 31 | -------------------------------------------------------------------------------- /blocks/info-n03/InfoN03.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Info, InfoEyebrow, InfoSubtitle, InfoTitle } from "../info-basic"; 3 | import { getInfoN03Styles } from "./InfoN03.styles"; 4 | 5 | export function InfoN03() { 6 | return ( 7 | 8 | GOOGLE INC. 9 | Project Polymer 10 | 11 | Web components usher in a new era of web development based on 12 | encapsulated and interoperable custom 13 | 14 | 15 | ); 16 | } 17 | -------------------------------------------------------------------------------- /blocks/info-n03/index.ts: -------------------------------------------------------------------------------- 1 | "use client"; 2 | export * from "./InfoN03"; 3 | export * from "./InfoN03.styles"; 4 | -------------------------------------------------------------------------------- /blocks/info-n03/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./InfoN03?raw"; 3 | import raw2 from "./InfoN03.styles?raw"; 4 | 5 | 6 | 7 | ## CLI 8 | 9 | ```sh 10 | npx mui-treasury@latest clone info-n03 info-basic 11 | ``` 12 | 13 | ## InfoN03 14 | 15 | 16 | 17 | ## InfoN03.styles.ts 18 | 19 | 20 | -------------------------------------------------------------------------------- /blocks/info-n04/InfoN04.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Info, InfoEyebrow, InfoSubtitle, InfoTitle } from "../info-basic"; 3 | import { getInfoN04Styles } from "./InfoN04.styles"; 4 | 5 | export function InfoN04() { 6 | return ( 7 | 8 | Kesha 9 | Inner Varnika 10 | 11 | That year, collection of songs, review melodies, memories full, this is 12 | a long and warm journey 13 | 14 | 15 | ); 16 | } 17 | -------------------------------------------------------------------------------- /blocks/info-n04/index.ts: -------------------------------------------------------------------------------- 1 | "use client"; 2 | export * from "./InfoN04"; 3 | export * from "./InfoN04.styles"; 4 | -------------------------------------------------------------------------------- /blocks/info-n04/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./InfoN04?raw"; 3 | import raw2 from "./InfoN04.styles?raw"; 4 | 5 | 6 | 7 | ## CLI 8 | 9 | ```sh 10 | npx mui-treasury@latest clone info-n04 info-basic 11 | ``` 12 | 13 | ## InfoN04 14 | 15 | 16 | 17 | ## InfoN04.styles.ts 18 | 19 | 20 | -------------------------------------------------------------------------------- /blocks/layout-core-v5/Content/SidebarContent.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { styled, Theme } from "@mui/material/styles"; 3 | import { SxProps } from "@mui/system"; 4 | 5 | const SidebarContentRoot = styled("div", { 6 | name: "AppSidebarContent", 7 | slot: "Root", 8 | overridesResolver: (props, styles) => styles.root, 9 | })({ 10 | minHeight: 0, 11 | flexGrow: 1, 12 | overflow: "auto", 13 | display: "flex", 14 | flexDirection: "column", 15 | }); 16 | 17 | type Props = JSX.IntrinsicElements["div"]; 18 | export type SidebarContentClassKey = "root"; 19 | export interface SidebarContentProps extends Props { 20 | sx?: SxProps; 21 | } 22 | 23 | export const SidebarContent = (props: SidebarContentProps) => { 24 | return ; 25 | }; 26 | -------------------------------------------------------------------------------- /blocks/layout-core-v5/Fullscreen/Fullscreen.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import cx from "clsx"; 3 | import { styled } from "@mui/material/styles"; 4 | import FullscreenContext from "./FullscreenContext"; 5 | 6 | const FullscreenRoot = styled("div", { name: "Fullscreen", slot: "Root" })({ 7 | height: "100vh", 8 | display: "flex", 9 | flexDirection: "column", 10 | overflow: "hidden", 11 | }); 12 | 13 | export type FullscreenProps = Parameters[0]; 14 | 15 | export const Fullscreen = (props: FullscreenProps) => { 16 | return ( 17 | 18 | 22 | 23 | ); 24 | }; 25 | -------------------------------------------------------------------------------- /blocks/layout-core-v5/Fullscreen/FullscreenContext.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const Context = React.createContext(false); 4 | Context.displayName = "FullscreenCtx"; 5 | 6 | export const useFullscreenCtx = () => React.useContext(Context); 7 | 8 | export default Context; 9 | -------------------------------------------------------------------------------- /blocks/layout-core-v5/WindowContext.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const WindowContext = React.createContext({ 4 | iWindow: typeof window !== "undefined" ? window : undefined, 5 | iDocument: typeof document !== "undefined" ? document : undefined, 6 | }); 7 | 8 | export const WindowProvider = WindowContext.Provider; 9 | export const WindowConsumer = WindowContext.Consumer; 10 | export const useWindowCtx = () => React.useContext(WindowContext); 11 | -------------------------------------------------------------------------------- /blocks/layout-core-v5/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./Root/Root"; // [x] 2 | export * from "./Header/Header"; // [x] 3 | export * from "./EdgeSidebar/EdgeSidebar"; // [x] 4 | export * from "./EdgeSidebar/EdgeTrigger"; // => EdgePermanentCollapse, EdgeDrawerClose 5 | export * from "./InsetSidebar/InsetSidebar"; 6 | export * from "./InsetSidebar/InsetContainer"; 7 | export * from "./InsetSidebar/InsetAvoidingView"; 8 | export * from "./Content/Content"; // [x] 9 | export * from "./Content/SidebarContent"; // [x] 10 | export * from "./Footer/Footer"; 11 | export * from "./Fullscreen/Fullscreen"; 12 | export * from "./WindowContext"; 13 | export * from "./presets/standard"; 14 | export * from "./presets/contentBased"; 15 | export * from "./presets/cozy"; 16 | export * from "./presets/fixed"; 17 | export * from "./WindowContext"; 18 | -------------------------------------------------------------------------------- /blocks/layout-core-v5/presets/contentBased.ts: -------------------------------------------------------------------------------- 1 | import { Scheme } from "../Root/Root"; 2 | 3 | export const getContentBasedScheme = (): Required< 4 | Pick 5 | > => ({ 6 | header: { 7 | config: { 8 | xs: { 9 | position: "relative", 10 | height: 56, 11 | }, 12 | md: { 13 | position: "relative", 14 | height: 64, 15 | }, 16 | }, 17 | }, 18 | leftEdgeSidebar: { 19 | config: { 20 | xs: { 21 | variant: "temporary", 22 | width: 256, 23 | }, 24 | sm: { 25 | variant: "persistent", 26 | width: 256, 27 | persistentBehavior: "flexible", 28 | }, 29 | }, 30 | }, 31 | }); 32 | -------------------------------------------------------------------------------- /blocks/layout-core-v5/presets/fixed.ts: -------------------------------------------------------------------------------- 1 | import { Scheme } from "../Root/Root"; 2 | 3 | export const getFixedScheme = (): Required< 4 | Pick 5 | > => ({ 6 | header: { 7 | config: { 8 | xs: { 9 | position: "sticky", 10 | height: 56, 11 | }, 12 | md: { 13 | position: "relative", 14 | height: 64, 15 | }, 16 | }, 17 | }, 18 | leftEdgeSidebar: { 19 | autoCollapse: "md", 20 | config: { 21 | xs: { 22 | variant: "temporary", 23 | width: 256, 24 | }, 25 | md: { 26 | variant: "permanent", 27 | width: 256, 28 | collapsible: true, 29 | collapsedWidth: 64, 30 | }, 31 | }, 32 | }, 33 | }); 34 | -------------------------------------------------------------------------------- /blocks/layout-core-v5/presets/standard.ts: -------------------------------------------------------------------------------- 1 | import { Scheme } from "../Root/Root"; 2 | 3 | export const getStandardScheme = (): Required< 4 | Pick 5 | > => ({ 6 | header: { 7 | config: { 8 | xs: { 9 | position: "sticky", 10 | height: 56, 11 | }, 12 | md: { 13 | position: "relative", 14 | height: 64, 15 | clipped: true, 16 | }, 17 | }, 18 | }, 19 | leftEdgeSidebar: { 20 | autoCollapse: "sm", 21 | config: { 22 | xs: { 23 | variant: "temporary", 24 | width: 256, 25 | }, 26 | sm: { 27 | variant: "permanent", 28 | width: 256, 29 | collapsible: true, 30 | collapsedWidth: 64, 31 | headerMagnetEnabled: true, 32 | }, 33 | }, 34 | }, 35 | }); 36 | -------------------------------------------------------------------------------- /blocks/layout-core-v5/utils/calc.ts: -------------------------------------------------------------------------------- 1 | import { toValidCssValue } from "./toValidCssValue"; 2 | 3 | type ValidItems = (string | number)[]; 4 | 5 | export const subtractCalc = (...args: (string | number | undefined)[]) => { 6 | const valid = args.filter((v) => !!v); 7 | if (!valid.length) return "0px"; 8 | return valid.length === 1 9 | ? toValidCssValue(valid[0]!) 10 | : `calc(${(args.filter((item) => !!item) as ValidItems) 11 | .map(toValidCssValue) 12 | .join(" - ")})`; 13 | }; 14 | 15 | export const plusCalc = (...args: (string | number | undefined)[]) => { 16 | const valid = args.filter((v) => !!v); 17 | if (!valid.length) return "0px"; 18 | return valid.length === 1 19 | ? toValidCssValue(valid[0]!) 20 | : `calc(${(args.filter((item) => !!item) as ValidItems) 21 | .map(toValidCssValue) 22 | .join(" + ")})`; 23 | }; 24 | -------------------------------------------------------------------------------- /blocks/layout-core-v5/utils/combineBreakpoints.test.ts: -------------------------------------------------------------------------------- 1 | import { combineBreakpoints } from "./combineBreakpoints"; 2 | 3 | describe("combineBreakpoints", () => { 4 | it("combine correctly", () => { 5 | expect( 6 | combineBreakpoints({ xs: "", lg: "" }, { md: "", lg: "" }, { sm: "" }) 7 | ).toEqual(["xs", "sm", "md", "lg"]); 8 | }); 9 | 10 | it("can combine object + array", () => { 11 | expect( 12 | combineBreakpoints({ xs: "", sm: "", lg: "" }, ["sm", "md"]) 13 | ).toEqual(["xs", "sm", "md", "lg"]); 14 | }); 15 | }); 16 | -------------------------------------------------------------------------------- /blocks/layout-core-v5/utils/combineBreakpoints.ts: -------------------------------------------------------------------------------- 1 | import { Breakpoint } from "@mui/system"; 2 | import { BREAKPOINT_KEYS } from "./muiBreakpoints"; 3 | import { Responsive } from "./types"; 4 | 5 | export const sortBreakpoints = (breakpoints: Breakpoint[]): Breakpoint[] => 6 | breakpoints.sort( 7 | (a, b) => BREAKPOINT_KEYS.indexOf(a) - BREAKPOINT_KEYS.indexOf(b) 8 | ); 9 | 10 | export const combineBreakpoints = ( 11 | ...args: (Responsive | Breakpoint[])[] 12 | ): Breakpoint[] => { 13 | let result: Breakpoint[] = []; 14 | args.forEach((item) => { 15 | const breakpoints = Array.isArray(item) 16 | ? item 17 | : (Object.keys(item) as Breakpoint[]); 18 | breakpoints.forEach((k) => { 19 | if (!result.includes(k)) { 20 | result.push(k); 21 | } 22 | }); 23 | }); 24 | return sortBreakpoints(result); 25 | }; 26 | -------------------------------------------------------------------------------- /blocks/layout-core-v5/utils/constant.ts: -------------------------------------------------------------------------------- 1 | import { createTheme } from "@mui/material/styles"; 2 | 3 | export const HEADER_ID = "header"; 4 | export type HEADER_ID = typeof HEADER_ID; 5 | export const CONTENT_ID = "content"; 6 | export type CONTENT_ID = typeof CONTENT_ID; 7 | export const FOOTER_ID = "footer"; 8 | export type FOOTER_ID = typeof FOOTER_ID; 9 | export const LEFT_EDGE_SIDEBAR_ID = "leftEdgeSidebar"; 10 | export type LEFT_EDGE_SIDEBAR_ID = typeof LEFT_EDGE_SIDEBAR_ID; 11 | export const RIGHT_EDGE_SIDEBAR_ID = "rightEdgeSidebar"; 12 | export type RIGHT_EDGE_SIDEBAR_ID = typeof RIGHT_EDGE_SIDEBAR_ID; 13 | export type EDGE_SIDEBAR_ID = LEFT_EDGE_SIDEBAR_ID | RIGHT_EDGE_SIDEBAR_ID; 14 | export const EDGE_SIDEBAR_EXPAND_DELAY = 350; 15 | export const CSS_TRANSITION = 16 | "all 225ms cubic-bezier(0.0, 0, 0.2, 1) 0ms, color 0s"; 17 | export const DEFAULT_THEME = createTheme(); 18 | -------------------------------------------------------------------------------- /blocks/layout-core-v5/utils/isNil.ts: -------------------------------------------------------------------------------- 1 | export const isNil = ( 2 | value: T | null | undefined 3 | ): value is null | undefined => { 4 | return value === null || value === undefined; 5 | }; 6 | -------------------------------------------------------------------------------- /blocks/layout-core-v5/utils/isNilOrEmpty.ts: -------------------------------------------------------------------------------- 1 | import { isNil } from "./isNil"; 2 | 3 | type Empty = ""; 4 | 5 | export const isNilOrEmpty = ( 6 | value: T | Empty | null | undefined 7 | ): value is Empty | null | undefined => { 8 | return isNil(value) || value === ""; 9 | }; 10 | 11 | export const isNotNilOrEmpty = (value: any) => !isNilOrEmpty(value); 12 | -------------------------------------------------------------------------------- /blocks/layout-core-v5/utils/mapWidthToScreen.test.ts: -------------------------------------------------------------------------------- 1 | import { createTheme } from "@mui/material/styles"; 2 | import { mapWidthToScreen } from "./mapWidthToScreen"; 3 | 4 | const theme = createTheme(); 5 | const { breakpoints } = theme; 6 | describe("mapWidthToScreen", () => { 7 | it("return correct screen", () => { 8 | expect(mapWidthToScreen(undefined, breakpoints)).toBeUndefined(); 9 | expect(mapWidthToScreen(320, breakpoints)).toBe("xs"); 10 | expect(mapWidthToScreen(768, breakpoints)).toBe("sm"); 11 | expect(mapWidthToScreen(1024, breakpoints)).toBe("md"); 12 | expect(mapWidthToScreen(1440, breakpoints)).toBe("lg"); 13 | expect(mapWidthToScreen(1920, breakpoints)).toBe("xl"); 14 | }); 15 | }); 16 | -------------------------------------------------------------------------------- /blocks/layout-core-v5/utils/mapWidthToScreen.ts: -------------------------------------------------------------------------------- 1 | import { Breakpoints, Breakpoint } from "@mui/system"; 2 | import { BREAKPOINT_KEYS } from "./muiBreakpoints"; 3 | 4 | export const mapWidthToScreen = ( 5 | width: number | undefined, 6 | breakpoints: Breakpoints 7 | ) => { 8 | if (!width) return undefined; 9 | let screen = ""; 10 | let found = false; 11 | const newKeys = [...BREAKPOINT_KEYS]; 12 | newKeys.reverse().forEach((breakpoint) => { 13 | if (width >= breakpoints.values[breakpoint] && !found) { 14 | screen = breakpoint; 15 | found = true; 16 | } 17 | }); 18 | return screen as Breakpoint; 19 | }; 20 | -------------------------------------------------------------------------------- /blocks/layout-core-v5/utils/muiBreakpoints.ts: -------------------------------------------------------------------------------- 1 | import { createBreakpoints } from "@mui/system"; 2 | 3 | const MuiBreakpoints = createBreakpoints({}); 4 | 5 | // todo: wait for v5 to fix 6 | export const BREAKPOINT_KEYS = MuiBreakpoints.keys; 7 | -------------------------------------------------------------------------------- /blocks/layout-core-v5/utils/toValidCssValue.ts: -------------------------------------------------------------------------------- 1 | import { Breakpoint } from "@mui/system"; 2 | import { Responsive } from "./types"; 3 | 4 | export const toResponsiveCssValue = (value: Responsive) => { 5 | const result: Responsive = {}; 6 | for (const key in value) { 7 | const bp = key as Breakpoint; 8 | result[bp] = toValidCssValue(value[bp] as string | number); 9 | } 10 | return result; 11 | }; 12 | 13 | export const toValidCssValue = (value: string | number) => { 14 | if (typeof value === "number") return `${value}px`; 15 | return value; 16 | }; 17 | -------------------------------------------------------------------------------- /blocks/layout-core-v5/utils/types.ts: -------------------------------------------------------------------------------- 1 | import { Breakpoint } from "@mui/system"; 2 | 3 | export type Responsive = Partial>; 4 | -------------------------------------------------------------------------------- /blocks/layout-core-v6/InsetAvoidingView.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { BoxProps } from "@mui/material/Box"; 3 | import { layoutClasses } from "./layoutClasses"; 4 | import { styled } from "./zero-styled"; 5 | 6 | const StyledInsetAvoidingView = styled("div")({ 7 | marginRight: "var(--InsetSidebarR-width)", 8 | marginLeft: "var(--InsetSidebarL-width)", 9 | }); 10 | 11 | const InsetAvoidingView = React.forwardRef( 12 | function InsetAvoidingView({ className, ...props }, ref) { 13 | return ( 14 | 20 | ); 21 | }, 22 | ); 23 | 24 | export default InsetAvoidingView; 25 | -------------------------------------------------------------------------------- /blocks/layout-core-v6/zero-styled/index.ts: -------------------------------------------------------------------------------- 1 | export { styled } from "@mui/material/styles"; 2 | -------------------------------------------------------------------------------- /blocks/layout-v5-app-analytics/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./LayoutV5AppAnalytics"; 2 | -------------------------------------------------------------------------------- /blocks/layout-v5-app-analytics/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./LayoutV5AppAnalytics?raw"; 3 | 4 | 5 | 6 | ## CLI 7 | 8 | ```sh 9 | npx mui-treasury@latest clone layout-v5-app-analytics 10 | ``` 11 | 12 | ## LayoutAppAnalytics 13 | 14 | 15 | -------------------------------------------------------------------------------- /blocks/layout-v5-app-messenger/components/index.js: -------------------------------------------------------------------------------- 1 | export { default as ChatsHeader } from "./ChatsHeader"; 2 | export { default as MessengerSearch } from "./MessengerSearch"; 3 | export { default as ChatListItem } from "./ChatListItem"; 4 | export { default as ChatList } from "./ChatList"; 5 | export { default as ConversationHead } from "./ConversationHead"; 6 | export { default as ChatSettings } from "./ChatSettings"; 7 | export { default as ChatBar } from "./ChatBar"; 8 | export { default as ChatDialog } from "./ChatDialog"; 9 | -------------------------------------------------------------------------------- /blocks/layout-v5-app-messenger/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./LayoutV5AppMessenger"; 2 | -------------------------------------------------------------------------------- /blocks/layout-v5-app-messenger/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./LayoutV5AppMessenger?raw"; 3 | 4 | 5 | 6 | ## CLI 7 | 8 | ```sh 9 | npx mui-treasury@latest clone layout-v5-app-messenger 10 | ``` 11 | 12 | ## LayoutAppMessenger 13 | 14 | 15 | -------------------------------------------------------------------------------- /blocks/layout-v5-app-reactLegacy/components/index.js: -------------------------------------------------------------------------------- 1 | export { default as ReactHeader } from "./ReactHeader"; 2 | export { default as ReactNextArticle } from "./ReactNextArticle"; 3 | export { default as ReactContent } from "./ReactContent"; 4 | -------------------------------------------------------------------------------- /blocks/layout-v5-app-reactLegacy/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./LayoutV5AppReactLegacy"; 2 | -------------------------------------------------------------------------------- /blocks/layout-v5-app-reactLegacy/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./LayoutV5AppReactLegacy?raw"; 3 | 4 | 5 | 6 | ## CLI 7 | 8 | ```sh 9 | npx mui-treasury@latest clone layout-v5-app-reactLegacy 10 | ``` 11 | 12 | ## LayoutAppReactLegacy 13 | 14 | 15 | -------------------------------------------------------------------------------- /blocks/layout-v5-app-shoppingCart/components/DailyLogo.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Typography from "@mui/material/Typography"; 3 | 4 | const DailyLogo = () => { 5 | return ( 6 | 10 | # Daily. 11 | 12 | ); 13 | }; 14 | 15 | export default DailyLogo; 16 | -------------------------------------------------------------------------------- /blocks/layout-v5-app-shoppingCart/components/index.js: -------------------------------------------------------------------------------- 1 | export { default as DailyLogo } from "./DailyLogo"; 2 | export { default as dailyShoppingTheme } from "./dailyShoppingTheme"; 3 | export { default as DailySearch } from "./DailySearch"; 4 | export { default as DailyHeader } from "./DailyHeader"; 5 | export { default as DailyCart } from "./DailyCart"; 6 | export { default as DailyCheckout } from "./DailyCheckout"; 7 | export { default as DailySizeSelector } from "./DailySizeSelector"; 8 | export { default as DailyInteger } from "./DailyInteger"; 9 | export { default as DailySummary } from "./DailySummary"; 10 | -------------------------------------------------------------------------------- /blocks/layout-v5-app-shoppingCart/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./LayoutV5AppShoppingCart"; 2 | -------------------------------------------------------------------------------- /blocks/layout-v5-app-shoppingCart/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./LayoutV5AppShoppingCart?raw"; 3 | 4 | 5 | 6 | ## CLI 7 | 8 | ```sh 9 | npx mui-treasury@latest clone layout-v5-app-shoppingCart 10 | ``` 11 | 12 | ## LayoutAppShoppingCart 13 | 14 | 15 | -------------------------------------------------------------------------------- /blocks/layout-v5-example-controlEdgeSidebar/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./LayoutV5ExampleControlEdgeSidebar"; 2 | -------------------------------------------------------------------------------- /blocks/layout-v5-example-controlEdgeSidebar/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./LayoutV5ExampleControlEdgeSidebar?raw"; 3 | 4 | 5 | 6 | ## CLI 7 | 8 | ```sh 9 | npx mui-treasury@latest clone layoutV5-example-controlEdgeSidebar 10 | ``` 11 | 12 | ## LayoutExampleControlEdgeSidebar 13 | 14 | 15 | -------------------------------------------------------------------------------- /blocks/layout-v5-example-globalTheme/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./LayoutV5ExampleGlobalTheme"; 2 | -------------------------------------------------------------------------------- /blocks/layout-v5-example-globalTheme/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./LayoutV5ExampleGlobalTheme?raw"; 3 | 4 | 5 | 6 | ## CLI 7 | 8 | ```sh 9 | npx mui-treasury@latest clone layoutV5-example-globalTheme 10 | ``` 11 | 12 | ## LayoutExampleGlobalTheme 13 | 14 | 15 | -------------------------------------------------------------------------------- /blocks/layout-v5-example-insetSidebarPosition/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./LayoutV5ExampleInsetSidebarPosition"; 2 | -------------------------------------------------------------------------------- /blocks/layout-v5-example-insetSidebarPosition/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./LayoutV5ExampleInsetSidebarPosition?raw"; 3 | 4 | 5 | 6 | ## CLI 7 | 8 | ```sh 9 | npx mui-treasury@latest clone layoutV5-example-insetSidebarPosition 10 | ``` 11 | 12 | ## LayoutExampleInsetSidebarPosition 13 | 14 | 15 | -------------------------------------------------------------------------------- /blocks/layout-v5-example-multipleHeaders/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./LayoutV5ExampleMultipleHeaders"; 2 | -------------------------------------------------------------------------------- /blocks/layout-v5-example-multipleHeaders/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./LayoutV5ExampleMultipleHeaders?raw"; 3 | 4 | 5 | 6 | ## CLI 7 | 8 | ```sh 9 | npx mui-treasury@latest clone layoutV5-example-multipleHeaders 10 | ``` 11 | 12 | ## LayoutExampleMultipleHeaders 13 | 14 | 15 | -------------------------------------------------------------------------------- /blocks/layout-v5-example-rightEdgeSidebar/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./LayoutV5ExampleRightEdgeSidebar"; 2 | -------------------------------------------------------------------------------- /blocks/layout-v5-example-rightEdgeSidebar/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./LayoutV5ExampleRightEdgeSidebar?raw"; 3 | 4 | 5 | 6 | ## CLI 7 | 8 | ```sh 9 | npx mui-treasury@latest clone layoutV5-example-rightEdgeSidebar 10 | ``` 11 | 12 | ## LayoutExampleRightEdgeSidebar 13 | 14 | 15 | -------------------------------------------------------------------------------- /blocks/layout-v5-example-rtl/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./LayoutV5ExampleRtl"; 2 | -------------------------------------------------------------------------------- /blocks/layout-v5-example-rtl/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./LayoutV5ExampleRtl?raw"; 3 | 4 | 5 | 6 | ## CLI 7 | 8 | ```sh 9 | npx mui-treasury@latest clone layoutV5-example-rtl 10 | ``` 11 | 12 | ## LayoutExampleRtl 13 | 14 | 15 | -------------------------------------------------------------------------------- /blocks/layout-v5-preset-contentBased/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./LayoutV5PresetContentBased"; 2 | -------------------------------------------------------------------------------- /blocks/layout-v5-preset-contentBased/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./LayoutV5PresetContentBased?raw"; 3 | 4 | 5 | 6 | ## CLI 7 | 8 | ```sh 9 | npx mui-treasury@latest clone layoutV5-preset-contentBased 10 | ``` 11 | 12 | ## LayoutPresetContentBased 13 | 14 | 15 | -------------------------------------------------------------------------------- /blocks/layout-v5-preset-cozy/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./LayoutV5PresetCozy"; 2 | -------------------------------------------------------------------------------- /blocks/layout-v5-preset-cozy/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./LayoutV5PresetCozy?raw"; 3 | 4 | 5 | 6 | ## CLI 7 | 8 | ```sh 9 | npx mui-treasury@latest clone layoutV5-preset-cozy 10 | ``` 11 | 12 | ## LayoutPresetCozy 13 | 14 | 15 | -------------------------------------------------------------------------------- /blocks/layout-v5-preset-fixed/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./LayoutV5PresetFixed"; 2 | -------------------------------------------------------------------------------- /blocks/layout-v5-preset-fixed/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./LayoutV5PresetFixed?raw"; 3 | 4 | 5 | 6 | ## CLI 7 | 8 | ```sh 9 | npx mui-treasury@latest clone layoutV5-preset-fixed 10 | ``` 11 | 12 | ## LayoutPresetFixed 13 | 14 | 15 | -------------------------------------------------------------------------------- /blocks/layout-v5-preset-standard/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./LayoutV5PresetStandard"; 2 | -------------------------------------------------------------------------------- /blocks/layout-v5-preset-standard/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./LayoutV5PresetStandard?raw"; 3 | 4 | 5 | 6 | ## CLI 7 | 8 | ```sh 9 | npx mui-treasury@latest clone layoutV5-preset-standard 10 | ``` 11 | 12 | ## LayoutPresetStandard 13 | 14 | 15 | -------------------------------------------------------------------------------- /blocks/layout-v6-app-analytics/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./LayoutV6AppAnalytics"; 2 | -------------------------------------------------------------------------------- /blocks/layout-v6-app-analytics/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./LayoutV6AppAnalytics?raw"; 3 | 4 | 5 | 6 | ## CLI 7 | 8 | ```sh 9 | npx mui-treasury@latest clone layout-v6-app-analytics 10 | ``` 11 | 12 | ## LayoutV6AppAnalytics 13 | 14 | 15 | -------------------------------------------------------------------------------- /blocks/layout-v6-app-claude/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./LayoutV6AppClaude"; 2 | -------------------------------------------------------------------------------- /blocks/layout-v6-app-claude/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./LayoutV6AppClaude?raw"; 3 | 4 | 5 | 6 | ## CLI 7 | 8 | ```sh 9 | npx mui-treasury@latest clone layout-v6-app-claude 10 | ``` 11 | 12 | ## LayoutV6AppClaude 13 | 14 | 15 | -------------------------------------------------------------------------------- /blocks/layout-v6-app-cloudflare/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./LayoutV6AppCloudflare"; 2 | -------------------------------------------------------------------------------- /blocks/layout-v6-app-cloudflare/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./LayoutV6AppCloudflare?raw"; 3 | 4 | 5 | 6 | ## CLI 7 | 8 | ```sh 9 | npx mui-treasury@latest clone layout-v6-app-cloudflare 10 | ``` 11 | 12 | ## LayoutV6AppCloudflare 13 | 14 | 15 | -------------------------------------------------------------------------------- /blocks/layout-v6-app-gmail/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./LayoutV6AppGmail"; 2 | -------------------------------------------------------------------------------- /blocks/layout-v6-app-gmail/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./LayoutV6AppGmail?raw"; 3 | 4 | 5 | 6 | ## CLI 7 | 8 | ```sh 9 | npx mui-treasury@latest clone layout-v6-app-gmail 10 | ``` 11 | 12 | ## LayoutV6AppGmail 13 | 14 | 15 | -------------------------------------------------------------------------------- /blocks/layout-v6-app-messenger/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./LayoutV6AppMessenger"; 2 | -------------------------------------------------------------------------------- /blocks/layout-v6-app-messenger/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./LayoutV6AppMessenger?raw"; 3 | 4 | 5 | 6 | ## CLI 7 | 8 | ```sh 9 | npx mui-treasury@latest clone layout-v6-app-messenger 10 | ``` 11 | 12 | ## LayoutV6AppMessenger 13 | 14 | 15 | -------------------------------------------------------------------------------- /blocks/layout-v6-app-react-legacy/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./LayoutV6AppReactLegacy"; 2 | -------------------------------------------------------------------------------- /blocks/layout-v6-app-react-legacy/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./LayoutV6AppReactLegacy?raw"; 3 | 4 | 5 | 6 | ## CLI 7 | 8 | ```sh 9 | npx mui-treasury@latest clone layout-v6-app-react-legacy 10 | ``` 11 | 12 | ## LayoutV6AppReactLegacy 13 | 14 | 15 | -------------------------------------------------------------------------------- /blocks/layout-v6-app-shopping-cart/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./LayoutV6AppShoppingCart"; 2 | -------------------------------------------------------------------------------- /blocks/layout-v6-app-shopping-cart/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./LayoutV6AppShoppingCart?raw"; 3 | 4 | 5 | 6 | ## CLI 7 | 8 | ```sh 9 | npx mui-treasury@latest clone layout-v6-app-shopping-cart 10 | ``` 11 | 12 | ## LayoutV6AppShoppingCart 13 | 14 | 15 | -------------------------------------------------------------------------------- /blocks/layout-v6-preset-content-based/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./LayoutV6PresetContentBased"; 2 | -------------------------------------------------------------------------------- /blocks/layout-v6-preset-content-based/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./LayoutV6PresetContentBased?raw"; 3 | 4 | 5 | 6 | ## CLI 7 | 8 | ```sh 9 | npx mui-treasury@latest clone layoutV6-preset-content-based 10 | ``` 11 | 12 | ## LayoutV6PresetContentBased 13 | 14 | 15 | -------------------------------------------------------------------------------- /blocks/layout-v6-preset-cozy/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./LayoutV6PresetCozy"; 2 | -------------------------------------------------------------------------------- /blocks/layout-v6-preset-cozy/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./LayoutV6PresetCozy?raw"; 3 | 4 | 5 | 6 | ## CLI 7 | 8 | ```sh 9 | npx mui-treasury@latest clone layoutV6-preset-cozy 10 | ``` 11 | 12 | ## LayoutV6PresetCozy 13 | 14 | 15 | -------------------------------------------------------------------------------- /blocks/layout-v6-preset-fixed/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./LayoutV6PresetFixed"; 2 | -------------------------------------------------------------------------------- /blocks/layout-v6-preset-fixed/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./LayoutV6PresetFixed?raw"; 3 | 4 | 5 | 6 | ## CLI 7 | 8 | ```sh 9 | npx mui-treasury@latest clone layoutV6-preset-fixed 10 | ``` 11 | 12 | ## LayoutV6PresetFixed 13 | 14 | 15 | -------------------------------------------------------------------------------- /blocks/layout-v6-preset-standard/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./LayoutV6PresetStandard"; 2 | -------------------------------------------------------------------------------- /blocks/layout-v6-preset-standard/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./LayoutV6PresetStandard?raw"; 3 | 4 | 5 | 6 | ## CLI 7 | 8 | ```sh 9 | npx mui-treasury@latest clone layoutV6-preset-standard 10 | ``` 11 | 12 | ## LayoutV6PresetStandard 13 | 14 | 15 | -------------------------------------------------------------------------------- /blocks/layout-v6-theme-dashboard-curve/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./LayoutV6ThemeDashboardCurve"; 2 | -------------------------------------------------------------------------------- /blocks/layout-v6-theme-dashboard-curve/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./LayoutV6ThemeDashboardCurve?raw"; 3 | 4 | 5 | 6 | ## CLI 7 | 8 | ```sh 9 | npx mui-treasury@latest clone layout-v6-theme-dashboard-curve 10 | ``` 11 | 12 | ## LayoutV6ThemeDashboardCurve 13 | 14 | 15 | -------------------------------------------------------------------------------- /blocks/layout-v6-theme-dashboard-inset/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./LayoutV6ThemeDashboardInset"; 2 | -------------------------------------------------------------------------------- /blocks/layout-v6-theme-dashboard-inset/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./LayoutV6ThemeDashboardInset?raw"; 3 | 4 | 5 | 6 | ## CLI 7 | 8 | ```sh 9 | npx mui-treasury@latest clone layout-v6-theme-dashboard-inset 10 | ``` 11 | 12 | ## LayoutV6ThemeDashboardInset 13 | 14 | 15 | -------------------------------------------------------------------------------- /blocks/menu-download/MenuDownload.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import type { Meta, StoryObj } from "@storybook/react"; 3 | import googleFont from "../../.storybook/decorators/googleFont"; 4 | import storyDialog from "../../.storybook/decorators/storyDialog"; 5 | import { MenuDownload } from "./index"; 6 | import Usage from "./usage.mdx"; 7 | 8 | const meta = { 9 | title: "Menu/Download", 10 | component: MenuDownload, 11 | parameters: { 12 | layout: "centered", 13 | githubUsername: "pacurtin", // (optional) Your github username. If provided, your avatar will be displayed in the story toolbar 14 | }, 15 | decorators: [storyDialog(Usage), googleFont([])], 16 | } satisfies Meta; 17 | 18 | export default meta; 19 | type Story = StoryObj; 20 | 21 | export const Download: Story = { 22 | render: () => , 23 | }; 24 | -------------------------------------------------------------------------------- /blocks/menu-download/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./MenuDownload"; 2 | -------------------------------------------------------------------------------- /blocks/menu-download/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./MenuDownload?raw"; 3 | 4 | 5 | 6 | ## CLI 7 | 8 | ```sh 9 | npx mui-treasury@latest clone menu-download 10 | ``` 11 | 12 | ## MenuDownload 13 | 14 | 15 | -------------------------------------------------------------------------------- /blocks/mockup-dashboard/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./SideNavUserInfo"; 2 | export * from "./StatCard"; 3 | export * from "./IconNav"; 4 | export * from "./LinkNav"; 5 | export * from "./TopUsersCard"; 6 | export * from "./UserActiveCard"; 7 | -------------------------------------------------------------------------------- /blocks/mockup-layout/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./HeaderMockup"; 2 | export * from "./NavSidebarMockup"; 3 | export * from "./ContentMockup"; 4 | export * from "./FooterMockup"; 5 | -------------------------------------------------------------------------------- /blocks/mockup-layout/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./ContentMockup?raw"; 3 | import raw2 from "./FooterMockup?raw"; 4 | import raw3 from "./HeaderMockup?raw"; 5 | 6 | 7 | 8 | ## CLI 9 | 10 | ```sh 11 | npx mui-treasury@latest clone mockup-layout 12 | ``` 13 | 14 | ## MockupLayout 15 | 16 | ### ContentMockup 17 | 18 | 19 | 20 | ### FooterMockup 21 | 22 | 23 | 24 | ### HeaderMockup 25 | 26 | 27 | -------------------------------------------------------------------------------- /blocks/mockup-shape/Circle.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Box, { BoxProps } from "@mui/material/Box"; 3 | import { getBaseGrey } from "../mockup-utils"; 4 | 5 | export const Circle = (props: BoxProps) => ( 6 | 18 | ); 19 | -------------------------------------------------------------------------------- /blocks/mockup-shape/MockupShape.stories.tsx: -------------------------------------------------------------------------------- 1 | import type { Meta } from "@storybook/react"; 2 | import googleFont from "../../.storybook/decorators/googleFont"; 3 | import storyDialog from "../../.storybook/decorators/storyDialog"; 4 | import { 5 | Circle as CircleMockup, 6 | Pill as PillMockup, 7 | Square as SquareMockup, 8 | } from "./index"; 9 | import Usage from "./usage.mdx"; 10 | 11 | const meta = { 12 | title: "Mockup/Shape", 13 | parameters: { 14 | layout: "centered", 15 | githubUsername: "siriwatknp", // (optional) Your github username. If provided, your avatar will be displayed in the story toolbar 16 | }, 17 | decorators: [storyDialog(Usage), googleFont([])], 18 | } satisfies Meta; 19 | 20 | export default meta; 21 | 22 | export const Circle = CircleMockup; 23 | 24 | export const Pill = PillMockup; 25 | 26 | export const Square = SquareMockup; 27 | -------------------------------------------------------------------------------- /blocks/mockup-shape/Pill.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Box, { BoxProps } from "@mui/material/Box"; 3 | import { getBaseGrey } from "../mockup-utils"; 4 | 5 | export const Pill = (props: BoxProps) => ( 6 | 16 | ); 17 | -------------------------------------------------------------------------------- /blocks/mockup-shape/Square.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Box, { BoxProps } from "@mui/material/Box"; 3 | import { getBaseGrey } from "../mockup-utils"; 4 | 5 | export const Square = (props: BoxProps) => ( 6 | 18 | ); 19 | -------------------------------------------------------------------------------- /blocks/mockup-shape/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./Square"; 2 | export * from "./Pill"; 3 | export * from "./Circle"; 4 | -------------------------------------------------------------------------------- /blocks/mockup-shape/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./Circle?raw"; 3 | import raw2 from "./Pill?raw"; 4 | import raw3 from "./Square?raw"; 5 | 6 | 7 | 8 | ## CLI 9 | 10 | ```sh 11 | npx mui-treasury@latest clone mockup-shape 12 | ``` 13 | 14 | ## MockupShape 15 | 16 | ### Circle 17 | 18 | 19 | 20 | ### Pill 21 | 22 | 23 | 24 | ### Square 25 | 26 | 27 | -------------------------------------------------------------------------------- /blocks/mockup-tabs/MockupTabs.stories.tsx: -------------------------------------------------------------------------------- 1 | import type { Meta } from "@storybook/react"; 2 | import googleFont from "../../.storybook/decorators/googleFont"; 3 | import storyDialog from "../../.storybook/decorators/storyDialog"; 4 | import Usage from "./usage.mdx"; 5 | 6 | const meta = { 7 | title: "Mockup/Tabs", 8 | parameters: { 9 | layout: "centered", 10 | githubUsername: "siriwatknp", // (optional) Your github username. If provided, your avatar will be displayed in the story toolbar 11 | }, 12 | decorators: [storyDialog(Usage), googleFont([])], 13 | } satisfies Meta; 14 | 15 | export default meta; 16 | 17 | export * from "./MockupTabs"; 18 | -------------------------------------------------------------------------------- /blocks/mockup-tabs/MockupTabs.tsx: -------------------------------------------------------------------------------- 1 | import { styled } from "@mui/material/styles"; 2 | import Tabs from "@mui/material/Tabs"; 3 | 4 | export const UnderlineTabs = styled(Tabs)(({ theme }) => ({ 5 | "&:before": { 6 | content: '""', 7 | display: "block", 8 | height: "1px", 9 | backgroundColor: theme.palette.grey[200], 10 | left: 0, 11 | bottom: 0, 12 | width: "100%", 13 | position: "absolute", 14 | }, 15 | "& .MuiTab-root": { 16 | textTransform: "none", 17 | paddingLeft: 0, 18 | paddingRight: 0, 19 | marginLeft: theme.spacing(2), 20 | marginRight: theme.spacing(2), 21 | "&:first-of-type": { 22 | marginLeft: 0, 23 | }, 24 | "&:last-of-type": { 25 | marginRight: 0, 26 | }, 27 | }, 28 | })); 29 | -------------------------------------------------------------------------------- /blocks/mockup-tabs/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./MockupTabs"; 2 | -------------------------------------------------------------------------------- /blocks/mockup-tabs/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./MockupTabs?raw"; 3 | 4 | 5 | 6 | ## CLI 7 | 8 | ```sh 9 | npx mui-treasury@latest clone mockup-tabs 10 | ``` 11 | 12 | ## MockupTabs 13 | 14 | 15 | -------------------------------------------------------------------------------- /blocks/mockup-typography/MockupTypography.stories.tsx: -------------------------------------------------------------------------------- 1 | import type { Meta } from "@storybook/react"; 2 | import googleFont from "../../.storybook/decorators/googleFont"; 3 | import storyDialog from "../../.storybook/decorators/storyDialog"; 4 | import Usage from "./usage.mdx"; 5 | 6 | const meta = { 7 | title: "Mockup/Typography", 8 | parameters: { 9 | layout: "centered", 10 | githubUsername: "siriwatknp", // (optional) Your github username. If provided, your avatar will be displayed in the story toolbar 11 | }, 12 | decorators: [storyDialog(Usage), googleFont([])], 13 | } satisfies Meta; 14 | 15 | export default meta; 16 | 17 | export * from "./index"; 18 | -------------------------------------------------------------------------------- /blocks/mockup-typography/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./MockupTypography"; 2 | -------------------------------------------------------------------------------- /blocks/mockup-typography/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./MockupTypography?raw"; 3 | 4 | 5 | 6 | ## CLI 7 | 8 | ```sh 9 | npx mui-treasury@latest clone mockup-typography 10 | ``` 11 | 12 | ## MockupTypography 13 | 14 | 15 | -------------------------------------------------------------------------------- /blocks/mockup-utils/index.ts: -------------------------------------------------------------------------------- 1 | import { Theme } from "@mui/material/styles"; 2 | 3 | export const getBaseGrey = (theme: Theme): string => 4 | theme.palette.mode === "dark" ? "rgba(255,255,255,0.12)" : "grey.300"; 5 | 6 | export const getLightGrey = (theme: Theme): string => 7 | theme.palette.mode === "dark" ? "rgba(255,255,255,0.09)" : "grey.200"; 8 | 9 | export const getLightestGrey = (theme: Theme): string => 10 | theme.palette.mode === "dark" ? "rgba(255,255,255,0.07)" : "grey.50"; 11 | 12 | export const randomBetween = (min: number, max: number, unit?: string) => { 13 | const result = Math.floor(Math.random() * (max - min)) + min; 14 | if (unit) return `${result}${unit}`; 15 | return result; 16 | }; 17 | -------------------------------------------------------------------------------- /blocks/navigation-basic/Navigation.test.tsx: -------------------------------------------------------------------------------- 1 | import { render } from "@testing-library/react"; 2 | import React from "react"; 3 | import { Navigation, NavItem } from "./index"; 4 | 5 | describe("Navigation", () => { 6 | it("renders without clash", () => { 7 | expect(() => 8 | render( 9 | 10 | Menu 1 11 | 12 | ) 13 | ).not.toThrow(); 14 | }); 15 | }); 16 | -------------------------------------------------------------------------------- /blocks/navigation-basic/index.ts: -------------------------------------------------------------------------------- 1 | "use client"; 2 | export * from "./Navigation"; 3 | export * from "./navigationClasses"; 4 | export * from "./NavItem"; 5 | -------------------------------------------------------------------------------- /blocks/navigation-basic/navigationClasses.ts: -------------------------------------------------------------------------------- 1 | import generateUtilityClass from "@mui/material/generateUtilityClass"; 2 | import generateUtilityClasses from "@mui/material/generateUtilityClasses"; 3 | 4 | export function getNavigationUtilityClass(slot: string) { 5 | return generateUtilityClass("JunNavigation", slot); 6 | } 7 | 8 | export const navigationClasses = generateUtilityClasses("JunNavigation", [ 9 | "root", 10 | "item", 11 | ]); 12 | -------------------------------------------------------------------------------- /blocks/navigation-basic/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./Navigation?raw"; 3 | import raw3 from "./navigationClasses?raw"; 4 | import raw2 from "./NavItem?raw"; 5 | 6 | 7 | 8 | ## CLI 9 | 10 | ```sh 11 | npx mui-treasury@latest clone navigation-basic 12 | ``` 13 | 14 | ## NavigationBasic 15 | 16 | 17 | 18 | ### NavItem.tsx 19 | 20 | 21 | 22 | ### navigationClasses.ts 23 | 24 | 25 | -------------------------------------------------------------------------------- /blocks/navigation-bulb/NavigationBulb.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { useTheme } from "@mui/material/styles"; 3 | import { Navigation, NavItem } from "../navigation-basic"; 4 | import { getNavigationBulbStyles } from "./NavigationBulb.styles"; 5 | 6 | export function NavigationBulb() { 7 | const theme = useTheme(); 8 | const styles = getNavigationBulbStyles(theme); 9 | const [activeIndex, setActiveIndex] = React.useState(0); 10 | return ( 11 | 12 | {[...Array(5).fill(undefined)].map((_, index) => ( 13 | setActiveIndex(index)} 19 | > 20 | Item {index + 1} 21 | 22 | ))} 23 | 24 | ); 25 | } 26 | -------------------------------------------------------------------------------- /blocks/navigation-bulb/index.ts: -------------------------------------------------------------------------------- 1 | "use client"; 2 | export * from "./NavigationBulb"; 3 | -------------------------------------------------------------------------------- /blocks/navigation-bulb/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./NavigationBulb?raw"; 3 | import raw2 from "./NavigationBulb.styles?raw"; 4 | 5 | 6 | 7 | ## CLI 8 | 9 | ```sh 10 | npx mui-treasury@latest clone navigation-bulb navigation-basic 11 | ``` 12 | 13 | ## NavigationBulb 14 | 15 | 16 | 17 | ### NavigationBulb.styles.ts 18 | 19 | 20 | -------------------------------------------------------------------------------- /blocks/navigation-float/NavigationFloat.styles.ts: -------------------------------------------------------------------------------- 1 | import { CSSObject, Theme } from "@mui/material/styles"; 2 | import { navigationClasses } from "../navigation-basic"; 3 | 4 | export const getNavigationFloatStyles = ( 5 | arg: Theme | { theme: Theme } 6 | ): CSSObject => { 7 | const { palette } = "theme" in arg ? arg.theme : arg; 8 | return { 9 | [`& .${navigationClasses.item}`]: { 10 | transition: "0.2s ease-out", 11 | "&.Mui-active": { 12 | color: palette.mode === "dark" ? "#fff" : palette.primary.main, 13 | }, 14 | "&:hover": { 15 | transform: "translateY(-4px)", 16 | textShadow: "0 1px 2px rgba(0,0,0,0.12)", 17 | color: palette.mode === "dark" ? "#fff" : palette.primary.main, 18 | }, 19 | }, 20 | }; 21 | }; 22 | -------------------------------------------------------------------------------- /blocks/navigation-float/NavigationFloat.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { useTheme } from "@mui/material/styles"; 3 | import { Navigation, NavItem } from "../navigation-basic"; 4 | import { getNavigationFloatStyles } from "./NavigationFloat.styles"; 5 | 6 | export function NavigationFloat() { 7 | const theme = useTheme(); 8 | const styles = getNavigationFloatStyles(theme); 9 | const [activeIndex, setActiveIndex] = React.useState(0); 10 | return ( 11 | 12 | {[...Array(5).fill(undefined)].map((_, index) => ( 13 | setActiveIndex(index)} 19 | > 20 | Item {index + 1} 21 | 22 | ))} 23 | 24 | ); 25 | } 26 | -------------------------------------------------------------------------------- /blocks/navigation-float/index.ts: -------------------------------------------------------------------------------- 1 | "use client"; 2 | export * from "./NavigationFloat"; 3 | -------------------------------------------------------------------------------- /blocks/navigation-float/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./NavigationFloat?raw"; 3 | import raw2 from "./NavigationFloat.styles?raw"; 4 | 5 | 6 | 7 | ## CLI 8 | 9 | ```sh 10 | npx mui-treasury@latest clone navigation-float navigation-basic 11 | ``` 12 | 13 | ## NavigationFloat 14 | 15 | 16 | 17 | ### NavigationFloat.styles.ts 18 | 19 | 20 | -------------------------------------------------------------------------------- /blocks/navigation-line/NavigationLine.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { useTheme } from "@mui/material/styles"; 3 | import { Navigation, NavItem } from "../navigation-basic"; 4 | import { getNavigationLineStyles } from "./NavigationLine.styles"; 5 | 6 | export function NavigationLine() { 7 | const theme = useTheme(); 8 | const styles = getNavigationLineStyles(theme); 9 | const [activeIndex, setActiveIndex] = React.useState(0); 10 | return ( 11 | 12 | {[...Array(5).fill(undefined)].map((_, index) => ( 13 | setActiveIndex(index)} 19 | > 20 | Item {index + 1} 21 | 22 | ))} 23 | 24 | ); 25 | } 26 | -------------------------------------------------------------------------------- /blocks/navigation-line/index.ts: -------------------------------------------------------------------------------- 1 | "use client"; 2 | export * from "./NavigationLine"; 3 | -------------------------------------------------------------------------------- /blocks/navigation-line/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./NavigationLine?raw"; 3 | import raw2 from "./NavigationLine.styles?raw"; 4 | 5 | 6 | 7 | ## CLI 8 | 9 | ```sh 10 | npx mui-treasury@latest clone navigation-line navigation-basic 11 | ``` 12 | 13 | ## NavigationLine 14 | 15 | 16 | 17 | ## NavigationLine.styles.ts 18 | 19 | 20 | -------------------------------------------------------------------------------- /blocks/navigation-plain/NavigationPlain.styles.ts: -------------------------------------------------------------------------------- 1 | import { CSSObject, Theme } from "@mui/material/styles"; 2 | import { navigationClasses } from "../navigation-basic"; 3 | 4 | export const getNavigationPlainStyles = ( 5 | arg: Theme | { theme: Theme } 6 | ): CSSObject => { 7 | const { palette, spacing } = "theme" in arg ? arg.theme : arg; 8 | return { 9 | [`& .${navigationClasses.item}`]: { 10 | "&:not(:first-of-type)": { 11 | marginLeft: spacing(1.5), 12 | }, 13 | "&:hover, &:focus": { 14 | color: palette.text.primary, 15 | backgroundColor: palette.action.hover, 16 | }, 17 | ["&.Mui-active"]: { 18 | color: palette.text.primary, 19 | backgroundColor: palette.action.selected, 20 | }, 21 | }, 22 | }; 23 | }; 24 | -------------------------------------------------------------------------------- /blocks/navigation-plain/NavigationPlain.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { useTheme } from "@mui/material/styles"; 3 | import { Navigation, NavItem } from "../navigation-basic"; 4 | import { getNavigationPlainStyles } from "./NavigationPlain.styles"; 5 | 6 | export function NavigationPlain() { 7 | const theme = useTheme(); 8 | const styles = getNavigationPlainStyles(theme); 9 | const [activeIndex, setActiveIndex] = React.useState(0); 10 | return ( 11 | 12 | {[...Array(5).fill(undefined)].map((_, index) => ( 13 | setActiveIndex(index)} 19 | > 20 | Item {index + 1} 21 | 22 | ))} 23 | 24 | ); 25 | } 26 | -------------------------------------------------------------------------------- /blocks/navigation-plain/index.ts: -------------------------------------------------------------------------------- 1 | "use client"; 2 | export * from "./NavigationPlain"; 3 | -------------------------------------------------------------------------------- /blocks/navigation-plain/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./NavigationPlain?raw"; 3 | import raw2 from "./NavigationPlain.styles?raw"; 4 | 5 | 6 | 7 | ## CLI 8 | 9 | ```sh 10 | npx mui-treasury@latest clone navigation-plain 11 | ``` 12 | 13 | ## NavigationPlain 14 | 15 | 16 | 17 | ## NavigationPlain.styles.ts 18 | 19 | 20 | -------------------------------------------------------------------------------- /blocks/navigation-point/index.ts: -------------------------------------------------------------------------------- 1 | "use client"; 2 | export * from "./NavigationPoint"; 3 | -------------------------------------------------------------------------------- /blocks/navigation-point/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./NavigationPoint?raw"; 3 | import raw2 from "./NavigationPoint.styles?raw"; 4 | 5 | 6 | 7 | ## CLI 8 | 9 | ```sh 10 | npx mui-treasury@latest clone navigation-point 11 | ``` 12 | 13 | ## NavigationPoint 14 | 15 | 16 | 17 | ### NavigationPoint.styles.ts 18 | 19 | 20 | -------------------------------------------------------------------------------- /blocks/navigation-zoom/NavigationZoom.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { useTheme } from "@mui/material/styles"; 3 | import { Navigation, NavItem } from "../navigation-basic"; 4 | import { getNavigationZoomStyles } from "./NavigationZoom.styles"; 5 | 6 | export function NavigationZoom() { 7 | const theme = useTheme(); 8 | const styles = getNavigationZoomStyles(theme); 9 | const [activeIndex, setActiveIndex] = React.useState(0); 10 | return ( 11 | 12 | {[...Array(5).fill(undefined)].map((_, index) => ( 13 | setActiveIndex(index)} 19 | > 20 | Item {index + 1} 21 | 22 | ))} 23 | 24 | ); 25 | } 26 | -------------------------------------------------------------------------------- /blocks/navigation-zoom/index.ts: -------------------------------------------------------------------------------- 1 | "use client"; 2 | export * from "./NavigationZoom"; 3 | -------------------------------------------------------------------------------- /blocks/navigation-zoom/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./NavigationZoom?raw"; 3 | import raw2 from "./NavigationZoom.styles?raw"; 4 | 5 | 6 | 7 | ## CLI 8 | 9 | ```sh 10 | npx mui-treasury@latest clone navigation-zoom navigation-basic 11 | ``` 12 | 13 | ## NavigationZoom 14 | 15 | 16 | 17 | ### NavigationZoom.styles.ts 18 | 19 | 20 | -------------------------------------------------------------------------------- /blocks/select-border/SelectBorder.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import type { Meta, StoryObj } from "@storybook/react"; 3 | import googleFont from "../../.storybook/decorators/googleFont"; 4 | import storyDialog from "../../.storybook/decorators/storyDialog"; 5 | import { SelectBorder } from "./index"; 6 | import Usage from "./usage.mdx"; 7 | 8 | const meta = { 9 | title: "Select/Border", 10 | component: SelectBorder, 11 | parameters: { 12 | layout: "centered", 13 | githubUsername: "pacurtin", // (optional) Your github username. If provided, your avatar will be displayed in the story toolbar 14 | }, 15 | decorators: [storyDialog(Usage), googleFont([])], 16 | } satisfies Meta; 17 | 18 | export default meta; 19 | type Story = StoryObj; 20 | 21 | export const Border: Story = { 22 | render: () => , 23 | }; 24 | -------------------------------------------------------------------------------- /blocks/select-border/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./SelectBorder"; 2 | -------------------------------------------------------------------------------- /blocks/select-border/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./SelectBorder?raw"; 3 | 4 | 5 | 6 | ## CLI 7 | 8 | ```sh 9 | npx mui-treasury@latest clone select-border 10 | ``` 11 | 12 | ## SelectBorder 13 | 14 | 15 | -------------------------------------------------------------------------------- /blocks/select-minimal/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./SelectMinimal"; 2 | -------------------------------------------------------------------------------- /blocks/select-minimal/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./SelectMinimal?raw"; 3 | 4 | 5 | 6 | ## CLI 7 | 8 | ```sh 9 | npx mui-treasury@latest clone select-minimal 10 | ``` 11 | 12 | ## SelectMinimal 13 | 14 | 15 | -------------------------------------------------------------------------------- /blocks/select-shadcn/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./SelectShadcn"; 2 | -------------------------------------------------------------------------------- /blocks/select-shadcn/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./SelectShadcn?raw"; 3 | 4 | 5 | 6 | ## CLI 7 | 8 | ```sh 9 | npx mui-treasury@latest clone select-shadcn 10 | ``` 11 | 12 | ## SelectShadcn 13 | 14 | 15 | -------------------------------------------------------------------------------- /blocks/switch-airbnb/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./SwitchAirbnb"; 2 | -------------------------------------------------------------------------------- /blocks/switch-airbnb/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./SwitchAirbnb?raw"; 3 | 4 | 5 | 6 | ## CLI 7 | 8 | ```sh 9 | npx mui-treasury@latest clone switch-airbnb 10 | ``` 11 | 12 | ## SwitchAirbnb 13 | 14 | 15 | -------------------------------------------------------------------------------- /blocks/switch-ios/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./SwitchIos"; 2 | -------------------------------------------------------------------------------- /blocks/switch-ios/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./SwitchIos?raw"; 3 | 4 | 5 | 6 | ## CLI 7 | 8 | ```sh 9 | npx mui-treasury@latest clone switch-ios 10 | ``` 11 | 12 | ## SwitchIos 13 | 14 | 15 | -------------------------------------------------------------------------------- /blocks/switch-lovely/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./SwitchLovely"; 2 | -------------------------------------------------------------------------------- /blocks/switch-lovely/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./SwitchLovely?raw"; 3 | 4 | 5 | 6 | ## CLI 7 | 8 | ```sh 9 | npx mui-treasury@latest clone switch-lovely 10 | ``` 11 | 12 | ## SwitchLovely 13 | 14 | 15 | -------------------------------------------------------------------------------- /blocks/switch-text-track/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./SwitchTextTrack"; 2 | -------------------------------------------------------------------------------- /blocks/switch-text-track/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./SwitchTextTrack?raw"; 3 | 4 | 5 | 6 | ## CLI 7 | 8 | ```sh 9 | npx mui-treasury@latest clone switch-text-track 10 | ``` 11 | 12 | ## SwitchTextTrack 13 | 14 | 15 | -------------------------------------------------------------------------------- /blocks/tabs-apple/TabsApple.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import type { Meta, StoryObj } from "@storybook/react"; 3 | import googleFont from "../../.storybook/decorators/googleFont"; 4 | import storyDialog from "../../.storybook/decorators/storyDialog"; 5 | import { TabsApple } from "./index"; 6 | import Usage from "./usage.mdx"; 7 | 8 | const meta = { 9 | title: "Tabs/Apple", 10 | component: TabsApple, 11 | parameters: { 12 | layout: "centered", 13 | githubUsername: "siriwatknp", // (optional) Your github username. If provided, your avatar will be displayed in the story toolbar 14 | }, 15 | decorators: [storyDialog(Usage), googleFont([])], 16 | } satisfies Meta; 17 | 18 | export default meta; 19 | type Story = StoryObj; 20 | 21 | export const Apple: Story = { 22 | render: () => , 23 | }; 24 | -------------------------------------------------------------------------------- /blocks/tabs-apple/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./TabsApple"; 2 | -------------------------------------------------------------------------------- /blocks/tabs-apple/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./TabsApple?raw"; 3 | 4 | 5 | 6 | ## CLI 7 | 8 | ```sh 9 | npx mui-treasury@latest clone tabs-apple 10 | ``` 11 | 12 | ## TabsApple 13 | 14 | 15 | -------------------------------------------------------------------------------- /blocks/tabs-chrome/TabsChrome.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import type { Meta, StoryObj } from "@storybook/react"; 3 | import googleFont from "../../.storybook/decorators/googleFont"; 4 | import storyDialog from "../../.storybook/decorators/storyDialog"; 5 | import { TabsChrome } from "./index"; 6 | import Usage from "./usage.mdx"; 7 | 8 | const meta = { 9 | title: "Tabs/Chrome", 10 | component: TabsChrome, 11 | parameters: { 12 | layout: "centered", 13 | githubUsername: "siriwatknp", // (optional) Your github username. If provided, your avatar will be displayed in the story toolbar 14 | }, 15 | decorators: [storyDialog(Usage), googleFont([])], 16 | } satisfies Meta; 17 | 18 | export default meta; 19 | type Story = StoryObj; 20 | 21 | export const Chrome: Story = { 22 | render: () => , 23 | }; 24 | -------------------------------------------------------------------------------- /blocks/tabs-chrome/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./TabsChrome"; 2 | -------------------------------------------------------------------------------- /blocks/tabs-chrome/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./TabsChrome?raw"; 3 | 4 | 5 | 6 | ## CLI 7 | 8 | ```sh 9 | npx mui-treasury@latest clone tabs-chrome 10 | ``` 11 | 12 | ## TabsChrome 13 | 14 | 15 | -------------------------------------------------------------------------------- /blocks/tabs-contained/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./TabsContained"; 2 | -------------------------------------------------------------------------------- /blocks/tabs-contained/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./TabsContained?raw"; 3 | 4 | 5 | 6 | ## CLI 7 | 8 | ```sh 9 | npx mui-treasury@latest clone tabs-contained 10 | ``` 11 | 12 | ## TabsContained 13 | 14 | 15 | -------------------------------------------------------------------------------- /blocks/tabs-elevated/TabsElevated.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import type { Meta, StoryObj } from "@storybook/react"; 3 | import googleFont from "../../.storybook/decorators/googleFont"; 4 | import storyDialog from "../../.storybook/decorators/storyDialog"; 5 | import { TabsElevated } from "./index"; 6 | import Usage from "./usage.mdx"; 7 | 8 | const meta = { 9 | title: "Tabs/Elevated", 10 | component: TabsElevated, 11 | parameters: { 12 | layout: "centered", 13 | githubUsername: "davidedantonio", // (optional) Your github username. If provided, your avatar will be displayed in the story toolbar 14 | }, 15 | decorators: [storyDialog(Usage), googleFont([])], 16 | } satisfies Meta; 17 | 18 | export default meta; 19 | type Story = StoryObj; 20 | 21 | export const Elevated: Story = { 22 | render: () => , 23 | }; 24 | -------------------------------------------------------------------------------- /blocks/tabs-elevated/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./TabsElevated"; 2 | -------------------------------------------------------------------------------- /blocks/tabs-elevated/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./TabsElevated?raw"; 3 | 4 | 5 | 6 | ## CLI 7 | 8 | ```sh 9 | npx mui-treasury@latest clone tabs-elevated 10 | ``` 11 | 12 | ## TabsElevated 13 | 14 | 15 | -------------------------------------------------------------------------------- /blocks/tabs-firebase/TabsFirebase.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import type { Meta, StoryObj } from "@storybook/react"; 3 | import googleFont from "../../.storybook/decorators/googleFont"; 4 | import storyDialog from "../../.storybook/decorators/storyDialog"; 5 | import { TabsFirebase } from "./index"; 6 | import Usage from "./usage.mdx"; 7 | 8 | const meta = { 9 | title: "Tabs/Firebase", 10 | component: TabsFirebase, 11 | parameters: { 12 | layout: "centered", 13 | githubUsername: "siriwatknp", // (optional) Your github username. If provided, your avatar will be displayed in the story toolbar 14 | }, 15 | decorators: [storyDialog(Usage), googleFont([])], 16 | } satisfies Meta; 17 | 18 | export default meta; 19 | type Story = StoryObj; 20 | 21 | export const Firebase: Story = { 22 | render: () => , 23 | }; 24 | -------------------------------------------------------------------------------- /blocks/tabs-firebase/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./TabsFirebase"; 2 | -------------------------------------------------------------------------------- /blocks/tabs-firebase/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./TabsFirebase?raw"; 3 | 4 | 5 | 6 | ## CLI 7 | 8 | ```sh 9 | npx mui-treasury@latest clone tabs-firebase 10 | ``` 11 | 12 | ## TabsFirebase 13 | 14 | 15 | -------------------------------------------------------------------------------- /blocks/tabs-inside-triangle/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./TabsInsideTriangle"; 2 | -------------------------------------------------------------------------------- /blocks/tabs-inside-triangle/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./TabsInsideTriangle?raw"; 3 | 4 | 5 | 6 | ## CLI 7 | 8 | ```sh 9 | npx mui-treasury@latest clone tabs-inside-triangle 10 | ``` 11 | 12 | ## TabsInsideTriangle 13 | 14 | 15 | -------------------------------------------------------------------------------- /blocks/tabs-instagram/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./TabsInstagram"; 2 | -------------------------------------------------------------------------------- /blocks/tabs-instagram/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./TabsInstagram?raw"; 3 | 4 | 5 | 6 | ## CLI 7 | 8 | ```sh 9 | npx mui-treasury@latest clone tabs-instagram 10 | ``` 11 | 12 | ## TabsInstagram 13 | 14 | 15 | -------------------------------------------------------------------------------- /blocks/tabs-pill/TabsPill.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import type { Meta, StoryObj } from "@storybook/react"; 3 | import googleFont from "../../.storybook/decorators/googleFont"; 4 | import storyDialog from "../../.storybook/decorators/storyDialog"; 5 | import { TabsPill } from "./index"; 6 | import Usage from "./usage.mdx"; 7 | 8 | const meta = { 9 | title: "Tabs/Pill", 10 | component: TabsPill, 11 | parameters: { 12 | layout: "centered", 13 | githubUsername: "davidedantonio", // (optional) Your github username. If provided, your avatar will be displayed in the story toolbar 14 | }, 15 | decorators: [storyDialog(Usage), googleFont([])], 16 | } satisfies Meta; 17 | 18 | export default meta; 19 | type Story = StoryObj; 20 | 21 | export const Pill: Story = { 22 | render: () => , 23 | }; 24 | -------------------------------------------------------------------------------- /blocks/tabs-pill/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./TabsPill"; 2 | -------------------------------------------------------------------------------- /blocks/tabs-pill/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./TabsPill?raw"; 3 | 4 | 5 | 6 | ## CLI 7 | 8 | ```sh 9 | npx mui-treasury@latest clone tabs-pill 10 | ``` 11 | 12 | ## TabsPill 13 | 14 | 15 | -------------------------------------------------------------------------------- /blocks/tabs-plain/TabsPlain.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import type { Meta, StoryObj } from "@storybook/react"; 3 | import googleFont from "../../.storybook/decorators/googleFont"; 4 | import storyDialog from "../../.storybook/decorators/storyDialog"; 5 | import { TabsPlain } from "./index"; 6 | import Usage from "./usage.mdx"; 7 | 8 | const meta = { 9 | title: "Tabs/Plain", 10 | component: TabsPlain, 11 | parameters: { 12 | layout: "centered", 13 | githubUsername: "siriwatknp", // (optional) Your github username. If provided, your avatar will be displayed in the story toolbar 14 | }, 15 | decorators: [storyDialog(Usage), googleFont([])], 16 | } satisfies Meta; 17 | 18 | export default meta; 19 | type Story = StoryObj; 20 | 21 | export const Plain: Story = { 22 | render: () => , 23 | }; 24 | -------------------------------------------------------------------------------- /blocks/tabs-plain/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./TabsPlain"; 2 | -------------------------------------------------------------------------------- /blocks/tabs-plain/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./TabsPlain?raw"; 3 | 4 | 5 | 6 | ## CLI 7 | 8 | ```sh 9 | npx mui-treasury@latest clone tabs-plain 10 | ``` 11 | 12 | ## TabsPlain 13 | 14 | 15 | -------------------------------------------------------------------------------- /blocks/tabs-serrated/TabsSerrated.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import type { Meta, StoryObj } from "@storybook/react"; 3 | import googleFont from "../../.storybook/decorators/googleFont"; 4 | import storyDialog from "../../.storybook/decorators/storyDialog"; 5 | import { TabsSerrated } from "./index"; 6 | import Usage from "./usage.mdx"; 7 | 8 | const meta = { 9 | title: "Tabs/Serrated", 10 | component: TabsSerrated, 11 | parameters: { 12 | layout: "centered", 13 | githubUsername: "siriwatknp", // (optional) Your github username. If provided, your avatar will be displayed in the story toolbar 14 | }, 15 | decorators: [storyDialog(Usage), googleFont([])], 16 | } satisfies Meta; 17 | 18 | export default meta; 19 | type Story = StoryObj; 20 | 21 | export const Serrated: Story = { 22 | render: () => , 23 | }; 24 | -------------------------------------------------------------------------------- /blocks/tabs-serrated/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./TabsSerrated"; 2 | -------------------------------------------------------------------------------- /blocks/tabs-serrated/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./TabsSerrated?raw"; 3 | 4 | 5 | 6 | ## CLI 7 | 8 | ```sh 9 | npx mui-treasury@latest clone tabs-serrated 10 | ``` 11 | 12 | ## TabsSerrated 13 | 14 | 15 | -------------------------------------------------------------------------------- /blocks/tabs-twitter/TabsTwitter.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import type { Meta, StoryObj } from "@storybook/react"; 3 | import googleFont from "../../.storybook/decorators/googleFont"; 4 | import storyDialog from "../../.storybook/decorators/storyDialog"; 5 | import { TabsTwitter } from "./index"; 6 | import Usage from "./usage.mdx"; 7 | 8 | const meta = { 9 | title: "Tabs/Twitter", 10 | component: TabsTwitter, 11 | parameters: { 12 | layout: "centered", 13 | githubUsername: "siriwatknp", // (optional) Your github username. If provided, your avatar will be displayed in the story toolbar 14 | }, 15 | decorators: [storyDialog(Usage), googleFont([])], 16 | } satisfies Meta; 17 | 18 | export default meta; 19 | type Story = StoryObj; 20 | 21 | export const Twitter: Story = { 22 | render: () => , 23 | }; 24 | -------------------------------------------------------------------------------- /blocks/tabs-twitter/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./TabsTwitter"; 2 | -------------------------------------------------------------------------------- /blocks/tabs-twitter/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./TabsTwitter?raw"; 3 | 4 | 5 | 6 | ## CLI 7 | 8 | ```sh 9 | npx mui-treasury@latest clone tabs-twitter 10 | ``` 11 | 12 | ## TabsTwitter 13 | 14 | 15 | -------------------------------------------------------------------------------- /blocks/text-field-shadcn/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./TextFieldShadcn"; 2 | -------------------------------------------------------------------------------- /blocks/text-field-shadcn/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./TextFieldShadcn?raw"; 3 | 4 | 5 | 6 | ## CLI 7 | 8 | ```sh 9 | npx mui-treasury@latest clone text-field-shadcn 10 | ``` 11 | 12 | ## TextFieldShadcn 13 | 14 | 15 | -------------------------------------------------------------------------------- /blocks/text-field-shade/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./TextFieldShade"; 2 | -------------------------------------------------------------------------------- /blocks/text-field-shade/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./TextFieldShade?raw"; 3 | 4 | 5 | 6 | ## CLI 7 | 8 | ```sh 9 | npx mui-treasury@latest clone text-field-shade 10 | ``` 11 | 12 | ## TextFieldShade 13 | 14 | 15 | -------------------------------------------------------------------------------- /blocks/use-birthdate-input/index.ts: -------------------------------------------------------------------------------- 1 | "use client"; 2 | export * from "./useBirthdateInput"; 3 | -------------------------------------------------------------------------------- /blocks/use-birthdate-input/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./useBirthdateInput?raw"; 3 | 4 | 5 | 6 | ## CLI 7 | 8 | ```sh 9 | npx mui-treasury@latest clone use-birthdate-input use-input-siblings 10 | ``` 11 | 12 | ## UseBirthdateInput 13 | 14 | 15 | -------------------------------------------------------------------------------- /blocks/use-card-input/index.ts: -------------------------------------------------------------------------------- 1 | "use client"; 2 | export * from "./useCardInput"; 3 | -------------------------------------------------------------------------------- /blocks/use-card-input/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./useCardInput?raw"; 3 | 4 | 5 | 6 | ## CLI 7 | 8 | ```sh 9 | npx mui-treasury@latest clone use-card-input use-input-siblings use-expiry-input 10 | ``` 11 | 12 | ## UseCardInput 13 | 14 | 15 | -------------------------------------------------------------------------------- /blocks/use-day-month-year-input/index.ts: -------------------------------------------------------------------------------- 1 | "use client"; 2 | export * from "./useDayMonthYearInput"; 3 | -------------------------------------------------------------------------------- /blocks/use-day-month-year-input/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./useDayMonthYearInput?raw"; 3 | 4 | 5 | 6 | ## CLI 7 | 8 | ```sh 9 | npx mui-treasury@latest clone use-day-month-year-input use-input-siblings 10 | ``` 11 | 12 | ## UseDayMonthYearInput 13 | 14 | 15 | -------------------------------------------------------------------------------- /blocks/use-expiry-input/index.ts: -------------------------------------------------------------------------------- 1 | "use client"; 2 | export * from "./useExpiryInput"; 3 | -------------------------------------------------------------------------------- /blocks/use-expiry-input/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./useExpiryInput?raw"; 3 | 4 | 5 | 6 | ## CLI 7 | 8 | ```sh 9 | npx mui-treasury@latest clone use-expiry-input use-input-siblings 10 | ``` 11 | 12 | ## UseExpiryInput 13 | 14 | 15 | -------------------------------------------------------------------------------- /blocks/use-input-siblings/index.ts: -------------------------------------------------------------------------------- 1 | "use client"; 2 | export * from "./useInput"; 3 | export * from "./useInputSiblings"; 4 | export * from "./useSeparatorInput"; 5 | export type { InputHanders } from "./types"; 6 | -------------------------------------------------------------------------------- /blocks/use-input-siblings/types.ts: -------------------------------------------------------------------------------- 1 | export interface InputHanders { 2 | onChange?: (event: React.ChangeEvent) => void; 3 | onFocus?: (event: React.FocusEvent) => void; 4 | onBlur?: (event: React.FocusEvent) => void; 5 | onKeyDown?: (event: React.KeyboardEvent) => void; 6 | } 7 | -------------------------------------------------------------------------------- /blocks/use-input-siblings/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./useInputSiblings?raw"; 3 | 4 | 5 | 6 | ## CLI 7 | 8 | ```sh 9 | npx mui-treasury@latest clone use-input-siblings 10 | ``` 11 | 12 | ## useInputSiblings 13 | 14 | 15 | -------------------------------------------------------------------------------- /blocks/use-number-input/index.ts: -------------------------------------------------------------------------------- 1 | "use client"; 2 | export * from "./useNumberInput"; 3 | -------------------------------------------------------------------------------- /blocks/use-number-input/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./useNumberInput?raw"; 3 | 4 | 5 | 6 | ## CLI 7 | 8 | ```sh 9 | npx mui-treasury@latest clone use-number-input 10 | ``` 11 | 12 | ## UseNumberInput 13 | 14 | 15 | -------------------------------------------------------------------------------- /blocks/use-pin-input/index.ts: -------------------------------------------------------------------------------- 1 | "use client"; 2 | export * from "./usePinInput"; 3 | -------------------------------------------------------------------------------- /blocks/use-pin-input/usage.mdx: -------------------------------------------------------------------------------- 1 | import { Meta, Source } from "@storybook/blocks"; 2 | import raw from "./usePinInput?raw"; 3 | 4 | 5 | 6 | ## CLI 7 | 8 | ```sh 9 | npx mui-treasury@latest clone use-pin-input use-input-siblings 10 | ``` 11 | 12 | ## UsePinInput 13 | 14 | 15 | -------------------------------------------------------------------------------- /chromatic.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "projectId": "Project:659908da45d61bf81b3a8203", 3 | "zip": true 4 | } 5 | -------------------------------------------------------------------------------- /docs/AvatarIntro.mdx: -------------------------------------------------------------------------------- 1 | import { Meta } from "@storybook/blocks"; 2 | 3 | 4 | 5 | 8 | 9 | # Introduction 10 | 11 | Check out [how-to-use guide](/docs/how-to-use--docs) page to learn how to use blocks in your project. 12 | -------------------------------------------------------------------------------- /docs/ButtonIntro.mdx: -------------------------------------------------------------------------------- 1 | import { Meta } from "@storybook/blocks"; 2 | 3 | 4 | 5 | 8 | 9 | # Introduction 10 | 11 | Check out [how-to-use guide](/docs/how-to-use--docs) page to learn how to use blocks in your project. 12 | -------------------------------------------------------------------------------- /docs/CardIntro.mdx: -------------------------------------------------------------------------------- 1 | import { Meta } from "@storybook/blocks"; 2 | 3 | 4 | 5 | 8 | 9 | # Introduction 10 | 11 | Check out [how-to-use guide](/docs/how-to-use--docs) page to learn how to use blocks in your project. 12 | -------------------------------------------------------------------------------- /docs/CheckboxIntro.mdx: -------------------------------------------------------------------------------- 1 | import { Meta } from "@storybook/blocks"; 2 | 3 | 4 | 5 | 8 | 9 | # Introduction 10 | 11 | Check out [how-to-use guide](/docs/how-to-use--docs) page to learn how to use blocks in your project. 12 | -------------------------------------------------------------------------------- /docs/MenuIntro.mdx: -------------------------------------------------------------------------------- 1 | import { Meta } from "@storybook/blocks"; 2 | 3 | 4 | 5 | 8 | 9 | # Introduction 10 | 11 | Check out [how-to-use guide](/docs/how-to-use--docs) page to learn how to use blocks in your project. 12 | -------------------------------------------------------------------------------- /docs/SelectIntro.mdx: -------------------------------------------------------------------------------- 1 | import { Meta } from "@storybook/blocks"; 2 | 3 | 4 | 5 | 8 | 9 | # Introduction 10 | 11 | Check out [how-to-use guide](/docs/how-to-use--docs) page to learn how to use blocks in your project. 12 | -------------------------------------------------------------------------------- /docs/SwitchIntro.mdx: -------------------------------------------------------------------------------- 1 | import { Meta } from "@storybook/blocks"; 2 | 3 | 4 | 5 | 8 | 9 | # Introduction 10 | 11 | Check out [how-to-use guide](/docs/how-to-use--docs) page to learn how to use blocks in your project. 12 | -------------------------------------------------------------------------------- /docs/TabsIntro.mdx: -------------------------------------------------------------------------------- 1 | import { Meta } from "@storybook/blocks"; 2 | 3 | 4 | 5 | 8 | 9 | # Introduction 10 | 11 | Check out [how-to-use guide](/docs/how-to-use--docs) page to learn how to use blocks in your project. 12 | -------------------------------------------------------------------------------- /docs/TextFieldIntro.mdx: -------------------------------------------------------------------------------- 1 | import { Meta } from "@storybook/blocks"; 2 | 3 | 4 | 5 | 8 | 9 | # Introduction 10 | 11 | Check out [how-to-use guide](/docs/how-to-use--docs) page to learn how to use blocks in your project. 12 | -------------------------------------------------------------------------------- /docs/layout-v6/configuration/content-config.mdx: -------------------------------------------------------------------------------- 1 | import { Meta } from "@storybook/blocks"; 2 | 3 | 4 | 5 | # Content 6 | 7 | The Content component must be a direct child of the Root component. 8 | It is used to display the `
` content of the layout. 9 | 10 | The Content component has no configuration. 11 | 12 | ```jsx 13 | import { Content, Root } from "path/to/layout-core-v6"; 14 | 15 | 16 | Content 17 | ; 18 | ``` 19 | -------------------------------------------------------------------------------- /jest-setup.ts: -------------------------------------------------------------------------------- 1 | import "@testing-library/jest-dom"; 2 | -------------------------------------------------------------------------------- /jest.config.ts: -------------------------------------------------------------------------------- 1 | import type { JestConfigWithTsJest } from "ts-jest"; 2 | 3 | const jestConfig: JestConfigWithTsJest = { 4 | // [...] 5 | setupFilesAfterEnv: ["/jest-setup.ts"], 6 | testEnvironment: "jsdom", 7 | preset: "ts-jest/presets/default-esm", // or other ESM presets 8 | moduleNameMapper: { 9 | "^(\\.{1,2}/.*)\\.js$": "$1", 10 | }, 11 | transform: { 12 | // '^.+\\.[tj]sx?$' to process js/ts with `ts-jest` 13 | // '^.+\\.m?[tj]sx?$' to process js/ts/mjs/mts with `ts-jest` 14 | "^.+\\.tsx?$": [ 15 | "ts-jest", 16 | { 17 | useESM: true, 18 | }, 19 | ], 20 | }, 21 | }; 22 | 23 | export default jestConfig; 24 | -------------------------------------------------------------------------------- /mui-theme-vars.ts: -------------------------------------------------------------------------------- 1 | import type {} from "@mui/material/themeCssVarsAugmentation"; 2 | -------------------------------------------------------------------------------- /postcss.config.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | "@tailwindcss/postcss": {}, 4 | }, 5 | }; 6 | -------------------------------------------------------------------------------- /prettier.config.cjs: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | 3 | /** @type {import("@ianvs/prettier-plugin-sort-imports").PrettierConfig} */ 4 | module.exports = { 5 | // Since prettier 3.0, manually specifying plugins is required 6 | plugins: ["@ianvs/prettier-plugin-sort-imports"], 7 | // This plugin's options 8 | importOrder: [ 9 | "react", 10 | "", 11 | "^[.]", 12 | "", 13 | "^[.]", 14 | ], 15 | importOrderParserPlugins: ["typescript", "jsx", "decorators-legacy"], 16 | importOrderTypeScriptVersion: "5.0.0", 17 | }; 18 | -------------------------------------------------------------------------------- /public/mui-treasury-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/siriwatknp/mui-treasury/b4944cce07d7787d0f7e85f0d0fb07fb60cb872e/public/mui-treasury-logo.png -------------------------------------------------------------------------------- /scripts/attach-block-deps.ts: -------------------------------------------------------------------------------- 1 | import fs from "fs/promises"; 2 | -------------------------------------------------------------------------------- /starters/material-ui-nextjs-pages-router-ts/.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 | 36 | # typescript 37 | *.tsbuildinfo 38 | next-env.d.ts 39 | -------------------------------------------------------------------------------- /starters/material-ui-nextjs-pages-router-ts/next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | module.exports = { 3 | reactStrictMode: true, 4 | }; 5 | -------------------------------------------------------------------------------- /starters/material-ui-nextjs-pages-router-ts/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/siriwatknp/mui-treasury/b4944cce07d7787d0f7e85f0d0fb07fb60cb872e/starters/material-ui-nextjs-pages-router-ts/public/favicon.ico -------------------------------------------------------------------------------- /starters/material-ui-nextjs-pages-router-ts/src/Copyright.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import Typography from '@mui/material/Typography'; 3 | import MuiLink from '@mui/material/Link'; 4 | 5 | export default function Copyright() { 6 | return ( 7 | 14 | {'Copyright © '} 15 | 16 | Your Website 17 | {' '} 18 | {new Date().getFullYear()}. 19 | 20 | ); 21 | } 22 | -------------------------------------------------------------------------------- /starters/material-ui-nextjs-pages-router-ts/src/theme.ts: -------------------------------------------------------------------------------- 1 | import { Roboto } from 'next/font/google'; 2 | import { createTheme } from '@mui/material/styles'; 3 | import { red } from '@mui/material/colors'; 4 | 5 | export const roboto = Roboto({ 6 | weight: ['300', '400', '500', '700'], 7 | subsets: ['latin'], 8 | display: 'swap', 9 | }); 10 | 11 | // Create a theme instance. 12 | const theme = createTheme({ 13 | palette: { 14 | primary: { 15 | main: '#556cd6', 16 | }, 17 | secondary: { 18 | main: '#19857b', 19 | }, 20 | error: { 21 | main: red.A400, 22 | }, 23 | }, 24 | typography: { 25 | fontFamily: roboto.style.fontFamily, 26 | }, 27 | }); 28 | 29 | export default theme; 30 | -------------------------------------------------------------------------------- /starters/material-ui-nextjs-pages-router-ts/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": "node", 13 | "resolveJsonModule": true, 14 | "isolatedModules": true, 15 | "jsx": "preserve", 16 | "jsxImportSource": "@emotion/react", 17 | "incremental": true 18 | }, 19 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], 20 | "exclude": ["node_modules"] 21 | } 22 | -------------------------------------------------------------------------------- /starters/material-ui-nextjs-pages-router/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # misc 7 | .DS_Store 8 | .env.local 9 | .env.development.local 10 | .env.test.local 11 | .env.production.local 12 | 13 | npm-debug.log* 14 | yarn-debug.log* 15 | yarn-error.log* 16 | 17 | # Next.js 18 | /.next 19 | -------------------------------------------------------------------------------- /starters/material-ui-nextjs-pages-router/next.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | reactStrictMode: true, 3 | }; 4 | -------------------------------------------------------------------------------- /starters/material-ui-nextjs-pages-router/pages/index.js: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import Container from '@mui/material/Container'; 3 | import Typography from '@mui/material/Typography'; 4 | import Box from '@mui/material/Box'; 5 | import ProTip from '../src/ProTip'; 6 | import Link from '../src/Link'; 7 | import Copyright from '../src/Copyright'; 8 | 9 | export default function Index() { 10 | return ( 11 | 12 | 13 | 14 | Material UI - Next.js example 15 | 16 | 17 | Go to the about page 18 | 19 | 20 | 21 | 22 | 23 | ); 24 | } 25 | -------------------------------------------------------------------------------- /starters/material-ui-nextjs-pages-router/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/siriwatknp/mui-treasury/b4944cce07d7787d0f7e85f0d0fb07fb60cb872e/starters/material-ui-nextjs-pages-router/public/favicon.ico -------------------------------------------------------------------------------- /starters/material-ui-nextjs-pages-router/src/Copyright.js: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import Typography from '@mui/material/Typography'; 3 | import MuiLink from '@mui/material/Link'; 4 | 5 | export default function Copyright() { 6 | return ( 7 | 14 | {'Copyright © '} 15 | 16 | Your Website 17 | {' '} 18 | {new Date().getFullYear()}. 19 | 20 | ); 21 | } 22 | -------------------------------------------------------------------------------- /starters/material-ui-nextjs-pages-router/src/theme.js: -------------------------------------------------------------------------------- 1 | import { Roboto } from 'next/font/google'; 2 | import { createTheme } from '@mui/material/styles'; 3 | import { red } from '@mui/material/colors'; 4 | 5 | const roboto = Roboto({ 6 | weight: ['300', '400', '500', '700'], 7 | subsets: ['latin'], 8 | display: 'swap', 9 | }); 10 | 11 | // Create a theme instance. 12 | const theme = createTheme({ 13 | palette: { 14 | primary: { 15 | main: '#556cd6', 16 | }, 17 | secondary: { 18 | main: '#19857b', 19 | }, 20 | error: { 21 | main: red.A400, 22 | }, 23 | }, 24 | typography: { 25 | fontFamily: roboto.style.fontFamily, 26 | }, 27 | }); 28 | 29 | export default theme; 30 | -------------------------------------------------------------------------------- /starters/material-ui-nextjs-ts/.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 | .pnpm-debug.log* 27 | 28 | # local env files 29 | .env*.local 30 | 31 | # vercel 32 | .vercel 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | # next-env.d.ts 37 | -------------------------------------------------------------------------------- /starters/material-ui-nextjs-ts/next-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | 4 | // NOTE: This file should not be edited 5 | // see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information. 6 | -------------------------------------------------------------------------------- /starters/material-ui-nextjs-ts/next.config.mjs: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = {}; 3 | 4 | export default nextConfig; 5 | -------------------------------------------------------------------------------- /starters/material-ui-nextjs-ts/public/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/siriwatknp/mui-treasury/b4944cce07d7787d0f7e85f0d0fb07fb60cb872e/starters/material-ui-nextjs-ts/public/.gitkeep -------------------------------------------------------------------------------- /starters/material-ui-nextjs-ts/src/app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/siriwatknp/mui-treasury/b4944cce07d7787d0f7e85f0d0fb07fb60cb872e/starters/material-ui-nextjs-ts/src/app/favicon.ico -------------------------------------------------------------------------------- /starters/material-ui-nextjs-ts/src/app/layout.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { AppRouterCacheProvider } from '@mui/material-nextjs/v14-appRouter'; 3 | import { ThemeProvider } from '@mui/material/styles'; 4 | import CssBaseline from '@mui/material/CssBaseline'; 5 | import theme from '@/theme'; 6 | 7 | export default function RootLayout(props: { children: React.ReactNode }) { 8 | return ( 9 | 10 | 11 | 12 | 13 | {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */} 14 | 15 | {props.children} 16 | 17 | 18 | 19 | 20 | ); 21 | } 22 | -------------------------------------------------------------------------------- /starters/material-ui-nextjs-ts/src/components/Copyright.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import Typography from '@mui/material/Typography'; 3 | import MuiLink from '@mui/material/Link'; 4 | 5 | export default function Copyright() { 6 | return ( 7 | 14 | {'Copyright © '} 15 | 16 | Your Website 17 | {' '} 18 | {new Date().getFullYear()}. 19 | 20 | ); 21 | } 22 | -------------------------------------------------------------------------------- /starters/material-ui-nextjs-ts/src/theme.ts: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | import { Roboto } from 'next/font/google'; 3 | import { createTheme } from '@mui/material/styles'; 4 | 5 | const roboto = Roboto({ 6 | weight: ['300', '400', '500', '700'], 7 | subsets: ['latin'], 8 | display: 'swap', 9 | }); 10 | 11 | const theme = createTheme({ 12 | palette: { 13 | mode: 'light', 14 | }, 15 | typography: { 16 | fontFamily: roboto.style.fontFamily, 17 | }, 18 | components: { 19 | MuiAlert: { 20 | styleOverrides: { 21 | root: ({ ownerState }) => ({ 22 | ...(ownerState.severity === 'info' && { 23 | backgroundColor: '#60a5fa', 24 | }), 25 | }), 26 | }, 27 | }, 28 | }, 29 | }); 30 | 31 | export default theme; 32 | -------------------------------------------------------------------------------- /starters/material-ui-nextjs-ts/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": "node", 13 | "resolveJsonModule": true, 14 | "isolatedModules": true, 15 | "jsx": "preserve", 16 | "incremental": true, 17 | "plugins": [ 18 | { 19 | "name": "next" 20 | } 21 | ], 22 | "baseUrl": ".", 23 | "paths": { 24 | "@/*": ["./src/*"] 25 | } 26 | }, 27 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], 28 | "exclude": ["node_modules"] 29 | } 30 | -------------------------------------------------------------------------------- /starters/material-ui-nextjs/jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "paths": { 4 | "@/*": ["./src/*"] 5 | } 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /starters/material-ui-nextjs/next.config.mjs: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = {}; 3 | 4 | export default nextConfig; 5 | -------------------------------------------------------------------------------- /starters/material-ui-nextjs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "material-ui-nextjs", 3 | "version": "5.0.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "@emotion/cache": "latest", 13 | "@emotion/react": "latest", 14 | "@emotion/styled": "latest", 15 | "@mui/icons-material": "latest", 16 | "@mui/material": "latest", 17 | "@mui/material-nextjs": "latest", 18 | "eslint": "latest", 19 | "eslint-config-next": "latest", 20 | "next": "latest", 21 | "react": "latest", 22 | "react-dom": "latest" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /starters/material-ui-nextjs/src/app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/siriwatknp/mui-treasury/b4944cce07d7787d0f7e85f0d0fb07fb60cb872e/starters/material-ui-nextjs/src/app/favicon.ico -------------------------------------------------------------------------------- /starters/material-ui-nextjs/src/app/layout.js: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { AppRouterCacheProvider } from '@mui/material-nextjs/v14-appRouter'; 3 | import { ThemeProvider } from '@mui/material/styles'; 4 | import CssBaseline from '@mui/material/CssBaseline'; 5 | import theme from '@/theme'; 6 | 7 | export default function RootLayout(props) { 8 | return ( 9 | 10 | 11 | 12 | 13 | {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */} 14 | 15 | {props.children} 16 | 17 | 18 | 19 | 20 | ); 21 | } 22 | -------------------------------------------------------------------------------- /starters/material-ui-nextjs/src/components/Copyright.js: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import Typography from '@mui/material/Typography'; 3 | import MuiLink from '@mui/material/Link'; 4 | 5 | export default function Copyright() { 6 | return ( 7 | ( 10 | {'Copyright © '} 11 | 12 | Your Website 13 | {' '} 14 | {new Date().getFullYear()}.) 15 | ); 16 | } 17 | -------------------------------------------------------------------------------- /starters/material-ui-nextjs/src/theme.js: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | import { Roboto } from 'next/font/google'; 3 | import { createTheme } from '@mui/material/styles'; 4 | 5 | const roboto = Roboto({ 6 | weight: ['300', '400', '500', '700'], 7 | subsets: ['latin'], 8 | display: 'swap', 9 | }); 10 | 11 | const theme = createTheme({ 12 | palette: { 13 | mode: 'light', 14 | }, 15 | typography: { 16 | fontFamily: roboto.style.fontFamily, 17 | }, 18 | components: { 19 | MuiAlert: { 20 | styleOverrides: { 21 | root: ({ ownerState }) => ({ 22 | ...(ownerState.severity === 'info' && { 23 | backgroundColor: '#60a5fa', 24 | }), 25 | }), 26 | }, 27 | }, 28 | }, 29 | }); 30 | 31 | export default theme; 32 | -------------------------------------------------------------------------------- /starters/material-ui-pigment-css-nextjs-ts/.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 | .pnpm-debug.log* 27 | 28 | # local env files 29 | .env*.local 30 | 31 | # vercel 32 | .vercel 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | # next-env.d.ts 37 | -------------------------------------------------------------------------------- /starters/material-ui-pigment-css-nextjs-ts/next-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | 4 | // NOTE: This file should not be edited 5 | // see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information. 6 | -------------------------------------------------------------------------------- /starters/material-ui-pigment-css-nextjs-ts/next.config.mjs: -------------------------------------------------------------------------------- 1 | import { withPigment } from '@pigment-css/nextjs-plugin'; 2 | import { createTheme } from '@mui/material'; 3 | 4 | /** @type {import('next').NextConfig} */ 5 | const nextConfig = {}; 6 | 7 | export default withPigment(nextConfig, { 8 | theme: createTheme({ 9 | cssVariables: true, 10 | colorSchemes: { light: true, dark: true }, 11 | typography: { 12 | fontFamily: 'var(--font-roboto)', 13 | }, 14 | }), 15 | transformLibraries: ['@mui/material'], 16 | }); 17 | -------------------------------------------------------------------------------- /starters/material-ui-pigment-css-nextjs-ts/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "material-ui-pigment-css-nextjs-ts", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "@mui/material": "latest", 13 | "@mui/material-pigment-css": "latest", 14 | "next": "latest", 15 | "react": "latest", 16 | "react-dom": "latest" 17 | }, 18 | "devDependencies": { 19 | "@pigment-css/nextjs-plugin": "latest", 20 | "@types/node": "latest", 21 | "@types/react": "latest", 22 | "@types/react-dom": "latest", 23 | "eslint": "latest", 24 | "eslint-config-next": "latest", 25 | "typescript": "latest" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /starters/material-ui-pigment-css-nextjs-ts/public/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/siriwatknp/mui-treasury/b4944cce07d7787d0f7e85f0d0fb07fb60cb872e/starters/material-ui-pigment-css-nextjs-ts/public/.gitkeep -------------------------------------------------------------------------------- /starters/material-ui-pigment-css-nextjs-ts/src/app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/siriwatknp/mui-treasury/b4944cce07d7787d0f7e85f0d0fb07fb60cb872e/starters/material-ui-pigment-css-nextjs-ts/src/app/favicon.ico -------------------------------------------------------------------------------- /starters/material-ui-pigment-css-nextjs-ts/src/app/layout.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import type { Metadata } from 'next'; 3 | import { Roboto } from 'next/font/google'; 4 | import '@mui/material-pigment-css/styles.css'; 5 | 6 | const roboto = Roboto({ 7 | subsets: ['latin'], 8 | weight: ['400', '500', '700'], 9 | display: 'swap', 10 | variable: '--font-roboto', 11 | }); 12 | 13 | export const metadata: Metadata = { 14 | title: 'Material UI x Pigment CSS', 15 | description: 'Generated by create next app', 16 | }; 17 | 18 | export default function RootLayout({ 19 | children, 20 | }: Readonly<{ 21 | children: React.ReactNode; 22 | }>) { 23 | return ( 24 | 25 | {children} 26 | 27 | ); 28 | } 29 | -------------------------------------------------------------------------------- /starters/material-ui-pigment-css-nextjs-ts/src/material-ui-pigment-css.d.ts: -------------------------------------------------------------------------------- 1 | import { Theme, SxProps } from '@mui/material/styles'; 2 | import {} from '@mui/material/themeCssVarsAugmentation'; 3 | 4 | declare module '@mui/material-pigment-css' { 5 | interface ThemeArgs { 6 | theme: Theme; 7 | } 8 | } 9 | 10 | declare global { 11 | namespace React { 12 | interface HTMLAttributes { 13 | sx?: SxProps; 14 | } 15 | interface SVGProps { 16 | sx?: SxProps; 17 | } 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /starters/material-ui-pigment-css-nextjs-ts/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "lib": ["dom", "dom.iterable", "esnext"], 4 | "allowJs": true, 5 | "skipLibCheck": true, 6 | "strict": true, 7 | "noEmit": true, 8 | "esModuleInterop": true, 9 | "module": "esnext", 10 | "moduleResolution": "bundler", 11 | "resolveJsonModule": true, 12 | "isolatedModules": true, 13 | "jsx": "preserve", 14 | "incremental": true, 15 | "plugins": [ 16 | { 17 | "name": "next" 18 | } 19 | ], 20 | "paths": { 21 | "@/*": ["./src/*"] 22 | } 23 | }, 24 | "include": [ 25 | "next-env.d.ts", 26 | "**/*.ts", 27 | "**/*.tsx", 28 | ".next/types/**/*.ts", 29 | "src/material-ui-pigment-css.d.ts" 30 | ], 31 | "exclude": ["node_modules"] 32 | } 33 | -------------------------------------------------------------------------------- /starters/material-ui-pigment-css-vite-ts/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /starters/material-ui-pigment-css-vite-ts/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | Vite + React + TS 15 | 16 | 17 |
18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /starters/material-ui-pigment-css-vite-ts/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "material-ui-pigment-css-vite", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "tsc -b && vite build", 9 | "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "@mui/material": "latest", 14 | "@mui/material-pigment-css": "latest", 15 | "react": "latest", 16 | "react-dom": "latest" 17 | }, 18 | "devDependencies": { 19 | "@pigment-css/vite-plugin": "latest", 20 | "@types/react": "latest", 21 | "@types/react-dom": "latest", 22 | "@vitejs/plugin-react": "latest", 23 | "typescript": "latest", 24 | "vite": "latest" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /starters/material-ui-pigment-css-vite-ts/src/main.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import * as ReactDOM from 'react-dom/client'; 3 | import '@mui/material-pigment-css/styles.css'; 4 | import App from './App.tsx'; 5 | 6 | ReactDOM.createRoot(document.getElementById('root')!).render( 7 | 8 | 9 | , 10 | ); 11 | -------------------------------------------------------------------------------- /starters/material-ui-pigment-css-vite-ts/src/material-ui-pigment-css.d.ts: -------------------------------------------------------------------------------- 1 | import { Theme, SxProps } from '@mui/material/styles'; 2 | import {} from '@mui/material/themeCssVarsAugmentation'; 3 | 4 | declare module '@mui/material-pigment-css' { 5 | interface ThemeArgs { 6 | theme: Theme; 7 | } 8 | } 9 | 10 | declare global { 11 | namespace React { 12 | interface HTMLAttributes { 13 | sx?: SxProps; 14 | } 15 | interface SVGProps { 16 | sx?: SxProps; 17 | } 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /starters/material-ui-pigment-css-vite-ts/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /starters/material-ui-pigment-css-vite-ts/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", 5 | "target": "ES2020", 6 | "useDefineForClassFields": true, 7 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 8 | "module": "ESNext", 9 | "skipLibCheck": true, 10 | 11 | /* Bundler mode */ 12 | "moduleResolution": "bundler", 13 | "allowImportingTsExtensions": true, 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "moduleDetection": "force", 17 | "noEmit": true, 18 | "jsx": "react-jsx", 19 | 20 | /* Linting */ 21 | "strict": true, 22 | "noUnusedLocals": true, 23 | "noUnusedParameters": true, 24 | "noFallthroughCasesInSwitch": true 25 | }, 26 | "include": ["src"] 27 | } 28 | -------------------------------------------------------------------------------- /starters/material-ui-pigment-css-vite-ts/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": [], 3 | "references": [ 4 | { 5 | "path": "./tsconfig.app.json" 6 | }, 7 | { 8 | "path": "./tsconfig.node.json" 9 | } 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /starters/material-ui-pigment-css-vite-ts/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo", 5 | "skipLibCheck": true, 6 | "module": "ESNext", 7 | "moduleResolution": "bundler", 8 | "allowSyntheticDefaultImports": true, 9 | "strict": true, 10 | "noEmit": true 11 | }, 12 | "include": ["vite.config.ts"] 13 | } 14 | -------------------------------------------------------------------------------- /starters/material-ui-pigment-css-vite-ts/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite'; 2 | import react from '@vitejs/plugin-react'; 3 | import { pigment } from '@pigment-css/vite-plugin'; 4 | import { createTheme } from '@mui/material/styles'; 5 | 6 | const pigmentConfig = { 7 | theme: createTheme({ 8 | cssVariables: true, 9 | colorSchemes: { light: true, dark: true }, 10 | }), 11 | transformLibraries: ['@mui/material'], 12 | }; 13 | 14 | // https://vitejs.dev/config/ 15 | export default defineConfig({ 16 | plugins: [react(), pigment(pigmentConfig)], 17 | }); 18 | -------------------------------------------------------------------------------- /starters/material-ui-vite-ts/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /starters/material-ui-vite-ts/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 14 | Vite + Material UI + TS 15 | 16 | 17 |
18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /starters/material-ui-vite-ts/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "material-ui-vite-ts", 3 | "private": true, 4 | "version": "5.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "tsc && vite build", 9 | "preview": "vite preview" 10 | }, 11 | "dependencies": { 12 | "@emotion/react": "latest", 13 | "@emotion/styled": "latest", 14 | "@mui/icons-material": "latest", 15 | "@mui/material": "latest", 16 | "react": "latest", 17 | "react-dom": "latest" 18 | }, 19 | "devDependencies": { 20 | "@types/react": "latest", 21 | "@types/react-dom": "latest", 22 | "@vitejs/plugin-react": "latest", 23 | "typescript": "latest", 24 | "vite": "latest" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /starters/material-ui-vite-ts/src/main.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import * as ReactDOM from 'react-dom/client'; 3 | import { ThemeProvider } from '@mui/material/styles'; 4 | import { CssBaseline } from '@mui/material'; 5 | import theme from './theme'; 6 | import App from './App'; 7 | 8 | ReactDOM.createRoot(document.getElementById('root')!).render( 9 | 10 | 11 | 12 | 13 | 14 | , 15 | ); 16 | -------------------------------------------------------------------------------- /starters/material-ui-vite-ts/src/theme.tsx: -------------------------------------------------------------------------------- 1 | import { createTheme } from '@mui/material/styles'; 2 | import { red } from '@mui/material/colors'; 3 | 4 | // A custom theme for this app 5 | const theme = createTheme({ 6 | palette: { 7 | primary: { 8 | main: '#556cd6', 9 | }, 10 | secondary: { 11 | main: '#19857b', 12 | }, 13 | error: { 14 | main: red.A400, 15 | }, 16 | }, 17 | }); 18 | 19 | export default theme; 20 | -------------------------------------------------------------------------------- /starters/material-ui-vite-ts/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /starters/material-ui-vite-ts/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "useDefineForClassFields": true, 5 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 6 | "allowJs": false, 7 | "skipLibCheck": true, 8 | "esModuleInterop": false, 9 | "allowSyntheticDefaultImports": true, 10 | "strict": true, 11 | "forceConsistentCasingInFileNames": true, 12 | "module": "ESNext", 13 | "moduleResolution": "Node", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "noEmit": true, 17 | "jsx": "react-jsx" 18 | }, 19 | "include": ["src"], 20 | "references": [{ "path": "./tsconfig.node.json" }] 21 | } 22 | -------------------------------------------------------------------------------- /starters/material-ui-vite-ts/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "module": "ESNext", 5 | "moduleResolution": "Node", 6 | "allowSyntheticDefaultImports": true 7 | }, 8 | "include": ["vite.config.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /starters/material-ui-vite-ts/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite'; 2 | import react from '@vitejs/plugin-react'; 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }); 8 | -------------------------------------------------------------------------------- /starters/material-ui-vite/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | node_modules 5 | 6 | # misc 7 | .DS_Store 8 | dist 9 | dist-ssr 10 | *.local -------------------------------------------------------------------------------- /starters/material-ui-vite/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 13 | Vite + Material UI + TS 14 | 15 | 16 |
17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /starters/material-ui-vite/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "material-ui-vite", 3 | "version": "5.0.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "vite", 7 | "build": "vite build", 8 | "serve": "vite preview" 9 | }, 10 | "dependencies": { 11 | "@emotion/react": "latest", 12 | "@emotion/styled": "latest", 13 | "@mui/material": "latest", 14 | "react": "latest", 15 | "react-dom": "latest" 16 | }, 17 | "devDependencies": { 18 | "@vitejs/plugin-react": "latest", 19 | "vite": "latest" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /starters/material-ui-vite/src/App.jsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import Container from '@mui/material/Container'; 3 | import Typography from '@mui/material/Typography'; 4 | import Box from '@mui/material/Box'; 5 | import ProTip from './ProTip'; 6 | import Copyright from './Copyright'; 7 | 8 | export default function App() { 9 | return ( 10 | 11 | 12 | 13 | Material UI Vite.js example 14 | 15 | 16 | 17 | 18 | 19 | ); 20 | } 21 | -------------------------------------------------------------------------------- /starters/material-ui-vite/src/Copyright.jsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import Typography from '@mui/material/Typography'; 3 | import Link from '@mui/material/Link'; 4 | 5 | export default function Copyright() { 6 | return ( 7 | 14 | {'Copyright © '} 15 | 16 | Your Website 17 | {' '} 18 | {new Date().getFullYear()}. 19 | 20 | ); 21 | } 22 | -------------------------------------------------------------------------------- /starters/material-ui-vite/src/main.jsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { createRoot } from 'react-dom/client'; 3 | import CssBaseline from '@mui/material/CssBaseline'; 4 | import { ThemeProvider } from '@mui/material/styles'; 5 | import App from './App'; 6 | import theme from './theme'; 7 | 8 | const rootElement = document.getElementById('root'); 9 | const root = createRoot(rootElement); 10 | 11 | root.render( 12 | 13 | 14 | {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */} 15 | 16 | 17 | 18 | , 19 | , 20 | ); 21 | -------------------------------------------------------------------------------- /starters/material-ui-vite/src/theme.js: -------------------------------------------------------------------------------- 1 | import { createTheme } from '@mui/material/styles'; 2 | import { red } from '@mui/material/colors'; 3 | 4 | // Create a theme instance. 5 | const theme = createTheme({ 6 | palette: { 7 | primary: { 8 | main: '#556cd6', 9 | }, 10 | secondary: { 11 | main: '#19857b', 12 | }, 13 | error: { 14 | main: red.A400, 15 | }, 16 | }, 17 | }); 18 | 19 | export default theme; 20 | -------------------------------------------------------------------------------- /starters/material-ui-vite/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite'; 2 | import react from '@vitejs/plugin-react'; 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }); 8 | -------------------------------------------------------------------------------- /starters/mui-treasury-layout-nextjs/.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 | .yarn/install-state.gz 8 | 9 | # testing 10 | /coverage 11 | 12 | # next.js 13 | /.next/ 14 | /out/ 15 | 16 | # production 17 | /build 18 | 19 | # misc 20 | .DS_Store 21 | *.pem 22 | 23 | # debug 24 | npm-debug.log* 25 | yarn-debug.log* 26 | yarn-error.log* 27 | 28 | # local env files 29 | .env*.local 30 | 31 | # vercel 32 | .vercel 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | next-env.d.ts 37 | -------------------------------------------------------------------------------- /starters/mui-treasury-layout-nextjs/next.config.mjs: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = {}; 3 | 4 | export default nextConfig; 5 | -------------------------------------------------------------------------------- /starters/mui-treasury-layout-nextjs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "mui-treasury-layout-nextjs", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "@emotion/react": "latest", 13 | "@emotion/styled": "latest", 14 | "@mui/icons-material": "next", 15 | "@mui/material": "next", 16 | "@mui/material-nextjs": "next", 17 | "next": "latest", 18 | "react": "latest", 19 | "react-dom": "latest" 20 | }, 21 | "devDependencies": { 22 | "@types/node": "latest", 23 | "@types/react": "latest", 24 | "@types/react-dom": "latest", 25 | "typescript": "latest" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /starters/mui-treasury-layout-nextjs/src/app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/siriwatknp/mui-treasury/b4944cce07d7787d0f7e85f0d0fb07fb60cb872e/starters/mui-treasury-layout-nextjs/src/app/favicon.ico -------------------------------------------------------------------------------- /starters/mui-treasury-layout-nextjs/src/app/layout.tsx: -------------------------------------------------------------------------------- 1 | import type { Metadata } from "next"; 2 | import { Inter } from "next/font/google"; 3 | import MuiProvider from "./MuiProvider"; 4 | 5 | const inter = Inter({ subsets: ["latin"], variable: "--font-inter" }); 6 | 7 | export const metadata: Metadata = { 8 | title: "Create Next App", 9 | description: "Generated by create next app", 10 | }; 11 | 12 | export default function RootLayout({ 13 | children, 14 | }: Readonly<{ 15 | children: React.ReactNode; 16 | }>) { 17 | return ( 18 | 19 | 20 | {children} 21 | 22 | 23 | ); 24 | } 25 | -------------------------------------------------------------------------------- /starters/mui-treasury-layout-nextjs/src/mui-treasury/layout-core-v6/InsetAvoidingView.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { BoxProps } from "@mui/material/Box"; 3 | import { layoutClasses } from "./layoutClasses"; 4 | import { styled } from "./zero-styled"; 5 | 6 | const StyledInsetAvoidingView = styled("div")({ 7 | marginRight: "var(--InsetSidebarR-width)", 8 | marginLeft: "var(--InsetSidebarL-width)", 9 | }); 10 | 11 | const InsetAvoidingView = React.forwardRef( 12 | function InsetAvoidingView({ className, ...props }, ref) { 13 | return ( 14 | 20 | ); 21 | }, 22 | ); 23 | 24 | export default InsetAvoidingView; 25 | -------------------------------------------------------------------------------- /starters/mui-treasury-layout-nextjs/src/mui-treasury/layout-core-v6/zero-styled/index.ts: -------------------------------------------------------------------------------- 1 | export { styled } from "@mui/material/styles"; 2 | -------------------------------------------------------------------------------- /starters/mui-treasury-layout-nextjs/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "lib": ["dom", "dom.iterable", "esnext"], 4 | "allowJs": true, 5 | "skipLibCheck": true, 6 | "strict": true, 7 | "noEmit": true, 8 | "esModuleInterop": true, 9 | "module": "esnext", 10 | "moduleResolution": "bundler", 11 | "resolveJsonModule": true, 12 | "isolatedModules": true, 13 | "jsx": "preserve", 14 | "incremental": true, 15 | "plugins": [ 16 | { 17 | "name": "next" 18 | } 19 | ], 20 | "paths": { 21 | "@/*": ["./src/*"] 22 | } 23 | }, 24 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], 25 | "exclude": ["node_modules"] 26 | } 27 | -------------------------------------------------------------------------------- /starters/mui-treasury-layout-vite/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /starters/mui-treasury-layout-vite/eslint.config.js: -------------------------------------------------------------------------------- 1 | import js from '@eslint/js' 2 | import globals from 'globals' 3 | import reactHooks from 'eslint-plugin-react-hooks' 4 | import reactRefresh from 'eslint-plugin-react-refresh' 5 | import tseslint from 'typescript-eslint' 6 | 7 | export default tseslint.config({ 8 | extends: [js.configs.recommended, ...tseslint.configs.recommended], 9 | files: ['**/*.{ts,tsx}'], 10 | ignores: ['dist'], 11 | languageOptions: { 12 | ecmaVersion: 2020, 13 | globals: globals.browser, 14 | }, 15 | plugins: { 16 | 'react-hooks': reactHooks, 17 | 'react-refresh': reactRefresh, 18 | }, 19 | rules: { 20 | ...reactHooks.configs.recommended.rules, 21 | 'react-refresh/only-export-components': [ 22 | 'warn', 23 | { allowConstantExport: true }, 24 | ], 25 | }, 26 | }) 27 | -------------------------------------------------------------------------------- /starters/mui-treasury-layout-vite/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | MUI Treasury Layout v6 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /starters/mui-treasury-layout-vite/src/main.tsx: -------------------------------------------------------------------------------- 1 | import { StrictMode } from "react"; 2 | import { createRoot } from "react-dom/client"; 3 | import CssBaseline from "@mui/material/CssBaseline"; 4 | import { createTheme, ThemeProvider } from "@mui/material/styles"; 5 | import App from "./App.tsx"; 6 | 7 | const theme = createTheme({ 8 | cssVariables: true, 9 | colorSchemes: { light: true, dark: true }, 10 | }); 11 | 12 | createRoot(document.getElementById("root")!).render( 13 | 14 | 15 | 16 | 17 | 18 | , 19 | ); 20 | -------------------------------------------------------------------------------- /starters/mui-treasury-layout-vite/src/mui-treasury/layout-core-v6/InsetAvoidingView.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { BoxProps } from "@mui/material/Box"; 3 | import { layoutClasses } from "./layoutClasses"; 4 | import { styled } from "./zero-styled"; 5 | 6 | const StyledInsetAvoidingView = styled("div")({ 7 | marginRight: "var(--InsetSidebarR-width)", 8 | marginLeft: "var(--InsetSidebarL-width)", 9 | }); 10 | 11 | const InsetAvoidingView = React.forwardRef( 12 | function InsetAvoidingView({ className, ...props }, ref) { 13 | return ( 14 | 20 | ); 21 | }, 22 | ); 23 | 24 | export default InsetAvoidingView; 25 | -------------------------------------------------------------------------------- /starters/mui-treasury-layout-vite/src/mui-treasury/layout-core-v6/zero-styled/index.ts: -------------------------------------------------------------------------------- 1 | export { styled } from "@mui/material/styles"; 2 | -------------------------------------------------------------------------------- /starters/mui-treasury-layout-vite/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /starters/mui-treasury-layout-vite/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2020", 4 | "useDefineForClassFields": true, 5 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 6 | "module": "ESNext", 7 | "skipLibCheck": true, 8 | 9 | /* Bundler mode */ 10 | "moduleResolution": "bundler", 11 | "allowImportingTsExtensions": true, 12 | "isolatedModules": true, 13 | "moduleDetection": "force", 14 | "noEmit": true, 15 | "jsx": "react-jsx", 16 | 17 | /* Linting */ 18 | "strict": true, 19 | "noUnusedLocals": true, 20 | "noUnusedParameters": true, 21 | "noFallthroughCasesInSwitch": true 22 | }, 23 | "include": ["src"] 24 | } 25 | -------------------------------------------------------------------------------- /starters/mui-treasury-layout-vite/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": [], 3 | "references": [ 4 | { "path": "./tsconfig.app.json" }, 5 | { "path": "./tsconfig.node.json" } 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /starters/mui-treasury-layout-vite/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2022", 4 | "lib": ["ES2023"], 5 | "module": "ESNext", 6 | "skipLibCheck": true, 7 | 8 | /* Bundler mode */ 9 | "moduleResolution": "bundler", 10 | "allowImportingTsExtensions": true, 11 | "isolatedModules": true, 12 | "moduleDetection": "force", 13 | "noEmit": true, 14 | 15 | /* Linting */ 16 | "strict": true, 17 | "noUnusedLocals": true, 18 | "noUnusedParameters": true, 19 | "noFallthroughCasesInSwitch": true 20 | }, 21 | "include": ["vite.config.ts"] 22 | } 23 | -------------------------------------------------------------------------------- /starters/mui-treasury-layout-vite/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /starters/mui-treasury-playground/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /starters/mui-treasury-playground/eslint.config.js: -------------------------------------------------------------------------------- 1 | import js from '@eslint/js' 2 | import globals from 'globals' 3 | import reactHooks from 'eslint-plugin-react-hooks' 4 | import reactRefresh from 'eslint-plugin-react-refresh' 5 | import tseslint from 'typescript-eslint' 6 | 7 | export default tseslint.config({ 8 | extends: [js.configs.recommended, ...tseslint.configs.recommended], 9 | files: ['**/*.{ts,tsx}'], 10 | ignores: ['dist'], 11 | languageOptions: { 12 | ecmaVersion: 2020, 13 | globals: globals.browser, 14 | }, 15 | plugins: { 16 | 'react-hooks': reactHooks, 17 | 'react-refresh': reactRefresh, 18 | }, 19 | rules: { 20 | ...reactHooks.configs.recommended.rules, 21 | 'react-refresh/only-export-components': [ 22 | 'warn', 23 | { allowConstantExport: true }, 24 | ], 25 | }, 26 | }) 27 | -------------------------------------------------------------------------------- /starters/mui-treasury-playground/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | MUI Treasury Playground 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /starters/mui-treasury-playground/src/App.tsx: -------------------------------------------------------------------------------- 1 | import Box from "@mui/material/Box"; 2 | 3 | export default function App() { 4 | return ( 5 | 6 | 11 | Get blocks 12 | 13 | 14 | ); 15 | } 16 | -------------------------------------------------------------------------------- /starters/mui-treasury-playground/src/main.tsx: -------------------------------------------------------------------------------- 1 | import { StrictMode } from "react"; 2 | import { createRoot } from "react-dom/client"; 3 | import CssBaseline from "@mui/material/CssBaseline"; 4 | import { createTheme, ThemeProvider } from "@mui/material/styles"; 5 | import App from "./App.tsx"; 6 | 7 | const theme = createTheme({ 8 | cssVariables: { 9 | colorSchemeSelector: "class", 10 | }, 11 | colorSchemes: { light: true, dark: true }, 12 | }); 13 | 14 | createRoot(document.getElementById("root")!).render( 15 | 16 | 17 | 18 | 19 | 20 | , 21 | ); 22 | -------------------------------------------------------------------------------- /starters/mui-treasury-playground/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /starters/mui-treasury-playground/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2020", 4 | "useDefineForClassFields": true, 5 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 6 | "module": "ESNext", 7 | "skipLibCheck": true, 8 | 9 | /* Bundler mode */ 10 | "moduleResolution": "bundler", 11 | "allowImportingTsExtensions": true, 12 | "isolatedModules": true, 13 | "moduleDetection": "force", 14 | "noEmit": true, 15 | "jsx": "react-jsx", 16 | 17 | /* Linting */ 18 | "strict": true, 19 | "noUnusedLocals": true, 20 | "noUnusedParameters": true, 21 | "noFallthroughCasesInSwitch": true 22 | }, 23 | "include": ["src"] 24 | } 25 | -------------------------------------------------------------------------------- /starters/mui-treasury-playground/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": [], 3 | "references": [ 4 | { "path": "./tsconfig.app.json" }, 5 | { "path": "./tsconfig.node.json" } 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /starters/mui-treasury-playground/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2022", 4 | "lib": ["ES2023"], 5 | "module": "ESNext", 6 | "skipLibCheck": true, 7 | 8 | /* Bundler mode */ 9 | "moduleResolution": "bundler", 10 | "allowImportingTsExtensions": true, 11 | "isolatedModules": true, 12 | "moduleDetection": "force", 13 | "noEmit": true, 14 | 15 | /* Linting */ 16 | "strict": true, 17 | "noUnusedLocals": true, 18 | "noUnusedParameters": true, 19 | "noFallthroughCasesInSwitch": true 20 | }, 21 | "include": ["vite.config.ts"] 22 | } 23 | -------------------------------------------------------------------------------- /starters/mui-treasury-playground/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /tsconfig.js.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": true, 3 | "compilerOptions": { 4 | "jsx": "react", 5 | "module": "es2020", 6 | "target": "es2020", 7 | "lib": ["dom", "esnext"], 8 | "declaration": false, 9 | "allowJs": true, 10 | "esModuleInterop": true, 11 | "moduleResolution": "Node" 12 | }, 13 | "exclude": ["node_modules", "**/*.stories.*", "**/*.test.*", "**/*.spec.*"] 14 | } 15 | -------------------------------------------------------------------------------- /tsup.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'tsup'; 2 | 3 | export default defineConfig({ 4 | clean: true, 5 | dts: true, 6 | entry: ['src/index.ts'], 7 | format: ['esm'], 8 | sourcemap: true, 9 | target: 'esnext', 10 | outDir: 'dist', 11 | }); 12 | --------------------------------------------------------------------------------