@e-burgos/tucu-ui 2.0.1 → 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 +108 -1
- 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/demo/utils/constants.d.ts +1 -0
- package/documentation/APIReferenceSection-B2oYdmby.js +1 -0
- package/{APIReferenceSection-BoRiwWBC.mjs → documentation/APIReferenceSection-h-8Utbap.js} +1 -1
- package/documentation/ActiveLinkSection-C95OfpHr.js +22 -0
- package/documentation/ActiveLinkSection-CdXQGIsJ.js +81 -0
- package/{AdvancedColorSystemSection-DM_Z6OFq.mjs → documentation/AdvancedColorSystemSection-BQshRXTc.js} +1 -1
- package/documentation/AdvancedColorSystemSection-BtpxH8Mu.js +17 -0
- package/documentation/AdvancedFeaturesSection-BdL5enY8.js +1 -0
- package/{AdvancedFeaturesSection-Gtrl3Evw.mjs → documentation/AdvancedFeaturesSection-DNsHjabp.js} +1 -1
- package/{AdvancedFeaturesSection-f5fKQx25.mjs → documentation/AdvancedFeaturesSection-Ht5TTHY8.js} +1 -1
- package/documentation/AdvancedFeaturesSection-VcHwYejS.js +1 -0
- package/{AlertSection-B6vzS6iD.mjs → documentation/AlertSection-CkPDRBrP.js} +28 -73
- package/{AlertSection-DpjvpK2x.js → documentation/AlertSection-ZNoVAqQG.js} +2 -2
- package/documentation/AnchorLinkSection-BwEq_xXD.js +67 -0
- package/documentation/AnchorLinkSection-Db8dVTL1.js +19 -0
- package/{ArchitecturalPatternsComparisonSection-DKuUZTtx.mjs → documentation/ArchitecturalPatternsComparisonSection-0JvWXvga.js} +1 -1
- package/documentation/ArchitecturalPatternsComparisonSection-_ICdjaay.js +31 -0
- package/{ArchitectureOverviewSection-BE4x0gsP.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-BkJYXTeL.mjs → documentation/BadgeSection-wnv6WJoJ.js} +33 -90
- package/documentation/BasicTableSection-DHR7wxMf.js +103 -0
- package/documentation/BasicTableSection-Djqd7GTc.js +35 -0
- package/{BasicUsageSection-BcOiQgDt.js → documentation/BasicUsageSection-CAOyX6Rh.js} +1 -1
- package/{BasicUsageSection-BH7JJCUv.mjs → documentation/BasicUsageSection-RB5uqmJE.js} +1 -1
- package/documentation/BestPracticesSection-7oPmBTjr.js +1 -0
- package/{BestPracticesSection-R_YvsfTN.mjs → documentation/BestPracticesSection-BAi4u6sT.js} +1 -1
- package/documentation/BestPracticesSection-C72mSxPs.js +1 -0
- package/documentation/BestPracticesSection-CCUAVucV.js +1 -0
- package/{BestPracticesSection-DNxZFvtn.mjs → documentation/BestPracticesSection-CfKUd_V5.js} +1 -1
- package/{BestPracticesSection-CLoTsbvi.mjs → documentation/BestPracticesSection-CrduKU11.js} +1 -1
- package/documentation/BestPracticesSection-D2ahvfz_.js +1 -0
- package/documentation/BestPracticesSection-DO-w9jZN.js +1 -0
- package/{BestPracticesSection-DRh8ygPz.mjs → documentation/BestPracticesSection-DVOUUyCP.js} +1 -1
- package/{BestPracticesSection-BB_4isPT.mjs → documentation/BestPracticesSection-De_JKhUW.js} +1 -1
- package/{BestPracticesSection-CzSWKg5u.mjs → documentation/BestPracticesSection-Dki1wap5.js} +1 -1
- package/documentation/BestPracticesSection-Dlv7tr8A.js +1 -0
- package/{BestPracticesSection-pFQ_PyNt.mjs → documentation/BestPracticesSection-FNEhFmPF.js} +1 -1
- package/documentation/BestPracticesSection-Y7WVzfHX.js +1 -0
- package/{BorderRadiusSection-CAXz3i4f.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-_b59OdxW.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-DFJ-BbKf.mjs → documentation/CheckboxSection-CUQtdDzh.js} +29 -113
- package/documentation/CheckboxSection-D8FFt0Os.js +26 -0
- package/{CodeExamplesSection-BPQ2gDHr.mjs → documentation/CodeExamplesSection-2v_8YfcX.js} +1 -1
- package/{CodeExamplesSection-8Fl-rNDM.js → documentation/CodeExamplesSection-Dp2gzpx3.js} +1 -1
- package/documentation/CoinCardSection-1WqRM1ph.js +13 -0
- package/{CoinCardSection-Cj3tZvUz.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-C_VoJlv9.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-Cisfasex.mjs → documentation/ColorCustomizationSection-fpbQFBeg.js} +1 -1
- package/documentation/ColorSystemSection-BIiffohC.js +1 -0
- package/{ColorSystemSection-DybUTh-a.mjs → documentation/ColorSystemSection-BTPZDmaU.js} +1 -1
- package/{CommonErrorsSection-DkI97fRW.mjs → documentation/CommonErrorsSection-BVjBH-q3.js} +1 -1
- package/documentation/CommonErrorsSection-DqohMJDt.js +1 -0
- package/documentation/ComponentAnatomySection-B6L2nQg2.js +1 -0
- package/{ComponentAnatomySection-CjOEBRRd.mjs → documentation/ComponentAnatomySection-GUman0lW.js} +1 -1
- package/documentation/ComponentStatusSection-BPatrERs.js +1 -0
- package/{ComponentStatusSection-fGn0qF_J.mjs → documentation/ComponentStatusSection-DS8Kmh6W.js} +1 -1
- package/documentation/CurrencySwapIconsSection-B_qLwzXO.js +50 -0
- package/documentation/CurrencySwapIconsSection-WWqd6aBI.js +7 -0
- package/{CustomColorPaletteSection-CEiec_Ud.mjs → documentation/CustomColorPaletteSection-Beh-1TnY.js} +1 -1
- package/{CustomColorPaletteSection-B_ESOXbz.js → documentation/CustomColorPaletteSection-DHw4bInM.js} +1 -1
- package/{CustomIconsSection-ZdYNMP4U.mjs → documentation/CustomIconsSection-BnJuOM-H.js} +1 -1
- package/documentation/CustomIconsSection-CSRr6wkJ.js +3 -0
- package/{DefiAppLogoSection-Eac0hhoc.mjs → documentation/DefiAppLogoSection-BKoj5nMS.js} +1 -1
- package/documentation/DefiAppLogoSection-BlgJ2b-2.js +36 -0
- package/documentation/DesignPrinciplesSection-DEO6bctH.js +1 -0
- package/{DesignPrinciplesSection-BVKVOHNr.mjs → documentation/DesignPrinciplesSection-sziQNoBU.js} +1 -1
- package/documentation/DrawerSection-Bl44QTjH.js +145 -0
- package/documentation/DrawerSection-Ddkq7twy.js +41 -0
- package/{DynamicRoutesSection-CDCCT0Jt.mjs → documentation/DynamicRoutesSection-CwIKExBG.js} +1 -1
- package/{DynamicRoutesSection-BOHerfbl.js → documentation/DynamicRoutesSection-DzYD6DrX.js} +1 -1
- package/{FileInputSection-CzqM7uQi.mjs → documentation/FileInputSection-2C2qHF7f.js} +1 -1
- package/documentation/FileInputSection-agGxZYT7.js +65 -0
- package/{FileStructureSection-D8YkrMN_.js → documentation/FileStructureSection-C-Z_tkDL.js} +1 -1
- package/{FileStructureSection-DEQfBxTf.mjs → documentation/FileStructureSection-CSNiAHS-.js} +1 -1
- package/{FormComponentsSection-pszqSSLB.mjs → documentation/FormComponentsSection-B021OPBW.js} +1 -1
- package/documentation/FormComponentsSection-CRsooWtI.js +1 -0
- package/{FormMethodsSection-QekBnaE6.mjs → documentation/FormMethodsSection-2ea19wxr.js} +1 -1
- package/{FormMethodsSection-DRACuD5e.js → documentation/FormMethodsSection-CUrQGm-O.js} +1 -1
- package/documentation/HamburgerSection-BzFh3gZq.js +99 -0
- package/documentation/HamburgerSection-CWAXi4d_.js +18 -0
- package/{HookCategoriesSection-BPA9UDmz.mjs → documentation/HookCategoriesSection-DZzq6nNi.js} +1 -1
- package/documentation/HookCategoriesSection-Qm1BoU9x.js +1 -0
- package/{HookDocumentationSection-MU1XW_BX.mjs → documentation/HookDocumentationSection-BMC5FTpz.js} +1 -1
- package/{HookDocumentationSection-DlnLMpij.js → documentation/HookDocumentationSection-DT_dicnF.js} +1 -1
- package/documentation/HookFeaturesSection-B08odkSW.js +1 -0
- package/{HookFeaturesSection-D2EQkvMm.mjs → documentation/HookFeaturesSection-_rCA_IiX.js} +1 -1
- package/{IconArchitectureSection-sL62NhUF.mjs → documentation/IconArchitectureSection-BP5StoRr.js} +1 -1
- package/documentation/IconArchitectureSection-Ch1nPf7C.js +1 -0
- package/documentation/IconSizingGuideSection-21B7NciU.js +1 -0
- package/{IconSizingGuideSection-i40K-Wni.mjs → documentation/IconSizingGuideSection-B39zPKV2.js} +1 -1
- package/{IconSystemAPISection-CVK7SIsn.mjs → documentation/IconSystemAPISection-BLCe41I8.js} +1 -1
- package/documentation/IconSystemAPISection-_5fho7rM.js +1 -0
- package/documentation/IconSystemBenefitsSection-BI6uLx8V.js +1 -0
- package/{IconSystemBenefitsSection-Ze9VgPLS.mjs → documentation/IconSystemBenefitsSection-DCAdQe8N.js} +1 -1
- package/documentation/ImageSection-DX_pLrem.js +80 -0
- package/documentation/ImageSection-Dl5z0QeO.js +514 -0
- package/{ImplementationExamplesSection-B2nn7oil.js → documentation/ImplementationExamplesSection-B__bLnap.js} +1 -1
- package/{ImplementationExamplesSection-4T4hwuxr.mjs → documentation/ImplementationExamplesSection-DG0Qxz66.js} +1 -1
- package/documentation/ImplementationGuidelinesSection-B3ThgoR2.js +1 -0
- package/{ImplementationGuidelinesSection-CG1tDCZA.mjs → documentation/ImplementationGuidelinesSection-Dhr_uqy_.js} +1 -1
- package/{ImplementationStatusSection-IQSN2l_7.mjs → documentation/ImplementationStatusSection-CJTb6Pgx.js} +1 -1
- package/documentation/ImplementationStatusSection-D0v0YMVu.js +1 -0
- package/documentation/ImplementedFeaturesSection-DP4JlgYL.js +1 -0
- package/{ImplementedFeaturesSection-CP7rhe9f.mjs → documentation/ImplementedFeaturesSection-uG_KGhJp.js} +1 -1
- package/documentation/InputSearcherSection-BB8KSV5W.js +32 -0
- package/{InputSearcherSection-34VhxQWj.mjs → documentation/InputSearcherSection-BOs_mYxO.js} +20 -98
- package/documentation/InputSection-Co8yrH8O.js +37 -0
- package/documentation/InputSection-DlsRR1br.js +159 -0
- package/{KeyboardNavigationSection-C8r2xlbV.mjs → documentation/KeyboardNavigationSection-B5NeU2Ls.js} +5 -5
- package/documentation/KeyboardNavigationSection-B8kjIrpD.js +1 -0
- package/{LayoutPrinciplesSection-BxU9bTX-.mjs → documentation/LayoutPrinciplesSection-Cv2qVdah.js} +1 -1
- package/documentation/LayoutPrinciplesSection-ZcukszdJ.js +1 -0
- package/{LayoutTypesSection-ByWo-tGj.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-BtM__Pji.mjs → documentation/LiveDemoSection-Bi6TUjps.js} +1 -1
- package/documentation/LiveDemoSection-CNS2AHrx.js +1 -0
- package/{LiveDemonstrationsSection-C3oCeAoh.js → documentation/LiveDemonstrationsSection-8IzxP_-q.js} +1 -1
- package/{LiveDemonstrationsSection-WvNWXeuH.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-JDW093zQ.mjs → documentation/LogoSection-DihjtnI3.js} +59 -111
- package/documentation/LogoSection-DwxPyRYp.js +100 -0
- package/{LucideIconsSection-CyQL7SAF.mjs → documentation/LucideIconsSection-UTZdlP4l.js} +1 -1
- package/documentation/LucideIconsSection-jyTOH9vA.js +1 -0
- package/{MFESupportSection-BmQTIoKF.mjs → documentation/MFESupportSection-CL4XaGSc.js} +1 -1
- package/{MFESupportSection-D6oq7xes.js → documentation/MFESupportSection-D5-xNtty.js} +1 -1
- package/documentation/MenuItemsGuideSection-B4A_sWeX.js +126 -0
- package/{MenuItemsGuideSection-Dl7WlJPq.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-YTdNVbSk.mjs → documentation/NestedRoutesSection-DG9vKpBw.js} +1 -1
- package/{NestedRoutesSection-uykhv0dq.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-DQM97Xvm.mjs → documentation/PanelCardSection-Ci9bDcSV.js} +14 -48
- package/documentation/PanelCardSection-wO7ZobnL.js +15 -0
- package/documentation/ParamTabSection-Bi80ttg5.js +92 -0
- package/{ParamTabSection-Doy0IQ4S.mjs → documentation/ParamTabSection-DzCeT2jc.js} +105 -145
- package/{PinCodeSection-BUq70uA5.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-BC-Y1-se.mjs → documentation/RevealContentSection-BK8j8yQ6.js} +26 -54
- package/documentation/RevealContentSection-Cm9Ego3J.js +21 -0
- package/{RouteConfigurationSection-B4wc-TDJ.mjs → documentation/RouteConfigurationSection-JaOww2mF.js} +1 -1
- package/{RouteConfigurationSection-DKA5hJsc.js → documentation/RouteConfigurationSection-PdMrY6xs.js} +1 -1
- package/{ScrollToTopSection-CGaxrac9.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-Bi64lEQf.mjs → documentation/SettingsPanelSection-oUsf1rjG.js} +1 -1
- package/documentation/ShadowsSection-COIXfeUB.js +1 -0
- package/{ShadowsSection-BhqfZ9NW.mjs → documentation/ShadowsSection-yPSwgkIh.js} +1 -1
- package/documentation/SidebarMenuSection-CF65NgkO.js +46 -0
- package/{SidebarMenuSection-C7LeiQyF.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-9yP3IzCe.mjs → documentation/SizingSection-D0JMCl2M.js} +1 -1
- package/documentation/SkeletonSection-CdftMoZS.js +204 -0
- package/documentation/SkeletonSection-l0H8ysMz.js +52 -0
- package/{SpacingSystemSection-1utDMOSG.mjs → documentation/SpacingSystemSection-CK6jg9jH.js} +1 -1
- package/documentation/SpacingSystemSection-DDLUwi7M.js +1 -0
- package/{SpinnerSection-_H5FkQYu.mjs → documentation/SpinnerSection-CBRlzSBA.js} +18 -45
- package/documentation/SpinnerSection-wKxUxjQH.js +17 -0
- package/{StandaloneAppSection-CCXM0NJW.mjs → documentation/StandaloneAppSection-3DzBLpFt.js} +1 -1
- package/{StandaloneAppSection-eDzo4JtH.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-fhL1oWPb.mjs → documentation/SystemOverviewSection-BtnucKsr.js} +1 -1
- package/{TabSection-D_NLp2tT.mjs → documentation/TabSection-B7wJPrFH.js} +82 -142
- package/documentation/TabSection-BTGIy9BT.js +84 -0
- package/documentation/TabSelectSection-B8ohYHOK.js +100 -0
- package/{TabSelectSection-8ubM-IJD.mjs → documentation/TabSelectSection-DNb8f96f.js} +41 -69
- package/{TailwindConfigSection-Tzjd2fi_.mjs → documentation/TailwindConfigSection-dxsLjDuJ.js} +1 -1
- package/documentation/TailwindConfigSection-xK7ymNHB.js +19 -0
- package/documentation/TestingSection-D97U6rzs.js +12 -0
- package/{TestingSection-CIeBdZoD.mjs → documentation/TestingSection-DqHtOy40.js} +1 -1
- package/{TextareaSection-BesPi1oh.mjs → documentation/TextareaSection-LoLfm6tE.js} +27 -105
- package/documentation/TextareaSection-cq-8Cb4V.js +21 -0
- package/{ThemeArchitectureSection-BeYX2LDb.mjs → documentation/ThemeArchitectureSection-D3s-iFek.js} +1 -1
- package/documentation/ThemeArchitectureSection-kTqICQZj.js +1 -0
- package/documentation/ThemeConfigurationSection-CIorDmNk.js +1 -0
- package/{ThemeConfigurationSection-_DXIBuk6.mjs → documentation/ThemeConfigurationSection-DKZz_tZ0.js} +1 -1
- package/{ThemeHooksSection-B6KG30vE.mjs → documentation/ThemeHooksSection-C0sZ6k8a.js} +1 -1
- package/documentation/ThemeHooksSection-D-mw-Fbu.js +1 -0
- package/{ThemeProviderIntegrationSection-CW8KEw1O.mjs → documentation/ThemeProviderIntegrationSection-BfBFuERd.js} +1 -1
- package/{ThemeProviderIntegrationSection-DDSnnzZu.js → documentation/ThemeProviderIntegrationSection-macU3-6q.js} +1 -1
- package/documentation/ThemeProviderRequiredSection-BRbwv1wN.js +1 -0
- package/{ThemeProviderRequiredSection-DdQg1QoB.mjs → documentation/ThemeProviderRequiredSection-CqDOwaWl.js} +1 -1
- package/{ThemeProviderSection-CfMenkEO.mjs → documentation/ThemeProviderSection-C8LEFOeB.js} +1 -1
- package/documentation/ThemeProviderSection-CTuv8EQA.js +1 -0
- package/{ToastSection-BkgwANB7.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-D810inty.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-Blt_hgNA.mjs → documentation/TypographySection-DkMPevk3.js} +1 -1
- package/{UsageExamplesSection-lylwbuD1.mjs → documentation/UsageExamplesSection-Cbl0byP_.js} +1 -1
- package/{UsageExamplesSection-4k8TwUCa.js → documentation/UsageExamplesSection-rqFkSypt.js} +1 -1
- package/{UsingThemeSystemSection-huPZQBqy.js → documentation/UsingThemeSystemSection-CEXOimAv.js} +1 -1
- package/{UsingThemeSystemSection-CIppqU5O.mjs → documentation/UsingThemeSystemSection-ZxdD8koK.js} +1 -1
- package/{ValidationSystemSection-HRaOWXrp.js → documentation/ValidationSystemSection-DN97qk1X.js} +1 -1
- package/{ValidationSystemSection-Cg53UUsy.mjs → documentation/ValidationSystemSection-Dvtm4jJR.js} +1 -1
- package/{WCAGPrinciplesSection-BTwFRsmK.mjs → documentation/WCAGPrinciplesSection-CgrjWEgm.js} +1 -1
- package/documentation/WCAGPrinciplesSection-ichWLxLa.js +1 -0
- package/index-D874Kozv.js +1060 -0
- package/{index-DAzR4tRy.mjs → index-DsiBIFwo.js} +21263 -15156
- package/index.css +1 -1
- package/index.js +1 -1
- package/index.mjs +274 -265
- 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-Do3yt7ne.js +0 -1
- package/ActiveLinkSection-BB7aCrpQ.mjs +0 -120
- package/ActiveLinkSection-CHaf6bJZ.js +0 -22
- package/AdvancedColorSystemSection-BFxsrrVs.js +0 -17
- package/AdvancedFeaturesSection-A0cnegz-.js +0 -1
- package/AdvancedFeaturesSection-B7R2LkO3.js +0 -1
- package/AnchorLinkSection-BdlO6yyE.mjs +0 -94
- package/AnchorLinkSection-DjRmNhj-.js +0 -19
- package/ArchitecturalPatternsComparisonSection-CLXKxiQT.js +0 -31
- package/ArchitectureOverviewSection-Bb8dgEdM.js +0 -1
- package/AuthorCardSection--HqQsn3Y.mjs +0 -110
- package/AuthorCardSection-D0nK7ZDX.js +0 -17
- package/AvatarSection-DIiKCoeu.mjs +0 -137
- package/AvatarSection-fHzl690H.js +0 -18
- package/BadgeSection-CObz7-6M.js +0 -48
- package/BasicTableSection-5L3V5Wnd.mjs +0 -169
- package/BasicTableSection-CW_tViDv.js +0 -35
- package/BestPracticesSection-BKKv9wjE.js +0 -1
- package/BestPracticesSection-BQbrwxMh.js +0 -1
- package/BestPracticesSection-BZOfT02t.js +0 -1
- package/BestPracticesSection-Cc8SwNGZ.js +0 -1
- package/BestPracticesSection-D2NW1k0c.js +0 -1
- package/BestPracticesSection-DGx3fdus.js +0 -1
- package/BestPracticesSection-DZGPp0RC.js +0 -1
- package/BorderRadiusSection-ci5hTCkd.js +0 -1
- package/ButtonDripSection-CDWS5BVV.js +0 -12
- package/ButtonDripSection-Crel4qYQ.mjs +0 -99
- package/ButtonLoaderSection-C8JQRf1R.js +0 -30
- package/CardContainerSection-Bza00CbM.mjs +0 -99
- package/CardContainerSection-DlliivB1.js +0 -21
- package/CardTitleSection-C2MWAbpR.mjs +0 -113
- package/CardTitleSection-CsFOVBLB.js +0 -19
- package/CarouselCardsSection-COFaIxm1.mjs +0 -207
- package/CarouselCardsSection-D_GHnQin.js +0 -37
- package/CarouselImageSection-BxDlSjDR.js +0 -38
- package/CarouselImageSection-CBcKSE8Z.mjs +0 -218
- package/CarouselSection-DAQy8RS-.js +0 -24
- package/CarouselSection-DW0B48eU.mjs +0 -159
- package/CheckboxSection-BomX6M2f.js +0 -26
- package/CoinCardSection-COrl9bXw.js +0 -13
- package/CoinInfoCardSection-CjRAyTbo.mjs +0 -174
- package/CoinInfoCardSection-ovl-rosk.js +0 -12
- package/CoinListBoxSection-B2QHwxIz.js +0 -24
- package/CoinListBoxSection-DjMGIbvd.mjs +0 -219
- package/CollapseSection-DiaVKxub.js +0 -27
- package/CollectionCardSection-BJj1vyoE.mjs +0 -103
- package/CollectionCardSection-Dt28fA3n.js +0 -17
- package/CollectionSelectListSection-B5TOp6J4.js +0 -14
- package/CollectionSelectListSection-B65jxkPy.mjs +0 -102
- package/ColorCustomizationSection-BzTj3xuP.js +0 -1
- package/ColorSystemSection-CMTwZxkB.js +0 -1
- package/CommonErrorsSection-DIKZDAeU.js +0 -1
- package/ComponentAnatomySection-C6dHpRwA.js +0 -1
- package/ComponentStatusSection-CcHgi-Fl.js +0 -1
- package/CurrencySwapIconsSection-CzkLMsto.js +0 -7
- package/CurrencySwapIconsSection-XnJbatX6.mjs +0 -92
- package/CustomIconsSection-BmCWosCN.js +0 -3
- package/DefiAppLogoSection-TvVJcTRn.js +0 -36
- package/DesignPrinciplesSection-3R-1wnTh.js +0 -1
- package/DrawerSection--Nuzb-5V.js +0 -41
- package/DrawerSection-BzZCXkBt.mjs +0 -188
- package/FileInputSection-D5RpMsw7.js +0 -65
- package/FormComponentsSection-BZinh5le.js +0 -1
- package/HamburgerSection-BtmUSthS.mjs +0 -108
- package/HamburgerSection-d_AMe-Md.js +0 -18
- package/HookCategoriesSection-COFFAsuw.js +0 -1
- package/HookFeaturesSection-BVC_wzno.js +0 -1
- package/IconArchitectureSection-CJrB_v2K.js +0 -1
- package/IconSizingGuideSection-Byz8GN-W.js +0 -1
- package/IconSystemAPISection-DAzMrHds.js +0 -1
- package/IconSystemBenefitsSection-DCDKoqCq.js +0 -1
- package/ImageSection-DRSbnBdO.js +0 -80
- package/ImageSection-Dqf3ww3l.mjs +0 -612
- package/ImplementationGuidelinesSection-tM_0uKa1.js +0 -1
- package/ImplementationStatusSection-D-XZdpgS.js +0 -1
- package/ImplementedFeaturesSection-DUGNN1lz.js +0 -1
- package/InputSearcherSection-CbdFO42v.js +0 -32
- package/InputSection-C34W176P.mjs +0 -265
- package/InputSection-DK09a4t3.js +0 -37
- package/KeyboardNavigationSection-DpLNdbZG.js +0 -1
- package/LayoutPrinciplesSection-DZRSBR3r.js +0 -1
- package/LayoutTypesSection-CKGOe5i3.js +0 -1
- package/ListContainerSection-DWtd6sU8.mjs +0 -191
- package/ListContainerSection-xYwkN9Uo.js +0 -38
- package/ListItemSection-BiCHpvx-.js +0 -36
- package/ListItemSection-DFPkvu6M.mjs +0 -191
- package/LiveDemoSection-Fav2CBEm.js +0 -1
- package/LivePriceFeedSection-BeILO4dy.mjs +0 -187
- package/LivePriceFeedSection-Dn8YDmu1.js +0 -20
- package/LoaderSection-BFBVizS5.mjs +0 -143
- package/LoaderSection-C_KFv8iF.js +0 -22
- package/LogoSection-DtdcFr20.js +0 -100
- package/LucideIconsSection-BiigBsyr.js +0 -1
- package/MenuItemsGuideSection-B96jpxsc.js +0 -126
- package/ModalSection-3fV5mNMe.mjs +0 -158
- package/ModalSection-eRNTuRpQ.js +0 -29
- package/NFTGridSection-CRvfnF5Y.js +0 -11
- package/NFTGridSection-CZtLuyxm.mjs +0 -122
- package/NotificationCardSection-TFhZR2E5.mjs +0 -153
- package/NotificationCardSection-vwCuNn1e.js +0 -28
- package/PanelActionCardSection-BPKAmVjO.mjs +0 -138
- package/PanelActionCardSection-CahHbMCf.js +0 -28
- package/PanelCardSection-OBsiDHxD.js +0 -15
- package/ParamTabSection-CVJ7p8sy.js +0 -92
- package/PinCodeSection-DObGVIFj.js +0 -22
- package/ProgressbarSection-CH46pHrg.js +0 -21
- package/ProgressbarSection-m3qAbDyh.mjs +0 -195
- package/RadioGroupSection-BqVy2dAz.js +0 -27
- package/RadioGroupSection-DackiFgj.mjs +0 -288
- package/RadioSection-Bdh16D1a.js +0 -23
- package/RadioSection-MzFUkVtp.mjs +0 -208
- package/RevealContentSection-DElW6lsZ.js +0 -21
- package/ScrollToTopSection-Bwyt7eAL.js +0 -36
- package/ScrollbarSection-Da_vFna5.mjs +0 -146
- package/ScrollbarSection-uGGRCW-f.js +0 -29
- package/SelectSection-B5yArKIl.mjs +0 -275
- package/SelectSection-Cpt9Dn_m.js +0 -20
- package/SettingsPanelSection-D6BkhnK7.js +0 -1
- package/ShadowsSection-CKjf8yUx.js +0 -1
- package/SidebarMenuSection-BrIhP_DH.js +0 -46
- package/SidebarSection-BC-CPBXf.js +0 -25
- package/SidebarSection-znnqHEnW.mjs +0 -122
- package/SizingSection-DdDZLNnk.js +0 -1
- package/SkeletonSection-BRq7eeQ6.mjs +0 -259
- package/SkeletonSection-Dy36d31j.js +0 -52
- package/SpacingSystemSection-FMEYRj2m.js +0 -1
- package/SpinnerSection-DLtz1omb.js +0 -17
- package/SwitchSection-CR8r2wuH.mjs +0 -230
- package/SwitchSection-D6voPZSW.js +0 -20
- package/SystemOverviewSection-CdToztih.js +0 -1
- package/TabSection-CLwDAgk5.js +0 -84
- package/TabSelectSection-Bi5d-vaj.js +0 -100
- package/TailwindConfigSection-DflNj8Gv.js +0 -19
- package/TestingSection-Q3HG2hri.js +0 -12
- package/TextareaSection-_02vZC7T.js +0 -21
- package/ThemeArchitectureSection-4CrY1Kjp.js +0 -1
- package/ThemeConfigurationSection-CbR2q8t6.js +0 -1
- package/ThemeHooksSection-BoiwpG3l.js +0 -1
- package/ThemeProviderRequiredSection-DsJy6P0M.js +0 -1
- package/ThemeProviderSection-BLdv7k-y.js +0 -1
- package/ToastSection-cDxM5ibL.js +0 -37
- package/ToggleBarSection-BRfqWaTH.mjs +0 -187
- package/ToggleBarSection-C3CIWZ2e.js +0 -37
- package/TopupButtonSection-A2WtFct_.js +0 -24
- package/TopupButtonSection-CznbRDrY.mjs +0 -145
- package/TransactionInfoSection-DuWR1QlK.js +0 -16
- package/TransactionInfoSection-RPa0gSi7.mjs +0 -113
- package/TucuUiLogoSection-COR2iw_o.js +0 -26
- package/TypographySection-B_XR5lWg.mjs +0 -129
- package/TypographySection-Cj1vjXX0.js +0 -1
- package/TypographySection-CnxPstaS.js +0 -24
- package/WCAGPrinciplesSection-CQ81AV2e.js +0 -1
- package/demo/pages/design-system/legacy/DesignSystemIntroduction.d.ts +0 -2
- package/demo/pages/design-system/legacy/ThemingGuideIntroduction.d.ts +0 -2
- package/index-Cj89iBVR.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,153 +0,0 @@
|
|
|
1
|
-
import { jsxs as a, Fragment as c, jsx as e } from "react/jsx-runtime";
|
|
2
|
-
import { T as r, C as t, a as o, a5 as n, B as d, c as p } from "./index-DAzR4tRy.mjs";
|
|
3
|
-
import "lucide-react";
|
|
4
|
-
import "react-router-dom";
|
|
5
|
-
import "react";
|
|
6
|
-
import "react-dom";
|
|
7
|
-
import { a as l } from "./1-Df9CGZha.mjs";
|
|
8
|
-
const b = () => /* @__PURE__ */ a(c, { children: [
|
|
9
|
-
/* @__PURE__ */ a("div", { className: "text-center space-y-4", children: [
|
|
10
|
-
/* @__PURE__ */ e(r, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "NotificationCard" }),
|
|
11
|
-
/* @__PURE__ */ e(
|
|
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 notification card component for displaying user activity notifications with avatar, action type, and timestamp."
|
|
17
|
-
}
|
|
18
|
-
)
|
|
19
|
-
] }),
|
|
20
|
-
/* @__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__ */ a("div", { className: "space-y-4", children: [
|
|
21
|
-
/* @__PURE__ */ a(t, { className: "p-4", children: [
|
|
22
|
-
/* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "Followed Notification" }),
|
|
23
|
-
/* @__PURE__ */ e(
|
|
24
|
-
n,
|
|
25
|
-
{
|
|
26
|
-
type: "followed",
|
|
27
|
-
actor: { name: "john_doe", avatar: l },
|
|
28
|
-
time: "2 hours ago",
|
|
29
|
-
url: "/profile/john_doe",
|
|
30
|
-
notifier: "you"
|
|
31
|
-
}
|
|
32
|
-
)
|
|
33
|
-
] }),
|
|
34
|
-
/* @__PURE__ */ a(t, { className: "p-4", children: [
|
|
35
|
-
/* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "Liked Notification" }),
|
|
36
|
-
/* @__PURE__ */ e(
|
|
37
|
-
n,
|
|
38
|
-
{
|
|
39
|
-
type: "liked",
|
|
40
|
-
actor: { name: "jane_smith", avatar: l },
|
|
41
|
-
time: "5 minutes ago",
|
|
42
|
-
url: "/post/123",
|
|
43
|
-
notifier: "your post"
|
|
44
|
-
}
|
|
45
|
-
)
|
|
46
|
-
] }),
|
|
47
|
-
/* @__PURE__ */ a(t, { className: "p-4", children: [
|
|
48
|
-
/* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "Purchased Notification" }),
|
|
49
|
-
/* @__PURE__ */ e(
|
|
50
|
-
n,
|
|
51
|
-
{
|
|
52
|
-
type: "purchased",
|
|
53
|
-
actor: { name: "alice_wonder", avatar: l },
|
|
54
|
-
time: "1 day ago",
|
|
55
|
-
url: "/item/456",
|
|
56
|
-
notifier: "your item"
|
|
57
|
-
}
|
|
58
|
-
)
|
|
59
|
-
] })
|
|
60
|
-
] }) }) }) }),
|
|
61
|
-
/* @__PURE__ */ e(t, { className: "overflow-hidden", children: /* @__PURE__ */ e(o, { title: "Props", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(d, { columns: [
|
|
62
|
-
{
|
|
63
|
-
key: "prop",
|
|
64
|
-
label: "Prop",
|
|
65
|
-
render: (i) => /* @__PURE__ */ e("code", { className: "text-xs text-brand", children: String(i) })
|
|
66
|
-
},
|
|
67
|
-
{
|
|
68
|
-
key: "type",
|
|
69
|
-
label: "Type",
|
|
70
|
-
render: (i) => /* @__PURE__ */ e("code", { className: "text-xs", children: String(i) })
|
|
71
|
-
},
|
|
72
|
-
{
|
|
73
|
-
key: "default",
|
|
74
|
-
label: "Default",
|
|
75
|
-
render: (i) => {
|
|
76
|
-
const s = String(i);
|
|
77
|
-
return s === "required" ? /* @__PURE__ */ e("span", { className: "text-xs text-red-500", children: "required" }) : /* @__PURE__ */ e("code", { className: "text-xs", children: s });
|
|
78
|
-
}
|
|
79
|
-
},
|
|
80
|
-
{
|
|
81
|
-
key: "description",
|
|
82
|
-
label: "Description"
|
|
83
|
-
}
|
|
84
|
-
], data: [
|
|
85
|
-
{
|
|
86
|
-
prop: "type",
|
|
87
|
-
type: "'followed' | 'liked' | 'purchased'",
|
|
88
|
-
default: "required",
|
|
89
|
-
description: "Type of notification"
|
|
90
|
-
},
|
|
91
|
-
{
|
|
92
|
-
prop: "actor",
|
|
93
|
-
type: "{ name: string; avatar: string }",
|
|
94
|
-
default: "required",
|
|
95
|
-
description: "Actor information"
|
|
96
|
-
},
|
|
97
|
-
{
|
|
98
|
-
prop: "time",
|
|
99
|
-
type: "string",
|
|
100
|
-
default: "required",
|
|
101
|
-
description: "Time of the notification"
|
|
102
|
-
},
|
|
103
|
-
{
|
|
104
|
-
prop: "url",
|
|
105
|
-
type: "string",
|
|
106
|
-
default: "required",
|
|
107
|
-
description: "Link URL"
|
|
108
|
-
},
|
|
109
|
-
{
|
|
110
|
-
prop: "notifier",
|
|
111
|
-
type: "string",
|
|
112
|
-
default: "required",
|
|
113
|
-
description: "What was notified"
|
|
114
|
-
}
|
|
115
|
-
] }) }) }) }),
|
|
116
|
-
/* @__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(
|
|
117
|
-
p,
|
|
118
|
-
{
|
|
119
|
-
language: "tsx",
|
|
120
|
-
code: `import { NotificationCard } from '@e-burgos/tucu-ui';
|
|
121
|
-
|
|
122
|
-
// Followed notification
|
|
123
|
-
<NotificationCard
|
|
124
|
-
type="followed"
|
|
125
|
-
actor={{ name: 'john_doe', avatar: '/path/to/avatar.jpg' }}
|
|
126
|
-
time="2 hours ago"
|
|
127
|
-
url="/profile/john_doe"
|
|
128
|
-
notifier="you"
|
|
129
|
-
/>
|
|
130
|
-
|
|
131
|
-
// Liked notification
|
|
132
|
-
<NotificationCard
|
|
133
|
-
type="liked"
|
|
134
|
-
actor={{ name: 'jane_smith', avatar: '/path/to/avatar.jpg' }}
|
|
135
|
-
time="5 minutes ago"
|
|
136
|
-
url="/post/123"
|
|
137
|
-
notifier="your post"
|
|
138
|
-
/>
|
|
139
|
-
|
|
140
|
-
// Purchased notification
|
|
141
|
-
<NotificationCard
|
|
142
|
-
type="purchased"
|
|
143
|
-
actor={{ name: 'alice_wonder', avatar: '/path/to/avatar.jpg' }}
|
|
144
|
-
time="1 day ago"
|
|
145
|
-
url="/item/456"
|
|
146
|
-
notifier="your item"
|
|
147
|
-
/>`
|
|
148
|
-
}
|
|
149
|
-
) }) }) })
|
|
150
|
-
] });
|
|
151
|
-
export {
|
|
152
|
-
b as default
|
|
153
|
-
};
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("./index-Cj89iBVR.js");require("lucide-react");require("react-router-dom");require("react");require("react-dom");const i=require("./1-CArqgiQa.js"),n=()=>{const o=[{key:"prop",label:"Prop",render:t=>e.jsx("code",{className:"text-xs text-brand",children:String(t)})},{key:"type",label:"Type",render:t=>e.jsx("code",{className:"text-xs",children:String(t)})},{key:"default",label:"Default",render:t=>{const r=String(t);return r==="required"?e.jsx("span",{className:"text-xs text-red-500",children:"required"}):e.jsx("code",{className:"text-xs",children:r})}},{key:"description",label:"Description"}],s=[{prop:"type",type:"'followed' | 'liked' | 'purchased'",default:"required",description:"Type of notification"},{prop:"actor",type:"{ name: string; avatar: string }",default:"required",description:"Actor information"},{prop:"time",type:"string",default:"required",description:"Time of the notification"},{prop:"url",type:"string",default:"required",description:"Link URL"},{prop:"notifier",type:"string",default:"required",description:"What was notified"}];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:"NotificationCard"}),e.jsx(a.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"A notification card component for displaying user activity notifications with avatar, action type, and timestamp."})]}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.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(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Followed Notification"}),e.jsx(a.NotificationCard,{type:"followed",actor:{name:"john_doe",avatar:i.avatar1Img},time:"2 hours ago",url:"/profile/john_doe",notifier:"you"})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Liked Notification"}),e.jsx(a.NotificationCard,{type:"liked",actor:{name:"jane_smith",avatar:i.avatar1Img},time:"5 minutes ago",url:"/post/123",notifier:"your post"})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Purchased Notification"}),e.jsx(a.NotificationCard,{type:"purchased",actor:{name:"alice_wonder",avatar:i.avatar1Img},time:"1 day ago",url:"/item/456",notifier:"your item"})]})]})})})}),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:o,data:s})})})}),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 { NotificationCard } from '@e-burgos/tucu-ui';
|
|
2
|
-
|
|
3
|
-
// Followed notification
|
|
4
|
-
<NotificationCard
|
|
5
|
-
type="followed"
|
|
6
|
-
actor={{ name: 'john_doe', avatar: '/path/to/avatar.jpg' }}
|
|
7
|
-
time="2 hours ago"
|
|
8
|
-
url="/profile/john_doe"
|
|
9
|
-
notifier="you"
|
|
10
|
-
/>
|
|
11
|
-
|
|
12
|
-
// Liked notification
|
|
13
|
-
<NotificationCard
|
|
14
|
-
type="liked"
|
|
15
|
-
actor={{ name: 'jane_smith', avatar: '/path/to/avatar.jpg' }}
|
|
16
|
-
time="5 minutes ago"
|
|
17
|
-
url="/post/123"
|
|
18
|
-
notifier="your post"
|
|
19
|
-
/>
|
|
20
|
-
|
|
21
|
-
// Purchased notification
|
|
22
|
-
<NotificationCard
|
|
23
|
-
type="purchased"
|
|
24
|
-
actor={{ name: 'alice_wonder', avatar: '/path/to/avatar.jpg' }}
|
|
25
|
-
time="1 day ago"
|
|
26
|
-
url="/item/456"
|
|
27
|
-
notifier="your item"
|
|
28
|
-
/>`})})})})]})};exports.default=n;
|
|
@@ -1,138 +0,0 @@
|
|
|
1
|
-
import { jsxs as t, Fragment as o, jsx as e } from "react/jsx-runtime";
|
|
2
|
-
import { T as a, C as n, a as i, u as s, B as c, c as d } from "./index-DAzR4tRy.mjs";
|
|
3
|
-
import "lucide-react";
|
|
4
|
-
import "react-router-dom";
|
|
5
|
-
import "react";
|
|
6
|
-
import "react-dom";
|
|
7
|
-
const b = () => /* @__PURE__ */ t(o, { children: [
|
|
8
|
-
/* @__PURE__ */ t("div", { className: "text-center space-y-4", children: [
|
|
9
|
-
/* @__PURE__ */ e(a, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "PanelActionCard" }),
|
|
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 panel card component with a scrollable content area and action buttons at the bottom."
|
|
16
|
-
}
|
|
17
|
-
)
|
|
18
|
-
] }),
|
|
19
|
-
/* @__PURE__ */ e(n, { className: "overflow-hidden", children: /* @__PURE__ */ e(i, { title: "Basic Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ t("div", { className: "space-y-4", children: [
|
|
20
|
-
/* @__PURE__ */ t(n, { className: "p-4", children: [
|
|
21
|
-
/* @__PURE__ */ e(a, { tag: "h5", className: "mb-3", children: "Basic Panel with Actions" }),
|
|
22
|
-
/* @__PURE__ */ e(
|
|
23
|
-
s,
|
|
24
|
-
{
|
|
25
|
-
title: "Panel Title",
|
|
26
|
-
actions: [
|
|
27
|
-
{
|
|
28
|
-
label: "Cancel",
|
|
29
|
-
variant: "ghost",
|
|
30
|
-
onClick: () => console.log("Cancel")
|
|
31
|
-
},
|
|
32
|
-
{
|
|
33
|
-
label: "Save",
|
|
34
|
-
variant: "solid",
|
|
35
|
-
color: "primary",
|
|
36
|
-
onClick: () => console.log("Save")
|
|
37
|
-
}
|
|
38
|
-
],
|
|
39
|
-
children: /* @__PURE__ */ t("div", { className: "space-y-2", children: [
|
|
40
|
-
/* @__PURE__ */ e(a, { tag: "p", children: "Content line 1" }),
|
|
41
|
-
/* @__PURE__ */ e(a, { tag: "p", children: "Content line 2" }),
|
|
42
|
-
/* @__PURE__ */ e(a, { tag: "p", children: "Content line 3" })
|
|
43
|
-
] })
|
|
44
|
-
}
|
|
45
|
-
)
|
|
46
|
-
] }),
|
|
47
|
-
/* @__PURE__ */ t(n, { className: "p-4", children: [
|
|
48
|
-
/* @__PURE__ */ e(a, { tag: "h5", className: "mb-3", children: "Without Actions" }),
|
|
49
|
-
/* @__PURE__ */ e(s, { title: "Panel Without Actions", children: /* @__PURE__ */ e("div", { className: "space-y-2", children: /* @__PURE__ */ e(a, { tag: "p", children: "This panel has no action buttons." }) }) })
|
|
50
|
-
] })
|
|
51
|
-
] }) }) }) }),
|
|
52
|
-
/* @__PURE__ */ e(n, { className: "overflow-hidden", children: /* @__PURE__ */ e(i, { title: "Props", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(c, { columns: [
|
|
53
|
-
{
|
|
54
|
-
key: "prop",
|
|
55
|
-
label: "Prop",
|
|
56
|
-
render: (l) => /* @__PURE__ */ e("code", { className: "text-xs text-brand", children: String(l) })
|
|
57
|
-
},
|
|
58
|
-
{
|
|
59
|
-
key: "type",
|
|
60
|
-
label: "Type",
|
|
61
|
-
render: (l) => /* @__PURE__ */ e("code", { className: "text-xs", children: String(l) })
|
|
62
|
-
},
|
|
63
|
-
{
|
|
64
|
-
key: "default",
|
|
65
|
-
label: "Default",
|
|
66
|
-
render: (l) => {
|
|
67
|
-
const r = String(l);
|
|
68
|
-
return r === "required" ? /* @__PURE__ */ e("span", { className: "text-xs text-red-500", children: "required" }) : /* @__PURE__ */ e("code", { className: "text-xs", children: r });
|
|
69
|
-
}
|
|
70
|
-
},
|
|
71
|
-
{
|
|
72
|
-
key: "description",
|
|
73
|
-
label: "Description"
|
|
74
|
-
}
|
|
75
|
-
], data: [
|
|
76
|
-
{
|
|
77
|
-
prop: "title",
|
|
78
|
-
type: "string",
|
|
79
|
-
default: "required",
|
|
80
|
-
description: "Title of the panel"
|
|
81
|
-
},
|
|
82
|
-
{
|
|
83
|
-
prop: "actions",
|
|
84
|
-
type: "Array<{ label: string; variant?: string; color?: string; size?: string; onClick: () => void }>",
|
|
85
|
-
default: "-",
|
|
86
|
-
description: "Array of action buttons"
|
|
87
|
-
},
|
|
88
|
-
{
|
|
89
|
-
prop: "children",
|
|
90
|
-
type: "React.ReactNode",
|
|
91
|
-
default: "required",
|
|
92
|
-
description: "Content to display in the scrollable area"
|
|
93
|
-
},
|
|
94
|
-
{
|
|
95
|
-
prop: "className",
|
|
96
|
-
type: "string",
|
|
97
|
-
default: "-",
|
|
98
|
-
description: "Additional CSS classes"
|
|
99
|
-
}
|
|
100
|
-
] }) }) }) }),
|
|
101
|
-
/* @__PURE__ */ e(n, { className: "overflow-hidden", children: /* @__PURE__ */ e(i, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
|
|
102
|
-
d,
|
|
103
|
-
{
|
|
104
|
-
language: "tsx",
|
|
105
|
-
code: `import { PanelActionCard, Typography } from '@e-burgos/tucu-ui';
|
|
106
|
-
|
|
107
|
-
// With actions
|
|
108
|
-
<PanelActionCard
|
|
109
|
-
title="Panel Title"
|
|
110
|
-
actions={[
|
|
111
|
-
{
|
|
112
|
-
label: 'Cancel',
|
|
113
|
-
variant: 'ghost',
|
|
114
|
-
onClick: () => handleCancel(),
|
|
115
|
-
},
|
|
116
|
-
{
|
|
117
|
-
label: 'Save',
|
|
118
|
-
variant: 'solid',
|
|
119
|
-
color: 'primary',
|
|
120
|
-
onClick: () => handleSave(),
|
|
121
|
-
},
|
|
122
|
-
]}
|
|
123
|
-
>
|
|
124
|
-
<div className="space-y-2">
|
|
125
|
-
<Typography tag="p">Content here</Typography>
|
|
126
|
-
</div>
|
|
127
|
-
</PanelActionCard>
|
|
128
|
-
|
|
129
|
-
// Without actions
|
|
130
|
-
<PanelActionCard title="Panel Title">
|
|
131
|
-
<Typography tag="p">Content without actions</Typography>
|
|
132
|
-
</PanelActionCard>`
|
|
133
|
-
}
|
|
134
|
-
) }) }) })
|
|
135
|
-
] });
|
|
136
|
-
export {
|
|
137
|
-
b as default
|
|
138
|
-
};
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("./index-Cj89iBVR.js");require("lucide-react");require("react-router-dom");require("react");require("react-dom");const s=()=>{const n=[{key:"prop",label:"Prop",render:t=>e.jsx("code",{className:"text-xs text-brand",children:String(t)})},{key:"type",label:"Type",render:t=>e.jsx("code",{className:"text-xs",children:String(t)})},{key:"default",label:"Default",render:t=>{const l=String(t);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"}],r=[{prop:"title",type:"string",default:"required",description:"Title of the panel"},{prop:"actions",type:"Array<{ label: string; variant?: string; color?: string; size?: string; onClick: () => void }>",default:"-",description:"Array of action buttons"},{prop:"children",type:"React.ReactNode",default:"required",description:"Content to display in the scrollable area"},{prop:"className",type:"string",default:"-",description:"Additional CSS classes"}];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:"PanelActionCard"}),e.jsx(a.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"A panel card component with a scrollable content area and action buttons at the bottom."})]}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.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(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Basic Panel with Actions"}),e.jsx(a.PanelActionCard,{title:"Panel Title",actions:[{label:"Cancel",variant:"ghost",onClick:()=>console.log("Cancel")},{label:"Save",variant:"solid",color:"primary",onClick:()=>console.log("Save")}],children:e.jsxs("div",{className:"space-y-2",children:[e.jsx(a.Typography,{tag:"p",children:"Content line 1"}),e.jsx(a.Typography,{tag:"p",children:"Content line 2"}),e.jsx(a.Typography,{tag:"p",children:"Content line 3"})]})})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Without Actions"}),e.jsx(a.PanelActionCard,{title:"Panel Without Actions",children:e.jsx("div",{className:"space-y-2",children:e.jsx(a.Typography,{tag:"p",children:"This panel has no action buttons."})})})]})]})})})}),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:n,data:r})})})}),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 { PanelActionCard, Typography } from '@e-burgos/tucu-ui';
|
|
2
|
-
|
|
3
|
-
// With actions
|
|
4
|
-
<PanelActionCard
|
|
5
|
-
title="Panel Title"
|
|
6
|
-
actions={[
|
|
7
|
-
{
|
|
8
|
-
label: 'Cancel',
|
|
9
|
-
variant: 'ghost',
|
|
10
|
-
onClick: () => handleCancel(),
|
|
11
|
-
},
|
|
12
|
-
{
|
|
13
|
-
label: 'Save',
|
|
14
|
-
variant: 'solid',
|
|
15
|
-
color: 'primary',
|
|
16
|
-
onClick: () => handleSave(),
|
|
17
|
-
},
|
|
18
|
-
]}
|
|
19
|
-
>
|
|
20
|
-
<div className="space-y-2">
|
|
21
|
-
<Typography tag="p">Content here</Typography>
|
|
22
|
-
</div>
|
|
23
|
-
</PanelActionCard>
|
|
24
|
-
|
|
25
|
-
// Without actions
|
|
26
|
-
<PanelActionCard title="Panel Title">
|
|
27
|
-
<Typography tag="p">Content without actions</Typography>
|
|
28
|
-
</PanelActionCard>`})})})})]})};exports.default=s;
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("./index-Cj89iBVR.js");require("lucide-react");require("react-router-dom");require("react");require("react-dom");const n=()=>{const r=[{key:"prop",label:"Prop",render:t=>e.jsx("code",{className:"text-xs text-brand",children:String(t)})},{key:"type",label:"Type",render:t=>e.jsx("code",{className:"text-xs",children:String(t)})},{key:"default",label:"Default",render:t=>{const l=String(t);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"}],s=[{prop:"title",type:"string",default:"required",description:"Title of the panel"},{prop:"children",type:"React.ReactNode",default:"required",description:"Content to display in the scrollable area"},{prop:"className",type:"string",default:"-",description:"Additional CSS classes"}];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:"PanelCard"}),e.jsx(a.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"A simple panel card component with a title header and scrollable content area."})]}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Basic Examples",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx("div",{className:"space-y-4",children:e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Basic Panel Card"}),e.jsx(a.PanelCard,{title:"Panel Title",children:e.jsxs("div",{className:"space-y-2",children:[e.jsx(a.Typography,{tag:"p",children:"Content line 1"}),e.jsx(a.Typography,{tag:"p",children:"Content line 2"}),e.jsx(a.Typography,{tag:"p",children:"Content line 3"}),e.jsx(a.Typography,{tag:"p",children:"Content line 4"}),e.jsx(a.Typography,{tag:"p",children:"Content line 5"})]})})]})})})})}),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:r,data:s})})})}),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 { PanelCard, Typography } from '@e-burgos/tucu-ui';
|
|
2
|
-
|
|
3
|
-
// Basic usage
|
|
4
|
-
<PanelCard title="Panel Title">
|
|
5
|
-
<div className="space-y-2">
|
|
6
|
-
<Typography tag="p">Content line 1</Typography>
|
|
7
|
-
<Typography tag="p">Content line 2</Typography>
|
|
8
|
-
<Typography tag="p">Content line 3</Typography>
|
|
9
|
-
</div>
|
|
10
|
-
</PanelCard>
|
|
11
|
-
|
|
12
|
-
// With custom className
|
|
13
|
-
<PanelCard title="Custom Panel" className="max-w-md">
|
|
14
|
-
<Typography tag="p">Custom styled panel</Typography>
|
|
15
|
-
</PanelCard>`})})})})]})};exports.default=n;
|
|
@@ -1,92 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("./index-Cj89iBVR.js"),t=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const p=()=>{const i=[{title:"Overview",path:"overview"},{title:"Details",path:"details"},{title:"Settings",path:"settings"}],l=[{title:"Dashboard",path:"dashboard",icon:e.jsx(t.Home,{size:16})},{title:"Analytics",path:"analytics",icon:e.jsx(t.BarChart,{size:16})},{title:"Reports",path:"reports",icon:e.jsx(t.FileText,{size:16})},{title:"Settings",path:"settings",icon:e.jsx(t.Settings,{size:16})}],o=[{title:"Profile",path:"profile",icon:e.jsx(t.User,{size:16})},{title:"Notifications",path:"notifications",icon:e.jsx(t.Bell,{size:16})},{title:"Settings",path:"settings",icon:e.jsx(t.Settings,{size:16})}],r=[{key:"prop",label:"Prop",render:s=>e.jsx("code",{className:"text-xs text-brand",children:String(s)})},{key:"type",label:"Type",render:s=>e.jsx("code",{className:"text-xs",children:String(s)})},{key:"default",label:"Default",render:s=>{const n=String(s);return n==="required"?e.jsx("span",{className:"text-xs text-red-500",children:"required"}):e.jsx("code",{className:"text-xs",children:n})}},{key:"description",label:"Description"}],c=[{prop:"tabMenu",type:"TabMenuItem[]",default:"required",description:"Array of tab menu items with title, path, and optional icon"},{prop:"children",type:"React.ReactNode",default:"required",description:"TabPanel components for each tab content"},{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:"tabListClassName",type:"string",default:"-",description:"Additional CSS classes for tab list container"},{prop:"showMobileSelect",type:"boolean",default:"true",description:"Whether to show TabSelect on mobile devices"}],d=[{prop:"title",type:"React.ReactNode",default:"required",description:"Tab label (can be text, JSX, or components)"},{prop:"path",type:"string",default:"required",description:'Unique path for URL parameter (e.g., "overview")'},{prop:"icon",type:"React.ReactNode",default:"-",description:"Optional icon to display before tab label"}];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:"ParamTab"}),e.jsx(a.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"A powerful tab component that automatically syncs with URL query parameters and switches to a dropdown selector on mobile devices for optimal responsive behavior."})]}),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:"space-y-8",children:[e.jsxs("div",{children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Underline Variant (Default)"}),e.jsx(a.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 mb-4",children:"Classic underline style with animated indicator. URL syncs with ?view=overview, ?view=details, etc."}),e.jsxs(a.ParamTab,{tabMenu:i,variant:"underline",children:[e.jsx(a.TabPanel,{children:e.jsxs(a.CardContainer,{className:"p-6",children:[e.jsx(a.Typography,{tag:"h3",className:"text-xl font-semibold mb-2",children:"Overview Dashboard"}),e.jsx(a.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"Main dashboard content with key metrics and overview information. The URL parameter updates to ?view=overview when this tab is active."})]})}),e.jsx(a.TabPanel,{children:e.jsxs(a.CardContainer,{className:"p-6",children:[e.jsx(a.Typography,{tag:"h3",className:"text-xl font-semibold mb-2",children:"Detailed Information"}),e.jsx(a.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"Comprehensive details and in-depth analysis. URL parameter: ?view=details"})]})}),e.jsx(a.TabPanel,{children:e.jsxs(a.CardContainer,{className:"p-6",children:[e.jsx(a.Typography,{tag:"h3",className:"text-xl font-semibold mb-2",children:"Configuration Settings"}),e.jsx(a.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"Manage your preferences and application settings. URL parameter: ?view=settings"})]})})]})]}),e.jsxs("div",{children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Pills Variant with Icons"}),e.jsx(a.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 mb-4",children:"Modern rounded pills with icon support for enhanced visual clarity."}),e.jsxs(a.ParamTab,{tabMenu:l,variant:"pills",size:"medium",children:[e.jsx(a.TabPanel,{children:e.jsxs(a.CardContainer,{className:"p-6",children:[e.jsxs("div",{className:"flex items-center gap-3 mb-4",children:[e.jsx(t.Home,{className:"text-brand",size:24}),e.jsx(a.Typography,{tag:"h3",className:"text-xl font-semibold",children:"Dashboard Home"})]}),e.jsx(a.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"Welcome to your dashboard! Here you'll find a summary of your most important information."})]})}),e.jsx(a.TabPanel,{children:e.jsxs(a.CardContainer,{className:"p-6",children:[e.jsxs("div",{className:"flex items-center gap-3 mb-4",children:[e.jsx(t.BarChart,{className:"text-brand",size:24}),e.jsx(a.Typography,{tag:"h3",className:"text-xl font-semibold",children:"Analytics Overview"})]}),e.jsx(a.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"Track your performance with detailed analytics and insights."})]})}),e.jsx(a.TabPanel,{children:e.jsxs(a.CardContainer,{className:"p-6",children:[e.jsxs("div",{className:"flex items-center gap-3 mb-4",children:[e.jsx(t.FileText,{className:"text-brand",size:24}),e.jsx(a.Typography,{tag:"h3",className:"text-xl font-semibold",children:"Reports Center"})]}),e.jsx(a.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"Generate and view comprehensive reports for your data."})]})}),e.jsx(a.TabPanel,{children:e.jsxs(a.CardContainer,{className:"p-6",children:[e.jsxs("div",{className:"flex items-center gap-3 mb-4",children:[e.jsx(t.Settings,{className:"text-brand",size:24}),e.jsx(a.Typography,{tag:"h3",className:"text-xl font-semibold",children:"Application Settings"})]}),e.jsx(a.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"Customize your application preferences and configuration."})]})})]})]}),e.jsxs("div",{children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Bordered Variant"}),e.jsx(a.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 mb-4",children:"Distinct bordered style with highlighted selection state."}),e.jsxs(a.ParamTab,{tabMenu:o,variant:"bordered",children:[e.jsx(a.TabPanel,{children:e.jsxs(a.CardContainer,{className:"p-6",children:[e.jsx(a.Typography,{tag:"h3",className:"text-xl font-semibold mb-2",children:"User Profile"}),e.jsx(a.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"Manage your personal information and profile settings."})]})}),e.jsx(a.TabPanel,{children:e.jsxs(a.CardContainer,{className:"p-6",children:[e.jsx(a.Typography,{tag:"h3",className:"text-xl font-semibold mb-2",children:"Notifications"}),e.jsx(a.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"Configure how and when you receive notifications."})]})}),e.jsx(a.TabPanel,{children:e.jsxs(a.CardContainer,{className:"p-6",children:[e.jsx(a.Typography,{tag:"h3",className:"text-xl font-semibold mb-2",children:"Account Settings"}),e.jsx(a.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"Manage your account security and privacy settings."})]})})]})]}),e.jsxs("div",{children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Solid Variant (Small Size)"}),e.jsx(a.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 mb-4",children:"Compact solid background style perfect for space-constrained layouts."}),e.jsxs(a.ParamTab,{tabMenu:i,variant:"solid",size:"small",children:[e.jsx(a.TabPanel,{children:e.jsx(a.CardContainer,{className:"p-6",children:e.jsx(a.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"Compact overview content with small tab size."})})}),e.jsx(a.TabPanel,{children:e.jsx(a.CardContainer,{className:"p-6",children:e.jsx(a.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"Detailed information in a compact format."})})}),e.jsx(a.TabPanel,{children:e.jsx(a.CardContainer,{className:"p-6",children:e.jsx(a.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:"Settings panel with space-efficient design."})})})]})]})]})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Key Features",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.jsxs(a.Typography,{tag:"h5",className:"mb-2",children:[e.jsx("span",{role:"img","aria-label":"link",children:"🔗"})," ","URL Synchronization"]}),e.jsx(a.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 mb-3",children:"Automatically syncs tab state with URL query parameters (e.g., ?view=overview). This enables:"}),e.jsxs("ul",{className:"list-disc list-inside text-sm text-gray-600 dark:text-gray-400 space-y-1 ml-4",children:[e.jsx("li",{children:"Deep linking to specific tabs"}),e.jsx("li",{children:"Browser back/forward navigation"}),e.jsx("li",{children:"Shareable URLs with selected tab state"}),e.jsx("li",{children:"Bookmark support for specific views"})]})]}),e.jsxs("div",{children:[e.jsxs(a.Typography,{tag:"h5",className:"mb-2",children:[e.jsx("span",{role:"img","aria-label":"mobile",children:"📱"})," ","Responsive Mobile Adaptation"]}),e.jsx(a.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 mb-3",children:"Automatically switches to TabSelect dropdown on mobile devices (xs, sm breakpoints) for optimal space usage and better UX."}),e.jsx(a.CardContainer,{className:"p-4 bg-blue-50 dark:bg-blue-900/20",children:e.jsxs(a.Typography,{tag:"p",className:"text-sm",children:[e.jsx("span",{role:"img","aria-label":"tip",children:"💡"})," ",e.jsx("span",{className:"font-semibold",children:"Tip:"})," Resize your browser window to see the automatic switch between tab bar and dropdown selector!"]})})]}),e.jsxs("div",{children:[e.jsxs(a.Typography,{tag:"h5",className:"mb-2",children:[e.jsx("span",{role:"img","aria-label":"styles",children:"🎨"})," ","Multiple Style Variants"]}),e.jsx(a.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:"Choose from 4 distinct visual styles (underline, pills, bordered, solid) and 3 sizes (small, medium, large) to match your design system."})]}),e.jsxs("div",{children:[e.jsxs(a.Typography,{tag:"h5",className:"mb-2",children:[e.jsx("span",{role:"img","aria-label":"icons",children:"✨"})," ","Icon Support"]}),e.jsx(a.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:"Add icons to tabs for better visual communication and improved scannability. Works seamlessly with Lucide Icons."})]})]})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"TabMenuItem Interface",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.BasicTable,{columns:r,data:d})})})}),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:r,data:c})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Code Examples",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 { ParamTab, TabPanel } from '@e-burgos/tucu-ui';
|
|
2
|
-
import { Home, Settings, User } from 'lucide-react';
|
|
3
|
-
|
|
4
|
-
// Basic usage with URL sync
|
|
5
|
-
function BasicExample() {
|
|
6
|
-
const tabMenu = [
|
|
7
|
-
{ title: 'Overview', path: 'overview' },
|
|
8
|
-
{ title: 'Details', path: 'details' },
|
|
9
|
-
{ title: 'Settings', path: 'settings' },
|
|
10
|
-
];
|
|
11
|
-
|
|
12
|
-
return (
|
|
13
|
-
<ParamTab tabMenu={tabMenu}>
|
|
14
|
-
<TabPanel>
|
|
15
|
-
<div>Overview content</div>
|
|
16
|
-
</TabPanel>
|
|
17
|
-
<TabPanel>
|
|
18
|
-
<div>Details content</div>
|
|
19
|
-
</TabPanel>
|
|
20
|
-
<TabPanel>
|
|
21
|
-
<div>Settings content</div>
|
|
22
|
-
</TabPanel>
|
|
23
|
-
</ParamTab>
|
|
24
|
-
);
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
// Pills variant with icons
|
|
28
|
-
function PillsWithIcons() {
|
|
29
|
-
const tabMenu = [
|
|
30
|
-
{
|
|
31
|
-
title: 'Dashboard',
|
|
32
|
-
path: 'dashboard',
|
|
33
|
-
icon: <Home size={16} />,
|
|
34
|
-
},
|
|
35
|
-
{
|
|
36
|
-
title: 'Profile',
|
|
37
|
-
path: 'profile',
|
|
38
|
-
icon: <User size={16} />,
|
|
39
|
-
},
|
|
40
|
-
{
|
|
41
|
-
title: 'Settings',
|
|
42
|
-
path: 'settings',
|
|
43
|
-
icon: <Settings size={16} />,
|
|
44
|
-
},
|
|
45
|
-
];
|
|
46
|
-
|
|
47
|
-
return (
|
|
48
|
-
<ParamTab tabMenu={tabMenu} variant="pills" size="medium">
|
|
49
|
-
<TabPanel>Dashboard content</TabPanel>
|
|
50
|
-
<TabPanel>Profile content</TabPanel>
|
|
51
|
-
<TabPanel>Settings content</TabPanel>
|
|
52
|
-
</ParamTab>
|
|
53
|
-
);
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
// Bordered variant
|
|
57
|
-
function BorderedExample() {
|
|
58
|
-
const tabMenu = [
|
|
59
|
-
{ title: 'Tab 1', path: 'tab1' },
|
|
60
|
-
{ title: 'Tab 2', path: 'tab2' },
|
|
61
|
-
];
|
|
62
|
-
|
|
63
|
-
return (
|
|
64
|
-
<ParamTab tabMenu={tabMenu} variant="bordered">
|
|
65
|
-
<TabPanel>Content 1</TabPanel>
|
|
66
|
-
<TabPanel>Content 2</TabPanel>
|
|
67
|
-
</ParamTab>
|
|
68
|
-
);
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
// Solid variant with small size
|
|
72
|
-
function CompactExample() {
|
|
73
|
-
const tabMenu = [
|
|
74
|
-
{ title: 'View 1', path: 'view1' },
|
|
75
|
-
{ title: 'View 2', path: 'view2' },
|
|
76
|
-
];
|
|
77
|
-
|
|
78
|
-
return (
|
|
79
|
-
<ParamTab tabMenu={tabMenu} variant="solid" size="small">
|
|
80
|
-
<TabPanel>Compact content 1</TabPanel>
|
|
81
|
-
<TabPanel>Compact content 2</TabPanel>
|
|
82
|
-
</ParamTab>
|
|
83
|
-
);
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
// How it works:
|
|
87
|
-
// 1. Component reads current URL parameter (?view=overview)
|
|
88
|
-
// 2. Matches it with tabMenu path to set active tab
|
|
89
|
-
// 3. When user clicks tab, URL updates automatically
|
|
90
|
-
// 4. On mobile (xs, sm), shows TabSelect dropdown
|
|
91
|
-
// 5. On desktop, shows regular tab bar
|
|
92
|
-
// 6. Browser back/forward buttons work seamlessly`})})})})]})};exports.default=p;
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),d=require("react"),s=require("./index-Cj89iBVR.js");require("lucide-react");require("react-router-dom");require("react-dom");const o=()=>{const[i,r]=d.useState(""),l=[{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 n=String(a);return n==="required"?e.jsx("span",{className:"text-xs text-red-500",children:"required"}):e.jsx("code",{className:"text-xs",children:n})}},{key:"description",label:"Description"}],t=[{prop:"length",type:"number",default:"required",description:"Number of pin code digits"},{prop:"value",type:"string",default:"-",description:"Current pin code value"},{prop:"onChange",type:"(value: string) => void",default:"-",description:"Callback when pin code changes"},{prop:"variant",type:"'ghost' | 'solid' | 'transparent'",default:"'ghost'",description:"Visual variant of the pin code inputs"},{prop:"size",type:"'sm' | 'md' | 'lg' | 'xl'",default:"'md'",description:"Size of the pin code inputs"},{prop:"color",type:"'primary' | 'secondary' | 'danger' | 'info' | 'success' | 'warning'",default:"'primary'",description:"Color theme of the pin code inputs"},{prop:"type",type:"'text' | 'number'",default:"'text'",description:"Input type for pin code fields"},{prop:"mask",type:"boolean",default:"false",description:"Mask the pin code values"},{prop:"center",type:"boolean",default:"false",description:"Center the pin code horizontally"},{prop:"disabled",type:"boolean",default:"false",description:"Disables all pin code inputs"},{prop:"error",type:"string",default:"-",description:"Error message to display"},{prop:"helperText",type:"string",default:"-",description:"Helper text displayed below the pin code"}];return 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:"PinCode"}),e.jsx(s.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"A pin code input component for entering numeric codes digit by digit."})]}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.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(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"4 Digit PinCode"}),e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"mb-2",children:"Pin Code"}),e.jsx(s.PinCode,{length:4,value:i,onChange:r})]})]}),e.jsxs(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"6 Digit PinCode"}),e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"mb-2",children:"Verification Code"}),e.jsx(s.PinCode,{length:6,value:i,onChange:r})]})]}),e.jsxs(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"With Helper Text"}),e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"mb-2",children:"Security Code"}),e.jsx(s.PinCode,{length:4,helperText:"Enter the 4-digit code",value:i,onChange:r})]})]}),e.jsxs(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"With Error"}),e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"mb-2",children:"Pin Code"}),e.jsx(s.PinCode,{length:4,error:"Invalid pin code",value:i,onChange:r})]})]}),e.jsxs(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"Disabled"}),e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"mb-2",children:"Pin Code"}),e.jsx(s.PinCode,{length:4,disabled:!0})]})]})]})})})}),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:"grid grid-cols-1 md:grid-cols-3 gap-4",children:[e.jsxs(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-2",children:"Ghost (default)"}),e.jsx(s.PinCode,{length:4,variant:"ghost"})]}),e.jsxs(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-2",children:"Solid"}),e.jsx(s.PinCode,{length:4,variant:"solid"})]}),e.jsxs(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-2",children:"Transparent"}),e.jsx(s.PinCode,{length:4,variant:"transparent"})]})]})})})}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Colors & Sizes",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(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-2",children:"Different Colors"}),e.jsxs("div",{className:"space-y-4",children:[e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"mb-1 text-xs",children:"Primary"}),e.jsx(s.PinCode,{length:4,color:"primary"})]}),e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"mb-1 text-xs",children:"Danger"}),e.jsx(s.PinCode,{length:4,color:"danger"})]})]})]}),e.jsxs(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-2",children:"Different Sizes"}),e.jsxs("div",{className:"space-y-4",children:[e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"mb-1 text-xs",children:"Small"}),e.jsx(s.PinCode,{length:4,size:"sm"})]}),e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"mb-1 text-xs",children:"Medium"}),e.jsx(s.PinCode,{length:4,size:"md"})]}),e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"mb-1 text-xs",children:"Large"}),e.jsx(s.PinCode,{length:4,size:"lg"})]})]})]})]})})})}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Props",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(s.BasicTable,{columns:l,data:t})})})}),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 { PinCode } from '@e-burgos/tucu-ui';
|
|
2
|
-
|
|
3
|
-
<PinCode
|
|
4
|
-
length={4}
|
|
5
|
-
value={value}
|
|
6
|
-
onChange={setValue}
|
|
7
|
-
/>
|
|
8
|
-
|
|
9
|
-
// Variants
|
|
10
|
-
<PinCode length={4} variant="ghost" />
|
|
11
|
-
<PinCode length={4} variant="solid" />
|
|
12
|
-
<PinCode length={4} variant="transparent" />
|
|
13
|
-
|
|
14
|
-
// Colors
|
|
15
|
-
<PinCode length={4} color="primary" />
|
|
16
|
-
<PinCode length={4} color="danger" />
|
|
17
|
-
<PinCode length={4} color="success" />
|
|
18
|
-
|
|
19
|
-
// Sizes
|
|
20
|
-
<PinCode length={4} size="sm" />
|
|
21
|
-
<PinCode length={4} size="md" />
|
|
22
|
-
<PinCode length={4} size="lg" />`})})})})]})};exports.default=o;
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("react"),s=require("./index-Cj89iBVR.js");require("lucide-react");require("react-router-dom");require("react-dom");const n=()=>{const[r,l]=c.useState(45),o=[{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 i=String(a);return i==="required"?e.jsx("span",{className:"text-xs text-red-500",children:"required"}):e.jsx("code",{className:"text-xs",children:i})}},{key:"description",label:"Description"}],t=[{prop:"value",type:"number",default:"-",description:"Percentage value (0-100)"},{prop:"label",type:"React.ReactNode",default:"''",description:"Label to display inside the bar"},{prop:"size",type:"'sm' | 'DEFAULT' | 'lg' | 'xl'",default:"'DEFAULT'",description:"Size of the progressbar"},{prop:"rounded",type:"'none' | 'sm' | 'md' | 'lg' | 'DEFAULT'",default:"'DEFAULT'",description:"Border radius"},{prop:"color",type:"'DEFAULT' | 'primary' | 'secondary' | 'danger' | 'info' | 'success' | 'warning'",default:"'DEFAULT'",description:"Color variant"},{prop:"variant",type:"'solid' | 'flat'",default:"'solid'",description:"Visual variant"},{prop:"className",type:"string",default:"-",description:"Additional CSS classes"}];return 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:"Progressbar"}),e.jsx(s.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"A progress bar component for displaying completion status with customizable colors, sizes, and variants."})]}),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:"Basic Progressbar"}),e.jsx(s.Progressbar,{value:r})]}),e.jsxs(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"With Label"}),e.jsx(s.Progressbar,{value:r,label:`${r}%`,size:"xl"})]}),e.jsxs(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"Interactive Example"}),e.jsxs("div",{className:"space-y-2",children:[e.jsx(s.Progressbar,{value:r,label:`${r}%`,size:"xl"}),e.jsxs("div",{className:"flex gap-2",children:[e.jsx("button",{onClick:()=>l(Math.max(0,r-10)),className:"px-3 py-1 bg-light-dark rounded border border-gray-300 dark:border-gray-600 hover:opacity-80 transition-opacity",children:"-10"}),e.jsx("button",{onClick:()=>l(Math.min(100,r+10)),className:"px-3 py-1 bg-light-dark rounded border border-gray-300 dark:border-gray-600 hover:opacity-80 transition-opacity",children:"+10"})]})]})]})]})})})}),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("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"Colors"}),e.jsxs("div",{className:"space-y-2",children:[e.jsx(s.Progressbar,{value:60,color:"primary"}),e.jsx(s.Progressbar,{value:60,color:"success"}),e.jsx(s.Progressbar,{value:60,color:"danger"}),e.jsx(s.Progressbar,{value:60,color:"info"}),e.jsx(s.Progressbar,{value:60,color:"warning"})]})]}),e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"Variants"}),e.jsxs("div",{className:"space-y-2",children:[e.jsx(s.Progressbar,{value:60,variant:"solid"}),e.jsx(s.Progressbar,{value:60,variant:"flat"})]})]}),e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"Sizes"}),e.jsxs("div",{className:"space-y-2",children:[e.jsx(s.Progressbar,{value:60,size:"sm"}),e.jsx(s.Progressbar,{value:60,size:"DEFAULT"}),e.jsx(s.Progressbar,{value:60,size:"lg"}),e.jsx(s.Progressbar,{value:60,size:"xl"})]})]})]})})})}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Props",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(s.BasicTable,{columns:o,data:t})})})}),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 { Progressbar } from '@e-burgos/tucu-ui';
|
|
2
|
-
|
|
3
|
-
// Basic usage
|
|
4
|
-
<Progressbar value={45} />
|
|
5
|
-
|
|
6
|
-
// With label
|
|
7
|
-
<Progressbar value={45} label="45%" size="xl" />
|
|
8
|
-
|
|
9
|
-
// Different colors
|
|
10
|
-
<Progressbar value={60} color="primary" />
|
|
11
|
-
<Progressbar value={60} color="success" />
|
|
12
|
-
<Progressbar value={60} color="danger" />
|
|
13
|
-
|
|
14
|
-
// Different variants
|
|
15
|
-
<Progressbar value={60} variant="solid" />
|
|
16
|
-
<Progressbar value={60} variant="flat" />
|
|
17
|
-
|
|
18
|
-
// Different sizes
|
|
19
|
-
<Progressbar value={60} size="sm" />
|
|
20
|
-
<Progressbar value={60} size="lg" />
|
|
21
|
-
<Progressbar value={60} size="xl" />`})})})})]})};exports.default=n;
|