@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
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-D874Kozv.js");require("lucide-react");require("react-router-dom");require("react");require("react-dom");const o=()=>e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"text-center",children:[e.jsx(a.Typography,{tag:"h2",className:"mb-4 text-2xl sm:text-3xl md:text-4xl font-bold",children:"Advanced Color System"}),e.jsx(a.Typography,{tag:"p",className:"text-base sm:text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto",children:"Multi-layered color architecture with dynamic theming capabilities"})]}),e.jsxs("div",{className:"grid grid-cols-1 gap-6",children:[e.jsx(a.CardContainer,{children:e.jsx(a.CardTitle,{title:"Color Layers",className:"mt-2 mb-6",children:e.jsxs("div",{className:"space-y-4",children:[e.jsx(a.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"The theming system supports multiple color layers for comprehensive theming:"}),e.jsx("div",{className:"space-y-3",children:[{layer:"Primary",description:"Primary brand identity color",variable:"--color-semantic-bg-primary",default:"#0052ff (DEFAULT_PRIMARY)"},{layer:"Dark Primary",description:"Primary color for dark mode",variable:"--color-semantic-dark-bg-primary",default:"#578bfa (DEFAULT_DARK_PRIMARY)"},{layer:"Secondary",description:"Supporting color for accents",variable:"--color-semantic-bg-secondary",default:"#eef0f3 (DEFAULT_SECONDARY)"},{layer:"Dark Secondary",description:"Secondary color for dark mode",variable:"--color-semantic-dark-bg-secondary",default:"#282b31 (DEFAULT_DARK_SECONDARY)"},{layer:"Accent",description:"Highlight color for actions",variable:"--color-semantic-accent-bold-yellow",default:"#f7d21a (DEFAULT_ACCENT)"},{layer:"Dark Accent",description:"Accent color for dark mode",variable:"--color-semantic-dark-accent-bold-yellow",default:"#936000 (DEFAULT_DARK_ACCENT)"},{layer:"Muted",description:"Muted text color",variable:"--color-semantic-fg-muted",default:"#5b616e (DEFAULT_MUTED)"},{layer:"Dark Muted",description:"Muted text color for dark mode",variable:"--color-semantic-dark-fg-muted",default:"#8a919e (DEFAULT_DARK_MUTED)"},{layer:"Dark Background",description:"Dark theme base color",variable:"--color-semantic-dark-bg",default:"#0a0b0d (DEFAULT_DARK_BG)"},{layer:"Light Background",description:"Light theme base color",variable:"--color-semantic-bg",default:"#ffffff (DEFAULT_LIGHT_BG)"},{layer:"Light Dark",description:"Light theme secondary background",variable:"--color-semantic-bg-secondary-wash",default:"#f7f8f9 (DEFAULT_LIGHT_DARK)"},{layer:"Dark Light Dark",description:"Dark theme secondary background",variable:"--color-semantic-dark-bg-secondary-wash",default:"#141519 (DEFAULT_DARK_LIGHT_DARK)"}].map((r,t)=>e.jsxs("div",{className:"p-3 bg-gray-200 dark:bg-gray-800 rounded-lg",children:[e.jsxs("div",{className:"flex items-center justify-between mb-2",children:[e.jsx(a.Typography,{tag:"h5",className:"font-semibold text-sm",children:r.layer}),e.jsx(a.Typography,{tag:"code",className:"text-xs text-gray-500 dark:text-gray-400",children:r.variable})]}),e.jsx(a.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 mb-1",children:r.description}),e.jsxs(a.Typography,{tag:"p",className:"text-xs text-gray-500 dark:text-gray-500",children:["Default: ",r.default]})]},t))})]})})}),e.jsx(a.CardContainer,{children:e.jsx(a.CardTitle,{title:"Dynamic Color Mixing",className:"mt-2 mb-6 h-full",children:e.jsxs("div",{className:"space-y-4",children:[e.jsx(a.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"Advanced color manipulation using CSS color-mix() for automatic variations:"}),e.jsx(a.CodeBlock,{language:"css",expanded:!1,code:`/* Theme colors are available via CSS variables */
|
|
2
|
+
--color-semantic-bg-primary: var(--color-tucu-ui-blue-60);
|
|
3
|
+
--color-semantic-dark-bg-primary: var(--color-tucu-ui-dark-blue-70);
|
|
4
|
+
--color-semantic-bg-secondary: var(--color-tucu-ui-gray-10);
|
|
5
|
+
--color-semantic-accent-bold-yellow: var(--color-tucu-ui-yellow-30);
|
|
6
|
+
--color-semantic-fg-muted: var(--color-tucu-ui-gray-60);
|
|
7
|
+
|
|
8
|
+
/* Tailwind utilities */
|
|
9
|
+
.bg-brand /* Uses --color-semantic-bg-primary */
|
|
10
|
+
.text-brand /* Uses --color-semantic-bg-primary */
|
|
11
|
+
.bg-secondary /* Uses --color-semantic-bg-secondary */
|
|
12
|
+
.text-muted /* Uses --color-semantic-fg-muted */
|
|
13
|
+
|
|
14
|
+
/* Opacity support */
|
|
15
|
+
.bg-brand/50 /* 50% opacity */
|
|
16
|
+
.text-brand/80 /* 80% opacity */
|
|
17
|
+
.border-brand/30 /* 30% opacity */`})]})})})]})]});exports.default=o;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../index-D874Kozv.js"),a=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const o=()=>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:"Advanced Features"}),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:"Powerful features for complex theming scenarios"})]}),e.jsx("div",{className:"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6",children:[{icon:e.jsx(a.Globe,{className:"w-8 h-8 text-white filter drop-shadow-sm"}),title:"RTL/LTR Support",description:"Full right-to-left language support with automatic layout adjustments",color:"from-blue-500 via-indigo-500 to-purple-500"},{icon:e.jsx(a.Save,{className:"w-8 h-8 text-white filter drop-shadow-sm"}),title:"Persistent Settings",description:"Automatic localStorage integration for user preference persistence",color:"from-green-500 via-emerald-500 to-teal-500"},{icon:e.jsx(a.Layers,{className:"w-8 h-8 text-white filter drop-shadow-sm"}),title:"Custom Routes",description:"Advanced routing scenarios with custom route configuration",color:"from-orange-500 via-red-500 to-pink-500"}].map((r,s)=>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})]})},s))})]});exports.default=o;
|
package/{AdvancedFeaturesSection-BZli4uQf.mjs → documentation/AdvancedFeaturesSection-DNsHjabp.js}
RENAMED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsxs as r, Fragment as i, jsx as e } from "react/jsx-runtime";
|
|
2
|
-
import { T as a, C as s } from "
|
|
2
|
+
import { T as a, C as s } from "../index-DsiBIFwo.js";
|
|
3
3
|
import { Globe as l, Save as n, Layers as c } from "lucide-react";
|
|
4
4
|
import "react-router-dom";
|
|
5
5
|
import "react";
|
package/{AdvancedFeaturesSection-CfxJrpgL.mjs → documentation/AdvancedFeaturesSection-Ht5TTHY8.js}
RENAMED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsxs as i, Fragment as o, jsx as e } from "react/jsx-runtime";
|
|
2
|
-
import { T as r, C as s } from "
|
|
2
|
+
import { T as r, C as s } from "../index-DsiBIFwo.js";
|
|
3
3
|
import { GitBranch as l, Plus as d, ArrowRight as n, Zap as c, Eye as m, AlertTriangle as h } from "lucide-react";
|
|
4
4
|
import "react-router-dom";
|
|
5
5
|
import "react";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("../index-D874Kozv.js"),t=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const o=()=>e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"text-center",children:[e.jsx(i.Typography,{tag:"h2",className:"mb-4 text-2xl sm:text-3xl md:text-4xl font-bold",children:"Advanced Features"}),e.jsx(i.Typography,{tag:"p",className:"text-base sm:text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto",children:"Powerful features for complex form scenarios"})]}),e.jsx("div",{className:"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6",children:[{icon:e.jsx(t.GitBranch,{className:"w-8 h-8 text-white filter drop-shadow-sm"}),title:"Conditional Fields",description:"Show/hide fields based on other field values with dynamic validation",color:"from-blue-500 via-indigo-500 to-purple-500"},{icon:e.jsx(t.Plus,{className:"w-8 h-8 text-white filter drop-shadow-sm"}),title:"Dynamic Arrays",description:"Handle dynamic lists of fields with add/remove functionality",color:"from-green-500 via-emerald-500 to-teal-500"},{icon:e.jsx(t.ArrowRight,{className:"w-8 h-8 text-white filter drop-shadow-sm"}),title:"Multi-Step Forms",description:"Wizard-style forms with step validation and progress tracking",color:"from-orange-500 via-red-500 to-pink-500"},{icon:e.jsx(t.Zap,{className:"w-8 h-8 text-white filter drop-shadow-sm"}),title:"Async Validation",description:"Server-side validation with debouncing and loading states",color:"from-purple-500 via-violet-500 to-indigo-500"},{icon:e.jsx(t.Eye,{className:"w-8 h-8 text-white filter drop-shadow-sm"}),title:"Form State Management",description:"Real-time access to form state, values, and validation status",color:"from-pink-500 via-rose-500 to-red-500"},{icon:e.jsx(t.AlertTriangle,{className:"w-8 h-8 text-white filter drop-shadow-sm"}),title:"Error Handling",description:"Comprehensive error handling with custom error display options",color:"from-yellow-500 via-orange-500 to-red-500"}].map((r,a)=>e.jsx(i.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} group-hover:scale-110 transition-all duration-300 shadow-lg`,children:r.icon}),e.jsx(i.Typography,{tag:"h3",className:"font-semibold text-lg group-hover:text-primary transition-colors duration-300",children:r.title})]}),e.jsx(i.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400 leading-relaxed",children:r.description})]})},a))})]});exports.default=o;
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { jsxs as s, Fragment as
|
|
2
|
-
import { T as a, C as
|
|
1
|
+
import { jsxs as s, Fragment as n, jsx as e } from "react/jsx-runtime";
|
|
2
|
+
import { T as a, C as i, a as l, a4 as r, s as c, A as m, c as d } from "../index-DsiBIFwo.js";
|
|
3
3
|
import "lucide-react";
|
|
4
4
|
import "react-router-dom";
|
|
5
5
|
import "react";
|
|
6
6
|
import "react-dom";
|
|
7
|
-
const
|
|
7
|
+
const A = () => /* @__PURE__ */ s(n, { children: [
|
|
8
8
|
/* @__PURE__ */ s("div", { className: "text-center space-y-4", children: [
|
|
9
9
|
/* @__PURE__ */ e(a, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "Alert" }),
|
|
10
10
|
/* @__PURE__ */ e(
|
|
@@ -16,33 +16,33 @@ const b = () => /* @__PURE__ */ s(c, { children: [
|
|
|
16
16
|
}
|
|
17
17
|
)
|
|
18
18
|
] }),
|
|
19
|
-
/* @__PURE__ */ e(
|
|
20
|
-
/* @__PURE__ */ s(
|
|
19
|
+
/* @__PURE__ */ e(i, { className: "overflow-hidden", children: /* @__PURE__ */ e(l, { title: "Basic Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ s("div", { className: "space-y-4", children: [
|
|
20
|
+
/* @__PURE__ */ s(i, { className: "p-4", children: [
|
|
21
21
|
/* @__PURE__ */ e(a, { tag: "h5", className: "mb-3", children: "Info Alert" }),
|
|
22
|
-
/* @__PURE__ */ e(
|
|
22
|
+
/* @__PURE__ */ e(r, { variant: "info", children: /* @__PURE__ */ e(a, { tag: "p", children: "This is an informational message." }) })
|
|
23
23
|
] }),
|
|
24
|
-
/* @__PURE__ */ s(
|
|
24
|
+
/* @__PURE__ */ s(i, { className: "p-4", children: [
|
|
25
25
|
/* @__PURE__ */ e(a, { tag: "h5", className: "mb-3", children: "Success Alert" }),
|
|
26
|
-
/* @__PURE__ */ e(
|
|
26
|
+
/* @__PURE__ */ e(r, { variant: "success", children: /* @__PURE__ */ e(a, { tag: "p", children: "Operation completed successfully!" }) })
|
|
27
27
|
] }),
|
|
28
|
-
/* @__PURE__ */ s(
|
|
28
|
+
/* @__PURE__ */ s(i, { className: "p-4", children: [
|
|
29
29
|
/* @__PURE__ */ e(a, { tag: "h5", className: "mb-3", children: "Warning Alert" }),
|
|
30
|
-
/* @__PURE__ */ e(
|
|
30
|
+
/* @__PURE__ */ e(r, { variant: "warning", children: /* @__PURE__ */ e(a, { tag: "p", children: "Please review this information carefully." }) })
|
|
31
31
|
] }),
|
|
32
|
-
/* @__PURE__ */ s(
|
|
32
|
+
/* @__PURE__ */ s(i, { className: "p-4", children: [
|
|
33
33
|
/* @__PURE__ */ e(a, { tag: "h5", className: "mb-3", children: "Error Alert" }),
|
|
34
|
-
/* @__PURE__ */ e(
|
|
34
|
+
/* @__PURE__ */ e(r, { variant: "error", children: /* @__PURE__ */ e(a, { tag: "p", children: "An error occurred. Please try again." }) })
|
|
35
35
|
] })
|
|
36
36
|
] }) }) }) }),
|
|
37
|
-
/* @__PURE__ */ e(
|
|
38
|
-
/* @__PURE__ */ s(
|
|
37
|
+
/* @__PURE__ */ e(i, { className: "overflow-hidden", children: /* @__PURE__ */ e(l, { title: "Variants", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ s("div", { className: "space-y-4", children: [
|
|
38
|
+
/* @__PURE__ */ s(i, { className: "p-4", children: [
|
|
39
39
|
/* @__PURE__ */ e(a, { tag: "h5", className: "mb-3", children: "Non-dismissible Alert" }),
|
|
40
|
-
/* @__PURE__ */ e(
|
|
40
|
+
/* @__PURE__ */ e(r, { variant: "info", dismissible: !1, children: /* @__PURE__ */ e(a, { tag: "p", children: "This alert cannot be dismissed." }) })
|
|
41
41
|
] }),
|
|
42
|
-
/* @__PURE__ */ s(
|
|
42
|
+
/* @__PURE__ */ s(i, { className: "p-4", children: [
|
|
43
43
|
/* @__PURE__ */ e(a, { tag: "h5", className: "mb-3", children: "With Custom onDismiss" }),
|
|
44
44
|
/* @__PURE__ */ e(
|
|
45
|
-
|
|
45
|
+
r,
|
|
46
46
|
{
|
|
47
47
|
variant: "success",
|
|
48
48
|
onDismiss: () => console.log("Alert dismissed"),
|
|
@@ -51,63 +51,18 @@ const b = () => /* @__PURE__ */ s(c, { children: [
|
|
|
51
51
|
)
|
|
52
52
|
] })
|
|
53
53
|
] }) }) }) }),
|
|
54
|
-
/* @__PURE__ */ e(
|
|
54
|
+
/* @__PURE__ */ e(
|
|
55
|
+
c,
|
|
55
56
|
{
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
{
|
|
61
|
-
key: "type",
|
|
62
|
-
label: "Type",
|
|
63
|
-
render: (l) => /* @__PURE__ */ e("code", { className: "text-xs", children: String(l) })
|
|
64
|
-
},
|
|
65
|
-
{
|
|
66
|
-
key: "default",
|
|
67
|
-
label: "Default",
|
|
68
|
-
render: (l) => {
|
|
69
|
-
const n = String(l);
|
|
70
|
-
return n === "required" ? /* @__PURE__ */ e("span", { className: "text-xs text-red-500", children: "required" }) : /* @__PURE__ */ e("code", { className: "text-xs", children: n });
|
|
71
|
-
}
|
|
72
|
-
},
|
|
73
|
-
{
|
|
74
|
-
key: "description",
|
|
75
|
-
label: "Description"
|
|
57
|
+
componentName: "Alert",
|
|
58
|
+
defaultValues: { variant: "info", dismissible: !0 },
|
|
59
|
+
excludeProps: ["onDismiss", "aria-label"],
|
|
60
|
+
children: (t) => /* @__PURE__ */ e(r, { ...t, children: "This is an alert message for the playground preview." })
|
|
76
61
|
}
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
default: "required",
|
|
82
|
-
description: "Content to display in the alert"
|
|
83
|
-
},
|
|
84
|
-
{
|
|
85
|
-
prop: "variant",
|
|
86
|
-
type: "'info' | 'warning' | 'error' | 'success'",
|
|
87
|
-
default: "'info'",
|
|
88
|
-
description: "Visual variant of the alert"
|
|
89
|
-
},
|
|
90
|
-
{
|
|
91
|
-
prop: "dismissible",
|
|
92
|
-
type: "boolean",
|
|
93
|
-
default: "true",
|
|
94
|
-
description: "Whether the alert can be dismissed"
|
|
95
|
-
},
|
|
96
|
-
{
|
|
97
|
-
prop: "onDismiss",
|
|
98
|
-
type: "() => void",
|
|
99
|
-
default: "-",
|
|
100
|
-
description: "Callback when alert is dismissed"
|
|
101
|
-
},
|
|
102
|
-
{
|
|
103
|
-
prop: "aria-label",
|
|
104
|
-
type: "string",
|
|
105
|
-
default: "-",
|
|
106
|
-
description: "Accessibility label"
|
|
107
|
-
}
|
|
108
|
-
] }) }) }) }),
|
|
109
|
-
/* @__PURE__ */ e(r, { className: "overflow-hidden", children: /* @__PURE__ */ e(t, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
|
|
110
|
-
o,
|
|
62
|
+
),
|
|
63
|
+
/* @__PURE__ */ e(m, { componentName: "Alert" }),
|
|
64
|
+
/* @__PURE__ */ e(i, { className: "overflow-hidden", children: /* @__PURE__ */ e(l, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
|
|
65
|
+
d,
|
|
111
66
|
{
|
|
112
67
|
language: "tsx",
|
|
113
68
|
code: `import { Alert, Typography } from '@e-burgos/tucu-ui';
|
|
@@ -139,5 +94,5 @@ const b = () => /* @__PURE__ */ s(c, { children: [
|
|
|
139
94
|
) }) }) })
|
|
140
95
|
] });
|
|
141
96
|
export {
|
|
142
|
-
|
|
97
|
+
A as default
|
|
143
98
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-D874Kozv.js");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 space-y-4",children:[e.jsx(s.Typography,{tag:"h2",className:"text-3xl md:text-4xl font-bold",children:"Alert"}),e.jsx(s.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"An alert component for displaying important messages and notifications with different variants and dismissible functionality."})]}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.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-4",children:[e.jsxs(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"Info Alert"}),e.jsx(s.Alert,{variant:"info",children:e.jsx(s.Typography,{tag:"p",children:"This is an informational message."})})]}),e.jsxs(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"Success Alert"}),e.jsx(s.Alert,{variant:"success",children:e.jsx(s.Typography,{tag:"p",children:"Operation completed successfully!"})})]}),e.jsxs(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"Warning Alert"}),e.jsx(s.Alert,{variant:"warning",children:e.jsx(s.Typography,{tag:"p",children:"Please review this information carefully."})})]}),e.jsxs(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"Error Alert"}),e.jsx(s.Alert,{variant:"error",children:e.jsx(s.Typography,{tag:"p",children:"An error occurred. Please try again."})})]})]})})})}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.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:"space-y-4",children:[e.jsxs(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"Non-dismissible Alert"}),e.jsx(s.Alert,{variant:"info",dismissible:!1,children:e.jsx(s.Typography,{tag:"p",children:"This alert cannot be dismissed."})})]}),e.jsxs(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"With Custom onDismiss"}),e.jsx(s.Alert,{variant:"success",onDismiss:()=>console.log("Alert dismissed"),children:e.jsx(s.Typography,{tag:"p",children:"This alert has a custom dismiss handler."})})]})]})})})}),e.jsx(s.PropPlayground,{componentName:"Alert",defaultValues:{variant:"info",dismissible:!0},excludeProps:["onDismiss","aria-label"],children:a=>e.jsx(s.Alert,{...a,children:"This is an alert message for the playground preview."})}),e.jsx(s.AutoPropsTable,{componentName:"Alert"}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(s.CodeBlock,{language:"tsx",code:`import { Alert, Typography } from '@e-burgos/tucu-ui';
|
|
2
2
|
|
|
3
3
|
// Basic usage
|
|
4
4
|
<Alert variant="info">
|
|
@@ -22,4 +22,4 @@
|
|
|
22
22
|
onDismiss={() => handleDismiss()}
|
|
23
23
|
>
|
|
24
24
|
<Typography tag="p">Custom dismiss handler</Typography>
|
|
25
|
-
</Alert>`})})})})]})
|
|
25
|
+
</Alert>`})})})})]});exports.default=r;
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
import { jsxs as n, Fragment as s, jsx as e } from "react/jsx-runtime";
|
|
2
|
+
import { T as a, C as t, a as o, W as l, X as i, s as c, A as m, c as d } from "../index-DsiBIFwo.js";
|
|
3
|
+
import "lucide-react";
|
|
4
|
+
import "react-router-dom";
|
|
5
|
+
import "react";
|
|
6
|
+
import "react-dom";
|
|
7
|
+
const g = () => /* @__PURE__ */ n(s, { children: [
|
|
8
|
+
/* @__PURE__ */ n("div", { className: "text-center space-y-4", children: [
|
|
9
|
+
/* @__PURE__ */ e(a, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "AnchorLink" }),
|
|
10
|
+
/* @__PURE__ */ e(
|
|
11
|
+
a,
|
|
12
|
+
{
|
|
13
|
+
tag: "p",
|
|
14
|
+
className: "text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
|
|
15
|
+
children: "A smart link component that automatically handles both internal routes and external URLs."
|
|
16
|
+
}
|
|
17
|
+
)
|
|
18
|
+
] }),
|
|
19
|
+
/* @__PURE__ */ e(t, { className: "overflow-hidden", children: /* @__PURE__ */ e(o, { title: "Basic Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ n("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
|
|
20
|
+
/* @__PURE__ */ n(t, { className: "p-4", children: [
|
|
21
|
+
/* @__PURE__ */ e(a, { tag: "h5", className: "mb-3", children: "Internal Link" }),
|
|
22
|
+
/* @__PURE__ */ e(l, { to: "/components", children: "Go to Components" })
|
|
23
|
+
] }),
|
|
24
|
+
/* @__PURE__ */ n(t, { className: "p-4", children: [
|
|
25
|
+
/* @__PURE__ */ e(a, { tag: "h5", className: "mb-3", children: "External Link" }),
|
|
26
|
+
/* @__PURE__ */ e(l, { to: i, target: "_blank", children: "External Link" })
|
|
27
|
+
] })
|
|
28
|
+
] }) }) }) }),
|
|
29
|
+
/* @__PURE__ */ e(
|
|
30
|
+
c,
|
|
31
|
+
{
|
|
32
|
+
componentName: "AnchorLink",
|
|
33
|
+
defaultValues: {},
|
|
34
|
+
excludeProps: ["state", "to"],
|
|
35
|
+
children: (r) => /* @__PURE__ */ e(l, { ...r, to: "#", children: "Anchor Link Example" })
|
|
36
|
+
}
|
|
37
|
+
),
|
|
38
|
+
/* @__PURE__ */ e(m, { componentName: "AnchorLink" }),
|
|
39
|
+
/* @__PURE__ */ e(t, { className: "overflow-hidden", children: /* @__PURE__ */ e(o, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
|
|
40
|
+
d,
|
|
41
|
+
{
|
|
42
|
+
language: "tsx",
|
|
43
|
+
code: `import { AnchorLink } from '@e-burgos/tucu-ui';
|
|
44
|
+
|
|
45
|
+
// Internal link (uses React Router Link)
|
|
46
|
+
<AnchorLink to="/components">
|
|
47
|
+
Go to Components
|
|
48
|
+
</AnchorLink>
|
|
49
|
+
|
|
50
|
+
// External link (uses native <a> tag)
|
|
51
|
+
<AnchorLink to="https://example.com" target="_blank">
|
|
52
|
+
External Link
|
|
53
|
+
</AnchorLink>
|
|
54
|
+
|
|
55
|
+
// With all Link props
|
|
56
|
+
<AnchorLink
|
|
57
|
+
to="/about"
|
|
58
|
+
className="text-blue-500 hover:underline"
|
|
59
|
+
>
|
|
60
|
+
About Us
|
|
61
|
+
</AnchorLink>`
|
|
62
|
+
}
|
|
63
|
+
) }) }) })
|
|
64
|
+
] });
|
|
65
|
+
export {
|
|
66
|
+
g as default
|
|
67
|
+
};
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("../index-D874Kozv.js");require("lucide-react");require("react-router-dom");require("react");require("react-dom");const a=()=>e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"text-center space-y-4",children:[e.jsx(n.Typography,{tag:"h2",className:"text-3xl md:text-4xl font-bold",children:"AnchorLink"}),e.jsx(n.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"A smart link component that automatically handles both internal routes and external URLs."})]}),e.jsx(n.CardContainer,{className:"overflow-hidden",children:e.jsx(n.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:"grid grid-cols-1 md:grid-cols-2 gap-4",children:[e.jsxs(n.CardContainer,{className:"p-4",children:[e.jsx(n.Typography,{tag:"h5",className:"mb-3",children:"Internal Link"}),e.jsx(n.AnchorLink,{to:"/components",children:"Go to Components"})]}),e.jsxs(n.CardContainer,{className:"p-4",children:[e.jsx(n.Typography,{tag:"h5",className:"mb-3",children:"External Link"}),e.jsx(n.AnchorLink,{to:n.GITHUB_URL,target:"_blank",children:"External Link"})]})]})})})}),e.jsx(n.PropPlayground,{componentName:"AnchorLink",defaultValues:{},excludeProps:["state","to"],children:r=>e.jsx(n.AnchorLink,{...r,to:"#",children:"Anchor Link Example"})}),e.jsx(n.AutoPropsTable,{componentName:"AnchorLink"}),e.jsx(n.CardContainer,{className:"overflow-hidden",children:e.jsx(n.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(n.CodeBlock,{language:"tsx",code:`import { AnchorLink } from '@e-burgos/tucu-ui';
|
|
2
|
+
|
|
3
|
+
// Internal link (uses React Router Link)
|
|
4
|
+
<AnchorLink to="/components">
|
|
5
|
+
Go to Components
|
|
6
|
+
</AnchorLink>
|
|
7
|
+
|
|
8
|
+
// External link (uses native <a> tag)
|
|
9
|
+
<AnchorLink to="https://example.com" target="_blank">
|
|
10
|
+
External Link
|
|
11
|
+
</AnchorLink>
|
|
12
|
+
|
|
13
|
+
// With all Link props
|
|
14
|
+
<AnchorLink
|
|
15
|
+
to="/about"
|
|
16
|
+
className="text-blue-500 hover:underline"
|
|
17
|
+
>
|
|
18
|
+
About Us
|
|
19
|
+
</AnchorLink>`})})})})]});exports.default=a;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as e, jsxs as a } from "react/jsx-runtime";
|
|
2
|
-
import { C as i, a as d, T as t, a4 as m,
|
|
2
|
+
import { C as i, a as d, T as t, a4 as m, l as p, c as r } from "../index-DsiBIFwo.js";
|
|
3
3
|
import { GitCompare as h, Lightbulb as l, Package as u, Check as s, Circle as n, Box as g, ArrowRight as o } from "lucide-react";
|
|
4
4
|
import "react-router-dom";
|
|
5
5
|
import "react";
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-D874Kozv.js"),s=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const n=()=>{const t=[{key:"feature",label:"Feature",render:i=>e.jsx(a.Typography,{tag:"span",className:"font-medium",children:String(i)})},{key:"standalone",label:"Standalone App"},{key:"mfe",label:"Micro Frontends (MFE)"}],r=[{feature:"Route Configuration",standalone:"menuItems (automatic generation)",mfe:"appRoutesConfig (explicit configuration)"},{feature:"Base Path",standalone:"Not required (uses root /)",mfe:"Required (e.g., /my-app)"},{feature:"Route Generation",standalone:"Automatic from menuItems",mfe:"Manual via appRoutesConfig"},{feature:"Nested Routes",standalone:"Supported via dropdownItems",mfe:"Supported via nested routes in config"},{feature:"Custom Routes",standalone:"Optional customRoutes prop",mfe:"Not available"},{feature:"Authentication",standalone:"Basic support via isPublic",mfe:"Advanced support with isPublic per route"},{feature:"Route Disabling",standalone:"Not directly supported",mfe:"Supported via disabled prop"},{feature:"Deployment",standalone:"Single deployment",mfe:"Independent deployments per app"},{feature:"Use Case",standalone:"Traditional SPAs, monolithic apps",mfe:"Distributed architectures, micro frontends"},{feature:"TypeScript Safety",standalone:"Enforced via discriminated unions",mfe:"Enforced via discriminated unions"}];return e.jsx("div",{className:"space-y-8",children:e.jsx(a.CardContainer,{children:e.jsx(a.CardTitle,{title:"Architectural Patterns: Standalone vs MFE",className:"mt-2 mb-6",children:e.jsxs("div",{className:"space-y-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-indigo-500 to-purple-500 shadow-lg",children:e.jsx(s.GitCompare,{className:"w-5 h-5 text-white filter drop-shadow-sm"})}),e.jsx(a.Typography,{tag:"h4",className:"font-semibold",children:"Pattern Comparison & Selection Guide"})]}),e.jsxs(a.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:["Understanding the differences between Standalone and MFE patterns helps you choose the right architecture for your project. Both patterns use the same"," ",e.jsx("code",{className:"px-1 py-0.5 border border-gray-300 dark:border-gray-600 rounded text-xs",children:"ThemeProvider"})," ","component, but with different configuration approaches and use cases."]}),e.jsx(a.Alert,{variant:"info",dismissible:!1,children:e.jsxs("div",{className:"flex flex-col gap-2",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(s.Lightbulb,{className:"w-4 h-4"}),e.jsx(a.Typography,{tag:"span",className:"font-semibold",children:"TypeScript Safety"})]}),e.jsxs(a.Typography,{tag:"p",className:"text-sm",children:["Both patterns use TypeScript discriminated unions to enforce the correct props. The"," ",e.jsx("code",{className:"px-1 py-0.5 border border-gray-300 dark:border-gray-600 rounded text-xs",children:"architecturalPatterns"})," ","prop determines which props are available, preventing configuration errors at compile time."]})]})}),e.jsxs("div",{className:"space-y-6",children:[e.jsxs("div",{className:"space-y-4",children:[e.jsx(a.Typography,{tag:"h4",className:"font-semibold text-lg",children:"Feature Comparison"}),e.jsx(a.BasicTable,{columns:t,data:r})]}),e.jsxs("div",{className:"grid grid-cols-1 lg:grid-cols-2 gap-6",children:[e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsxs("div",{className:"flex items-center gap-3 mb-4",children:[e.jsx("div",{className:"p-2 rounded-lg bg-linear-to-br from-blue-500 to-cyan-500 shadow-lg",children:e.jsx(s.Package,{className:"w-5 h-5 text-white filter drop-shadow-sm"})}),e.jsx(a.Typography,{tag:"h4",className:"font-semibold",children:"Standalone App Pattern"})]}),e.jsxs("div",{className:"space-y-3",children:[e.jsxs("div",{children:[e.jsx(a.Typography,{tag:"h5",className:"font-semibold text-sm mb-2",children:"When to Use:"}),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(s.Check,{className:"w-4 h-4 text-green-500 shrink-0 mt-0.5"}),e.jsx("span",{children:"Traditional single-page applications"})]}),e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx(s.Check,{className:"w-4 h-4 text-green-500 shrink-0 mt-0.5"}),e.jsx("span",{children:"All routes in one codebase"})]}),e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx(s.Check,{className:"w-4 h-4 text-green-500 shrink-0 mt-0.5"}),e.jsx("span",{children:"Simple deployment model"})]}),e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx(s.Check,{className:"w-4 h-4 text-green-500 shrink-0 mt-0.5"}),e.jsx("span",{children:"Want automatic route generation"})]}),e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx(s.Check,{className:"w-4 h-4 text-green-500 shrink-0 mt-0.5"}),e.jsx("span",{children:"No need for route isolation"})]})]})]}),e.jsxs("div",{children:[e.jsx(a.Typography,{tag:"h5",className:"font-semibold text-sm mb-2",children:"Key Advantages:"}),e.jsxs("ul",{className:"space-y-1 text-sm text-gray-600 dark:text-gray-400",children:[e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx(s.Circle,{className:"w-3 h-3 mt-1 shrink-0 fill-current"}),e.jsx("span",{children:"Simple configuration with menuItems"})]}),e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx(s.Circle,{className:"w-3 h-3 mt-1 shrink-0 fill-current"}),e.jsx("span",{children:"Automatic route generation"})]}),e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx(s.Circle,{className:"w-3 h-3 mt-1 shrink-0 fill-current"}),e.jsx("span",{children:"Nested routes via dropdownItems"})]}),e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx(s.Circle,{className:"w-3 h-3 mt-1 shrink-0 fill-current"}),e.jsx("span",{children:"Optional customRoutes override"})]})]})]})]}),e.jsx("div",{className:"mt-4 p-3 bg-light-dark rounded-lg",children:e.jsx(a.CodeBlock,{language:"tsx",code:`// Use Standalone App Pattern when:
|
|
2
|
+
// ✅ Building a traditional single-page application
|
|
3
|
+
// ✅ All routes are in one codebase
|
|
4
|
+
// ✅ You want automatic route generation
|
|
5
|
+
// ✅ Simple deployment model
|
|
6
|
+
// ✅ No need for route isolation
|
|
7
|
+
|
|
8
|
+
function MyStandaloneApp() {
|
|
9
|
+
return (
|
|
10
|
+
<ThemeProvider
|
|
11
|
+
menuItems={menuItems} // Simple configuration
|
|
12
|
+
logo={{ name: 'My', secondName: 'App' }}
|
|
13
|
+
/>
|
|
14
|
+
);
|
|
15
|
+
}`})})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsxs("div",{className:"flex items-center gap-3 mb-4",children:[e.jsx("div",{className:"p-2 rounded-lg bg-linear-to-br from-purple-500 to-indigo-500 shadow-lg",children:e.jsx(s.Box,{className:"w-5 h-5 text-white filter drop-shadow-sm"})}),e.jsx(a.Typography,{tag:"h4",className:"font-semibold",children:"Micro Frontends (MFE) Pattern"})]}),e.jsxs("div",{className:"space-y-3",children:[e.jsxs("div",{children:[e.jsx(a.Typography,{tag:"h5",className:"font-semibold text-sm mb-2",children:"When to Use:"}),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(s.Check,{className:"w-4 h-4 text-green-500 shrink-0 mt-0.5"}),e.jsx("span",{children:"Micro frontend architecture"})]}),e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx(s.Check,{className:"w-4 h-4 text-green-500 shrink-0 mt-0.5"}),e.jsx("span",{children:"Multiple teams working independently"})]}),e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx(s.Check,{className:"w-4 h-4 text-green-500 shrink-0 mt-0.5"}),e.jsx("span",{children:"Need independent deployments"})]}),e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx(s.Check,{className:"w-4 h-4 text-green-500 shrink-0 mt-0.5"}),e.jsx("span",{children:"Require route isolation"})]}),e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx(s.Check,{className:"w-4 h-4 text-green-500 shrink-0 mt-0.5"}),e.jsx("span",{children:"Need explicit route control"})]})]})]}),e.jsxs("div",{children:[e.jsx(a.Typography,{tag:"h5",className:"font-semibold text-sm mb-2",children:"Key Advantages:"}),e.jsxs("ul",{className:"space-y-1 text-sm text-gray-600 dark:text-gray-400",children:[e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx(s.Circle,{className:"w-3 h-3 mt-1 shrink-0 fill-current"}),e.jsx("span",{children:"Explicit route configuration"})]}),e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx(s.Circle,{className:"w-3 h-3 mt-1 shrink-0 fill-current"}),e.jsx("span",{children:"Route isolation with basePath"})]}),e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx(s.Circle,{className:"w-3 h-3 mt-1 shrink-0 fill-current"}),e.jsx("span",{children:"Advanced authentication support"})]}),e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx(s.Circle,{className:"w-3 h-3 mt-1 shrink-0 fill-current"}),e.jsx("span",{children:"Route disabling capability"})]})]})]})]}),e.jsx("div",{className:"mt-4 p-3 bg-light-dark rounded-lg",children:e.jsx(a.CodeBlock,{language:"tsx",code:`// Use MFE Pattern when:
|
|
16
|
+
// ✅ Building micro frontend architecture
|
|
17
|
+
// ✅ Multiple teams working independently
|
|
18
|
+
// ✅ Need independent deployments
|
|
19
|
+
// ✅ Require route isolation
|
|
20
|
+
// ✅ Need explicit route control
|
|
21
|
+
|
|
22
|
+
function MyMfeApp() {
|
|
23
|
+
return (
|
|
24
|
+
<ThemeProvider
|
|
25
|
+
architecturalPatterns="mfe"
|
|
26
|
+
basePath="/my-app" // Required for MFE
|
|
27
|
+
appRoutesConfig={appRoutesConfig} // Explicit routes
|
|
28
|
+
logo={{ name: 'My', secondName: 'App' }}
|
|
29
|
+
/>
|
|
30
|
+
);
|
|
31
|
+
}`})})]})]}),e.jsx(a.CardContainer,{className:"p-4",children:e.jsxs("div",{className:"flex items-start gap-3",children:[e.jsx(s.Lightbulb,{className:"w-5 h-5 text-yellow-500 shrink-0 mt-0.5"}),e.jsxs("div",{children:[e.jsx(a.Typography,{tag:"p",className:"text-sm font-semibold mb-2",children:"Decision Guide"}),e.jsxs(a.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 mb-3",children:["Choose ",e.jsx("strong",{children:"Standalone App Pattern"})," if you're building a traditional SPA with all routes in one codebase. Choose ",e.jsx("strong",{children:"MFE Pattern"})," if you need independent deployments, route isolation, or are building a micro frontend architecture."]}),e.jsxs("div",{className:"space-y-2 text-sm",children:[e.jsxs("div",{className:"flex items-start gap-2",children:[e.jsx(s.ArrowRight,{className:"w-4 h-4 text-blue-500 shrink-0 mt-0.5"}),e.jsxs("span",{children:[e.jsx("strong",{children:"Start with Standalone"})," if you're unsure - it's simpler and can be migrated to MFE later if needed."]})]}),e.jsxs("div",{className:"flex items-start gap-2",children:[e.jsx(s.ArrowRight,{className:"w-4 h-4 text-purple-500 shrink-0 mt-0.5"}),e.jsxs("span",{children:[e.jsx("strong",{children:"Use MFE"})," from the start if you know you'll need independent deployments or route isolation."]})]})]})]})]})})]})]})})})})};exports.default=n;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsxs as r, Fragment as o, jsx as e } from "react/jsx-runtime";
|
|
2
|
-
import { T as i, C as l } from "
|
|
2
|
+
import { T as i, C as l } from "../index-DsiBIFwo.js";
|
|
3
3
|
import { Box as s, Layers as n, CheckCircle as d, Zap as c } from "lucide-react";
|
|
4
4
|
import "react-router-dom";
|
|
5
5
|
import "react";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("../index-D874Kozv.js"),i=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const o=()=>e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"text-center",children:[e.jsx(r.Typography,{tag:"h2",className:"mb-4 text-2xl sm:text-3xl md:text-4xl font-bold",children:"Architecture Overview"}),e.jsx(r.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 Hook Form for performance and developer experience"})]}),e.jsx("div",{className:"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6",children:[{icon:e.jsx(i.Box,{className:"w-8 h-8 text-white filter drop-shadow-sm"}),title:"Form Container",description:"Main wrapper with built-in state management and submission handling",color:"from-blue-500 via-indigo-500 to-purple-500"},{icon:e.jsx(i.Layers,{className:"w-8 h-8 text-white filter drop-shadow-sm"}),title:"FormField Wrapper",description:"Connects inputs to validation with automatic error handling",color:"from-green-500 via-emerald-500 to-teal-500"},{icon:e.jsx(i.CheckCircle,{className:"w-8 h-8 text-white filter drop-shadow-sm"}),title:"Validation System",description:"Built-in and custom validation rules with TypeScript support",color:"from-orange-500 via-red-500 to-pink-500"},{icon:e.jsx(i.Zap,{className:"w-8 h-8 text-white filter drop-shadow-sm"}),title:"Performance",description:"Minimal re-renders with optimized form state management",color:"from-purple-500 via-violet-500 to-indigo-500"}].map((t,a)=>e.jsx(r.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-3",children:[e.jsx("div",{className:`p-3 rounded-xl bg-linear-to-br ${t.color} group-hover:scale-110 transition-all duration-300 shadow-lg`,children:t.icon}),e.jsx(r.Typography,{tag:"h3",className:"font-semibold text-lg group-hover:text-primary transition-colors duration-300",children:t.title})]}),e.jsx(r.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400 leading-relaxed text-sm",children:t.description})]})},a))})]});exports.default=o;
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
import { jsxs as e, Fragment as n, jsx as a } from "react/jsx-runtime";
|
|
2
|
+
import { T as r, C as t, a as m, u as o, s, A as d, c as h } from "../index-DsiBIFwo.js";
|
|
3
|
+
import "lucide-react";
|
|
4
|
+
import "react-router-dom";
|
|
5
|
+
import "react";
|
|
6
|
+
import "react-dom";
|
|
7
|
+
import { a as l } from "../1-Df9CGZha.js";
|
|
8
|
+
const C = () => /* @__PURE__ */ e(n, { children: [
|
|
9
|
+
/* @__PURE__ */ e("div", { className: "text-center space-y-4", children: [
|
|
10
|
+
/* @__PURE__ */ a(r, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "AuthorCard" }),
|
|
11
|
+
/* @__PURE__ */ a(
|
|
12
|
+
r,
|
|
13
|
+
{
|
|
14
|
+
tag: "p",
|
|
15
|
+
className: "text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
|
|
16
|
+
children: "A card component for displaying author information with avatar, name, and role."
|
|
17
|
+
}
|
|
18
|
+
)
|
|
19
|
+
] }),
|
|
20
|
+
/* @__PURE__ */ a(t, { className: "overflow-hidden", children: /* @__PURE__ */ a(m, { title: "Basic Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
|
|
21
|
+
/* @__PURE__ */ e(t, { className: "p-4", children: [
|
|
22
|
+
/* @__PURE__ */ a(r, { tag: "h5", className: "mb-3", children: "With Name and Role" }),
|
|
23
|
+
/* @__PURE__ */ a(
|
|
24
|
+
o,
|
|
25
|
+
{
|
|
26
|
+
image: l,
|
|
27
|
+
name: "John Doe",
|
|
28
|
+
authorRole: "Senior Developer"
|
|
29
|
+
}
|
|
30
|
+
)
|
|
31
|
+
] }),
|
|
32
|
+
/* @__PURE__ */ e(t, { className: "p-4", children: [
|
|
33
|
+
/* @__PURE__ */ a(r, { tag: "h5", className: "mb-3", children: "With Name Only" }),
|
|
34
|
+
/* @__PURE__ */ a(o, { image: l, name: "Jane Smith" })
|
|
35
|
+
] }),
|
|
36
|
+
/* @__PURE__ */ e(t, { className: "p-4", children: [
|
|
37
|
+
/* @__PURE__ */ a(r, { tag: "h5", className: "mb-3", children: "Avatar Only" }),
|
|
38
|
+
/* @__PURE__ */ a(o, { image: l })
|
|
39
|
+
] })
|
|
40
|
+
] }) }) }) }),
|
|
41
|
+
/* @__PURE__ */ a(
|
|
42
|
+
s,
|
|
43
|
+
{
|
|
44
|
+
componentName: "AuthorCard",
|
|
45
|
+
defaultValues: {
|
|
46
|
+
name: "John Doe",
|
|
47
|
+
authorRole: "Developer",
|
|
48
|
+
image: "https://randomuser.me/api/portraits/men/1.jpg"
|
|
49
|
+
},
|
|
50
|
+
excludeProps: [],
|
|
51
|
+
children: (i) => /* @__PURE__ */ a(o, { ...i })
|
|
52
|
+
}
|
|
53
|
+
),
|
|
54
|
+
/* @__PURE__ */ a(d, { componentName: "AuthorCard" }),
|
|
55
|
+
/* @__PURE__ */ a(t, { className: "overflow-hidden", children: /* @__PURE__ */ a(m, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a(
|
|
56
|
+
h,
|
|
57
|
+
{
|
|
58
|
+
language: "tsx",
|
|
59
|
+
code: `import { AuthorCard } from '@e-burgos/tucu-ui';
|
|
60
|
+
|
|
61
|
+
// With name and role
|
|
62
|
+
<AuthorCard
|
|
63
|
+
image="/path/to/avatar.jpg"
|
|
64
|
+
name="John Doe"
|
|
65
|
+
authorRole="Senior Developer"
|
|
66
|
+
/>
|
|
67
|
+
|
|
68
|
+
// With name only
|
|
69
|
+
<AuthorCard
|
|
70
|
+
image="/path/to/avatar.jpg"
|
|
71
|
+
name="Jane Smith"
|
|
72
|
+
/>
|
|
73
|
+
|
|
74
|
+
// Avatar only
|
|
75
|
+
<AuthorCard image="/path/to/avatar.jpg" />`
|
|
76
|
+
}
|
|
77
|
+
) }) }) })
|
|
78
|
+
] });
|
|
79
|
+
export {
|
|
80
|
+
C as default
|
|
81
|
+
};
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),e=require("../index-D874Kozv.js");require("lucide-react");require("react-router-dom");require("react");require("react-dom");const r=require("../1-CArqgiQa.js"),o=()=>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:"AuthorCard"}),a.jsx(e.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"A card component for displaying author information with avatar, name, and role."})]}),a.jsx(e.CardContainer,{className:"overflow-hidden",children:a.jsx(e.CardTitle,{title:"Basic Examples",className:"mt-2 mb-2",children:a.jsx("div",{className:"w-full p-4 sm:p-6",children:a.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4",children:[a.jsxs(e.CardContainer,{className:"p-4",children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"With Name and Role"}),a.jsx(e.AuthorCard,{image:r.avatar1Img,name:"John Doe",authorRole:"Senior Developer"})]}),a.jsxs(e.CardContainer,{className:"p-4",children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"With Name Only"}),a.jsx(e.AuthorCard,{image:r.avatar1Img,name:"Jane Smith"})]}),a.jsxs(e.CardContainer,{className:"p-4",children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Avatar Only"}),a.jsx(e.AuthorCard,{image:r.avatar1Img})]})]})})})}),a.jsx(e.PropPlayground,{componentName:"AuthorCard",defaultValues:{name:"John Doe",authorRole:"Developer",image:"https://randomuser.me/api/portraits/men/1.jpg"},excludeProps:[],children:t=>a.jsx(e.AuthorCard,{...t})}),a.jsx(e.AutoPropsTable,{componentName:"AuthorCard"}),a.jsx(e.CardContainer,{className:"overflow-hidden",children:a.jsx(e.CardTitle,{title:"Code Example",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 { AuthorCard } from '@e-burgos/tucu-ui';
|
|
2
|
+
|
|
3
|
+
// With name and role
|
|
4
|
+
<AuthorCard
|
|
5
|
+
image="/path/to/avatar.jpg"
|
|
6
|
+
name="John Doe"
|
|
7
|
+
authorRole="Senior Developer"
|
|
8
|
+
/>
|
|
9
|
+
|
|
10
|
+
// With name only
|
|
11
|
+
<AuthorCard
|
|
12
|
+
image="/path/to/avatar.jpg"
|
|
13
|
+
name="Jane Smith"
|
|
14
|
+
/>
|
|
15
|
+
|
|
16
|
+
// Avatar only
|
|
17
|
+
<AuthorCard image="/path/to/avatar.jpg" />`})})})})]});exports.default=o;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),e=require("../index-D874Kozv.js");require("lucide-react");require("react-router-dom");require("react");require("react-dom");const s=require("../1-CArqgiQa.js"),t=()=>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:"Avatar"}),a.jsx(e.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"A versatile avatar component for displaying user profile images with multiple sizes and shapes."})]}),a.jsx(e.CardContainer,{className:"overflow-hidden",children:a.jsx(e.CardTitle,{title:"Basic Examples",className:"mt-2 mb-2",children:a.jsx("div",{className:"w-full p-4 sm:p-6",children:a.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4",children:[a.jsxs(e.CardContainer,{className:"p-4",children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Default Avatar"}),a.jsx(e.Avatar,{image:s.avatar1Img,alt:"User avatar"})]}),a.jsxs(e.CardContainer,{className:"p-4",children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Without Border"}),a.jsx(e.Avatar,{image:s.avatar1Img,alt:"User avatar",border:!1})]})]})})})}),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-6",children:[a.jsxs("div",{children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Sizes"}),a.jsxs("div",{className:"flex items-center gap-4",children:[a.jsx(e.Avatar,{image:s.avatar1Img,alt:"XS",size:"xs"}),a.jsx(e.Avatar,{image:s.avatar1Img,alt:"SM",size:"sm"}),a.jsx(e.Avatar,{image:s.avatar1Img,alt:"MD",size:"md"}),a.jsx(e.Avatar,{image:s.avatar1Img,alt:"LG",size:"lg"}),a.jsx(e.Avatar,{image:s.avatar1Img,alt:"XL",size:"xl"})]})]}),a.jsxs("div",{children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Shapes"}),a.jsxs("div",{className:"flex items-center gap-4",children:[a.jsx(e.Avatar,{image:s.avatar1Img,alt:"Circle",shape:"circle"}),a.jsx(e.Avatar,{image:s.avatar1Img,alt:"Rounded",shape:"rounded"})]})]})]})})})}),a.jsx(e.PropPlayground,{componentName:"Avatar",defaultValues:{size:"md",shape:"circle",border:!0,image:"https://randomuser.me/api/portraits/men/1.jpg",alt:"Avatar"},children:r=>a.jsx(e.Avatar,{...r})}),a.jsx(e.AutoPropsTable,{componentName:"Avatar"}),a.jsx(e.CardContainer,{className:"overflow-hidden",children:a.jsx(e.CardTitle,{title:"Code Example",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 { Avatar } from '@e-burgos/tucu-ui';
|
|
2
|
+
|
|
3
|
+
// Basic usage
|
|
4
|
+
<Avatar image="/path/to/image.jpg" alt="User name" />
|
|
5
|
+
|
|
6
|
+
// Different sizes
|
|
7
|
+
<Avatar image={image} alt="User" size="xs" />
|
|
8
|
+
<Avatar image={image} alt="User" size="sm" />
|
|
9
|
+
<Avatar image={image} alt="User" size="md" />
|
|
10
|
+
<Avatar image={image} alt="User" size="lg" />
|
|
11
|
+
<Avatar image={image} alt="User" size="xl" />
|
|
12
|
+
|
|
13
|
+
// Different shapes
|
|
14
|
+
<Avatar image={image} alt="User" shape="circle" />
|
|
15
|
+
<Avatar image={image} alt="User" shape="rounded" />
|
|
16
|
+
|
|
17
|
+
// Without border
|
|
18
|
+
<Avatar image={image} alt="User" border={false} />`})})})})]});exports.default=t;
|