@e-burgos/tucu-ui 2.0.2 → 2.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +96 -0
- package/README.md +51 -15
- package/components/blockchain/coin-listbox.d.ts +5 -1
- package/components/buttons/button/index.d.ts +9 -1
- package/components/common/index.d.ts +1 -0
- package/components/common/tooltip.d.ts +39 -0
- package/components/inputs/file-input.d.ts +2 -2
- package/components/typography/index.d.ts +10 -1
- package/demo/components/auto-props-table.d.ts +16 -0
- package/demo/components/dynamic-sections-page.d.ts +48 -0
- package/demo/components/index.d.ts +3 -0
- package/demo/components/prop-playground.d.ts +18 -0
- package/demo/components/table-of-contents.d.ts +4 -0
- package/demo/generated/props-metadata.d.ts +23 -0
- package/demo/index.d.ts +1 -0
- package/demo/pages/blockchain/BlockchainComponents.d.ts +1 -0
- package/demo/pages/components/UiComponents.d.ts +1 -0
- package/demo/pages/components/ui-components-sections/TooltipSection.d.ts +3 -0
- package/documentation/APIReferenceSection-B2oYdmby.js +1 -0
- package/{APIReferenceSection-DIjWDVUT.mjs → documentation/APIReferenceSection-h-8Utbap.js} +1 -1
- package/documentation/ActiveLinkSection-C95OfpHr.js +22 -0
- package/documentation/ActiveLinkSection-CdXQGIsJ.js +81 -0
- package/{AdvancedColorSystemSection-CPywSlwi.mjs → documentation/AdvancedColorSystemSection-BQshRXTc.js} +1 -1
- package/documentation/AdvancedColorSystemSection-BtpxH8Mu.js +17 -0
- package/documentation/AdvancedFeaturesSection-BdL5enY8.js +1 -0
- package/{AdvancedFeaturesSection-BZli4uQf.mjs → documentation/AdvancedFeaturesSection-DNsHjabp.js} +1 -1
- package/{AdvancedFeaturesSection-CfxJrpgL.mjs → documentation/AdvancedFeaturesSection-Ht5TTHY8.js} +1 -1
- package/documentation/AdvancedFeaturesSection-VcHwYejS.js +1 -0
- package/{AlertSection-CrmVofrn.mjs → documentation/AlertSection-CkPDRBrP.js} +28 -73
- package/{AlertSection-BC888Ug4.js → documentation/AlertSection-ZNoVAqQG.js} +2 -2
- package/documentation/AnchorLinkSection-BwEq_xXD.js +67 -0
- package/documentation/AnchorLinkSection-Db8dVTL1.js +19 -0
- package/{ArchitecturalPatternsComparisonSection-Bi55jiL7.mjs → documentation/ArchitecturalPatternsComparisonSection-0JvWXvga.js} +1 -1
- package/documentation/ArchitecturalPatternsComparisonSection-_ICdjaay.js +31 -0
- package/{ArchitectureOverviewSection-Da61yY3U.mjs → documentation/ArchitectureOverviewSection-A86tJq4O.js} +1 -1
- package/documentation/ArchitectureOverviewSection-J96NVKkD.js +1 -0
- package/documentation/AuthorCardSection-BSX9oAo1.js +81 -0
- package/documentation/AuthorCardSection-CYkh23Xg.js +17 -0
- package/documentation/AvatarSection-BvtKvbAp.js +18 -0
- package/documentation/AvatarSection-LVqlXwpv.js +91 -0
- package/documentation/BadgeSection-CeyBqNzE.js +48 -0
- package/{BadgeSection-CbWNwtHa.mjs → documentation/BadgeSection-wnv6WJoJ.js} +33 -90
- package/documentation/BasicTableSection-DHR7wxMf.js +103 -0
- package/documentation/BasicTableSection-Djqd7GTc.js +35 -0
- package/{BasicUsageSection-DzJXFb3O.js → documentation/BasicUsageSection-CAOyX6Rh.js} +1 -1
- package/{BasicUsageSection-Cqw9mQqJ.mjs → documentation/BasicUsageSection-RB5uqmJE.js} +1 -1
- package/documentation/BestPracticesSection-7oPmBTjr.js +1 -0
- package/{BestPracticesSection-Pnux3-yB.mjs → documentation/BestPracticesSection-BAi4u6sT.js} +1 -1
- package/documentation/BestPracticesSection-C72mSxPs.js +1 -0
- package/documentation/BestPracticesSection-CCUAVucV.js +1 -0
- package/{BestPracticesSection-qddzHZ3e.mjs → documentation/BestPracticesSection-CfKUd_V5.js} +1 -1
- package/{BestPracticesSection-BbK7lnbj.mjs → documentation/BestPracticesSection-CrduKU11.js} +1 -1
- package/documentation/BestPracticesSection-D2ahvfz_.js +1 -0
- package/documentation/BestPracticesSection-DO-w9jZN.js +1 -0
- package/{BestPracticesSection-BuiTuJJa.mjs → documentation/BestPracticesSection-DVOUUyCP.js} +1 -1
- package/{BestPracticesSection-CeDkvrdJ.mjs → documentation/BestPracticesSection-De_JKhUW.js} +1 -1
- package/{BestPracticesSection-rjxGw6K9.mjs → documentation/BestPracticesSection-Dki1wap5.js} +1 -1
- package/documentation/BestPracticesSection-Dlv7tr8A.js +1 -0
- package/{BestPracticesSection-BVDNKve6.mjs → documentation/BestPracticesSection-FNEhFmPF.js} +1 -1
- package/documentation/BestPracticesSection-Y7WVzfHX.js +1 -0
- package/{BorderRadiusSection-DMscu-5M.mjs → documentation/BorderRadiusSection-B7LfzLmt.js} +1 -1
- package/documentation/BorderRadiusSection-CuLZQqX2.js +1 -0
- package/documentation/ButtonDripSection-BaIO6Rop.js +113 -0
- package/documentation/ButtonDripSection-Rv6xpiKS.js +21 -0
- package/documentation/ButtonLoaderSection-Bkzh89oP.js +30 -0
- package/{ButtonLoaderSection-5Yu15Qui.mjs → documentation/ButtonLoaderSection-DGVKD9wI.js} +55 -27
- package/documentation/CardContainerSection-DLXPs9aW.js +21 -0
- package/documentation/CardContainerSection-t72sN0zL.js +63 -0
- package/documentation/CardTitleSection-BEHmdfF6.js +19 -0
- package/documentation/CardTitleSection-CTcugicF.js +74 -0
- package/documentation/CarouselCardsSection-ByrjTL9x.js +147 -0
- package/documentation/CarouselCardsSection-DtCx9w5B.js +37 -0
- package/documentation/CarouselImageSection-BDMpTyte.js +152 -0
- package/documentation/CarouselImageSection-CknDEAfU.js +38 -0
- package/documentation/CarouselSection-Cq5jgcQD.js +24 -0
- package/documentation/CarouselSection-hLHYsvmh.js +99 -0
- package/{CheckboxSection-CywmKcfM.mjs → documentation/CheckboxSection-CUQtdDzh.js} +29 -113
- package/documentation/CheckboxSection-D8FFt0Os.js +26 -0
- package/{CodeExamplesSection-DiNpllP9.mjs → documentation/CodeExamplesSection-2v_8YfcX.js} +1 -1
- package/{CodeExamplesSection-TOAvzng7.js → documentation/CodeExamplesSection-Dp2gzpx3.js} +1 -1
- package/documentation/CoinCardSection-1WqRM1ph.js +13 -0
- package/{CoinCardSection-CqHPetPK.mjs → documentation/CoinCardSection-CPsesOWx.js} +23 -101
- package/documentation/CoinInfoCardSection-B562WBTv.js +120 -0
- package/documentation/CoinInfoCardSection-Dk6J8sls.js +12 -0
- package/documentation/CoinListBoxSection-Cu1MDV2Y.js +24 -0
- package/documentation/CoinListBoxSection-DzyzZBwk.js +106 -0
- package/documentation/CollapseSection-7-rrT_DY.js +27 -0
- package/{CollapseSection-CN8kEU1q.mjs → documentation/CollapseSection-Bym6R86D.js} +20 -60
- package/documentation/CollectionCardSection-BPILGSjR.js +17 -0
- package/documentation/CollectionCardSection-Cowt-8gl.js +61 -0
- package/documentation/CollectionSelectListSection-BUyInNdh.js +14 -0
- package/documentation/CollectionSelectListSection-C1hTywH1.js +60 -0
- package/documentation/ColorCustomizationSection-DirQ1xkR.js +1 -0
- package/{ColorCustomizationSection-D3XqLRTg.mjs → documentation/ColorCustomizationSection-fpbQFBeg.js} +1 -1
- package/documentation/ColorSystemSection-BIiffohC.js +1 -0
- package/{ColorSystemSection-Bd5DQT9I.mjs → documentation/ColorSystemSection-BTPZDmaU.js} +1 -1
- package/{CommonErrorsSection-zDPJ6FaL.mjs → documentation/CommonErrorsSection-BVjBH-q3.js} +1 -1
- package/documentation/CommonErrorsSection-DqohMJDt.js +1 -0
- package/documentation/ComponentAnatomySection-B6L2nQg2.js +1 -0
- package/{ComponentAnatomySection-CgEKcT_J.mjs → documentation/ComponentAnatomySection-GUman0lW.js} +1 -1
- package/documentation/ComponentStatusSection-BPatrERs.js +1 -0
- package/{ComponentStatusSection-D2f_P7g7.mjs → documentation/ComponentStatusSection-DS8Kmh6W.js} +1 -1
- package/documentation/CurrencySwapIconsSection-B_qLwzXO.js +50 -0
- package/documentation/CurrencySwapIconsSection-WWqd6aBI.js +7 -0
- package/{CustomColorPaletteSection-Dm0mCSjh.mjs → documentation/CustomColorPaletteSection-Beh-1TnY.js} +1 -1
- package/{CustomColorPaletteSection-qptATYNr.js → documentation/CustomColorPaletteSection-DHw4bInM.js} +1 -1
- package/{CustomIconsSection-Bq0kNytf.mjs → documentation/CustomIconsSection-BnJuOM-H.js} +1 -1
- package/documentation/CustomIconsSection-CSRr6wkJ.js +3 -0
- package/{DefiAppLogoSection-CJDd6Q3u.mjs → documentation/DefiAppLogoSection-BKoj5nMS.js} +1 -1
- package/documentation/DefiAppLogoSection-BlgJ2b-2.js +36 -0
- package/documentation/DesignPrinciplesSection-DEO6bctH.js +1 -0
- package/{DesignPrinciplesSection-BSGshMjS.mjs → documentation/DesignPrinciplesSection-sziQNoBU.js} +1 -1
- package/documentation/DrawerSection-Bl44QTjH.js +145 -0
- package/documentation/DrawerSection-Ddkq7twy.js +41 -0
- package/{DynamicRoutesSection-CCuRhQAn.mjs → documentation/DynamicRoutesSection-CwIKExBG.js} +1 -1
- package/{DynamicRoutesSection-SDAbSJi8.js → documentation/DynamicRoutesSection-DzYD6DrX.js} +1 -1
- package/{FileInputSection-CbkYToil.mjs → documentation/FileInputSection-2C2qHF7f.js} +1 -1
- package/documentation/FileInputSection-agGxZYT7.js +65 -0
- package/{FileStructureSection-CRrFMVhl.js → documentation/FileStructureSection-C-Z_tkDL.js} +1 -1
- package/{FileStructureSection-DbsBkIRn.mjs → documentation/FileStructureSection-CSNiAHS-.js} +1 -1
- package/{FormComponentsSection-B4exCVCM.mjs → documentation/FormComponentsSection-B021OPBW.js} +1 -1
- package/documentation/FormComponentsSection-CRsooWtI.js +1 -0
- package/{FormMethodsSection-B9J5DYrQ.mjs → documentation/FormMethodsSection-2ea19wxr.js} +1 -1
- package/{FormMethodsSection-Dt5MZUzm.js → documentation/FormMethodsSection-CUrQGm-O.js} +1 -1
- package/documentation/HamburgerSection-BzFh3gZq.js +99 -0
- package/documentation/HamburgerSection-CWAXi4d_.js +18 -0
- package/{HookCategoriesSection-Cyjqehnj.mjs → documentation/HookCategoriesSection-DZzq6nNi.js} +1 -1
- package/documentation/HookCategoriesSection-Qm1BoU9x.js +1 -0
- package/{HookDocumentationSection-D-c7nlX-.mjs → documentation/HookDocumentationSection-BMC5FTpz.js} +1 -1
- package/{HookDocumentationSection-C5ww47uY.js → documentation/HookDocumentationSection-DT_dicnF.js} +1 -1
- package/documentation/HookFeaturesSection-B08odkSW.js +1 -0
- package/{HookFeaturesSection-CupYAK3p.mjs → documentation/HookFeaturesSection-_rCA_IiX.js} +1 -1
- package/{IconArchitectureSection-s-4JhiKA.mjs → documentation/IconArchitectureSection-BP5StoRr.js} +1 -1
- package/documentation/IconArchitectureSection-Ch1nPf7C.js +1 -0
- package/documentation/IconSizingGuideSection-21B7NciU.js +1 -0
- package/{IconSizingGuideSection-DREOxtrp.mjs → documentation/IconSizingGuideSection-B39zPKV2.js} +1 -1
- package/{IconSystemAPISection-CaJf4Isu.mjs → documentation/IconSystemAPISection-BLCe41I8.js} +1 -1
- package/documentation/IconSystemAPISection-_5fho7rM.js +1 -0
- package/documentation/IconSystemBenefitsSection-BI6uLx8V.js +1 -0
- package/{IconSystemBenefitsSection-KOplDPHG.mjs → documentation/IconSystemBenefitsSection-DCAdQe8N.js} +1 -1
- package/documentation/ImageSection-DX_pLrem.js +80 -0
- package/documentation/ImageSection-Dl5z0QeO.js +514 -0
- package/{ImplementationExamplesSection-CMVDBs9I.js → documentation/ImplementationExamplesSection-B__bLnap.js} +1 -1
- package/{ImplementationExamplesSection-De_Yc_g2.mjs → documentation/ImplementationExamplesSection-DG0Qxz66.js} +1 -1
- package/documentation/ImplementationGuidelinesSection-B3ThgoR2.js +1 -0
- package/{ImplementationGuidelinesSection-DToo7aHT.mjs → documentation/ImplementationGuidelinesSection-Dhr_uqy_.js} +1 -1
- package/{ImplementationStatusSection-DzA19XiV.mjs → documentation/ImplementationStatusSection-CJTb6Pgx.js} +1 -1
- package/documentation/ImplementationStatusSection-D0v0YMVu.js +1 -0
- package/documentation/ImplementedFeaturesSection-DP4JlgYL.js +1 -0
- package/{ImplementedFeaturesSection-zsrQ6uaD.mjs → documentation/ImplementedFeaturesSection-uG_KGhJp.js} +1 -1
- package/documentation/InputSearcherSection-BB8KSV5W.js +32 -0
- package/{InputSearcherSection-85Q8Pmz1.mjs → documentation/InputSearcherSection-BOs_mYxO.js} +20 -98
- package/documentation/InputSection-Co8yrH8O.js +37 -0
- package/documentation/InputSection-DlsRR1br.js +159 -0
- package/{KeyboardNavigationSection-TeJEhNAl.mjs → documentation/KeyboardNavigationSection-B5NeU2Ls.js} +5 -5
- package/documentation/KeyboardNavigationSection-B8kjIrpD.js +1 -0
- package/{LayoutPrinciplesSection-JNkH11Gf.mjs → documentation/LayoutPrinciplesSection-Cv2qVdah.js} +1 -1
- package/documentation/LayoutPrinciplesSection-ZcukszdJ.js +1 -0
- package/{LayoutTypesSection-DOdsew0H.mjs → documentation/LayoutTypesSection-CdWhbb-e.js} +1 -1
- package/documentation/LayoutTypesSection-Db8Phsh5.js +1 -0
- package/documentation/ListContainerSection-E2nxNQM9.js +38 -0
- package/documentation/ListContainerSection-g8e36trw.js +125 -0
- package/documentation/ListItemSection-BKMlFb_B.js +134 -0
- package/documentation/ListItemSection-CGRWmUNh.js +36 -0
- package/{LiveDemoSection-CS5HLe6l.mjs → documentation/LiveDemoSection-Bi6TUjps.js} +1 -1
- package/documentation/LiveDemoSection-CNS2AHrx.js +1 -0
- package/{LiveDemonstrationsSection-CP5aPXzg.js → documentation/LiveDemonstrationsSection-8IzxP_-q.js} +1 -1
- package/{LiveDemonstrationsSection-EYb11Zvv.mjs → documentation/LiveDemonstrationsSection-BTZH9yJ4.js} +16 -16
- package/documentation/LivePriceFeedSection-BETZCxkR.js +97 -0
- package/documentation/LivePriceFeedSection-xqYzz2UJ.js +20 -0
- package/documentation/LoaderSection-Ch955wVE.js +98 -0
- package/documentation/LoaderSection-D6oWK2Bd.js +22 -0
- package/{LogoSection-CiWXGv0N.mjs → documentation/LogoSection-DihjtnI3.js} +59 -111
- package/documentation/LogoSection-DwxPyRYp.js +100 -0
- package/{LucideIconsSection-tkVj8_2g.mjs → documentation/LucideIconsSection-UTZdlP4l.js} +1 -1
- package/documentation/LucideIconsSection-jyTOH9vA.js +1 -0
- package/{MFESupportSection-Dn9acP8Z.mjs → documentation/MFESupportSection-CL4XaGSc.js} +1 -1
- package/{MFESupportSection-aHdgyVxJ.js → documentation/MFESupportSection-D5-xNtty.js} +1 -1
- package/documentation/MenuItemsGuideSection-B4A_sWeX.js +126 -0
- package/{MenuItemsGuideSection-Bbcaz7Qq.mjs → documentation/MenuItemsGuideSection-CubWhWBg.js} +1 -1
- package/documentation/ModalSection-BLJU61yb.js +122 -0
- package/documentation/ModalSection-DgxQhNE3.js +29 -0
- package/documentation/NFTGridSection-CUDnvifG.js +11 -0
- package/documentation/NFTGridSection-DMCh4Qbs.js +56 -0
- package/{NestedRoutesSection-BA_BhCRx.mjs → documentation/NestedRoutesSection-DG9vKpBw.js} +1 -1
- package/{NestedRoutesSection-C8EbKdrd.js → documentation/NestedRoutesSection-ekOYspAL.js} +1 -1
- package/documentation/NotificationCardSection-Db-RrZ16.js +28 -0
- package/documentation/NotificationCardSection-cE-g6SEH.js +122 -0
- package/documentation/PanelActionCardSection-Bjxx99WR.js +28 -0
- package/documentation/PanelActionCardSection-CL8Moio7.js +106 -0
- package/{PanelCardSection-B871bX17.mjs → documentation/PanelCardSection-Ci9bDcSV.js} +14 -48
- package/documentation/PanelCardSection-wO7ZobnL.js +15 -0
- package/documentation/ParamTabSection-Bi80ttg5.js +92 -0
- package/{ParamTabSection-CDuKVp-d.mjs → documentation/ParamTabSection-DzCeT2jc.js} +105 -145
- package/{PinCodeSection-DIDL-bKc.mjs → documentation/PinCodeSection-BteNwNGD.js} +8 -104
- package/documentation/PinCodeSection-DwXlWFc3.js +22 -0
- package/documentation/ProgressbarSection-B1eIO6-t.js +144 -0
- package/documentation/ProgressbarSection-ibpTAyXQ.js +21 -0
- package/documentation/RadioGroupSection-CnheWpBr.js +27 -0
- package/documentation/RadioGroupSection-q1w7Zcjw.js +192 -0
- package/documentation/RadioSection-DSoD7CLU.js +130 -0
- package/documentation/RadioSection-V0sD9FtI.js +23 -0
- package/{RevealContentSection-BtBQGgOW.mjs → documentation/RevealContentSection-BK8j8yQ6.js} +26 -54
- package/documentation/RevealContentSection-Cm9Ego3J.js +21 -0
- package/{RouteConfigurationSection-B9FbX-yc.mjs → documentation/RouteConfigurationSection-JaOww2mF.js} +1 -1
- package/{RouteConfigurationSection-BjLpTMvZ.js → documentation/RouteConfigurationSection-PdMrY6xs.js} +1 -1
- package/{ScrollToTopSection-CCUPxMPa.mjs → documentation/ScrollToTopSection-DktmPBqU.js} +43 -95
- package/documentation/ScrollToTopSection-_W3FULOG.js +36 -0
- package/documentation/ScrollbarSection-94c3rkLU.js +29 -0
- package/documentation/ScrollbarSection-Dhqk4MAL.js +105 -0
- package/documentation/SelectSection-CyUvjkal.js +173 -0
- package/documentation/SelectSection-RN83Da8P.js +20 -0
- package/documentation/SettingsPanelSection-DysL_TWy.js +1 -0
- package/{SettingsPanelSection-B37qv2jK.mjs → documentation/SettingsPanelSection-oUsf1rjG.js} +1 -1
- package/documentation/ShadowsSection-COIXfeUB.js +1 -0
- package/{ShadowsSection-C3DcBcY5.mjs → documentation/ShadowsSection-yPSwgkIh.js} +1 -1
- package/documentation/SidebarMenuSection-CF65NgkO.js +46 -0
- package/{SidebarMenuSection-Cl_wfXqr.mjs → documentation/SidebarMenuSection-DoBy0kgz.js} +9 -69
- package/documentation/SidebarSection-C8M_6SXm.js +62 -0
- package/documentation/SidebarSection-D0mx7yBu.js +25 -0
- package/documentation/SizingSection-CFHOHeOX.js +1 -0
- package/{SizingSection-Vvs1NCZz.mjs → documentation/SizingSection-D0JMCl2M.js} +1 -1
- package/documentation/SkeletonSection-CdftMoZS.js +204 -0
- package/documentation/SkeletonSection-l0H8ysMz.js +52 -0
- package/{SpacingSystemSection-C_0ZSDNk.mjs → documentation/SpacingSystemSection-CK6jg9jH.js} +1 -1
- package/documentation/SpacingSystemSection-DDLUwi7M.js +1 -0
- package/{SpinnerSection-DxoqjAzp.mjs → documentation/SpinnerSection-CBRlzSBA.js} +18 -45
- package/documentation/SpinnerSection-wKxUxjQH.js +17 -0
- package/{StandaloneAppSection-BwwRlqWj.mjs → documentation/StandaloneAppSection-3DzBLpFt.js} +1 -1
- package/{StandaloneAppSection-KTxvQkdo.js → documentation/StandaloneAppSection-4dc8jrdZ.js} +1 -1
- package/documentation/SwitchSection-BlYqsAPJ.js +20 -0
- package/documentation/SwitchSection-vGxo1SYH.js +152 -0
- package/documentation/SystemOverviewSection-1lSFqKae.js +1 -0
- package/{SystemOverviewSection-D3W_SpON.mjs → documentation/SystemOverviewSection-BtnucKsr.js} +1 -1
- package/{TabSection-Vjm9QogR.mjs → documentation/TabSection-B7wJPrFH.js} +82 -142
- package/documentation/TabSection-BTGIy9BT.js +84 -0
- package/documentation/TabSelectSection-B8ohYHOK.js +100 -0
- package/{TabSelectSection-DKuGHY6b.mjs → documentation/TabSelectSection-DNb8f96f.js} +41 -69
- package/{TailwindConfigSection-BH8ioMgX.mjs → documentation/TailwindConfigSection-dxsLjDuJ.js} +1 -1
- package/documentation/TailwindConfigSection-xK7ymNHB.js +19 -0
- package/documentation/TestingSection-D97U6rzs.js +12 -0
- package/{TestingSection-BKbTYqsd.mjs → documentation/TestingSection-DqHtOy40.js} +1 -1
- package/{TextareaSection-COE_iT0W.mjs → documentation/TextareaSection-LoLfm6tE.js} +27 -105
- package/documentation/TextareaSection-cq-8Cb4V.js +21 -0
- package/{ThemeArchitectureSection-D8dWZO_Q.mjs → documentation/ThemeArchitectureSection-D3s-iFek.js} +1 -1
- package/documentation/ThemeArchitectureSection-kTqICQZj.js +1 -0
- package/documentation/ThemeConfigurationSection-CIorDmNk.js +1 -0
- package/{ThemeConfigurationSection-eifonrlB.mjs → documentation/ThemeConfigurationSection-DKZz_tZ0.js} +1 -1
- package/{ThemeHooksSection-BYmhg3xO.mjs → documentation/ThemeHooksSection-C0sZ6k8a.js} +1 -1
- package/documentation/ThemeHooksSection-D-mw-Fbu.js +1 -0
- package/{ThemeProviderIntegrationSection-DCnGD4F4.mjs → documentation/ThemeProviderIntegrationSection-BfBFuERd.js} +1 -1
- package/{ThemeProviderIntegrationSection-YpM0GKJx.js → documentation/ThemeProviderIntegrationSection-macU3-6q.js} +1 -1
- package/documentation/ThemeProviderRequiredSection-BRbwv1wN.js +1 -0
- package/{ThemeProviderRequiredSection-zYv4GrBp.mjs → documentation/ThemeProviderRequiredSection-CqDOwaWl.js} +1 -1
- package/{ThemeProviderSection-CG6ROKoP.mjs → documentation/ThemeProviderSection-C8LEFOeB.js} +1 -1
- package/documentation/ThemeProviderSection-CTuv8EQA.js +1 -0
- package/{ToastSection-C0_N6VoS.mjs → documentation/ToastSection-DEW_viBi.js} +1 -1
- package/documentation/ToastSection-DxGzUQ0D.js +37 -0
- package/documentation/ToggleBarSection-CYRd5M5m.js +127 -0
- package/documentation/ToggleBarSection-CtsOxytE.js +37 -0
- package/documentation/TooltipSection-Cp-pLWvr.js +62 -0
- package/documentation/TooltipSection-TVehrFpU.js +186 -0
- package/documentation/TopupButtonSection-Be5-YogI.js +100 -0
- package/documentation/TopupButtonSection-ByokZIdo.js +24 -0
- package/documentation/TransactionInfoSection-BhNuZ4JD.js +65 -0
- package/documentation/TransactionInfoSection-Q0JJsVQv.js +16 -0
- package/documentation/TucuUiLogoSection-98Bljk0Z.js +26 -0
- package/{TucuUiLogoSection-DKvsi70K.mjs → documentation/TucuUiLogoSection-BDLv3mOn.js} +18 -51
- package/documentation/TypographySection-Ck4yMFUP.js +32 -0
- package/documentation/TypographySection-CkyzEMXb.js +1 -0
- package/documentation/TypographySection-DQEpFmuX.js +144 -0
- package/{TypographySection-BOk8SfCz.mjs → documentation/TypographySection-DkMPevk3.js} +1 -1
- package/{UsageExamplesSection-JpH1ZsJd.mjs → documentation/UsageExamplesSection-Cbl0byP_.js} +1 -1
- package/{UsageExamplesSection-relnO7-Z.js → documentation/UsageExamplesSection-rqFkSypt.js} +1 -1
- package/{UsingThemeSystemSection-B2fO1JsG.js → documentation/UsingThemeSystemSection-CEXOimAv.js} +1 -1
- package/{UsingThemeSystemSection-BJuOT6-w.mjs → documentation/UsingThemeSystemSection-ZxdD8koK.js} +1 -1
- package/{ValidationSystemSection-CjHwm2jX.js → documentation/ValidationSystemSection-DN97qk1X.js} +1 -1
- package/{ValidationSystemSection-DE2P4pwz.mjs → documentation/ValidationSystemSection-Dvtm4jJR.js} +1 -1
- package/{WCAGPrinciplesSection-DtgaO2Ff.mjs → documentation/WCAGPrinciplesSection-CgrjWEgm.js} +1 -1
- package/documentation/WCAGPrinciplesSection-ichWLxLa.js +1 -0
- package/index-D874Kozv.js +1060 -0
- package/{index-HwvOEWI7.mjs → index-DsiBIFwo.js} +22839 -16736
- package/index.css +1 -1
- package/index.js +1 -1
- package/index.mjs +274 -266
- package/package.json +2 -7
- package/themes/hooks/use-theme.d.ts +12 -56
- package/themes/router/components/standalone-app-routes-provider.d.ts +2 -0
- package/APIReferenceSection-DF3LCCD1.js +0 -1
- package/ActiveLinkSection-C2PP3Dyu.js +0 -22
- package/ActiveLinkSection-Dzpmkfhm.mjs +0 -120
- package/AdvancedColorSystemSection-8NfaB6r1.js +0 -17
- package/AdvancedFeaturesSection-DPK2To5I.js +0 -1
- package/AdvancedFeaturesSection-De9GDStL.js +0 -1
- package/AnchorLinkSection-BTuB_YBa.js +0 -19
- package/AnchorLinkSection-CCkTECg0.mjs +0 -94
- package/ArchitecturalPatternsComparisonSection-B5COBP19.js +0 -31
- package/ArchitectureOverviewSection-BQKgZIBU.js +0 -1
- package/AuthorCardSection-C0dYJSA1.js +0 -17
- package/AuthorCardSection-CG40iNxW.mjs +0 -110
- package/AvatarSection-BTMM6CPN.mjs +0 -137
- package/AvatarSection-MnUb7ZXH.js +0 -18
- package/BadgeSection-5feW_z0m.js +0 -48
- package/BasicTableSection-ej1eiWQz.mjs +0 -169
- package/BasicTableSection-xPn-5tii.js +0 -35
- package/BestPracticesSection-BHWoZvr5.js +0 -1
- package/BestPracticesSection-BT37TMGe.js +0 -1
- package/BestPracticesSection-BuqjVn61.js +0 -1
- package/BestPracticesSection-BwQfJOxT.js +0 -1
- package/BestPracticesSection-CqQDeICs.js +0 -1
- package/BestPracticesSection-DWslPqP2.js +0 -1
- package/BestPracticesSection-Dq3ZfFtY.js +0 -1
- package/BorderRadiusSection-D4aIov-Q.js +0 -1
- package/ButtonDripSection-B2OYDs-g.mjs +0 -99
- package/ButtonDripSection-BP9_mXYh.js +0 -12
- package/ButtonLoaderSection-7LI8Ipla.js +0 -30
- package/CardContainerSection-B0PngoTv.js +0 -21
- package/CardContainerSection-BR0nQ-m-.mjs +0 -99
- package/CardTitleSection-BwS-h9Sv.js +0 -19
- package/CardTitleSection-DmdscTs-.mjs +0 -113
- package/CarouselCardsSection-CiwhRtT2.mjs +0 -207
- package/CarouselCardsSection-DIAqv3av.js +0 -37
- package/CarouselImageSection-B-ErH8F4.js +0 -38
- package/CarouselImageSection-CjLoZibg.mjs +0 -218
- package/CarouselSection-CB52BRrB.js +0 -24
- package/CarouselSection-DTkAozR4.mjs +0 -159
- package/CheckboxSection-BqVq2KM2.js +0 -26
- package/CoinCardSection-B-Ge5sAn.js +0 -13
- package/CoinInfoCardSection-C31PQ3bp.js +0 -12
- package/CoinInfoCardSection-qFJPBj7d.mjs +0 -174
- package/CoinListBoxSection-CM2hUpHv.js +0 -24
- package/CoinListBoxSection-Dhzn_GpU.mjs +0 -219
- package/CollapseSection-BNmmPgyq.js +0 -27
- package/CollectionCardSection-BUnxheYB.mjs +0 -103
- package/CollectionCardSection-CDX3K_hS.js +0 -17
- package/CollectionSelectListSection-BBhwVYHo.mjs +0 -102
- package/CollectionSelectListSection-CDi6hp8v.js +0 -14
- package/ColorCustomizationSection-B-bUSAJ0.js +0 -1
- package/ColorSystemSection-K2zgxmJy.js +0 -1
- package/CommonErrorsSection-BrMGAma1.js +0 -1
- package/ComponentAnatomySection-DbaNcJeJ.js +0 -1
- package/ComponentStatusSection-zM1sy0yl.js +0 -1
- package/CurrencySwapIconsSection-B8dwSBG9.js +0 -7
- package/CurrencySwapIconsSection-BzuK85V_.mjs +0 -92
- package/CustomIconsSection-C8eB4pR6.js +0 -3
- package/DefiAppLogoSection-Drk-a_Ma.js +0 -36
- package/DesignPrinciplesSection-DdxTvVbZ.js +0 -1
- package/DrawerSection-BxPeS4m6.js +0 -41
- package/DrawerSection-DjS8SGBf.mjs +0 -188
- package/FileInputSection-BQXToQMH.js +0 -65
- package/FormComponentsSection-_y9uIqWT.js +0 -1
- package/HamburgerSection-CddGkkvx.js +0 -18
- package/HamburgerSection-v1NZnz0U.mjs +0 -108
- package/HookCategoriesSection-DKqqeSQ9.js +0 -1
- package/HookFeaturesSection-CJa84RjB.js +0 -1
- package/IconArchitectureSection-VZ0XfWpq.js +0 -1
- package/IconSizingGuideSection-BRM-oiM5.js +0 -1
- package/IconSystemAPISection-DzCBJPL0.js +0 -1
- package/IconSystemBenefitsSection-CDX-jXus.js +0 -1
- package/ImageSection-B8kYkUY-.mjs +0 -612
- package/ImageSection-CW01AmUK.js +0 -80
- package/ImplementationGuidelinesSection-CrmCO0ar.js +0 -1
- package/ImplementationStatusSection-BzZZNjVN.js +0 -1
- package/ImplementedFeaturesSection-C8ZcF-n1.js +0 -1
- package/InputSearcherSection-Cz_TpQw_.js +0 -32
- package/InputSection-DMpbHqfq.mjs +0 -265
- package/InputSection-DY5rY39C.js +0 -37
- package/KeyboardNavigationSection-BR-828Id.js +0 -1
- package/LayoutPrinciplesSection-DZPMQ6js.js +0 -1
- package/LayoutTypesSection-BKj6ULJR.js +0 -1
- package/ListContainerSection-D6JcQxtm.mjs +0 -191
- package/ListContainerSection-fLuB70GD.js +0 -38
- package/ListItemSection-C9RJbdyS.mjs +0 -191
- package/ListItemSection-C__vIdDy.js +0 -36
- package/LiveDemoSection-B1LQT5SO.js +0 -1
- package/LivePriceFeedSection-BcGUAKqZ.js +0 -20
- package/LivePriceFeedSection-BxqCzUcr.mjs +0 -187
- package/LoaderSection-D67mOHL-.mjs +0 -143
- package/LoaderSection-DSK6opoR.js +0 -22
- package/LogoSection-C8vr1igX.js +0 -100
- package/LucideIconsSection-BPElcsAJ.js +0 -1
- package/MenuItemsGuideSection-C7bXy-ZF.js +0 -126
- package/ModalSection-BMri9S17.js +0 -29
- package/ModalSection-C8SbNNiU.mjs +0 -158
- package/NFTGridSection-DuyG1cAr.js +0 -11
- package/NFTGridSection-SVR5jWEu.mjs +0 -122
- package/NotificationCardSection-PmY-KH6P.js +0 -28
- package/NotificationCardSection-roBjfTMH.mjs +0 -153
- package/PanelActionCardSection-De2IwJLg.js +0 -28
- package/PanelActionCardSection-Gg3BzbkY.mjs +0 -138
- package/PanelCardSection-D2CZs3aF.js +0 -15
- package/ParamTabSection-Cr8IrxB2.js +0 -92
- package/PinCodeSection-DB-gWXLA.js +0 -22
- package/ProgressbarSection-C5t1kBbY.js +0 -21
- package/ProgressbarSection-DYuWxDLA.mjs +0 -195
- package/RadioGroupSection-CJksjBGG.mjs +0 -288
- package/RadioGroupSection-CiKWrbD_.js +0 -27
- package/RadioSection-BDBXfHoi.mjs +0 -208
- package/RadioSection-COMubSGY.js +0 -23
- package/RevealContentSection-BEkgR-zt.js +0 -21
- package/ScrollToTopSection-Dedqd6br.js +0 -36
- package/ScrollbarSection-D18rm1b8.mjs +0 -146
- package/ScrollbarSection-DHxP5lpp.js +0 -29
- package/SelectSection-3wmWG-An.js +0 -20
- package/SelectSection-urzkAM8s.mjs +0 -275
- package/SettingsPanelSection-C9XctGHU.js +0 -1
- package/ShadowsSection-CUPbact4.js +0 -1
- package/SidebarMenuSection-C2RKvKxs.js +0 -46
- package/SidebarSection-D0TPtJDX.mjs +0 -122
- package/SidebarSection-DJryxLPX.js +0 -25
- package/SizingSection-B0vpzcav.js +0 -1
- package/SkeletonSection-BkDHHL5z.mjs +0 -259
- package/SkeletonSection-kVHtbqxx.js +0 -52
- package/SpacingSystemSection-CXC18NNv.js +0 -1
- package/SpinnerSection-CM21SX2O.js +0 -17
- package/SwitchSection-BAjoJW0o.mjs +0 -230
- package/SwitchSection-CJE0OQIF.js +0 -20
- package/SystemOverviewSection-CtSNQNxN.js +0 -1
- package/TabSection-Zh4ojYBN.js +0 -84
- package/TabSelectSection-BxcR0V5f.js +0 -100
- package/TailwindConfigSection-flFiObUb.js +0 -19
- package/TestingSection-B_VmIqDt.js +0 -12
- package/TextareaSection-L4Iz1VBt.js +0 -21
- package/ThemeArchitectureSection-BIyvDIpO.js +0 -1
- package/ThemeConfigurationSection-CyGtw0pJ.js +0 -1
- package/ThemeHooksSection-CLtiAo9Q.js +0 -1
- package/ThemeProviderRequiredSection-DUgte7Zx.js +0 -1
- package/ThemeProviderSection-CzyXAnLZ.js +0 -1
- package/ToastSection-8CptTtXd.js +0 -37
- package/ToggleBarSection-B5Twh8vM.mjs +0 -187
- package/ToggleBarSection-DB11j5rL.js +0 -37
- package/TopupButtonSection-CDh_iG83.js +0 -24
- package/TopupButtonSection-xr9SjnVl.mjs +0 -145
- package/TransactionInfoSection-DNX6oC4R.js +0 -16
- package/TransactionInfoSection-qS4JzmkY.mjs +0 -113
- package/TucuUiLogoSection-BRCr-qmP.js +0 -26
- package/TypographySection-C1AxP9j_.mjs +0 -129
- package/TypographySection-CvRzp8kB.js +0 -1
- package/TypographySection-DCE6bcqs.js +0 -24
- package/WCAGPrinciplesSection-BIHuGKLI.js +0 -1
- package/index-BOfUOCHe.js +0 -920
- package/storybook/components/StoryContainer.d.ts +0 -6
- package/storybook/components/pages/Accessibility.d.ts +0 -1
- package/storybook/components/pages/Introduction.d.ts +0 -1
- package/storybook/hooks/useDummy.d.ts +0 -34
- /package/{1-Df9CGZha.mjs → 1-Df9CGZha.js} +0 -0
- /package/{collection-1-NeFANkbk.mjs → collection-1-NeFANkbk.js} +0 -0
- /package/{tether-DaYvmdAU.mjs → tether-DaYvmdAU.js} +0 -0
|
@@ -1,230 +0,0 @@
|
|
|
1
|
-
import { jsxs as a, Fragment as o, jsx as e } from "react/jsx-runtime";
|
|
2
|
-
import { useState as h } from "react";
|
|
3
|
-
import { T as l, C as t, a as n, p as r, B as p, c as m } from "./index-HwvOEWI7.mjs";
|
|
4
|
-
import "lucide-react";
|
|
5
|
-
import "react-router-dom";
|
|
6
|
-
import "react-dom";
|
|
7
|
-
const C = () => {
|
|
8
|
-
const [s, c] = h(!1);
|
|
9
|
-
return /* @__PURE__ */ a(o, { children: [
|
|
10
|
-
/* @__PURE__ */ a("div", { className: "text-center space-y-4", children: [
|
|
11
|
-
/* @__PURE__ */ e(l, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "Switch" }),
|
|
12
|
-
/* @__PURE__ */ e(
|
|
13
|
-
l,
|
|
14
|
-
{
|
|
15
|
-
tag: "p",
|
|
16
|
-
className: "text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
|
|
17
|
-
children: "A toggle switch component for binary on/off states."
|
|
18
|
-
}
|
|
19
|
-
)
|
|
20
|
-
] }),
|
|
21
|
-
/* @__PURE__ */ e(t, { className: "overflow-hidden", children: /* @__PURE__ */ e(n, { title: "Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
|
|
22
|
-
/* @__PURE__ */ a(t, { className: "p-4", children: [
|
|
23
|
-
/* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "Basic Switch" }),
|
|
24
|
-
/* @__PURE__ */ e(
|
|
25
|
-
r,
|
|
26
|
-
{
|
|
27
|
-
label: "Enable notifications",
|
|
28
|
-
checked: s,
|
|
29
|
-
onChange: c
|
|
30
|
-
}
|
|
31
|
-
)
|
|
32
|
-
] }),
|
|
33
|
-
/* @__PURE__ */ a(t, { className: "p-4", children: [
|
|
34
|
-
/* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "Custom Labels" }),
|
|
35
|
-
/* @__PURE__ */ e(
|
|
36
|
-
r,
|
|
37
|
-
{
|
|
38
|
-
label: "Dark mode",
|
|
39
|
-
onLabel: "ON",
|
|
40
|
-
offLabel: "OFF",
|
|
41
|
-
checked: s,
|
|
42
|
-
onChange: c
|
|
43
|
-
}
|
|
44
|
-
)
|
|
45
|
-
] }),
|
|
46
|
-
/* @__PURE__ */ a(t, { className: "p-4", children: [
|
|
47
|
-
/* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "With Helper Text" }),
|
|
48
|
-
/* @__PURE__ */ e(
|
|
49
|
-
r,
|
|
50
|
-
{
|
|
51
|
-
label: "Auto-save",
|
|
52
|
-
helperText: "Automatically save your work",
|
|
53
|
-
checked: s,
|
|
54
|
-
onChange: c
|
|
55
|
-
}
|
|
56
|
-
)
|
|
57
|
-
] }),
|
|
58
|
-
/* @__PURE__ */ a(t, { className: "p-4", children: [
|
|
59
|
-
/* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "With Error" }),
|
|
60
|
-
/* @__PURE__ */ e(
|
|
61
|
-
r,
|
|
62
|
-
{
|
|
63
|
-
label: "Required switch",
|
|
64
|
-
errorMessage: "This field is required",
|
|
65
|
-
checked: s,
|
|
66
|
-
onChange: c
|
|
67
|
-
}
|
|
68
|
-
)
|
|
69
|
-
] }),
|
|
70
|
-
/* @__PURE__ */ a(t, { className: "p-4", children: [
|
|
71
|
-
/* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "Disabled" }),
|
|
72
|
-
/* @__PURE__ */ e(
|
|
73
|
-
r,
|
|
74
|
-
{
|
|
75
|
-
label: "Disabled switch",
|
|
76
|
-
disabled: !0,
|
|
77
|
-
checked: s,
|
|
78
|
-
onChange: c
|
|
79
|
-
}
|
|
80
|
-
)
|
|
81
|
-
] })
|
|
82
|
-
] }) }) }) }),
|
|
83
|
-
/* @__PURE__ */ e(t, { className: "overflow-hidden", children: /* @__PURE__ */ e(n, { title: "Variants", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: [
|
|
84
|
-
/* @__PURE__ */ a(t, { className: "p-4", children: [
|
|
85
|
-
/* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "Ghost (default)" }),
|
|
86
|
-
/* @__PURE__ */ e(
|
|
87
|
-
r,
|
|
88
|
-
{
|
|
89
|
-
label: "Ghost Variant",
|
|
90
|
-
variant: "ghost",
|
|
91
|
-
checked: s,
|
|
92
|
-
onChange: c
|
|
93
|
-
}
|
|
94
|
-
)
|
|
95
|
-
] }),
|
|
96
|
-
/* @__PURE__ */ a(t, { className: "p-4", children: [
|
|
97
|
-
/* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "Solid" }),
|
|
98
|
-
/* @__PURE__ */ e(
|
|
99
|
-
r,
|
|
100
|
-
{
|
|
101
|
-
label: "Solid Variant",
|
|
102
|
-
variant: "solid",
|
|
103
|
-
checked: s,
|
|
104
|
-
onChange: c
|
|
105
|
-
}
|
|
106
|
-
)
|
|
107
|
-
] }),
|
|
108
|
-
/* @__PURE__ */ a(t, { className: "p-4", children: [
|
|
109
|
-
/* @__PURE__ */ e(l, { tag: "h5", className: "mb-3", children: "Transparent" }),
|
|
110
|
-
/* @__PURE__ */ e(
|
|
111
|
-
r,
|
|
112
|
-
{
|
|
113
|
-
label: "Transparent Variant",
|
|
114
|
-
variant: "transparent",
|
|
115
|
-
checked: s,
|
|
116
|
-
onChange: c
|
|
117
|
-
}
|
|
118
|
-
)
|
|
119
|
-
] })
|
|
120
|
-
] }) }) }) }),
|
|
121
|
-
/* @__PURE__ */ e(t, { className: "overflow-hidden", children: /* @__PURE__ */ e(n, { title: "Props", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(p, { columns: [
|
|
122
|
-
{
|
|
123
|
-
key: "prop",
|
|
124
|
-
label: "Prop",
|
|
125
|
-
render: (i) => /* @__PURE__ */ e("code", { className: "text-xs text-brand", children: String(i) })
|
|
126
|
-
},
|
|
127
|
-
{
|
|
128
|
-
key: "type",
|
|
129
|
-
label: "Type",
|
|
130
|
-
render: (i) => /* @__PURE__ */ e("code", { className: "text-xs", children: String(i) })
|
|
131
|
-
},
|
|
132
|
-
{
|
|
133
|
-
key: "default",
|
|
134
|
-
label: "Default",
|
|
135
|
-
render: (i) => {
|
|
136
|
-
const d = String(i);
|
|
137
|
-
return d === "required" ? /* @__PURE__ */ e("span", { className: "text-xs text-red-500", children: "required" }) : /* @__PURE__ */ e("code", { className: "text-xs", children: d });
|
|
138
|
-
}
|
|
139
|
-
},
|
|
140
|
-
{
|
|
141
|
-
key: "description",
|
|
142
|
-
label: "Description"
|
|
143
|
-
}
|
|
144
|
-
], data: [
|
|
145
|
-
{
|
|
146
|
-
prop: "checked",
|
|
147
|
-
type: "boolean",
|
|
148
|
-
default: "required",
|
|
149
|
-
description: "Whether the switch is checked"
|
|
150
|
-
},
|
|
151
|
-
{
|
|
152
|
-
prop: "onChange",
|
|
153
|
-
type: "(checked: boolean) => void",
|
|
154
|
-
default: "required",
|
|
155
|
-
description: "Callback when switch state changes"
|
|
156
|
-
},
|
|
157
|
-
{
|
|
158
|
-
prop: "label",
|
|
159
|
-
type: "string | React.ReactNode",
|
|
160
|
-
default: "-",
|
|
161
|
-
description: "Switch label text"
|
|
162
|
-
},
|
|
163
|
-
{
|
|
164
|
-
prop: "variant",
|
|
165
|
-
type: "'ghost' | 'solid' | 'transparent'",
|
|
166
|
-
default: "'ghost'",
|
|
167
|
-
description: "Visual variant of the switch"
|
|
168
|
-
},
|
|
169
|
-
{
|
|
170
|
-
prop: "onLabel",
|
|
171
|
-
type: "string | React.ReactNode",
|
|
172
|
-
default: "'ON'",
|
|
173
|
-
description: "Label text when switch is on"
|
|
174
|
-
},
|
|
175
|
-
{
|
|
176
|
-
prop: "offLabel",
|
|
177
|
-
type: "string | React.ReactNode",
|
|
178
|
-
default: "'OFF'",
|
|
179
|
-
description: "Label text when switch is off"
|
|
180
|
-
},
|
|
181
|
-
{
|
|
182
|
-
prop: "disabled",
|
|
183
|
-
type: "boolean",
|
|
184
|
-
default: "false",
|
|
185
|
-
description: "Disables the switch"
|
|
186
|
-
},
|
|
187
|
-
{
|
|
188
|
-
prop: "errorMessage",
|
|
189
|
-
type: "string",
|
|
190
|
-
default: "-",
|
|
191
|
-
description: "Error message to display"
|
|
192
|
-
},
|
|
193
|
-
{
|
|
194
|
-
prop: "helperText",
|
|
195
|
-
type: "string",
|
|
196
|
-
default: "-",
|
|
197
|
-
description: "Helper text displayed below the switch"
|
|
198
|
-
}
|
|
199
|
-
] }) }) }) }),
|
|
200
|
-
/* @__PURE__ */ e(t, { className: "overflow-hidden", children: /* @__PURE__ */ e(n, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
|
|
201
|
-
m,
|
|
202
|
-
{
|
|
203
|
-
language: "tsx",
|
|
204
|
-
code: `import { Switch } from '@e-burgos/tucu-ui';
|
|
205
|
-
|
|
206
|
-
<Switch
|
|
207
|
-
label="Enable notifications"
|
|
208
|
-
checked={checked}
|
|
209
|
-
onChange={setChecked}
|
|
210
|
-
/>
|
|
211
|
-
|
|
212
|
-
<Switch
|
|
213
|
-
label="Dark mode"
|
|
214
|
-
onLabel="ON"
|
|
215
|
-
offLabel="OFF"
|
|
216
|
-
checked={checked}
|
|
217
|
-
onChange={setChecked}
|
|
218
|
-
/>
|
|
219
|
-
|
|
220
|
-
// Variants
|
|
221
|
-
<Switch label="Ghost" variant="ghost" checked={checked} onChange={setChecked} />
|
|
222
|
-
<Switch label="Solid" variant="solid" checked={checked} onChange={setChecked} />
|
|
223
|
-
<Switch label="Transparent" variant="transparent" checked={checked} onChange={setChecked} />`
|
|
224
|
-
}
|
|
225
|
-
) }) }) })
|
|
226
|
-
] });
|
|
227
|
-
};
|
|
228
|
-
export {
|
|
229
|
-
C as default
|
|
230
|
-
};
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("react"),a=require("./index-BOfUOCHe.js");require("lucide-react");require("react-router-dom");require("react-dom");const d=()=>{const[s,t]=n.useState(!1),c=[{key:"prop",label:"Prop",render:r=>e.jsx("code",{className:"text-xs text-brand",children:String(r)})},{key:"type",label:"Type",render:r=>e.jsx("code",{className:"text-xs",children:String(r)})},{key:"default",label:"Default",render:r=>{const l=String(r);return l==="required"?e.jsx("span",{className:"text-xs text-red-500",children:"required"}):e.jsx("code",{className:"text-xs",children:l})}},{key:"description",label:"Description"}],i=[{prop:"checked",type:"boolean",default:"required",description:"Whether the switch is checked"},{prop:"onChange",type:"(checked: boolean) => void",default:"required",description:"Callback when switch state changes"},{prop:"label",type:"string | React.ReactNode",default:"-",description:"Switch label text"},{prop:"variant",type:"'ghost' | 'solid' | 'transparent'",default:"'ghost'",description:"Visual variant of the switch"},{prop:"onLabel",type:"string | React.ReactNode",default:"'ON'",description:"Label text when switch is on"},{prop:"offLabel",type:"string | React.ReactNode",default:"'OFF'",description:"Label text when switch is off"},{prop:"disabled",type:"boolean",default:"false",description:"Disables the switch"},{prop:"errorMessage",type:"string",default:"-",description:"Error message to display"},{prop:"helperText",type:"string",default:"-",description:"Helper text displayed below the switch"}];return e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"text-center space-y-4",children:[e.jsx(a.Typography,{tag:"h2",className:"text-3xl md:text-4xl font-bold",children:"Switch"}),e.jsx(a.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"A toggle switch component for binary on/off states."})]}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Examples",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4",children:[e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Basic Switch"}),e.jsx(a.Switch,{label:"Enable notifications",checked:s,onChange:t})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Custom Labels"}),e.jsx(a.Switch,{label:"Dark mode",onLabel:"ON",offLabel:"OFF",checked:s,onChange:t})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"With Helper Text"}),e.jsx(a.Switch,{label:"Auto-save",helperText:"Automatically save your work",checked:s,onChange:t})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"With Error"}),e.jsx(a.Switch,{label:"Required switch",errorMessage:"This field is required",checked:s,onChange:t})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Disabled"}),e.jsx(a.Switch,{label:"Disabled switch",disabled:!0,checked:s,onChange:t})]})]})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Variants",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-3 gap-4",children:[e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Ghost (default)"}),e.jsx(a.Switch,{label:"Ghost Variant",variant:"ghost",checked:s,onChange:t})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Solid"}),e.jsx(a.Switch,{label:"Solid Variant",variant:"solid",checked:s,onChange:t})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Transparent"}),e.jsx(a.Switch,{label:"Transparent Variant",variant:"transparent",checked:s,onChange:t})]})]})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Props",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.BasicTable,{columns:c,data:i})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.CodeBlock,{language:"tsx",code:`import { Switch } from '@e-burgos/tucu-ui';
|
|
2
|
-
|
|
3
|
-
<Switch
|
|
4
|
-
label="Enable notifications"
|
|
5
|
-
checked={checked}
|
|
6
|
-
onChange={setChecked}
|
|
7
|
-
/>
|
|
8
|
-
|
|
9
|
-
<Switch
|
|
10
|
-
label="Dark mode"
|
|
11
|
-
onLabel="ON"
|
|
12
|
-
offLabel="OFF"
|
|
13
|
-
checked={checked}
|
|
14
|
-
onChange={setChecked}
|
|
15
|
-
/>
|
|
16
|
-
|
|
17
|
-
// Variants
|
|
18
|
-
<Switch label="Ghost" variant="ghost" checked={checked} onChange={setChecked} />
|
|
19
|
-
<Switch label="Solid" variant="solid" checked={checked} onChange={setChecked} />
|
|
20
|
-
<Switch label="Transparent" variant="transparent" checked={checked} onChange={setChecked} />`})})})})]})};exports.default=d;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("./index-BOfUOCHe.js"),a=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const n=()=>e.jsxs("div",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(t.Typography,{tag:"h2",className:"mb-4 text-2xl sm:text-3xl md:text-4xl font-bold",children:"System Overview"}),e.jsx(t.Typography,{tag:"p",className:"text-base sm:text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto",children:"Built on React Router with automatic menu generation and nested route support. Supports both Standalone and Micro Frontend (MFE) architectural patterns."})]}),e.jsx("div",{className:"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6",children:[{icon:e.jsx(a.Router,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),title:"React Router Integration",description:"Built on React Router v6 with full compatibility and modern routing features",features:["Browser History","Nested Routes","Route Guards"],color:"from-blue-500 to-cyan-500"},{icon:e.jsx(a.Menu,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),title:"Automatic Navigation",description:"Generate navigation menus automatically from route configuration",features:["Auto Sidebar","Breadcrumb Support","Active States"],color:"from-green-500 to-emerald-500"},{icon:e.jsx(a.Layers3,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),title:"Nested Route Support",description:"Support for unlimited nesting levels with dropdown menus and sub-navigation",features:["Multi-level","Dropdown Menus","Hierarchical"],color:"from-purple-500 to-indigo-500"},{icon:e.jsx(a.Box,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),title:"Architectural Patterns",description:"Support for both Standalone and Micro Frontend (MFE) patterns with type-safe configuration",features:["Standalone","MFE","Type-Safe"],color:"from-orange-500 to-amber-500"}].map((r,o)=>e.jsx(t.CardContainer,{className:"group hover:shadow-large transition-all duration-300 hover:-translate-y-1",children:e.jsxs("div",{className:"space-y-4",children:[e.jsxs("div",{className:"flex items-center gap-4",children:[e.jsx("div",{className:`p-3 rounded-xl bg-linear-to-br ${r.color} text-white shadow-lg group-hover:scale-110 transition-all duration-300`,children:r.icon}),e.jsx(t.Typography,{tag:"h3",className:"font-semibold text-lg group-hover:text-primary transition-colors duration-300",children:r.title})]}),e.jsx(t.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400 leading-relaxed",children:r.description}),e.jsx("div",{className:"flex flex-wrap gap-2",children:r.features.map((s,i)=>e.jsx(t.Badge,{variant:"outline",className:"text-xs",children:s},i))})]})},o))})]});exports.default=n;
|
package/TabSection-Zh4ojYBN.js
DELETED
|
@@ -1,84 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),e=require("./index-BOfUOCHe.js"),n=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const t=()=>{const r=[{key:"prop",label:"Prop",render:s=>a.jsx("code",{className:"text-xs text-brand",children:String(s)})},{key:"type",label:"Type",render:s=>a.jsx("code",{className:"text-xs",children:String(s)})},{key:"default",label:"Default",render:s=>{const i=String(s);return i==="required"?a.jsx("span",{className:"text-xs text-red-500",children:"required"}):a.jsx("code",{className:"text-xs",children:i})}},{key:"description",label:"Description"}],l=[{prop:"variant",type:"'underline' | 'pills' | 'bordered' | 'solid'",default:"'underline'",description:"Visual style variant of the tabs"},{prop:"size",type:"'small' | 'medium' | 'large'",default:"'medium'",description:"Size of the tab items"},{prop:"color",type:"'primary' | 'secondary' | 'success' | 'danger'",default:"-",description:"Color theme for unselected tabs"},{prop:"icon",type:"React.ReactNode",default:"-",description:"Icon to display before tab label"},{prop:"disabled",type:"boolean",default:"false",description:"Whether the tab is disabled"},{prop:"showMobileIndicator",type:"boolean",default:"true",description:"Show indicator on mobile devices"}];return a.jsxs(a.Fragment,{children:[a.jsxs("div",{className:"text-center space-y-4",children:[a.jsx(e.Typography,{tag:"h2",className:"text-3xl md:text-4xl font-bold",children:"Tabs"}),a.jsx(e.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"A flexible tab component system with multiple variants, smooth animations, and mobile-responsive design built on Headless UI."})]}),a.jsx(e.CardContainer,{className:"overflow-hidden",children:a.jsx(e.CardTitle,{title:"Variants",className:"mt-2 mb-2",children:a.jsx("div",{className:"w-full p-4 sm:p-6",children:a.jsxs("div",{className:"space-y-8",children:[a.jsxs("div",{children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Underline Variant (Default)"}),a.jsxs(e.TabGroup,{variant:"underline",children:[a.jsxs(e.TabList,{variant:"underline",children:[a.jsx(e.TabItem,{variant:"underline",children:"Overview"}),a.jsx(e.TabItem,{variant:"underline",children:"Details"}),a.jsx(e.TabItem,{variant:"underline",children:"Settings"})]}),a.jsxs(e.TabPanels,{children:[a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Overview content with clean underline design."})})}),a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Detailed information with professional styling."})})}),a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Settings panel with modern appearance."})})})]})]})]}),a.jsxs("div",{children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Pills Variant"}),a.jsxs(e.TabGroup,{variant:"pills",children:[a.jsxs(e.TabList,{variant:"pills",children:[a.jsx(e.TabItem,{variant:"pills",children:"Dashboard"}),a.jsx(e.TabItem,{variant:"pills",children:"Analytics"}),a.jsx(e.TabItem,{variant:"pills",children:"Reports"})]}),a.jsxs(e.TabPanels,{children:[a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Dashboard with rounded pill tabs for a modern look."})})}),a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Analytics data with smooth transitions."})})}),a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Reports section with clean design."})})})]})]})]}),a.jsxs("div",{children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Bordered Variant"}),a.jsxs(e.TabGroup,{variant:"bordered",children:[a.jsxs(e.TabList,{variant:"bordered",children:[a.jsx(e.TabItem,{variant:"bordered",children:"Account"}),a.jsx(e.TabItem,{variant:"bordered",children:"Security"}),a.jsx(e.TabItem,{variant:"bordered",children:"Billing"})]}),a.jsxs(e.TabPanels,{children:[a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Account settings with bordered tab style."})})}),a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Security options with clear visual distinction."})})}),a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Billing information with professional appearance."})})})]})]})]}),a.jsxs("div",{children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Solid Variant"}),a.jsxs(e.TabGroup,{variant:"solid",children:[a.jsxs(e.TabList,{variant:"solid",children:[a.jsx(e.TabItem,{variant:"solid",children:"Profile"}),a.jsx(e.TabItem,{variant:"solid",children:"Notifications"}),a.jsx(e.TabItem,{variant:"solid",children:"Privacy"})]}),a.jsxs(e.TabPanels,{children:[a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Profile section with solid background tabs."})})}),a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Notifications center with modern design."})})}),a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Privacy settings with clean interface."})})})]})]})]})]})})})}),a.jsx(e.CardContainer,{className:"overflow-hidden",children:a.jsx(e.CardTitle,{title:"With Icons",className:"mt-2 mb-2",children:a.jsx("div",{className:"w-full p-4 sm:p-6",children:a.jsxs("div",{className:"space-y-6",children:[a.jsxs("div",{children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Pills with Icons"}),a.jsxs(e.TabGroup,{variant:"pills",children:[a.jsxs(e.TabList,{variant:"pills",children:[a.jsx(e.TabItem,{variant:"pills",icon:a.jsx(n.Home,{size:16}),children:"Home"}),a.jsx(e.TabItem,{variant:"pills",icon:a.jsx(n.User,{size:16}),children:"Profile"}),a.jsx(e.TabItem,{variant:"pills",icon:a.jsx(n.Settings,{size:16}),children:"Settings"})]}),a.jsxs(e.TabPanels,{children:[a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Home dashboard content."})})}),a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"User profile information."})})}),a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Application settings."})})})]})]})]}),a.jsxs("div",{children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Bordered with Icons"}),a.jsxs(e.TabGroup,{variant:"bordered",children:[a.jsxs(e.TabList,{variant:"bordered",children:[a.jsx(e.TabItem,{variant:"bordered",icon:a.jsx(n.Mail,{size:16}),children:"Messages"}),a.jsx(e.TabItem,{variant:"bordered",icon:a.jsx(n.Bell,{size:16}),children:"Alerts"}),a.jsx(e.TabItem,{variant:"bordered",icon:a.jsx(n.Calendar,{size:16}),children:"Schedule"})]}),a.jsxs(e.TabPanels,{children:[a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Your messages and conversations."})})}),a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"System alerts and notifications."})})}),a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Calendar and scheduled events."})})})]})]})]})]})})})}),a.jsx(e.CardContainer,{className:"overflow-hidden",children:a.jsx(e.CardTitle,{title:"Sizes",className:"mt-2 mb-2",children:a.jsx("div",{className:"w-full p-4 sm:p-6",children:a.jsxs("div",{className:"space-y-6",children:[a.jsxs("div",{children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Small Size"}),a.jsxs(e.TabGroup,{variant:"pills",children:[a.jsxs(e.TabList,{variant:"pills",children:[a.jsx(e.TabItem,{variant:"pills",size:"small",children:"Tab 1"}),a.jsx(e.TabItem,{variant:"pills",size:"small",children:"Tab 2"}),a.jsx(e.TabItem,{variant:"pills",size:"small",children:"Tab 3"})]}),a.jsxs(e.TabPanels,{children:[a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Small size tabs content."})})}),a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Compact design for space-constrained layouts."})})}),a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Perfect for dense information displays."})})})]})]})]}),a.jsxs("div",{children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Large Size"}),a.jsxs(e.TabGroup,{variant:"pills",children:[a.jsxs(e.TabList,{variant:"pills",children:[a.jsx(e.TabItem,{variant:"pills",size:"large",children:"Tab 1"}),a.jsx(e.TabItem,{variant:"pills",size:"large",children:"Tab 2"}),a.jsx(e.TabItem,{variant:"pills",size:"large",children:"Tab 3"})]}),a.jsxs(e.TabPanels,{children:[a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Large size tabs content."})})}),a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Prominent design for main navigation."})})}),a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Great for primary interface elements."})})})]})]})]})]})})})}),a.jsx(e.CardContainer,{className:"overflow-hidden",children:a.jsx(e.CardTitle,{title:"States",className:"mt-2 mb-2",children:a.jsx("div",{className:"w-full p-4 sm:p-6",children:a.jsxs("div",{className:"space-y-6",children:[a.jsxs("div",{children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"With Disabled Tab"}),a.jsxs(e.TabGroup,{variant:"pills",children:[a.jsxs(e.TabList,{variant:"pills",children:[a.jsx(e.TabItem,{variant:"pills",children:"Active"}),a.jsx(e.TabItem,{variant:"pills",disabled:!0,children:"Disabled"}),a.jsx(e.TabItem,{variant:"pills",children:"Available"})]}),a.jsxs(e.TabPanels,{children:[a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Active tab content."})})}),a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"This tab is disabled."})})}),a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Available tab content."})})})]})]})]}),a.jsxs("div",{children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Color Variants"}),a.jsxs(e.TabGroup,{variant:"underline",children:[a.jsxs(e.TabList,{variant:"underline",children:[a.jsx(e.TabItem,{variant:"underline",color:"primary",children:"Primary"}),a.jsx(e.TabItem,{variant:"underline",color:"success",children:"Success"}),a.jsx(e.TabItem,{variant:"underline",color:"danger",children:"Danger"})]}),a.jsxs(e.TabPanels,{children:[a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Primary color theme."})})}),a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Success color theme."})})}),a.jsx(e.TabPanel,{children:a.jsx(e.CardContainer,{className:"p-4",children:a.jsx(e.Typography,{tag:"p",children:"Danger color theme."})})})]})]})]})]})})})}),a.jsx(e.CardContainer,{className:"overflow-hidden",children:a.jsx(e.CardTitle,{title:"Props",className:"mt-2 mb-2",children:a.jsx("div",{className:"w-full p-4 sm:p-6",children:a.jsx(e.BasicTable,{columns:r,data:l})})})}),a.jsx(e.CardContainer,{className:"overflow-hidden",children:a.jsx(e.CardTitle,{title:"Code Examples",className:"mt-2 mb-2",children:a.jsx("div",{className:"w-full p-4 sm:p-6",children:a.jsx(e.CodeBlock,{language:"tsx",code:`import {
|
|
2
|
-
TabGroup,
|
|
3
|
-
TabList,
|
|
4
|
-
TabItem,
|
|
5
|
-
TabPanels,
|
|
6
|
-
TabPanel,
|
|
7
|
-
} from '@e-burgos/tucu-ui';
|
|
8
|
-
import { Home, User, Settings } from 'lucide-react';
|
|
9
|
-
|
|
10
|
-
// Basic underline tabs
|
|
11
|
-
<TabGroup variant="underline">
|
|
12
|
-
<TabList variant="underline">
|
|
13
|
-
<TabItem variant="underline">Tab 1</TabItem>
|
|
14
|
-
<TabItem variant="underline">Tab 2</TabItem>
|
|
15
|
-
<TabItem variant="underline">Tab 3</TabItem>
|
|
16
|
-
</TabList>
|
|
17
|
-
<TabPanels>
|
|
18
|
-
<TabPanel>Content 1</TabPanel>
|
|
19
|
-
<TabPanel>Content 2</TabPanel>
|
|
20
|
-
<TabPanel>Content 3</TabPanel>
|
|
21
|
-
</TabPanels>
|
|
22
|
-
</TabGroup>
|
|
23
|
-
|
|
24
|
-
// Pills variant with icons
|
|
25
|
-
<TabGroup variant="pills">
|
|
26
|
-
<TabList variant="pills">
|
|
27
|
-
<TabItem variant="pills" icon={<Home size={16} />}>
|
|
28
|
-
Home
|
|
29
|
-
</TabItem>
|
|
30
|
-
<TabItem variant="pills" icon={<User size={16} />}>
|
|
31
|
-
Profile
|
|
32
|
-
</TabItem>
|
|
33
|
-
<TabItem variant="pills" icon={<Settings size={16} />}>
|
|
34
|
-
Settings
|
|
35
|
-
</TabItem>
|
|
36
|
-
</TabList>
|
|
37
|
-
<TabPanels>
|
|
38
|
-
<TabPanel>Home content</TabPanel>
|
|
39
|
-
<TabPanel>Profile content</TabPanel>
|
|
40
|
-
<TabPanel>Settings content</TabPanel>
|
|
41
|
-
</TabPanels>
|
|
42
|
-
</TabGroup>
|
|
43
|
-
|
|
44
|
-
// Bordered variant with sizes
|
|
45
|
-
<TabGroup variant="bordered">
|
|
46
|
-
<TabList variant="bordered">
|
|
47
|
-
<TabItem variant="bordered" size="small">Small</TabItem>
|
|
48
|
-
<TabItem variant="bordered" size="medium">Medium</TabItem>
|
|
49
|
-
<TabItem variant="bordered" size="large">Large</TabItem>
|
|
50
|
-
</TabList>
|
|
51
|
-
<TabPanels>
|
|
52
|
-
<TabPanel>Small content</TabPanel>
|
|
53
|
-
<TabPanel>Medium content</TabPanel>
|
|
54
|
-
<TabPanel>Large content</TabPanel>
|
|
55
|
-
</TabPanels>
|
|
56
|
-
</TabGroup>
|
|
57
|
-
|
|
58
|
-
// Solid variant with disabled tab
|
|
59
|
-
<TabGroup variant="solid">
|
|
60
|
-
<TabList variant="solid">
|
|
61
|
-
<TabItem variant="solid">Active</TabItem>
|
|
62
|
-
<TabItem variant="solid" disabled>Disabled</TabItem>
|
|
63
|
-
<TabItem variant="solid">Available</TabItem>
|
|
64
|
-
</TabList>
|
|
65
|
-
<TabPanels>
|
|
66
|
-
<TabPanel>Active content</TabPanel>
|
|
67
|
-
<TabPanel>Disabled content</TabPanel>
|
|
68
|
-
<TabPanel>Available content</TabPanel>
|
|
69
|
-
</TabPanels>
|
|
70
|
-
</TabGroup>
|
|
71
|
-
|
|
72
|
-
// With color variants
|
|
73
|
-
<TabGroup variant="underline">
|
|
74
|
-
<TabList variant="underline">
|
|
75
|
-
<TabItem variant="underline" color="primary">Primary</TabItem>
|
|
76
|
-
<TabItem variant="underline" color="success">Success</TabItem>
|
|
77
|
-
<TabItem variant="underline" color="danger">Danger</TabItem>
|
|
78
|
-
</TabList>
|
|
79
|
-
<TabPanels>
|
|
80
|
-
<TabPanel>Primary content</TabPanel>
|
|
81
|
-
<TabPanel>Success content</TabPanel>
|
|
82
|
-
<TabPanel>Danger content</TabPanel>
|
|
83
|
-
</TabPanels>
|
|
84
|
-
</TabGroup>`})})})})]})};exports.default=t;
|
|
@@ -1,100 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("react"),t=require("./index-BOfUOCHe.js"),l=require("lucide-react");require("react-router-dom");require("react-dom");const y=()=>{const[i,x]=r.useState(0),[d,h]=r.useState(0),[s,g]=r.useState(0),c=[{title:"Dashboard",path:"dashboard"},{title:"Analytics",path:"analytics"},{title:"Reports",path:"reports"},{title:"Settings",path:"settings"}],o=[{title:e.jsxs("span",{className:"flex items-center gap-2",children:[e.jsx(l.Home,{size:16}),"Home"]}),path:"home"},{title:e.jsxs("span",{className:"flex items-center gap-2",children:[e.jsx(l.User,{size:16}),"Profile"]}),path:"profile"},{title:e.jsxs("span",{className:"flex items-center gap-2",children:[e.jsx(l.Settings,{size:16}),"Settings"]}),path:"settings"}],n=[{title:"Orders",path:"orders"},{title:"Products",path:"products"},{title:"Customers",path:"customers"},{title:"Analytics",path:"analytics"},{title:"Marketing",path:"marketing"},{title:"Reports",path:"reports"},{title:"Integrations",path:"integrations"},{title:"Settings",path:"settings"}],p=[{key:"prop",label:"Prop",render:a=>e.jsx("code",{className:"text-xs text-brand",children:String(a)})},{key:"type",label:"Type",render:a=>e.jsx("code",{className:"text-xs",children:String(a)})},{key:"default",label:"Default",render:a=>{const m=String(a);return m==="required"?e.jsx("span",{className:"text-xs text-red-500",children:"required"}):e.jsx("code",{className:"text-xs",children:m})}},{key:"description",label:"Description"}],b=[{prop:"tabMenu",type:"TabSelectMenuItem[]",default:"required",description:"Array of menu items with title and path"},{prop:"selectedTabIndex",type:"number",default:"required",description:"Currently selected tab index (0-based)"},{prop:"onChange",type:"(index: number) => void",default:"required",description:"Callback function when tab selection changes"},{prop:"ref",type:"React.Ref<HTMLElement | null>",default:"-",description:"Forward ref to the select element"}],u=[{prop:"title",type:"React.ReactNode",default:"required",description:"Tab label (can be text, JSX, or components)"},{prop:"path",type:"string",default:"required",description:"Unique identifier/route path for the tab"}];return e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"text-center space-y-4",children:[e.jsx(t.Typography,{tag:"h2",className:"text-3xl md:text-4xl font-bold",children:"TabSelect"}),e.jsx(t.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"A mobile-friendly dropdown tab selector with smooth animations and transitions, designed for responsive tab navigation in constrained spaces."})]}),e.jsx(t.CardContainer,{className:"overflow-hidden",children:e.jsx(t.CardTitle,{title:"Basic Examples",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"space-y-8",children:[e.jsxs("div",{children:[e.jsx(t.Typography,{tag:"h5",className:"mb-3",children:"Basic TabSelect"}),e.jsx(t.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 mb-4",children:"Standard dropdown selector with text options. Click to expand and select a tab."}),e.jsx("div",{className:"max-w-md",children:e.jsx(t.TabSelect,{tabMenu:c,selectedTabIndex:i,onChange:x})}),e.jsx("div",{className:"mt-4 p-4 bg-light-dark rounded-lg",children:e.jsxs(t.Typography,{tag:"p",className:"text-sm",children:["Selected:"," ",e.jsx("span",{className:"font-semibold text-brand",children:c[i].title})]})})]}),e.jsxs("div",{children:[e.jsx(t.Typography,{tag:"h5",className:"mb-3",children:"With Icons"}),e.jsx(t.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 mb-4",children:"Enhanced dropdown with icon support for better visual clarity."}),e.jsx("div",{className:"max-w-md",children:e.jsx(t.TabSelect,{tabMenu:o,selectedTabIndex:d,onChange:h})}),e.jsx("div",{className:"mt-4 p-4 bg-light-dark rounded-lg",children:e.jsxs(t.Typography,{tag:"p",className:"text-sm",children:["Current selection:"," ",e.jsx("span",{className:"font-semibold text-brand",children:o[d].path})]})})]}),e.jsxs("div",{children:[e.jsx(t.Typography,{tag:"h5",className:"mb-3",children:"Many Options"}),e.jsx(t.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 mb-4",children:"Handles large lists efficiently with scrollable dropdown."}),e.jsx("div",{className:"max-w-md",children:e.jsx(t.TabSelect,{tabMenu:n,selectedTabIndex:s,onChange:g})}),e.jsx("div",{className:"mt-4 p-4 bg-light-dark rounded-lg",children:e.jsxs(t.Typography,{tag:"p",className:"text-sm",children:["Selected option:"," ",e.jsx("span",{className:"font-semibold text-brand",children:n[s].title})," ","(",s+1," of ",n.length,")"]})})]})]})})})}),e.jsx(t.CardContainer,{className:"overflow-hidden",children:e.jsx(t.CardTitle,{title:"Use Cases",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"space-y-6",children:[e.jsxs("div",{children:[e.jsx(t.Typography,{tag:"h5",className:"mb-2",children:"Mobile Navigation"}),e.jsxs(t.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 mb-3",children:["Perfect for replacing horizontal tab bars on mobile devices where space is limited.",e.jsx("code",{className:"ml-1 text-xs border border-gray-300 dark:border-gray-600 px-2 py-1 rounded",children:"ParamTab"})," ","automatically switches to TabSelect on mobile breakpoints."]}),e.jsx(t.CardContainer,{className:"p-4 bg-blue-50 dark:bg-blue-900/20",children:e.jsxs(t.Typography,{tag:"p",className:"text-sm",children:[e.jsx("span",{role:"img","aria-label":"tip",children:"💡"})," ",e.jsx("span",{className:"font-semibold",children:"Tip:"})," Use TabSelect when you have 4+ tabs and limited horizontal space."]})})]}),e.jsxs("div",{children:[e.jsx(t.Typography,{tag:"h5",className:"mb-2",children:"Form Filters"}),e.jsx(t.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 mb-3",children:"Use as a filter selector in forms and data tables to switch between different views or data categories."})]}),e.jsxs("div",{children:[e.jsx(t.Typography,{tag:"h5",className:"mb-2",children:"Settings Panels"}),e.jsx(t.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:"Navigate between different settings sections in a compact, accessible dropdown format."})]})]})})})}),e.jsx(t.CardContainer,{className:"overflow-hidden",children:e.jsx(t.CardTitle,{title:"Features",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4",children:[e.jsxs(t.CardContainer,{className:"p-4",children:[e.jsxs(t.Typography,{tag:"h5",className:"mb-2",children:[e.jsx("span",{role:"img","aria-label":"palette",children:"🎨"})," ","Smooth Animations"]}),e.jsx(t.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:"Chevron rotation and dropdown transitions with translate-y effects."})]}),e.jsxs(t.CardContainer,{className:"p-4",children:[e.jsxs(t.Typography,{tag:"h5",className:"mb-2",children:[e.jsx("span",{role:"img","aria-label":"moon",children:"🌙"})," ","Dark Mode"]}),e.jsx(t.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:"Full dark mode support with automatic theme adaptation."})]}),e.jsxs(t.CardContainer,{className:"p-4",children:[e.jsxs(t.Typography,{tag:"h5",className:"mb-2",children:[e.jsx("span",{role:"img","aria-label":"lightning",children:"⚡"})," ","Performance"]}),e.jsx(t.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:"Optimized rendering with proper key management for large lists."})]}),e.jsxs(t.CardContainer,{className:"p-4",children:[e.jsxs(t.Typography,{tag:"h5",className:"mb-2",children:[e.jsx("span",{role:"img","aria-label":"target",children:"🎯"})," ","Accessibility"]}),e.jsx(t.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:"Keyboard navigation and focus management built-in."})]})]})})})}),e.jsx(t.CardContainer,{className:"overflow-hidden",children:e.jsx(t.CardTitle,{title:"TabSelectMenuItem Interface",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(t.BasicTable,{columns:p,data:u})})})}),e.jsx(t.CardContainer,{className:"overflow-hidden",children:e.jsx(t.CardTitle,{title:"Props",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(t.BasicTable,{columns:p,data:b})})})}),e.jsx(t.CardContainer,{className:"overflow-hidden",children:e.jsx(t.CardTitle,{title:"Code Examples",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(t.CodeBlock,{language:"tsx",code:`import { TabSelect } from '@e-burgos/tucu-ui';
|
|
2
|
-
import { useState } from 'react';
|
|
3
|
-
import { Home, Settings, User } from 'lucide-react';
|
|
4
|
-
|
|
5
|
-
// Basic usage
|
|
6
|
-
function BasicExample() {
|
|
7
|
-
const [selectedIndex, setSelectedIndex] = useState(0);
|
|
8
|
-
|
|
9
|
-
const tabMenu = [
|
|
10
|
-
{ title: 'Dashboard', path: 'dashboard' },
|
|
11
|
-
{ title: 'Analytics', path: 'analytics' },
|
|
12
|
-
{ title: 'Reports', path: 'reports' },
|
|
13
|
-
{ title: 'Settings', path: 'settings' },
|
|
14
|
-
];
|
|
15
|
-
|
|
16
|
-
return (
|
|
17
|
-
<TabSelect
|
|
18
|
-
tabMenu={tabMenu}
|
|
19
|
-
selectedTabIndex={selectedIndex}
|
|
20
|
-
onChange={setSelectedIndex}
|
|
21
|
-
/>
|
|
22
|
-
);
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
// With icons
|
|
26
|
-
function IconExample() {
|
|
27
|
-
const [selectedIndex, setSelectedIndex] = useState(0);
|
|
28
|
-
|
|
29
|
-
const tabMenu = [
|
|
30
|
-
{
|
|
31
|
-
title: (
|
|
32
|
-
<span className="flex items-center gap-2">
|
|
33
|
-
<Home size={16} />
|
|
34
|
-
Home
|
|
35
|
-
</span>
|
|
36
|
-
),
|
|
37
|
-
path: 'home'
|
|
38
|
-
},
|
|
39
|
-
{
|
|
40
|
-
title: (
|
|
41
|
-
<span className="flex items-center gap-2">
|
|
42
|
-
<User size={16} />
|
|
43
|
-
Profile
|
|
44
|
-
</span>
|
|
45
|
-
),
|
|
46
|
-
path: 'profile'
|
|
47
|
-
},
|
|
48
|
-
];
|
|
49
|
-
|
|
50
|
-
return (
|
|
51
|
-
<TabSelect
|
|
52
|
-
tabMenu={tabMenu}
|
|
53
|
-
selectedTabIndex={selectedIndex}
|
|
54
|
-
onChange={setSelectedIndex}
|
|
55
|
-
/>
|
|
56
|
-
);
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
// Integration with ParamTab
|
|
60
|
-
// ParamTab automatically uses TabSelect on mobile devices
|
|
61
|
-
import { ParamTab, TabPanel } from '@e-burgos/tucu-ui';
|
|
62
|
-
|
|
63
|
-
function ResponsiveTabs() {
|
|
64
|
-
const tabMenu = [
|
|
65
|
-
{ title: 'Overview', path: 'overview' },
|
|
66
|
-
{ title: 'Details', path: 'details' },
|
|
67
|
-
{ title: 'Settings', path: 'settings' },
|
|
68
|
-
];
|
|
69
|
-
|
|
70
|
-
return (
|
|
71
|
-
<ParamTab tabMenu={tabMenu}>
|
|
72
|
-
<TabPanel>Overview content</TabPanel>
|
|
73
|
-
<TabPanel>Details content</TabPanel>
|
|
74
|
-
<TabPanel>Settings content</TabPanel>
|
|
75
|
-
</ParamTab>
|
|
76
|
-
);
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
// Custom styling
|
|
80
|
-
function CustomExample() {
|
|
81
|
-
const [selectedIndex, setSelectedIndex] = useState(0);
|
|
82
|
-
|
|
83
|
-
const tabMenu = [
|
|
84
|
-
{ title: 'Option 1', path: 'opt1' },
|
|
85
|
-
{ title: 'Option 2', path: 'opt2' },
|
|
86
|
-
];
|
|
87
|
-
|
|
88
|
-
return (
|
|
89
|
-
<div className="max-w-md">
|
|
90
|
-
<TabSelect
|
|
91
|
-
tabMenu={tabMenu}
|
|
92
|
-
selectedTabIndex={selectedIndex}
|
|
93
|
-
onChange={(index) => {
|
|
94
|
-
console.log('Selected:', tabMenu[index].path);
|
|
95
|
-
setSelectedIndex(index);
|
|
96
|
-
}}
|
|
97
|
-
/>
|
|
98
|
-
</div>
|
|
99
|
-
);
|
|
100
|
-
}`})})})})]})};exports.default=y;
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("./index-BOfUOCHe.js"),a=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const r=()=>e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"text-center",children:[e.jsx(s.Typography,{tag:"h2",className:"mb-4 text-2xl sm:text-3xl md:text-4xl font-bold",children:"Tailwind CSS Configuration"}),e.jsx(s.Typography,{tag:"p",className:"text-base sm:text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto",children:"Built on Tailwind CSS v4 with Tucu UI Design Tokens"})]}),e.jsx(s.CardContainer,{children:e.jsx(s.CardTitle,{title:"Design Tokens & Configuration",className:"mt-2 mb-6",children:e.jsxs("div",{className:"space-y-8",children:[e.jsxs("div",{className:"grid grid-cols-1 gap-6",children:[e.jsxs("div",{className:"space-y-4",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"p-2 bg-gradient-to-br from-indigo-500 to-purple-500 rounded-lg shadow-lg",children:e.jsx(a.Palette,{className:"w-5 h-5 text-white filter drop-shadow-sm"})}),e.jsx(s.Typography,{tag:"h4",className:"font-semibold",children:"Color Spectrums"})]}),e.jsx(s.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400 text-sm",children:"The system uses Tucu UI Design Tokens organized into color spectrums:"}),e.jsxs("ul",{className:"space-y-2 text-sm text-gray-600 dark:text-gray-400",children:[e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx(a.Circle,{className:"w-2 h-2 mt-1.5 shrink-0 text-brand"}),e.jsxs("span",{children:[e.jsx("strong",{children:"Color Spectrums:"})," Blue, Green, Orange, Gray, Indigo, Pink, Purple, Red, Teal, Yellow, Chartreuse"]})]}),e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx(a.Circle,{className:"w-2 h-2 mt-1.5 shrink-0 text-brand"}),e.jsxs("span",{children:[e.jsx("strong",{children:"Color Scale:"})," Each spectrum has values from 0-100 (e.g., blue-0 to blue-100)"]})]}),e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx(a.Circle,{className:"w-2 h-2 mt-1.5 shrink-0 text-brand"}),e.jsxs("span",{children:[e.jsx("strong",{children:"Light & Dark Variants:"})," Separate color sets for light and dark modes"]})]})]})]}),e.jsxs("div",{className:"space-y-4 mt-4",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"p-2 bg-gradient-to-br from-cyan-500 to-blue-500 rounded-lg shadow-lg",children:e.jsx(a.Code,{className:"w-5 h-5 text-white filter drop-shadow-sm"})}),e.jsx(s.Typography,{tag:"h4",className:"font-semibold",children:"Semantic Colors"})]}),e.jsx(s.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400 text-sm mb-3",children:"Semantic colors map design tokens to functional purposes:"}),e.jsx(s.CodeBlock,{language:"css",code:`/* Semantic Background Colors */
|
|
2
|
-
--color-semantic-bg-primary: var(--color-tucu-ui-blue-60);
|
|
3
|
-
--color-semantic-bg-secondary: var(--color-tucu-ui-gray-10);
|
|
4
|
-
--color-semantic-bg-positive: var(--color-tucu-ui-green-60);
|
|
5
|
-
--color-semantic-bg-negative: var(--color-tucu-ui-red-60);
|
|
6
|
-
|
|
7
|
-
/* Semantic Foreground Colors */
|
|
8
|
-
--color-semantic-fg: var(--color-tucu-ui-gray-100);
|
|
9
|
-
--color-semantic-fg-muted: var(--color-tucu-ui-gray-60);
|
|
10
|
-
--color-semantic-fg-primary: var(--color-tucu-ui-blue-60);`})]})]}),e.jsxs("div",{className:"space-y-4 mt-4",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"p-2 bg-gradient-to-br from-green-500 to-emerald-500 rounded-lg shadow-lg",children:e.jsx(a.Ruler,{className:"w-5 h-5 text-white filter drop-shadow-sm"})}),e.jsx(s.Typography,{tag:"h4",className:"font-semibold",children:"Spacing Scale"})]}),e.jsx(s.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400 text-sm mb-3",children:"The spacing scale is mapped to Tucu UI Design Tokens. All spacing values use arbitrary values in pixels to maintain consistency:"}),e.jsx(s.CodeBlock,{language:"css",code:`/* Spacing Scale - Mapped to Tucu UI Design Tokens */
|
|
11
|
-
--spacing-0: 0px;
|
|
12
|
-
--spacing-1: 8px; /* --spacing-tucu-ui-1 */
|
|
13
|
-
--spacing-2: 16px; /* --spacing-tucu-ui-2 */
|
|
14
|
-
--spacing-3: 24px; /* --spacing-tucu-ui-3 */
|
|
15
|
-
--spacing-4: 32px; /* --spacing-tucu-ui-4 */
|
|
16
|
-
--spacing-5: 40px; /* --spacing-tucu-ui-5 */
|
|
17
|
-
--spacing-6: 48px; /* --spacing-tucu-ui-6 */
|
|
18
|
-
--spacing-8: 64px; /* --spacing-tucu-ui-8 */
|
|
19
|
-
--spacing-10: 80px; /* --spacing-tucu-ui-10 */`}),e.jsxs(s.Alert,{variant:"info",children:[" ",e.jsxs(s.Typography,{tag:"p",className:"text-sm",children:[e.jsx("strong",{children:"Note:"})," Components use arbitrary values like"," ",e.jsx("code",{className:"p-1 border border-gray-300 dark:border-gray-700 rounded text-xs",children:"p-[16px]"})," ","instead of"," ",e.jsx("code",{className:"p-1 border border-gray-300 dark:border-gray-700 rounded text-xs",children:"p-4"})," ","to maintain original Tailwind spacing values."]})]})]})]})})})]});exports.default=r;
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("./index-BOfUOCHe.js"),a=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const r=()=>e.jsx("div",{className:"space-y-8",children:e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Accessibility Testing",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full space-y-8 p-4 sm:p-6",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"p-2 rounded-lg bg-linear-to-br from-orange-500 via-amber-500 to-yellow-500 shadow-lg",children:e.jsx(a.TestTube,{className:"w-6 h-6 text-white filter drop-shadow-sm"})}),e.jsx(s.Typography,{tag:"h3",className:"text-xl font-semibold",children:"Testing Guidelines"})]}),e.jsxs("div",{className:"space-y-6",children:[e.jsxs("div",{className:"space-y-4",children:[e.jsx(s.Typography,{tag:"h4",className:"font-semibold",children:"Manual Testing Checklist"}),e.jsx("div",{className:"space-y-2",children:["Navigate using only keyboard","Test with screen reader (NVDA, JAWS, VoiceOver)","Check color contrast ratios","Verify focus indicators are visible","Test at 200% zoom level","Validate HTML markup","Check for proper heading hierarchy","Test form labels and error messages"].map((i,t)=>e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(a.Check,{className:"w-4 h-4 text-green-500"}),e.jsx(s.Typography,{tag:"p",className:"text-sm",children:i})]},t))})]}),e.jsxs("div",{className:"space-y-4",children:[e.jsx(s.Typography,{tag:"h4",className:"font-semibold",children:"Automated Testing Example"}),e.jsx(s.CodeBlock,{code:`import { render, screen } from '@testing-library/react';
|
|
2
|
-
import { axe, toHaveNoViolations } from 'jest-axe';
|
|
3
|
-
|
|
4
|
-
expect.extend(toHaveNoViolations);
|
|
5
|
-
|
|
6
|
-
test('Input has no accessibility violations', async () => {
|
|
7
|
-
const { container } = render(
|
|
8
|
-
<Input label="Email" required error="Invalid email" />
|
|
9
|
-
);
|
|
10
|
-
const results = await axe(container);
|
|
11
|
-
expect(results).toHaveNoViolations();
|
|
12
|
-
});`,language:"js"})]})]})]})})})});exports.default=r;
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("react"),a=require("./index-BOfUOCHe.js");require("lucide-react");require("react-router-dom");require("react-dom");const d=()=>{const[t,l]=o.useState(""),i=[{key:"prop",label:"Prop",render:r=>e.jsx("code",{className:"text-xs text-brand",children:String(r)})},{key:"type",label:"Type",render:r=>e.jsx("code",{className:"text-xs",children:String(r)})},{key:"default",label:"Default",render:r=>{const s=String(r);return s==="required"?e.jsx("span",{className:"text-xs text-red-500",children:"required"}):e.jsx("code",{className:"text-xs",children:s})}},{key:"description",label:"Description"}],n=[{prop:"label",type:"string",default:"-",description:"Field label text"},{prop:"variant",type:"'ghost' | 'solid' | 'transparent'",default:"'ghost'",description:"Visual variant of the textarea"},{prop:"error",type:"string",default:"-",description:"Error message to display"},{prop:"helperText",type:"string",default:"-",description:"Helper text displayed below the textarea"},{prop:"disabled",type:"boolean",default:"false",description:"Disables the textarea field"},{prop:"rows",type:"number",default:"-",description:"Number of visible text lines"},{prop:"useUppercaseLabel",type:"boolean",default:"false",description:"Display label in uppercase"},{prop:"className",type:"string",default:"-",description:"Custom CSS classes for the container"},{prop:"inputClassName",type:"string",default:"-",description:"Custom CSS classes for the textarea element"}];return e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"text-center space-y-4",children:[e.jsx(a.Typography,{tag:"h2",className:"text-3xl md:text-4xl font-bold",children:"Textarea"}),e.jsx(a.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"A multi-line text input component for longer text content."})]}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Examples",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4",children:[e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Basic Textarea"}),e.jsx(a.Textarea,{label:"Message",placeholder:"Write your message here",value:t,onChange:r=>l(r.target.value),rows:4})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"With Helper Text"}),e.jsx(a.Textarea,{label:"Description",placeholder:"Enter description",helperText:"Provide a detailed description",rows:4})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"With Error"}),e.jsx(a.Textarea,{label:"Comments",placeholder:"Enter comments",error:"Comments are required",rows:4})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Disabled"}),e.jsx(a.Textarea,{label:"Notes",placeholder:"Disabled textarea",disabled:!0,rows:4})]})]})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Variants",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-3 gap-4",children:[e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Ghost (default)"}),e.jsx(a.Textarea,{label:"Ghost Variant",placeholder:"Enter text",variant:"ghost",rows:3})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Solid"}),e.jsx(a.Textarea,{label:"Solid Variant",placeholder:"Enter text",variant:"solid",rows:3})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Transparent"}),e.jsx(a.Textarea,{label:"Transparent Variant",placeholder:"Enter text",variant:"transparent",rows:3})]})]})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Props",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.BasicTable,{columns:i,data:n})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.CodeBlock,{language:"tsx",code:`import { Textarea } from '@e-burgos/tucu-ui';
|
|
2
|
-
|
|
3
|
-
<Textarea
|
|
4
|
-
label="Message"
|
|
5
|
-
placeholder="Write your message here"
|
|
6
|
-
value={value}
|
|
7
|
-
onChange={(e) => setValue(e.target.value)}
|
|
8
|
-
rows={4}
|
|
9
|
-
/>
|
|
10
|
-
|
|
11
|
-
<Textarea
|
|
12
|
-
label="Description"
|
|
13
|
-
placeholder="Enter description"
|
|
14
|
-
helperText="Provide a detailed description"
|
|
15
|
-
rows={4}
|
|
16
|
-
/>
|
|
17
|
-
|
|
18
|
-
// Variants
|
|
19
|
-
<Textarea label="Ghost" variant="ghost" rows={4} />
|
|
20
|
-
<Textarea label="Solid" variant="solid" rows={4} />
|
|
21
|
-
<Textarea label="Transparent" variant="transparent" rows={4} />`})})})})]})};exports.default=d;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("./index-BOfUOCHe.js"),a=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const l=()=>e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"text-center",children:[e.jsx(t.Typography,{tag:"h2",className:"mb-4 text-2xl sm:text-3xl md:text-4xl font-bold",children:"Theme Architecture"}),e.jsx(t.Typography,{tag:"p",className:"text-base sm:text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto",children:"Built on modern technologies for flexibility and performance"})]}),e.jsx("div",{className:"grid grid-cols-1 md:grid-cols-3 gap-6",children:[{icon:e.jsx(a.Zap,{className:"w-8 h-8 text-white filter drop-shadow-sm"}),title:"Zustand State Management",description:"Centralized theme state with minimal boilerplate and excellent TypeScript support",color:"from-yellow-500 via-amber-500 to-orange-500",features:["Lightweight","TypeScript First","DevTools Support"]},{icon:e.jsx(a.Palette,{className:"w-8 h-8 text-white filter drop-shadow-sm"}),title:"CSS Custom Properties",description:"Dynamic brand colors using CSS variables for real-time theme updates",color:"from-blue-500 via-cyan-500 to-teal-500",features:["Dynamic Colors","Alpha Support","No Rebuilds"]},{icon:e.jsx(a.Moon,{className:"w-8 h-8 text-white filter drop-shadow-sm"}),title:"Dark Mode Support",description:"Automatic dark/light mode switching with smooth transitions",color:"from-purple-500 via-violet-500 to-indigo-500",features:["Auto Detection","Smooth Transitions","System Sync"]}].map((r,i)=>e.jsx(t.CardContainer,{className:"group hover:shadow-large transition-all duration-300 hover:-translate-y-1",children:e.jsxs("div",{className:"space-y-4",children:[e.jsxs("div",{className:"flex items-center gap-4",children:[e.jsx("div",{className:`p-3 rounded-xl bg-gradient-to-br ${r.color} group-hover:scale-110 transition-all duration-300 shadow-lg`,children:r.icon}),e.jsx(t.Typography,{tag:"h3",className:"font-semibold text-lg group-hover:text-primary transition-colors duration-300",children:r.title})]}),e.jsx(t.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400 leading-relaxed",children:r.description}),e.jsx("div",{className:"flex flex-wrap gap-2",children:r.features.map((s,o)=>e.jsx(t.Badge,{variant:"outline",className:"text-xs",children:s},o))})]})},i))})]});exports.default=l;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("./index-BOfUOCHe.js"),o=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const s=()=>e.jsx(l.CardContainer,{children:e.jsx(l.CardTitle,{title:"Theme Configuration",className:"mt-2 mb-6",children:e.jsx("div",{className:"space-y-8",children:e.jsxs("div",{className:"grid grid-cols-1 gap-6",children:[e.jsxs("div",{className:"space-y-4",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"p-2 bg-gradient-to-br from-emerald-500 to-teal-500 rounded-lg shadow-lg",children:e.jsx(o.Settings,{className:"w-5 h-5 text-white filter drop-shadow-sm"})}),e.jsx(l.Typography,{tag:"h4",className:"font-semibold",children:"Available Options"})]}),e.jsx("div",{className:"space-y-3",children:[{label:"Mode",value:"'light' | 'dark'"},{label:"Direction",value:"'ltr' | 'rtl'"},{label:"Layout",value:"'clean' | 'admin' | 'horizontal'"},{label:"Primary Color",value:"34+ predefined colors"},{label:"Dark Primary Color",value:"34+ predefined colors"},{label:"Secondary Color",value:"34+ predefined colors"},{label:"Dark Secondary Color",value:"34+ predefined colors"},{label:"Accent Color",value:"34+ predefined colors"},{label:"Dark Accent Color",value:"34+ predefined colors"},{label:"Muted Color",value:"34+ predefined colors"},{label:"Dark Muted Color",value:"34+ predefined colors"},{label:"Dark Background",value:"Theme base colors"},{label:"Light Background",value:"Theme base colors"},{label:"Light Dark",value:"Theme base colors"},{label:"Dark Light Dark",value:"Theme base colors"},{label:"Language",value:"'en' | 'es' | 'fr'"}].map((a,r)=>e.jsxs("div",{className:"flex justify-between items-center py-2 px-3 bg-gray-200 dark:bg-gray-800 rounded-lg",children:[e.jsx("span",{className:"font-medium",children:a.label}),e.jsx("code",{className:"text-sm text-gray-600 dark:text-gray-400",children:a.value})]},r))})]}),e.jsxs("div",{className:"space-y-4 mt-4",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"p-2 bg-gradient-to-br from-pink-500 to-rose-500 rounded-lg shadow-lg",children:e.jsx(o.Palette,{className:"w-5 h-5 text-white filter drop-shadow-sm"})}),e.jsx(l.Typography,{tag:"h4",className:"font-semibold",children:"Color Presets"})]}),e.jsx("div",{className:"grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3 overflow-y-auto",children:[{name:"DEFAULT_PRIMARY",color:"#0052ff"},{name:"DEFAULT_DARK_PRIMARY",color:"#578bfa"},{name:"DEFAULT_SECONDARY",color:"#eef0f3"},{name:"DEFAULT_DARK_SECONDARY",color:"#282b31"},{name:"DEFAULT_ACCENT",color:"#f7d21a"},{name:"DEFAULT_DARK_ACCENT",color:"#936000"},{name:"DEFAULT_MUTED",color:"#5b616e"},{name:"DEFAULT_DARK_MUTED",color:"#8a919e"},{name:"DEFAULT_LIGHT_BG",color:"#ffffff"},{name:"DEFAULT_DARK_BG",color:"#0a0b0d"},{name:"DEFAULT_LIGHT_DARK",color:"#f7f8f9"},{name:"DEFAULT_DARK_LIGHT_DARK",color:"#141519"},{name:"BLUE",color:"#105eff"},{name:"DARK_BLUE",color:"#2162ee"},{name:"GREEN",color:"#129961"},{name:"DARK_GREEN",color:"#159962"},{name:"ORANGE",color:"#e1591b"},{name:"DARK_ORANGE",color:"#e66020"},{name:"GRAY",color:"#717886"},{name:"DARK_GRAY",color:"#727886"},{name:"INDIGO",color:"#596ff2"},{name:"DARK_INDIGO",color:"#5c71ee"},{name:"PINK",color:"#cb51bb"},{name:"DARK_PINK",color:"#d058c1"},{name:"PURPLE",color:"#9d6bf2"},{name:"DARK_PURPLE",color:"#bc7bfb"},{name:"RED",color:"#e13947"},{name:"DARK_RED",color:"#e6404e"},{name:"TEAL",color:"#0093cb"},{name:"DARK_TEAL",color:"#0095cd"},{name:"YELLOW",color:"#cf9700"},{name:"DARK_YELLOW",color:"#c79e00"},{name:"CHARTREUSE",color:"#56b340"},{name:"DARK_CHARTREUSE",color:"#7bc869"}].map((a,r)=>e.jsxs("div",{className:"flex items-center gap-2 p-2 bg-gray-200 dark:bg-gray-800 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors",children:[e.jsx("div",{className:"w-4 h-4 rounded-full border border-gray-300 dark:border-gray-600 shadow-sm",style:{backgroundColor:a.color}}),e.jsx("span",{className:"text-xs font-medium truncate",children:a.name})]},r))}),e.jsx(l.Typography,{tag:"p",className:"text-xs text-gray-500 dark:text-gray-400 mt-2",children:"34 total color presets available (12 default + 22 spectrum colors)"})]})]})})})});exports.default=s;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("./index-BOfUOCHe.js");require("lucide-react");require("react-router-dom");require("react");require("react-dom");const t=()=>e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"text-center",children:[e.jsx(s.Typography,{tag:"h2",className:"mb-4 text-2xl sm:text-3xl md:text-4xl font-bold",children:"Theme Hooks"}),e.jsx(s.Typography,{tag:"p",className:"text-base sm:text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto",children:"Powerful hooks for theme management and customization"})]}),e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-6",children:[e.jsx(s.CardContainer,{children:e.jsx(s.CardTitle,{title:"useTheme Hook",className:"mt-2 mb-6",children:e.jsxs("div",{className:"space-y-4",children:[e.jsxs(s.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400 text-sm",children:["The"," ",e.jsx("code",{className:"px-2 py-1 bg-light-dark rounded text-sm",children:"useTheme"})," ","hook provides access to all theme state and setters. It uses Zustand for state management with localStorage persistence."]}),e.jsxs("div",{className:"space-y-2",children:[e.jsx(s.Typography,{tag:"h5",className:"font-semibold text-sm",children:"Available State:"}),e.jsxs("ul",{className:"text-xs text-gray-600 dark:text-gray-400 space-y-1 ml-4 list-disc",children:[e.jsx("li",{children:"mode, layout, direction, logo, lang"}),e.jsx("li",{children:"primaryPreset, darkPrimaryPreset"}),e.jsx("li",{children:"secondaryPreset, darkSecondaryPreset"}),e.jsx("li",{children:"accentPreset, darkAccentPreset"}),e.jsx("li",{children:"mutedPreset, darkMutedPreset"}),e.jsx("li",{children:"darkBgPreset, lightBgPreset"}),e.jsx("li",{children:"lightDarkPreset, darkLightDarkPreset"}),e.jsx("li",{children:"isSettingsOpen, showSettings"})]})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsx(s.Typography,{tag:"h5",className:"font-semibold text-sm",children:"Available Setters:"}),e.jsxs("ul",{className:"text-xs text-gray-600 dark:text-gray-400 space-y-1 ml-4 list-disc",children:[e.jsx("li",{children:"setMode, setLayout, setDirection"}),e.jsx("li",{children:"setPrimaryPreset, setDarkPrimaryPreset"}),e.jsx("li",{children:"setSecondaryPreset, setDarkSecondaryPreset"}),e.jsx("li",{children:"setAccentPreset, setDarkAccentPreset"}),e.jsx("li",{children:"setMutedPreset, setDarkMutedPreset"}),e.jsx("li",{children:"setDarkBgPreset, setLightBgPreset"}),e.jsx("li",{children:"setLightDarkPreset, setDarkLightDarkPreset"}),e.jsx("li",{children:"setLogo, setLang, setIsSettingsOpen"}),e.jsx("li",{children:"setShowSettings, restoreDefaultColors"})]})]})]})})}),e.jsx(s.CardContainer,{children:e.jsx(s.CardTitle,{title:"useThemeColor & useDirection",className:"mt-2 mb-6",children:e.jsx("div",{className:"space-y-4",children:e.jsxs("div",{className:"space-y-3",children:[e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"font-semibold text-sm mb-2",children:"useThemeColor"}),e.jsx(s.Typography,{tag:"p",className:"text-xs text-gray-600 dark:text-gray-400 mb-2",children:"Automatically used by ThemeWrapper to inject CSS variables into the document root:"}),e.jsxs("ul",{className:"text-xs text-gray-600 dark:text-gray-400 space-y-1 ml-4 list-disc",children:[e.jsx("li",{children:"--color-semantic-bg-primary"}),e.jsx("li",{children:"--color-semantic-dark-bg-primary"}),e.jsx("li",{children:"--color-semantic-bg-secondary"}),e.jsx("li",{children:"--color-semantic-accent-bold-yellow"}),e.jsx("li",{children:"--color-semantic-fg-muted"}),e.jsx("li",{children:"--color-semantic-bg"}),e.jsx("li",{children:"--color-semantic-bg-secondary-wash"})]})]}),e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"font-semibold text-sm mb-2",children:"useDirection"}),e.jsxs(s.Typography,{tag:"p",className:"text-xs text-gray-600 dark:text-gray-400",children:["Sets the document direction for RTL/LTR support. Sets"," ",e.jsx("code",{className:"px-1 py-0.5 bg-light-dark rounded text-xs",children:"document.documentElement.dir"}),"."]})]})]})})})})]})]});exports.default=t;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("./index-BOfUOCHe.js"),o=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const t=()=>e.jsxs(e.Fragment,{children:[e.jsx(r.Alert,{variant:"warning",children:e.jsxs("div",{children:[e.jsxs("div",{className:"flex items-center gap-2 font-semibold",children:[e.jsx(o.AlertTriangle,{className:"h-4 w-4"}),"ThemeProvider Required"]}),e.jsxs("div",{children:["Before using any layout components or theme hooks, you MUST wrap your application with ThemeProvider. All layout components and theme hooks depend on the theme context provided by ThemeProvider. Located in"," ",e.jsx("code",{className:"px-1 py-0.5 border border-gray-300 dark:border-gray-700 rounded text-xs",children:"ui/tucu-ui/src/themes/components/theme-provider"}),"."]})]})}),e.jsx(r.CardContainer,{className:"overflow-hidden",children:e.jsx(r.CardTitle,{title:"Routing System",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full space-y-6 p-4 sm:p-6",children:[e.jsxs(r.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:[e.jsx("strong",{children:"ThemeProvider"})," includes"," ",e.jsx("code",{className:"px-1 py-0.5 border border-gray-300 dark:border-gray-700 rounded text-xs",children:"BrowserRouter"})," ","from React Router and handles routing automatically. You have two options:"]}),e.jsxs("div",{className:"space-y-4",children:[e.jsxs("div",{className:"p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800",children:[e.jsx(r.Typography,{tag:"h4",className:"font-semibold mb-2",children:"1. Automatic Routing (Default)"}),e.jsxs(r.Typography,{tag:"p",className:"text-sm text-gray-700 dark:text-gray-300 mb-2",children:["Provide ",e.jsx("code",{children:"menuItems"})," with ",e.jsx("code",{children:"component"})," ","prop. ThemeProvider will automatically generate routes from your menu items."]}),e.jsxs(r.Typography,{tag:"p",className:"text-xs text-gray-600 dark:text-gray-400",children:[e.jsx("strong",{children:"Use when:"})," You want routing based on menu items. Each menu item with a ",e.jsx("code",{children:"component"})," prop becomes a route."]})]}),e.jsxs("div",{className:"p-4 bg-green-50 dark:bg-green-900/20 rounded-lg border border-green-200 dark:border-green-800",children:[e.jsx(r.Typography,{tag:"h4",className:"font-semibold mb-2",children:"2. Custom Routing"}),e.jsxs(r.Typography,{tag:"p",className:"text-sm text-gray-700 dark:text-gray-300 mb-2",children:["Provide ",e.jsx("code",{children:"customRoutes"})," prop with your own"," ",e.jsx("code",{children:"<Routes>"})," component. This gives you full control over routing."]}),e.jsxs(r.Typography,{tag:"p",className:"text-xs text-gray-600 dark:text-gray-400",children:[e.jsx("strong",{children:"Use when:"})," You need custom routing logic, landing pages without navigation, or complex routing scenarios."]})]})]})]})})})]});exports.default=t;
|