@bitrise/bitkit-v2 0.3.475 → 0.3.477-beta.3026
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/README.md +5 -6
- package/dist/atoms/DatePicker/DatePicker.js.map +1 -1
- package/dist/atoms/ImageCropper/ImageCropper.js.map +1 -1
- package/dist/components/BitkitActionMenu/BitkitActionMenu.js.map +1 -1
- package/dist/components/BitkitAvatar/BitkitAvatar.js.map +1 -1
- package/dist/components/BitkitButton/BitkitButton.js.map +1 -1
- package/dist/components/BitkitCollapsible/BitkitCollapsible.js.map +1 -1
- package/dist/components/BitkitColorButton/BitkitColorButton.js.map +1 -1
- package/dist/components/BitkitDialog/BitkitStepsDialog.js.map +1 -1
- package/dist/components/BitkitDialog/BitkitStepsDialogStep.js.map +1 -1
- package/dist/components/BitkitDialog/DialogBodyContext.js.map +1 -1
- package/dist/components/BitkitExpandableCard/BitkitExpandableCard.js.map +1 -1
- package/dist/components/BitkitFileInput/BitkitFileInput.js.map +1 -1
- package/dist/components/BitkitIconButton/BitkitIconButton.js.map +1 -1
- package/dist/components/BitkitLabeledData/BitkitLabeledData.js.map +1 -1
- package/dist/components/BitkitList/BitkitList.js.map +1 -1
- package/dist/components/BitkitMarkdown/BitkitMarkdown.js.map +1 -1
- package/dist/components/BitkitMarkdownCard/BitkitMarkdownCard.js.map +1 -1
- package/dist/components/BitkitMultiselect/BitkitMultiselect.js.map +1 -1
- package/dist/components/BitkitNoteCard/BitkitNoteCard.js.map +1 -1
- package/dist/components/BitkitOverflowContent/BitkitOverflowContent.js.map +1 -1
- package/dist/components/BitkitPageSidebar/BitkitPageSidebar.js.map +1 -1
- package/dist/components/BitkitPagination/BitkitPagination.js.map +1 -1
- package/dist/components/BitkitPaginationLoadMore/BitkitPaginationLoadMore.js.map +1 -1
- package/dist/components/BitkitPopover/BitkitPopover.js.map +1 -1
- package/dist/components/BitkitPromoBanner/BitkitPromoBanner.js.map +1 -1
- package/dist/components/BitkitSegmentedControl/BitkitSegmentedControl.js.map +1 -1
- package/dist/components/BitkitSelectMenu/BitkitSelectMenuAction.js.map +1 -1
- package/dist/components/BitkitSettingsCard/BitkitSettingsCard.js.map +1 -1
- package/dist/components/BitkitSplitButton/BitkitSplitButton.js.map +1 -1
- package/dist/components/BitkitStat/BitkitStat.js.map +1 -1
- package/dist/components/BitkitStepsCard/BitkitStepsCard.js.map +1 -1
- package/dist/components/BitkitTable/BitkitExpandableRow.js.map +1 -1
- package/dist/components/BitkitTable/BitkitRowActionsCell.js.map +1 -1
- package/dist/components/BitkitTable/BitkitSortableColumnHeader.js.map +1 -1
- package/dist/components/BitkitTabs/BitkitTabs.js.map +1 -1
- package/dist/components/BitkitToggletip/BitkitToggletip.js.map +1 -1
- package/dist/components/BitkitTour/BitkitTour.js.map +1 -1
- package/dist/components/BitkitTreeView/BitkitTreeView.js.map +1 -1
- package/dist/components/BitkitUIHeader/BitkitUIHeader.d.ts +37 -0
- package/dist/components/BitkitUIHeader/BitkitUIHeader.js +99 -0
- package/dist/components/BitkitUIHeader/BitkitUIHeader.js.map +1 -0
- package/dist/components/BitkitUIHeader/BitriseLogo.d.ts +10 -0
- package/dist/components/BitkitUIHeader/BitriseLogo.js +86 -0
- package/dist/components/BitkitUIHeader/BitriseLogo.js.map +1 -0
- package/dist/components/BitkitUIHeader/UIHeaderAccount.d.ts +22 -0
- package/dist/components/BitkitUIHeader/UIHeaderAccount.js +38 -0
- package/dist/components/BitkitUIHeader/UIHeaderAccount.js.map +1 -0
- package/dist/components/BitkitUIHeader/UIHeaderButton.d.ts +33 -0
- package/dist/components/BitkitUIHeader/UIHeaderButton.js +41 -0
- package/dist/components/BitkitUIHeader/UIHeaderButton.js.map +1 -0
- package/dist/components/BitkitUIHeader/UIHeaderContext.d.ts +13 -0
- package/dist/components/BitkitUIHeader/UIHeaderContext.js +11 -0
- package/dist/components/BitkitUIHeader/UIHeaderContext.js.map +1 -0
- package/dist/components/BitkitUIHeader/UIHeaderControl.d.ts +67 -0
- package/dist/components/BitkitUIHeader/UIHeaderControl.js +65 -0
- package/dist/components/BitkitUIHeader/UIHeaderControl.js.map +1 -0
- package/dist/components/BitkitUIHeader/UIHeaderNavButton.d.ts +20 -0
- package/dist/components/BitkitUIHeader/UIHeaderNavButton.js +46 -0
- package/dist/components/BitkitUIHeader/UIHeaderNavButton.js.map +1 -0
- package/dist/components/BitkitUIHeader/UIHeaderSearch.d.ts +32 -0
- package/dist/components/BitkitUIHeader/UIHeaderSearch.js +107 -0
- package/dist/components/BitkitUIHeader/UIHeaderSearch.js.map +1 -0
- package/dist/components/BitkitUISideNav/UISideNavLink.js.map +1 -1
- package/dist/components/common/NotificationContent.js.map +1 -1
- package/dist/components/index.d.ts +1 -0
- package/dist/icons/IconAbortCircle.js.map +1 -1
- package/dist/icons/IconAbortCircleFilled.js.map +1 -1
- package/dist/icons/IconAddons.js.map +1 -1
- package/dist/icons/IconAgent.js.map +1 -1
- package/dist/icons/IconAnchor.js.map +1 -1
- package/dist/icons/IconAndroid.js.map +1 -1
- package/dist/icons/IconApp.js.map +1 -1
- package/dist/icons/IconAppSettings.js.map +1 -1
- package/dist/icons/IconAppStore.js.map +1 -1
- package/dist/icons/IconAppStoreColor.js.map +1 -1
- package/dist/icons/IconApple.js.map +1 -1
- package/dist/icons/IconArchive.js.map +1 -1
- package/dist/icons/IconArchiveDelete.js.map +1 -1
- package/dist/icons/IconArchiveRestore.js.map +1 -1
- package/dist/icons/IconArrowBackAndDown.js.map +1 -1
- package/dist/icons/IconArrowBackAndUp.js.map +1 -1
- package/dist/icons/IconArrowDown.js.map +1 -1
- package/dist/icons/IconArrowForwardAndDown.js.map +1 -1
- package/dist/icons/IconArrowForwardAndUp.js.map +1 -1
- package/dist/icons/IconArrowLeft.js.map +1 -1
- package/dist/icons/IconArrowNortheast.js.map +1 -1
- package/dist/icons/IconArrowNorthwest.js.map +1 -1
- package/dist/icons/IconArrowRight.js.map +1 -1
- package/dist/icons/IconArrowUp.js.map +1 -1
- package/dist/icons/IconArrowsHorizontal.js.map +1 -1
- package/dist/icons/IconArrowsVertical.js.map +1 -1
- package/dist/icons/IconAutomation.js.map +1 -1
- package/dist/icons/IconAws.js.map +1 -1
- package/dist/icons/IconAwsColor.js.map +1 -1
- package/dist/icons/IconBadge3RdParty.js.map +1 -1
- package/dist/icons/IconBadgeBitrise.js.map +1 -1
- package/dist/icons/IconBadgeUpgrade.js.map +1 -1
- package/dist/icons/IconBadgeVersionOk.js.map +1 -1
- package/dist/icons/IconBazel.js.map +1 -1
- package/dist/icons/IconBell.js.map +1 -1
- package/dist/icons/IconBitbot.js.map +1 -1
- package/dist/icons/IconBitbotError.js.map +1 -1
- package/dist/icons/IconBitbucket.js.map +1 -1
- package/dist/icons/IconBitbucketColor.js.map +1 -1
- package/dist/icons/IconBitbucketNeutral.js.map +1 -1
- package/dist/icons/IconBitbucketWhite.js.map +1 -1
- package/dist/icons/IconBlockCircle.js.map +1 -1
- package/dist/icons/IconBook.js.map +1 -1
- package/dist/icons/IconBoxArrowDown.js.map +1 -1
- package/dist/icons/IconBoxDot.js.map +1 -1
- package/dist/icons/IconBoxLinesOverflow.js.map +1 -1
- package/dist/icons/IconBoxLinesWrap.js.map +1 -1
- package/dist/icons/IconBranch.js.map +1 -1
- package/dist/icons/IconBrowserstackColor.js.map +1 -1
- package/dist/icons/IconBug.js.map +1 -1
- package/dist/icons/IconBuild.js.map +1 -1
- package/dist/icons/IconBuildCache.js.map +1 -1
- package/dist/icons/IconBuildCacheFilled.js.map +1 -1
- package/dist/icons/IconBuildEnvSetup.js.map +1 -1
- package/dist/icons/IconBuildHub.js.map +1 -1
- package/dist/icons/IconBuildHubFilled.js.map +1 -1
- package/dist/icons/IconCalendar.js.map +1 -1
- package/dist/icons/IconChangePlan.js.map +1 -1
- package/dist/icons/IconChat.js.map +1 -1
- package/dist/icons/IconCheck.js.map +1 -1
- package/dist/icons/IconCheckCircle.js.map +1 -1
- package/dist/icons/IconCheckCircleFilled.js.map +1 -1
- package/dist/icons/IconChevronDown.js.map +1 -1
- package/dist/icons/IconChevronLeft.js.map +1 -1
- package/dist/icons/IconChevronRight.js.map +1 -1
- package/dist/icons/IconChevronUp.js.map +1 -1
- package/dist/icons/IconCi.js.map +1 -1
- package/dist/icons/IconCiFilled.js.map +1 -1
- package/dist/icons/IconCircle.js.map +1 -1
- package/dist/icons/IconCircleDashed.js.map +1 -1
- package/dist/icons/IconCircleHalfFilled.js.map +1 -1
- package/dist/icons/IconClaude.js.map +1 -1
- package/dist/icons/IconClaudeColor.js.map +1 -1
- package/dist/icons/IconClock.js.map +1 -1
- package/dist/icons/IconCode.js.map +1 -1
- package/dist/icons/IconCodePush.js.map +1 -1
- package/dist/icons/IconCodeSigning.js.map +1 -1
- package/dist/icons/IconCoffee.js.map +1 -1
- package/dist/icons/IconCommit.js.map +1 -1
- package/dist/icons/IconConfigure.js.map +1 -1
- package/dist/icons/IconConnectedAccounts.js.map +1 -1
- package/dist/icons/IconContainer.js.map +1 -1
- package/dist/icons/IconCopilot.js.map +1 -1
- package/dist/icons/IconCopy.js.map +1 -1
- package/dist/icons/IconCordova.js.map +1 -1
- package/dist/icons/IconCpu.js.map +1 -1
- package/dist/icons/IconCreditcard.js.map +1 -1
- package/dist/icons/IconCredits.js.map +1 -1
- package/dist/icons/IconCross.js.map +1 -1
- package/dist/icons/IconCrossCircle.js.map +1 -1
- package/dist/icons/IconCrossCircleFilled.js.map +1 -1
- package/dist/icons/IconCrown.js.map +1 -1
- package/dist/icons/IconCursor.js.map +1 -1
- package/dist/icons/IconCycle.js.map +1 -1
- package/dist/icons/IconDashboard.js.map +1 -1
- package/dist/icons/IconDashboardFilled.js.map +1 -1
- package/dist/icons/IconDeployment.js.map +1 -1
- package/dist/icons/IconDetails.js.map +1 -1
- package/dist/icons/IconDoc.js.map +1 -1
- package/dist/icons/IconDollar.js.map +1 -1
- package/dist/icons/IconDot.js.map +1 -1
- package/dist/icons/IconDotnet.js.map +1 -1
- package/dist/icons/IconDotnetColor.js.map +1 -1
- package/dist/icons/IconDotnetText.js.map +1 -1
- package/dist/icons/IconDotnetTextColor.js.map +1 -1
- package/dist/icons/IconDoubleCircle.js.map +1 -1
- package/dist/icons/IconDownload.js.map +1 -1
- package/dist/icons/IconDragHandle.js.map +1 -1
- package/dist/icons/IconEc2Ami.js.map +1 -1
- package/dist/icons/IconEnterprise.js.map +1 -1
- package/dist/icons/IconErrorCircle.js.map +1 -1
- package/dist/icons/IconErrorCircleFilled.js.map +1 -1
- package/dist/icons/IconExpand.js.map +1 -1
- package/dist/icons/IconExtraBuildCapacity.js.map +1 -1
- package/dist/icons/IconEye.js.map +1 -1
- package/dist/icons/IconEyeSlash.js.map +1 -1
- package/dist/icons/IconFastlane.js.map +1 -1
- package/dist/icons/IconFile.js.map +1 -1
- package/dist/icons/IconFileDoc.js.map +1 -1
- package/dist/icons/IconFilePdf.js.map +1 -1
- package/dist/icons/IconFilePlist.js.map +1 -1
- package/dist/icons/IconFileYml.js.map +1 -1
- package/dist/icons/IconFileZip.js.map +1 -1
- package/dist/icons/IconFilter.js.map +1 -1
- package/dist/icons/IconFlag.js.map +1 -1
- package/dist/icons/IconFlutter.js.map +1 -1
- package/dist/icons/IconFolder.js.map +1 -1
- package/dist/icons/IconFullscreen.js.map +1 -1
- package/dist/icons/IconFullscreenExit.js.map +1 -1
- package/dist/icons/IconGauge.js.map +1 -1
- package/dist/icons/IconGit.js.map +1 -1
- package/dist/icons/IconGithub.js.map +1 -1
- package/dist/icons/IconGitlab.js.map +1 -1
- package/dist/icons/IconGitlabColor.js.map +1 -1
- package/dist/icons/IconGitlabWhite.js.map +1 -1
- package/dist/icons/IconGlobe.js.map +1 -1
- package/dist/icons/IconGo.js.map +1 -1
- package/dist/icons/IconGoogleColor.js.map +1 -1
- package/dist/icons/IconGooglePlay.js.map +1 -1
- package/dist/icons/IconGooglePlayColor.js.map +1 -1
- package/dist/icons/IconGradle.js.map +1 -1
- package/dist/icons/IconGroup.js.map +1 -1
- package/dist/icons/IconHashtag.js.map +1 -1
- package/dist/icons/IconHeadset.js.map +1 -1
- package/dist/icons/IconHeart.js.map +1 -1
- package/dist/icons/IconHistory.js.map +1 -1
- package/dist/icons/IconHourglass.js.map +1 -1
- package/dist/icons/IconImage.js.map +1 -1
- package/dist/icons/IconInfoCircle.js.map +1 -1
- package/dist/icons/IconInfoCircleFilled.js.map +1 -1
- package/dist/icons/IconInsights.js.map +1 -1
- package/dist/icons/IconInsightsFilled.js.map +1 -1
- package/dist/icons/IconInstall.js.map +1 -1
- package/dist/icons/IconInteraction.js.map +1 -1
- package/dist/icons/IconInvoice.js.map +1 -1
- package/dist/icons/IconIonic.js.map +1 -1
- package/dist/icons/IconJapanese.js.map +1 -1
- package/dist/icons/IconJava.js.map +1 -1
- package/dist/icons/IconJavaColor.js.map +1 -1
- package/dist/icons/IconJavaDuke.js.map +1 -1
- package/dist/icons/IconJavaDukeColor.js.map +1 -1
- package/dist/icons/IconKey.js.map +1 -1
- package/dist/icons/IconKiroColor.js.map +1 -1
- package/dist/icons/IconKotlin.js.map +1 -1
- package/dist/icons/IconKotlinColor.js.map +1 -1
- package/dist/icons/IconKotlinWhite.js.map +1 -1
- package/dist/icons/IconLaptop.js.map +1 -1
- package/dist/icons/IconLaunchdarkly.js.map +1 -1
- package/dist/icons/IconLegacyApp.js.map +1 -1
- package/dist/icons/IconLightbulb.js.map +1 -1
- package/dist/icons/IconLink.js.map +1 -1
- package/dist/icons/IconLinux.js.map +1 -1
- package/dist/icons/IconLock.js.map +1 -1
- package/dist/icons/IconLockOpen.js.map +1 -1
- package/dist/icons/IconLogin.js.map +1 -1
- package/dist/icons/IconLogout.js.map +1 -1
- package/dist/icons/IconMacos.js.map +1 -1
- package/dist/icons/IconMagicWand.js.map +1 -1
- package/dist/icons/IconMagnifier.js.map +1 -1
- package/dist/icons/IconMail.js.map +1 -1
- package/dist/icons/IconMcp.js.map +1 -1
- package/dist/icons/IconMedal.js.map +1 -1
- package/dist/icons/IconMemory.js.map +1 -1
- package/dist/icons/IconMenuGrid.js.map +1 -1
- package/dist/icons/IconMenuHamburger.js.map +1 -1
- package/dist/icons/IconMessage.js.map +1 -1
- package/dist/icons/IconMessageAlert.js.map +1 -1
- package/dist/icons/IconMessageQuestion.js.map +1 -1
- package/dist/icons/IconMicrophone.js.map +1 -1
- package/dist/icons/IconMinus.js.map +1 -1
- package/dist/icons/IconMinusCircle.js.map +1 -1
- package/dist/icons/IconMinusCircleFilled.js.map +1 -1
- package/dist/icons/IconMobile.js.map +1 -1
- package/dist/icons/IconMobileLandscape.js.map +1 -1
- package/dist/icons/IconMonitorChart.js.map +1 -1
- package/dist/icons/IconMoreHorizontal.js.map +1 -1
- package/dist/icons/IconMoreVertical.js.map +1 -1
- package/dist/icons/IconNews.js.map +1 -1
- package/dist/icons/IconNextjs.js.map +1 -1
- package/dist/icons/IconNodejs.js.map +1 -1
- package/dist/icons/IconOpenInNew.js.map +1 -1
- package/dist/icons/IconOther.js.map +1 -1
- package/dist/icons/IconOutsideContributor.js.map +1 -1
- package/dist/icons/IconOverview.js.map +1 -1
- package/dist/icons/IconPause.js.map +1 -1
- package/dist/icons/IconPencil.js.map +1 -1
- package/dist/icons/IconPeople.js.map +1 -1
- package/dist/icons/IconPercent.js.map +1 -1
- package/dist/icons/IconPerson.js.map +1 -1
- package/dist/icons/IconPersonWithDesk.js.map +1 -1
- package/dist/icons/IconPin.js.map +1 -1
- package/dist/icons/IconPlay.js.map +1 -1
- package/dist/icons/IconPlus.js.map +1 -1
- package/dist/icons/IconPlusCircle.js.map +1 -1
- package/dist/icons/IconPlusCircleFilled.js.map +1 -1
- package/dist/icons/IconPower.js.map +1 -1
- package/dist/icons/IconProject.js.map +1 -1
- package/dist/icons/IconProjectSettings.js.map +1 -1
- package/dist/icons/IconPull.js.map +1 -1
- package/dist/icons/IconPush.js.map +1 -1
- package/dist/icons/IconPuzzle.js.map +1 -1
- package/dist/icons/IconPython.js.map +1 -1
- package/dist/icons/IconPythonColor.js.map +1 -1
- package/dist/icons/IconQuestionCircle.js.map +1 -1
- package/dist/icons/IconQuestionCircleFilled.js.map +1 -1
- package/dist/icons/IconReact.js.map +1 -1
- package/dist/icons/IconRefresh.js.map +1 -1
- package/dist/icons/IconRegex.js.map +1 -1
- package/dist/icons/IconRelease.js.map +1 -1
- package/dist/icons/IconReleaseFilled.js.map +1 -1
- package/dist/icons/IconRemoteAccess.js.map +1 -1
- package/dist/icons/IconReplace.js.map +1 -1
- package/dist/icons/IconResponsiveness.js.map +1 -1
- package/dist/icons/IconReviewerApproved.js.map +1 -1
- package/dist/icons/IconReviewerAssigned.js.map +1 -1
- package/dist/icons/IconReviewerRejected.js.map +1 -1
- package/dist/icons/IconRuby.js.map +1 -1
- package/dist/icons/IconRubyColor.js.map +1 -1
- package/dist/icons/IconSave.js.map +1 -1
- package/dist/icons/IconSecurityShield.js.map +1 -1
- package/dist/icons/IconSettings.js.map +1 -1
- package/dist/icons/IconSettingsFilled.js.map +1 -1
- package/dist/icons/IconShuffle.js.map +1 -1
- package/dist/icons/IconSiren.js.map +1 -1
- package/dist/icons/IconSkip.js.map +1 -1
- package/dist/icons/IconSkipCircle.js.map +1 -1
- package/dist/icons/IconSkipCircleFilled.js.map +1 -1
- package/dist/icons/IconSlack.js.map +1 -1
- package/dist/icons/IconSlackColor.js.map +1 -1
- package/dist/icons/IconSparkle.js.map +1 -1
- package/dist/icons/IconSparkleFilled.js.map +1 -1
- package/dist/icons/IconSpinnerOnDisabled.js.map +1 -1
- package/dist/icons/IconSpinnerPurple.js.map +1 -1
- package/dist/icons/IconSpinnerPurpleDouble.js.map +1 -1
- package/dist/icons/IconSpinnerWhite.js.map +1 -1
- package/dist/icons/IconStability.js.map +1 -1
- package/dist/icons/IconStack.js.map +1 -1
- package/dist/icons/IconStar.js.map +1 -1
- package/dist/icons/IconStep.js.map +1 -1
- package/dist/icons/IconStop.js.map +1 -1
- package/dist/icons/IconStopwatch.js.map +1 -1
- package/dist/icons/IconTabPlus.js.map +1 -1
- package/dist/icons/IconTag.js.map +1 -1
- package/dist/icons/IconTasks.js.map +1 -1
- package/dist/icons/IconTeams.js.map +1 -1
- package/dist/icons/IconTeamsColor.js.map +1 -1
- package/dist/icons/IconTemplateCode.js.map +1 -1
- package/dist/icons/IconTerminal.js.map +1 -1
- package/dist/icons/IconTerminalFilled.js.map +1 -1
- package/dist/icons/IconTestQuarantine.js.map +1 -1
- package/dist/icons/IconThemeDarkToggle.js.map +1 -1
- package/dist/icons/IconThumbDown.js.map +1 -1
- package/dist/icons/IconThumbUp.js.map +1 -1
- package/dist/icons/IconTools.js.map +1 -1
- package/dist/icons/IconTrash.js.map +1 -1
- package/dist/icons/IconTrigger.js.map +1 -1
- package/dist/icons/IconUbuntu.js.map +1 -1
- package/dist/icons/IconUbuntuColor.js.map +1 -1
- package/dist/icons/IconUnity3D.js.map +1 -1
- package/dist/icons/IconUnpin.js.map +1 -1
- package/dist/icons/IconUpload.js.map +1 -1
- package/dist/icons/IconValidateShield.js.map +1 -1
- package/dist/icons/IconVideo.js.map +1 -1
- package/dist/icons/IconVsCode.js.map +1 -1
- package/dist/icons/IconWarning.js.map +1 -1
- package/dist/icons/IconWarningYellow.js.map +1 -1
- package/dist/icons/IconWebUi.js.map +1 -1
- package/dist/icons/IconWebhooks.js.map +1 -1
- package/dist/icons/IconWindsurf.js.map +1 -1
- package/dist/icons/IconWorkflow.js.map +1 -1
- package/dist/icons/IconWorkflowFlow.js.map +1 -1
- package/dist/icons/IconXTwitter.js.map +1 -1
- package/dist/icons/IconXamarin.js.map +1 -1
- package/dist/icons/IconXcode.js.map +1 -1
- package/dist/main.js +3 -1
- package/dist/theme/recipes/UIHeaderButton.recipe.js +103 -0
- package/dist/theme/recipes/UIHeaderButton.recipe.js.map +1 -0
- package/dist/theme/recipes/index.js +3 -1
- package/dist/theme/recipes/index.js.map +1 -1
- package/dist/theme/slot-recipes/Combobox.recipe.js.map +1 -1
- package/dist/theme/slot-recipes/TextInput.recipe.js.map +1 -1
- package/dist/theme/slot-recipes/UIHeader.recipe.d.ts +3 -0
- package/dist/theme/slot-recipes/UIHeader.recipe.js +229 -0
- package/dist/theme/slot-recipes/UIHeader.recipe.js.map +1 -0
- package/dist/theme/slot-recipes/index.d.ts +1 -0
- package/dist/theme/slot-recipes/index.js +2 -0
- package/dist/theme/slot-recipes/index.js.map +1 -1
- package/dist/theme/themeUtils.d.ts +6 -0
- package/dist/theme/themeUtils.js +7 -1
- package/dist/theme/themeUtils.js.map +1 -1
- package/dist/theme/tokens/sizes.js.map +1 -1
- package/dist/theme/tokens/spacing.js.map +1 -1
- package/package.json +10 -12
- package/dist/theme/recipes/index.d.ts +0 -525
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitLabeledData.js","names":[],"sources":["../../../lib/components/BitkitLabeledData/BitkitLabeledData.tsx"],"sourcesContent":["import { type BoxProps } from '@chakra-ui/react/box';\nimport { Skeleton } from '@chakra-ui/react/skeleton';\nimport { chakra, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef } from 'react';\n\nimport { IconInfoCircle, IconWarningYellow } from '../../icons';\nimport BitkitDefinitionTooltip from '../BitkitDefinitionTooltip/BitkitDefinitionTooltip';\nimport BitkitToggletip, { type BitkitToggletipProps } from '../BitkitToggletip/BitkitToggletip';\nimport BitkitTooltip from '../BitkitTooltip/BitkitTooltip';\n\n// --- Types ---\n\nexport interface BitkitLabeledDataProps extends Omit<BoxProps, 'colorPalette'> {\n label: string;\n labelVariant?: 'primary' | 'secondary';\n learnMoreTarget?: BitkitToggletipProps['learnMoreTarget'];\n learnMoreUrl?: BitkitToggletipProps['learnMoreUrl'];\n limitValue?: string;\n placeholder?: string;\n showWarning?: boolean;\n size?: 'lg' | '2xl' | '3xl' | 'sm' | 'md';\n state?: 'default' | 'skeleton';\n subtext?: string;\n tooltip?: string;\n tooltipAnchor?: 'label' | 'value';\n value?: string;\n variant?: 'default' | 'inline';\n}\n\nconst SKELETON_VALUE_HEIGHTS = { lg: '24', '2xl': '36px', '3xl': '40' } as const;\n\n// --- Component ---\n\nconst BitkitLabeledData = forwardRef<HTMLElement, BitkitLabeledDataProps>((props, ref) => {\n const {\n label,\n labelVariant = 'primary',\n learnMoreTarget,\n learnMoreUrl,\n limitValue,\n placeholder = 'N/A',\n showWarning,\n size = 'lg',\n state = 'default',\n subtext,\n tooltip,\n tooltipAnchor = 'value',\n value,\n variant = 'default',\n ...rest\n } = props;\n\n const styles = useSlotRecipe({ key: 'labeledData' })({\n size: variant === 'inline' ? undefined : (size as 'lg' | '2xl' | '3xl'),\n });\n\n // --- Inline variant ---\n if (variant === 'inline') {\n const isSm = size === 'sm';\n const isPrimary = labelVariant === 'primary';\n const labelTextStyle = isPrimary\n ? isSm\n ? 'body/sm/semibold'\n : 'body/md/semibold'\n : isSm\n ? 'body/sm/regular'\n : 'body/md/regular';\n const labelEndsWithColon = label.endsWith(':') || label.endsWith(':');\n const colonSuffix = labelEndsWithColon ? '' : ':';\n\n if (state === 'skeleton') {\n return (\n <chakra.div ref={ref} display=\"flex\" alignItems=\"center\" gap=\"8\" {...rest}>\n {!!showWarning && <IconWarningYellow size=\"16\" />}\n <chakra.div display=\"flex\" alignItems=\"center\" gap=\"4\">\n <chakra.span textStyle={labelTextStyle} color={isPrimary ? 'text/primary' : 'text/secondary'}>\n {label}\n {colonSuffix}\n </chakra.span>\n <Skeleton height={isSm ? '16' : '20'} width=\"64\" />\n </chakra.div>\n </chakra.div>\n );\n }\n\n const wrapWithTooltip = (text: string, anchor: 'label' | 'value') =>\n tooltip && tooltipAnchor === anchor ? (\n <BitkitDefinitionTooltip learnMoreTarget={learnMoreTarget} learnMoreUrl={learnMoreUrl} text={tooltip}>\n {text}\n </BitkitDefinitionTooltip>\n ) : (\n text\n );\n\n return (\n <chakra.div ref={ref} display=\"flex\" alignItems=\"center\" gap=\"8\" {...rest}>\n {!!showWarning && <IconWarningYellow size=\"16\" />}\n <chakra.div display=\"flex\" alignItems=\"center\" gap=\"4\">\n <chakra.span textStyle={labelTextStyle} color={isPrimary ? 'text/primary' : 'text/secondary'}>\n {wrapWithTooltip(label, 'label')}\n {colonSuffix}\n </chakra.span>\n <chakra.span\n textStyle={isSm ? 'body/sm/regular' : 'body/md/regular'}\n color={!value ? 'text/tertiary' : 'text/body'}\n >\n {!value ? placeholder : wrapWithTooltip(value, 'value')}\n </chakra.span>\n </chakra.div>\n </chakra.div>\n );\n }\n\n // --- Default variant ---\n\n const labelContent = (\n <chakra.dt css={styles.label}>\n {label}\n {!!tooltip &&\n // A link needs a toggletip to be reachable; without one, a hover tooltip is enough.\n (learnMoreUrl ? (\n <BitkitToggletip\n learnMoreTarget={learnMoreTarget}\n learnMoreUrl={learnMoreUrl}\n text={tooltip}\n triggerAriaLabel={`About ${label.replace(/[::]$/, '')}`}\n wrapTrigger\n >\n <IconInfoCircle size=\"16\" color=\"icon/tertiary\" />\n </BitkitToggletip>\n ) : (\n <BitkitTooltip text={tooltip}>\n <IconInfoCircle size=\"16\" color=\"icon/tertiary\" />\n </BitkitTooltip>\n ))}\n </chakra.dt>\n );\n\n if (state === 'skeleton') {\n return (\n <chakra.dl css={styles.root} ref={ref} {...(rest as Record<string, unknown>)}>\n {labelContent}\n <Skeleton height={SKELETON_VALUE_HEIGHTS[size as keyof typeof SKELETON_VALUE_HEIGHTS]} width=\"128\" />\n <Skeleton height=\"20\" width=\"128\" />\n </chakra.dl>\n );\n }\n\n return (\n <chakra.dl css={styles.root} ref={ref} {...(rest as Record<string, unknown>)}>\n {labelContent}\n <chakra.dd css={styles.value}>\n {!value ? (\n <chakra.span color=\"text/tertiary\">{placeholder}</chakra.span>\n ) : (\n <>\n {value}\n {!!limitValue && <chakra.span css={styles.limit}>/ {limitValue}</chakra.span>}\n </>\n )}\n </chakra.dd>\n {!!subtext && <chakra.dd css={styles.helpText}>{subtext}</chakra.dd>}\n </chakra.dl>\n );\n});\n\nBitkitLabeledData.displayName = 'BitkitLabeledData';\n\nexport default BitkitLabeledData;\n"],"mappings":"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
|
|
1
|
+
{"version":3,"file":"BitkitLabeledData.js","names":["_Fragment"],"sources":["../../../lib/components/BitkitLabeledData/BitkitLabeledData.tsx"],"sourcesContent":["import { type BoxProps } from '@chakra-ui/react/box';\nimport { Skeleton } from '@chakra-ui/react/skeleton';\nimport { chakra, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef } from 'react';\n\nimport { IconInfoCircle, IconWarningYellow } from '../../icons';\nimport BitkitDefinitionTooltip from '../BitkitDefinitionTooltip/BitkitDefinitionTooltip';\nimport BitkitToggletip, { type BitkitToggletipProps } from '../BitkitToggletip/BitkitToggletip';\nimport BitkitTooltip from '../BitkitTooltip/BitkitTooltip';\n\n// --- Types ---\n\nexport interface BitkitLabeledDataProps extends Omit<BoxProps, 'colorPalette'> {\n label: string;\n labelVariant?: 'primary' | 'secondary';\n learnMoreTarget?: BitkitToggletipProps['learnMoreTarget'];\n learnMoreUrl?: BitkitToggletipProps['learnMoreUrl'];\n limitValue?: string;\n placeholder?: string;\n showWarning?: boolean;\n size?: 'lg' | '2xl' | '3xl' | 'sm' | 'md';\n state?: 'default' | 'skeleton';\n subtext?: string;\n tooltip?: string;\n tooltipAnchor?: 'label' | 'value';\n value?: string;\n variant?: 'default' | 'inline';\n}\n\nconst SKELETON_VALUE_HEIGHTS = { lg: '24', '2xl': '36px', '3xl': '40' } as const;\n\n// --- Component ---\n\nconst BitkitLabeledData = forwardRef<HTMLElement, BitkitLabeledDataProps>((props, ref) => {\n const {\n label,\n labelVariant = 'primary',\n learnMoreTarget,\n learnMoreUrl,\n limitValue,\n placeholder = 'N/A',\n showWarning,\n size = 'lg',\n state = 'default',\n subtext,\n tooltip,\n tooltipAnchor = 'value',\n value,\n variant = 'default',\n ...rest\n } = props;\n\n const styles = useSlotRecipe({ key: 'labeledData' })({\n size: variant === 'inline' ? undefined : (size as 'lg' | '2xl' | '3xl'),\n });\n\n // --- Inline variant ---\n if (variant === 'inline') {\n const isSm = size === 'sm';\n const isPrimary = labelVariant === 'primary';\n const labelTextStyle = isPrimary\n ? isSm\n ? 'body/sm/semibold'\n : 'body/md/semibold'\n : isSm\n ? 'body/sm/regular'\n : 'body/md/regular';\n const labelEndsWithColon = label.endsWith(':') || label.endsWith(':');\n const colonSuffix = labelEndsWithColon ? '' : ':';\n\n if (state === 'skeleton') {\n return (\n <chakra.div ref={ref} display=\"flex\" alignItems=\"center\" gap=\"8\" {...rest}>\n {!!showWarning && <IconWarningYellow size=\"16\" />}\n <chakra.div display=\"flex\" alignItems=\"center\" gap=\"4\">\n <chakra.span textStyle={labelTextStyle} color={isPrimary ? 'text/primary' : 'text/secondary'}>\n {label}\n {colonSuffix}\n </chakra.span>\n <Skeleton height={isSm ? '16' : '20'} width=\"64\" />\n </chakra.div>\n </chakra.div>\n );\n }\n\n const wrapWithTooltip = (text: string, anchor: 'label' | 'value') =>\n tooltip && tooltipAnchor === anchor ? (\n <BitkitDefinitionTooltip learnMoreTarget={learnMoreTarget} learnMoreUrl={learnMoreUrl} text={tooltip}>\n {text}\n </BitkitDefinitionTooltip>\n ) : (\n text\n );\n\n return (\n <chakra.div ref={ref} display=\"flex\" alignItems=\"center\" gap=\"8\" {...rest}>\n {!!showWarning && <IconWarningYellow size=\"16\" />}\n <chakra.div display=\"flex\" alignItems=\"center\" gap=\"4\">\n <chakra.span textStyle={labelTextStyle} color={isPrimary ? 'text/primary' : 'text/secondary'}>\n {wrapWithTooltip(label, 'label')}\n {colonSuffix}\n </chakra.span>\n <chakra.span\n textStyle={isSm ? 'body/sm/regular' : 'body/md/regular'}\n color={!value ? 'text/tertiary' : 'text/body'}\n >\n {!value ? placeholder : wrapWithTooltip(value, 'value')}\n </chakra.span>\n </chakra.div>\n </chakra.div>\n );\n }\n\n // --- Default variant ---\n\n const labelContent = (\n <chakra.dt css={styles.label}>\n {label}\n {!!tooltip &&\n // A link needs a toggletip to be reachable; without one, a hover tooltip is enough.\n (learnMoreUrl ? (\n <BitkitToggletip\n learnMoreTarget={learnMoreTarget}\n learnMoreUrl={learnMoreUrl}\n text={tooltip}\n triggerAriaLabel={`About ${label.replace(/[::]$/, '')}`}\n wrapTrigger\n >\n <IconInfoCircle size=\"16\" color=\"icon/tertiary\" />\n </BitkitToggletip>\n ) : (\n <BitkitTooltip text={tooltip}>\n <IconInfoCircle size=\"16\" color=\"icon/tertiary\" />\n </BitkitTooltip>\n ))}\n </chakra.dt>\n );\n\n if (state === 'skeleton') {\n return (\n <chakra.dl css={styles.root} ref={ref} {...(rest as Record<string, unknown>)}>\n {labelContent}\n <Skeleton height={SKELETON_VALUE_HEIGHTS[size as keyof typeof SKELETON_VALUE_HEIGHTS]} width=\"128\" />\n <Skeleton height=\"20\" width=\"128\" />\n </chakra.dl>\n );\n }\n\n return (\n <chakra.dl css={styles.root} ref={ref} {...(rest as Record<string, unknown>)}>\n {labelContent}\n <chakra.dd css={styles.value}>\n {!value ? (\n <chakra.span color=\"text/tertiary\">{placeholder}</chakra.span>\n ) : (\n <>\n {value}\n {!!limitValue && <chakra.span css={styles.limit}>/ {limitValue}</chakra.span>}\n </>\n )}\n </chakra.dd>\n {!!subtext && <chakra.dd css={styles.helpText}>{subtext}</chakra.dd>}\n </chakra.dl>\n );\n});\n\nBitkitLabeledData.displayName = 'BitkitLabeledData';\n\nexport default BitkitLabeledData;\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitList.js","names":[],"sources":["../../../lib/components/BitkitList/BitkitList.tsx"],"sourcesContent":["// eslint-disable-next-line no-restricted-imports\nimport { createContext } from '@chakra-ui/react';\nimport { Box } from '@chakra-ui/react/box';\nimport { List, type ListRootProps } from '@chakra-ui/react/list';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef, type ReactNode } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\nimport { withSubComponents } from '../../utilities/withSubComponents';\n\n// ----- Context -----\n\ntype BitkitListVariant = 'explainer' | 'ordered' | 'unordered' | 'unstyled' | 'inline';\ntype BitkitListSize = 'lg' | 'md' | 'sm';\ntype BitkitListTextColor = 'body' | 'secondary';\n\ninterface BitkitListContext {\n colorVariant: 'neutral' | 'purple';\n size: BitkitListSize;\n textColor: BitkitListTextColor;\n variant: BitkitListVariant;\n}\n\nconst [BitkitListProvider, useBitkitListContext] = createContext<BitkitListContext>({\n name: 'BitkitListContext',\n hookName: 'useBitkitListContext',\n providerName: '<BitkitList />',\n});\n\n// ----- BitkitList -----\n\ninterface BaseProps extends Omit<\n ListRootProps,\n | 'colorPalette'\n | 'columnGap'\n | 'gap'\n | 'gridColumnGap'\n | 'gridGap'\n | 'gridRowGap'\n | 'rowGap'\n | 'size'\n | 'spaceX'\n | 'spaceY'\n> {\n children: ReactNode;\n colorVariant?: 'neutral' | 'purple';\n textColor?: BitkitListTextColor;\n}\n\n// `sm` is only drawn for the inline run; the block variants start at `md`, so the size set is\n// narrowed per variant rather than shared.\ninterface InlineProps extends BaseProps {\n size?: BitkitListSize;\n variant: 'inline';\n}\n\ninterface BlockProps extends BaseProps {\n size?: 'lg' | 'md';\n variant?: 'explainer' | 'ordered' | 'unordered' | 'unstyled';\n}\n\nexport type BitkitListProps = BlockProps | InlineProps;\n\n/** Item spacing is fixed by the list recipe; `gap` and the other spacing props are not accepted. */\nconst BitkitList = forwardRef<HTMLOListElement | HTMLUListElement, BitkitListProps>((props, ref) => {\n const { children, colorVariant = 'neutral', size = 'lg', textColor = 'body', variant = 'unordered', ...rest } = props;\n\n const rootProps =\n variant === 'ordered'\n ? ({ as: 'ol', counterReset: 'bitkit-list' } as const)\n : variant === 'explainer'\n ? ({ as: 'ol', counterReset: 'bitkit-list' } as const)\n : variant === 'inline'\n ? ({ alignItems: 'center', flexDirection: 'row', flexWrap: 'wrap', gap: 0 } as const)\n : {};\n\n return (\n <BitkitListProvider value={{ colorVariant, size, textColor, variant }}>\n <List.Root ref={ref} size={size} {...rootProps} {...rest}>\n {children}\n </List.Root>\n </BitkitListProvider>\n );\n});\n\nBitkitList.displayName = 'BitkitList';\n\n// ----- BitkitList.Item -----\n\nexport interface BitkitListItemProps {\n children: ReactNode;\n helperText?: ReactNode;\n icon?: BitkitIconComponent;\n iconColor?: string;\n}\n\nconst UNORDERED_ICON_SIZE: Record<BitkitListSize, '16' | '24'> = {\n lg: '24',\n md: '16',\n sm: '16',\n};\n\nconst BitkitListItem = forwardRef<HTMLLIElement, BitkitListItemProps>((props, ref) => {\n const { children, helperText, icon: Icon, iconColor } = props;\n const { colorVariant, size, textColor, variant } = useBitkitListContext();\n\n const content = (\n <Box flex=\"1\" minWidth=\"0\">\n {children}\n {helperText && (\n <Text color=\"text/secondary\" textStyle={size === 'lg' ? 'body/md/regular' : 'body/sm/regular'}>\n {helperText}\n </Text>\n )}\n </Box>\n );\n\n if (variant === 'unstyled') {\n return (\n <List.Item ref={ref} color={textColor === 'secondary' ? 'text/secondary' : 'text/body'}>\n {content}\n </List.Item>\n );\n }\n\n if (variant === 'inline') {\n return (\n <List.Item\n ref={ref}\n alignItems=\"center\"\n color={textColor === 'secondary' ? 'text/secondary' : 'text/body'}\n _notFirst={{\n _before: {\n content: '\"\\\\2022\"',\n color: 'text/tertiary',\n marginInline: '8',\n },\n }}\n >\n {content}\n </List.Item>\n );\n }\n\n if (variant === 'ordered') {\n return (\n <List.Item ref={ref} counterIncrement=\"bitkit-list\" gap={helperText ? '12' : undefined}>\n {Icon ? (\n <List.Indicator color={iconColor ?? 'icon/secondary'}>\n <Icon size={UNORDERED_ICON_SIZE[size]} />\n </List.Indicator>\n ) : (\n <List.Indicator _before={{ content: 'counter(bitkit-list) \".\"' }} />\n )}\n {content}\n </List.Item>\n );\n }\n\n if (variant === 'explainer') {\n // Marker size and spacing follow the list's size, never an item's helperText, so every\n // marker in one list matches. The recipe sizes the indicator per list size.\n return (\n <List.Item ref={ref} counterIncrement=\"bitkit-list\" gap={size === 'lg' ? '12' : '8'}>\n {Icon ? (\n <List.Indicator color={iconColor ?? `color/${colorVariant}/strong`}>\n <Icon size={UNORDERED_ICON_SIZE[size]} />\n </List.Indicator>\n ) : (\n <List.Indicator\n _before={{ content: 'counter(bitkit-list)' }}\n background={`color/${colorVariant}/subtle`}\n borderRadius=\"50%\"\n color={`color/${colorVariant}/strong`}\n overflow=\"hidden\"\n textStyle=\"comp/badge/sm\"\n />\n )}\n {content}\n </List.Item>\n );\n }\n\n // unordered (default)\n if (Icon) {\n return (\n <List.Item ref={ref} gap={helperText ? '12' : '8'}>\n <List.Indicator color={iconColor ?? 'icon/secondary'}>\n <Icon size={UNORDERED_ICON_SIZE[size]} />\n </List.Indicator>\n {content}\n </List.Item>\n );\n }\n\n return (\n <List.Item ref={ref} gap={helperText ? '12' : undefined}>\n <List.Indicator aria-hidden>•</List.Indicator>\n {content}\n </List.Item>\n );\n});\n\nBitkitListItem.displayName = 'BitkitListItem';\n\nexport default withSubComponents(BitkitList, { Item: BitkitListItem });\n"],"mappings":";;;;;;;;AAuBA,IAAM,CAAC,oBAAoB,
|
|
1
|
+
{"version":3,"file":"BitkitList.js","names":["createContext"],"sources":["../../../lib/components/BitkitList/BitkitList.tsx"],"sourcesContent":["// eslint-disable-next-line no-restricted-imports\nimport { createContext } from '@chakra-ui/react';\nimport { Box } from '@chakra-ui/react/box';\nimport { List, type ListRootProps } from '@chakra-ui/react/list';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef, type ReactNode } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\nimport { withSubComponents } from '../../utilities/withSubComponents';\n\n// ----- Context -----\n\ntype BitkitListVariant = 'explainer' | 'ordered' | 'unordered' | 'unstyled' | 'inline';\ntype BitkitListSize = 'lg' | 'md' | 'sm';\ntype BitkitListTextColor = 'body' | 'secondary';\n\ninterface BitkitListContext {\n colorVariant: 'neutral' | 'purple';\n size: BitkitListSize;\n textColor: BitkitListTextColor;\n variant: BitkitListVariant;\n}\n\nconst [BitkitListProvider, useBitkitListContext] = createContext<BitkitListContext>({\n name: 'BitkitListContext',\n hookName: 'useBitkitListContext',\n providerName: '<BitkitList />',\n});\n\n// ----- BitkitList -----\n\ninterface BaseProps extends Omit<\n ListRootProps,\n | 'colorPalette'\n | 'columnGap'\n | 'gap'\n | 'gridColumnGap'\n | 'gridGap'\n | 'gridRowGap'\n | 'rowGap'\n | 'size'\n | 'spaceX'\n | 'spaceY'\n> {\n children: ReactNode;\n colorVariant?: 'neutral' | 'purple';\n textColor?: BitkitListTextColor;\n}\n\n// `sm` is only drawn for the inline run; the block variants start at `md`, so the size set is\n// narrowed per variant rather than shared.\ninterface InlineProps extends BaseProps {\n size?: BitkitListSize;\n variant: 'inline';\n}\n\ninterface BlockProps extends BaseProps {\n size?: 'lg' | 'md';\n variant?: 'explainer' | 'ordered' | 'unordered' | 'unstyled';\n}\n\nexport type BitkitListProps = BlockProps | InlineProps;\n\n/** Item spacing is fixed by the list recipe; `gap` and the other spacing props are not accepted. */\nconst BitkitList = forwardRef<HTMLOListElement | HTMLUListElement, BitkitListProps>((props, ref) => {\n const { children, colorVariant = 'neutral', size = 'lg', textColor = 'body', variant = 'unordered', ...rest } = props;\n\n const rootProps =\n variant === 'ordered'\n ? ({ as: 'ol', counterReset: 'bitkit-list' } as const)\n : variant === 'explainer'\n ? ({ as: 'ol', counterReset: 'bitkit-list' } as const)\n : variant === 'inline'\n ? ({ alignItems: 'center', flexDirection: 'row', flexWrap: 'wrap', gap: 0 } as const)\n : {};\n\n return (\n <BitkitListProvider value={{ colorVariant, size, textColor, variant }}>\n <List.Root ref={ref} size={size} {...rootProps} {...rest}>\n {children}\n </List.Root>\n </BitkitListProvider>\n );\n});\n\nBitkitList.displayName = 'BitkitList';\n\n// ----- BitkitList.Item -----\n\nexport interface BitkitListItemProps {\n children: ReactNode;\n helperText?: ReactNode;\n icon?: BitkitIconComponent;\n iconColor?: string;\n}\n\nconst UNORDERED_ICON_SIZE: Record<BitkitListSize, '16' | '24'> = {\n lg: '24',\n md: '16',\n sm: '16',\n};\n\nconst BitkitListItem = forwardRef<HTMLLIElement, BitkitListItemProps>((props, ref) => {\n const { children, helperText, icon: Icon, iconColor } = props;\n const { colorVariant, size, textColor, variant } = useBitkitListContext();\n\n const content = (\n <Box flex=\"1\" minWidth=\"0\">\n {children}\n {helperText && (\n <Text color=\"text/secondary\" textStyle={size === 'lg' ? 'body/md/regular' : 'body/sm/regular'}>\n {helperText}\n </Text>\n )}\n </Box>\n );\n\n if (variant === 'unstyled') {\n return (\n <List.Item ref={ref} color={textColor === 'secondary' ? 'text/secondary' : 'text/body'}>\n {content}\n </List.Item>\n );\n }\n\n if (variant === 'inline') {\n return (\n <List.Item\n ref={ref}\n alignItems=\"center\"\n color={textColor === 'secondary' ? 'text/secondary' : 'text/body'}\n _notFirst={{\n _before: {\n content: '\"\\\\2022\"',\n color: 'text/tertiary',\n marginInline: '8',\n },\n }}\n >\n {content}\n </List.Item>\n );\n }\n\n if (variant === 'ordered') {\n return (\n <List.Item ref={ref} counterIncrement=\"bitkit-list\" gap={helperText ? '12' : undefined}>\n {Icon ? (\n <List.Indicator color={iconColor ?? 'icon/secondary'}>\n <Icon size={UNORDERED_ICON_SIZE[size]} />\n </List.Indicator>\n ) : (\n <List.Indicator _before={{ content: 'counter(bitkit-list) \".\"' }} />\n )}\n {content}\n </List.Item>\n );\n }\n\n if (variant === 'explainer') {\n // Marker size and spacing follow the list's size, never an item's helperText, so every\n // marker in one list matches. The recipe sizes the indicator per list size.\n return (\n <List.Item ref={ref} counterIncrement=\"bitkit-list\" gap={size === 'lg' ? '12' : '8'}>\n {Icon ? (\n <List.Indicator color={iconColor ?? `color/${colorVariant}/strong`}>\n <Icon size={UNORDERED_ICON_SIZE[size]} />\n </List.Indicator>\n ) : (\n <List.Indicator\n _before={{ content: 'counter(bitkit-list)' }}\n background={`color/${colorVariant}/subtle`}\n borderRadius=\"50%\"\n color={`color/${colorVariant}/strong`}\n overflow=\"hidden\"\n textStyle=\"comp/badge/sm\"\n />\n )}\n {content}\n </List.Item>\n );\n }\n\n // unordered (default)\n if (Icon) {\n return (\n <List.Item ref={ref} gap={helperText ? '12' : '8'}>\n <List.Indicator color={iconColor ?? 'icon/secondary'}>\n <Icon size={UNORDERED_ICON_SIZE[size]} />\n </List.Indicator>\n {content}\n </List.Item>\n );\n }\n\n return (\n <List.Item ref={ref} gap={helperText ? '12' : undefined}>\n <List.Indicator aria-hidden>•</List.Indicator>\n {content}\n </List.Item>\n );\n});\n\nBitkitListItem.displayName = 'BitkitListItem';\n\nexport default withSubComponents(BitkitList, { Item: BitkitListItem });\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitMarkdown.js","names":[],"sources":["../../../lib/components/BitkitMarkdown/BitkitMarkdown.tsx"],"sourcesContent":["import { Separator } from '@chakra-ui/react/separator';\nimport { Stack, type StackProps } from '@chakra-ui/react/stack';\nimport { chakra, type SystemStyleObject, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { type ComponentProps, forwardRef } from 'react';\nimport Markdown, { type Components } from 'react-markdown';\n\nimport { getTextContent } from '../../utilities/getTextContent';\nimport BitkitCodeSnippet from '../BitkitCodeSnippet/BitkitCodeSnippet';\nimport BitkitHeading from '../BitkitHeading/BitkitHeading';\nimport BitkitLink from '../BitkitLink/BitkitLink';\nimport BitkitList from '../BitkitList/BitkitList';\n\n// ----- Component mappings -----\n\nconst createComponents = (size: 'sm' | 'md' | 'lg', blockquoteStyles: SystemStyleObject): Components => {\n const codeSize = size === 'lg' ? 'lg' : 'md';\n const listSize = size === 'lg' ? 'lg' : 'md';\n\n return {\n a: ({ node: _, ...props }) => (\n <BitkitLink colorVariant=\"purple\" rel=\"noopener noreferrer\" target=\"_blank\" {...props} />\n ),\n blockquote: ({ node: _, ...props }) => <chakra.blockquote css={blockquoteStyles} {...props} />,\n // Not String(children): a rehypePlugin such as a syntax highlighter turns the text into\n // elements, and String() on those yields \"[object Object]\".\n code: ({ node: _, children }) => (\n <BitkitCodeSnippet variant=\"inline\" size={codeSize}>\n {getTextContent(children)}\n </BitkitCodeSnippet>\n ),\n h1: ({ node: _, ...props }) => <BitkitHeading as=\"h1\" {...props} />,\n h2: ({ node: _, ...props }) => <BitkitHeading as=\"h2\" {...props} />,\n h3: ({ node: _, ...props }) => <BitkitHeading as=\"h3\" {...props} />,\n h4: ({ node: _, ...props }) => <BitkitHeading as=\"h4\" {...props} />,\n h5: ({ node: _, ...props }) => <BitkitHeading as=\"h5\" {...props} />,\n h6: ({ node: _, ...props }) => <BitkitHeading as=\"h6\" {...props} />,\n hr: () => <Separator />,\n li: ({ node: _, ...props }) => <BitkitList.Item>{props.children}</BitkitList.Item>,\n ol: ({ node: _, ...props }) => (\n <BitkitList size={listSize} variant=\"ordered\">\n {props.children}\n </BitkitList>\n ),\n p: ({ node: _, ...props }) => <Text {...props} />,\n // The parser closes a code block with a newline, which the `multi` variant renders as an\n // empty last line because its content is `white-space: pre-wrap`.\n pre: ({ node: _, children }) => (\n <BitkitCodeSnippet variant=\"multi\" size={codeSize}>\n {getTextContent(children).replace(/\\n$/, '')}\n </BitkitCodeSnippet>\n ),\n ul: ({ node: _, ...props }) => (\n <BitkitList size={listSize} variant=\"unordered\">\n {props.children}\n </BitkitList>\n ),\n };\n};\n\n// ----- BitkitMarkdown -----\n\nexport interface BitkitMarkdownProps extends Omit<StackProps, 'children'> {\n children: string;\n components?: Components | null;\n rehypePlugins?: ComponentProps<typeof Markdown>['rehypePlugins'];\n size?: 'sm' | 'md' | 'lg';\n}\n\nconst BitkitMarkdown = forwardRef<HTMLDivElement, BitkitMarkdownProps>((props, ref) => {\n const { children, components, css, rehypePlugins, size = 'md', ...rest } = props;\n\n const recipe = useSlotRecipe({ key: 'markdown' });\n const styles = recipe({ size });\n\n const defaultComponents = createComponents(size, styles.blockquote);\n const mergedComponents = { ...defaultComponents, ...(components ?? {}) };\n\n return (\n <Stack ref={ref} gap=\"16\" css={[styles.root, css]} {...rest}>\n <Markdown components={mergedComponents} rehypePlugins={rehypePlugins}>\n {children}\n </Markdown>\n </Stack>\n );\n});\n\nBitkitMarkdown.displayName = 'BitkitMarkdown';\n\nexport default BitkitMarkdown;\n"],"mappings":";;;;;;;;;;;;;AAeA,IAAM,oBAAoB,MAA0B,qBAAoD;CACtG,MAAM,WAAW,SAAS,OAAO,OAAO;CACxC,MAAM,WAAW,SAAS,OAAO,OAAO;CAExC,OAAO;EACL,IAAI,EAAE,MAAM,GAAG,GAAG,YAChB,oBAAC,YAAD;GAAY,cAAa;GAAS,KAAI;GAAsB,QAAO;GAAS,GAAI;EAAQ,CAAA;EAE1F,aAAa,EAAE,MAAM,GAAG,GAAG,YAAY,oBAAC,OAAO,YAAR;GAAmB,KAAK;GAAkB,GAAI;EAAQ,CAAA;EAG7F,OAAO,EAAE,MAAM,GAAG,eAChB,oBAAC,mBAAD;GAAmB,SAAQ;GAAS,MAAM;GACvC,UAAA,eAAe,QAAQ;EACP,CAAA;EAErB,KAAK,EAAE,MAAM,GAAG,GAAG,YAAY,oBAAC,eAAD;GAAe,IAAG;GAAK,GAAI;EAAQ,CAAA;EAClE,KAAK,EAAE,MAAM,GAAG,GAAG,YAAY,oBAAC,eAAD;GAAe,IAAG;GAAK,GAAI;EAAQ,CAAA;EAClE,KAAK,EAAE,MAAM,GAAG,GAAG,YAAY,oBAAC,eAAD;GAAe,IAAG;GAAK,GAAI;EAAQ,CAAA;EAClE,KAAK,EAAE,MAAM,GAAG,GAAG,YAAY,oBAAC,eAAD;GAAe,IAAG;GAAK,GAAI;EAAQ,CAAA;EAClE,KAAK,EAAE,MAAM,GAAG,GAAG,YAAY,oBAAC,eAAD;GAAe,IAAG;GAAK,GAAI;EAAQ,CAAA;EAClE,KAAK,EAAE,MAAM,GAAG,GAAG,YAAY,oBAAC,eAAD;GAAe,IAAG;GAAK,GAAI;EAAQ,CAAA;EAClE,UAAU,oBAAC,WAAD,CAAY,CAAA;EACtB,KAAK,EAAE,MAAM,GAAG,GAAG,YAAY,
|
|
1
|
+
{"version":3,"file":"BitkitMarkdown.js","names":["BitkitList"],"sources":["../../../lib/components/BitkitMarkdown/BitkitMarkdown.tsx"],"sourcesContent":["import { Separator } from '@chakra-ui/react/separator';\nimport { Stack, type StackProps } from '@chakra-ui/react/stack';\nimport { chakra, type SystemStyleObject, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { type ComponentProps, forwardRef } from 'react';\nimport Markdown, { type Components } from 'react-markdown';\n\nimport { getTextContent } from '../../utilities/getTextContent';\nimport BitkitCodeSnippet from '../BitkitCodeSnippet/BitkitCodeSnippet';\nimport BitkitHeading from '../BitkitHeading/BitkitHeading';\nimport BitkitLink from '../BitkitLink/BitkitLink';\nimport BitkitList from '../BitkitList/BitkitList';\n\n// ----- Component mappings -----\n\nconst createComponents = (size: 'sm' | 'md' | 'lg', blockquoteStyles: SystemStyleObject): Components => {\n const codeSize = size === 'lg' ? 'lg' : 'md';\n const listSize = size === 'lg' ? 'lg' : 'md';\n\n return {\n a: ({ node: _, ...props }) => (\n <BitkitLink colorVariant=\"purple\" rel=\"noopener noreferrer\" target=\"_blank\" {...props} />\n ),\n blockquote: ({ node: _, ...props }) => <chakra.blockquote css={blockquoteStyles} {...props} />,\n // Not String(children): a rehypePlugin such as a syntax highlighter turns the text into\n // elements, and String() on those yields \"[object Object]\".\n code: ({ node: _, children }) => (\n <BitkitCodeSnippet variant=\"inline\" size={codeSize}>\n {getTextContent(children)}\n </BitkitCodeSnippet>\n ),\n h1: ({ node: _, ...props }) => <BitkitHeading as=\"h1\" {...props} />,\n h2: ({ node: _, ...props }) => <BitkitHeading as=\"h2\" {...props} />,\n h3: ({ node: _, ...props }) => <BitkitHeading as=\"h3\" {...props} />,\n h4: ({ node: _, ...props }) => <BitkitHeading as=\"h4\" {...props} />,\n h5: ({ node: _, ...props }) => <BitkitHeading as=\"h5\" {...props} />,\n h6: ({ node: _, ...props }) => <BitkitHeading as=\"h6\" {...props} />,\n hr: () => <Separator />,\n li: ({ node: _, ...props }) => <BitkitList.Item>{props.children}</BitkitList.Item>,\n ol: ({ node: _, ...props }) => (\n <BitkitList size={listSize} variant=\"ordered\">\n {props.children}\n </BitkitList>\n ),\n p: ({ node: _, ...props }) => <Text {...props} />,\n // The parser closes a code block with a newline, which the `multi` variant renders as an\n // empty last line because its content is `white-space: pre-wrap`.\n pre: ({ node: _, children }) => (\n <BitkitCodeSnippet variant=\"multi\" size={codeSize}>\n {getTextContent(children).replace(/\\n$/, '')}\n </BitkitCodeSnippet>\n ),\n ul: ({ node: _, ...props }) => (\n <BitkitList size={listSize} variant=\"unordered\">\n {props.children}\n </BitkitList>\n ),\n };\n};\n\n// ----- BitkitMarkdown -----\n\nexport interface BitkitMarkdownProps extends Omit<StackProps, 'children'> {\n children: string;\n components?: Components | null;\n rehypePlugins?: ComponentProps<typeof Markdown>['rehypePlugins'];\n size?: 'sm' | 'md' | 'lg';\n}\n\nconst BitkitMarkdown = forwardRef<HTMLDivElement, BitkitMarkdownProps>((props, ref) => {\n const { children, components, css, rehypePlugins, size = 'md', ...rest } = props;\n\n const recipe = useSlotRecipe({ key: 'markdown' });\n const styles = recipe({ size });\n\n const defaultComponents = createComponents(size, styles.blockquote);\n const mergedComponents = { ...defaultComponents, ...(components ?? {}) };\n\n return (\n <Stack ref={ref} gap=\"16\" css={[styles.root, css]} {...rest}>\n <Markdown components={mergedComponents} rehypePlugins={rehypePlugins}>\n {children}\n </Markdown>\n </Stack>\n );\n});\n\nBitkitMarkdown.displayName = 'BitkitMarkdown';\n\nexport default BitkitMarkdown;\n"],"mappings":";;;;;;;;;;;;;AAeA,IAAM,oBAAoB,MAA0B,qBAAoD;CACtG,MAAM,WAAW,SAAS,OAAO,OAAO;CACxC,MAAM,WAAW,SAAS,OAAO,OAAO;CAExC,OAAO;EACL,IAAI,EAAE,MAAM,GAAG,GAAG,YAChB,oBAAC,YAAD;GAAY,cAAa;GAAS,KAAI;GAAsB,QAAO;GAAS,GAAI;EAAQ,CAAA;EAE1F,aAAa,EAAE,MAAM,GAAG,GAAG,YAAY,oBAAC,OAAO,YAAR;GAAmB,KAAK;GAAkB,GAAI;EAAQ,CAAA;EAG7F,OAAO,EAAE,MAAM,GAAG,eAChB,oBAAC,mBAAD;GAAmB,SAAQ;GAAS,MAAM;GACvC,UAAA,eAAe,QAAQ;EACP,CAAA;EAErB,KAAK,EAAE,MAAM,GAAG,GAAG,YAAY,oBAAC,eAAD;GAAe,IAAG;GAAK,GAAI;EAAQ,CAAA;EAClE,KAAK,EAAE,MAAM,GAAG,GAAG,YAAY,oBAAC,eAAD;GAAe,IAAG;GAAK,GAAI;EAAQ,CAAA;EAClE,KAAK,EAAE,MAAM,GAAG,GAAG,YAAY,oBAAC,eAAD;GAAe,IAAG;GAAK,GAAI;EAAQ,CAAA;EAClE,KAAK,EAAE,MAAM,GAAG,GAAG,YAAY,oBAAC,eAAD;GAAe,IAAG;GAAK,GAAI;EAAQ,CAAA;EAClE,KAAK,EAAE,MAAM,GAAG,GAAG,YAAY,oBAAC,eAAD;GAAe,IAAG;GAAK,GAAI;EAAQ,CAAA;EAClE,KAAK,EAAE,MAAM,GAAG,GAAG,YAAY,oBAAC,eAAD;GAAe,IAAG;GAAK,GAAI;EAAQ,CAAA;EAClE,UAAU,oBAAC,WAAD,CAAY,CAAA;EACtB,KAAK,EAAE,MAAM,GAAG,GAAG,YAAY,oBAACA,mBAAW,MAAZ,EAAA,UAAkB,MAAM,SAA0B,CAAA;EACjF,KAAK,EAAE,MAAM,GAAG,GAAG,YACjB,oBAACA,oBAAD;GAAY,MAAM;GAAU,SAAQ;GACjC,UAAA,MAAM;EACG,CAAA;EAEd,IAAI,EAAE,MAAM,GAAG,GAAG,YAAY,oBAAC,MAAD,EAAM,GAAI,MAAQ,CAAA;EAGhD,MAAM,EAAE,MAAM,GAAG,eACf,oBAAC,mBAAD;GAAmB,SAAQ;GAAQ,MAAM;GACtC,UAAA,eAAe,QAAQ,CAAC,CAAC,QAAQ,OAAO,EAAE;EAC1B,CAAA;EAErB,KAAK,EAAE,MAAM,GAAG,GAAG,YACjB,oBAACA,oBAAD;GAAY,MAAM;GAAU,SAAQ;GACjC,UAAA,MAAM;EACG,CAAA;CAEhB;AACF;AAWA,IAAM,iBAAiB,YAAiD,OAAO,QAAQ;CACrF,MAAM,EAAE,UAAU,YAAY,KAAK,eAAe,OAAO,MAAM,GAAG,SAAS;CAG3E,MAAM,SADS,cAAc,EAAE,KAAK,WAAW,CAChC,CAAA,CAAO,EAAE,KAAK,CAAC;CAG9B,MAAM,mBAAmB;EAAE,GADD,iBAAiB,MAAM,OAAO,UAC1B;EAAmB,GAAI,cAAc,CAAC;CAAG;CAEvE,OACE,oBAAC,OAAD;EAAY;EAAK,KAAI;EAAK,KAAK,CAAC,OAAO,MAAM,GAAG;EAAG,GAAI;EACrD,UAAA,oBAAC,UAAD;GAAU,YAAY;GAAiC;GACpD;EACO,CAAA;CACL,CAAA;AAEX,CAAC;AAED,eAAe,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitMarkdownCard.js","names":[],"sources":["../../../lib/components/BitkitMarkdownCard/BitkitMarkdownCard.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { type BoxProps } from '@chakra-ui/react/box';\nimport { Card } from '@chakra-ui/react/card';\nimport { Collapsible } from '@chakra-ui/react/collapsible';\nimport { HStack } from '@chakra-ui/react/stack';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef, type JSX, type ReactNode } from 'react';\n\nimport {\n IconCheck,\n IconChevronDown,\n IconChevronUp,\n IconErrorCircleFilled,\n IconInfoCircle,\n IconWarning,\n} from '../../icons';\nimport BitkitButton from '../BitkitButton/BitkitButton';\nimport BitkitMarkdown from '../BitkitMarkdown/BitkitMarkdown';\n\n// ----- Status config -----\n\ntype Status = 'critical' | 'info' | 'success' | 'warning';\n\nconst STATUS_ICONS: Record<Status, JSX.Element> = {\n critical: <IconErrorCircleFilled size=\"24\" />,\n info: <IconInfoCircle size=\"24\" />,\n success: <IconCheck size=\"24\" />,\n warning: <IconWarning size=\"24\" />,\n};\n\n// ----- Props -----\n\ntype UncontrolledProps = {\n defaultOpen?: boolean;\n onOpenChange?: never;\n open?: never;\n};\n\ntype ControlledProps = {\n defaultOpen?: never;\n onOpenChange: (open: boolean) => void;\n open: boolean;\n};\n\nexport type BitkitMarkdownCardProps = Omit<BoxProps, 'children'> & {\n actions?: ReactNode;\n children: string;\n collapsedHeight?: string;\n size?: 'sm' | 'md' | 'lg';\n status?: Status;\n} & (UncontrolledProps | ControlledProps);\n\n// ----- Component -----\n\nconst BitkitMarkdownCard = forwardRef<HTMLDivElement, BitkitMarkdownCardProps>((props, ref) => {\n const {\n actions,\n children,\n collapsedHeight = '200px',\n css,\n defaultOpen,\n onOpenChange,\n open,\n size = 'md',\n status = 'info',\n ...rest\n } = props;\n\n const recipe = useSlotRecipe({ key: 'markdownCard' });\n const styles = recipe({ status });\n\n const handleOpenChange = onOpenChange ? (details: { open: boolean }) => onOpenChange(details.open) : undefined;\n\n return (\n <Card.Root ref={ref} css={[styles.root, css]} {...rest}>\n <HStack align=\"stretch\" gap=\"0\">\n <Box css={styles.iconBar}>{STATUS_ICONS[status]}</Box>\n <Box css={styles.content}>\n <Collapsible.Root\n open={open}\n defaultOpen={defaultOpen}\n collapsedHeight={collapsedHeight}\n onOpenChange={handleOpenChange}\n >\n <Collapsible.Content>\n <BitkitMarkdown size={size}>{children}</BitkitMarkdown>\n </Collapsible.Content>\n <Collapsible.Context>\n {(api) => (\n <>\n {!api.open && <Box css={styles.gradient} />}\n <HStack gap=\"16\" css={styles.footerButtons}>\n {actions}\n <BitkitButton\n {...api.getTriggerProps()}\n size=\"sm\"\n suffixIcon={api.open ? IconChevronUp : IconChevronDown}\n variant=\"secondary\"\n >\n {api.open ? 'Show less' : 'Show more'}\n </BitkitButton>\n </HStack>\n </>\n )}\n </Collapsible.Context>\n </Collapsible.Root>\n </Box>\n </HStack>\n </Card.Root>\n );\n});\n\nBitkitMarkdownCard.displayName = 'BitkitMarkdownCard';\n\nexport default BitkitMarkdownCard;\n"],"mappings":";;;;;;;;;;;;;;;;AAuBA,IAAM,eAA4C;CAChD,UAAU,oBAAC,uBAAD,EAAuB,MAAK,KAAM,CAAA;CAC5C,MAAM,oBAAC,gBAAD,EAAgB,MAAK,KAAM,CAAA;CACjC,SAAS,oBAAC,WAAD,EAAW,MAAK,KAAM,CAAA;CAC/B,SAAS,oBAAC,aAAD,EAAa,MAAK,KAAM,CAAA;AACnC;AA0BA,IAAM,qBAAqB,YAAqD,OAAO,QAAQ;CAC7F,MAAM,EACJ,SACA,UACA,kBAAkB,SAClB,KACA,aACA,cACA,MACA,OAAO,MACP,SAAS,QACT,GAAG,SACD;CAGJ,MAAM,SADS,cAAc,EAAE,KAAK,eAAe,CACpC,CAAA,CAAO,EAAE,OAAO,CAAC;CAEhC,MAAM,mBAAmB,gBAAgB,YAA+B,aAAa,QAAQ,IAAI,IAAI,KAAA;CAErG,OACE,oBAAC,KAAK,MAAN;EAAgB;EAAK,KAAK,CAAC,OAAO,MAAM,GAAG;EAAG,GAAI;EAChD,UAAA,qBAAC,QAAD;GAAQ,OAAM;GAAU,KAAI;GAA5B,UAAA,CACE,oBAAC,KAAD;IAAK,KAAK,OAAO;IAAU,UAAA,aAAa;GAAa,CAAA,GACrD,oBAAC,KAAD;IAAK,KAAK,OAAO;IACf,UAAA,qBAAC,YAAY,MAAb;KACQ;KACO;KACI;KACjB,cAAc;KAJhB,UAAA,CAME,oBAAC,YAAY,SAAb,EAAA,UACE,oBAAC,gBAAD;MAAsB;MAAO;KAAyB,CAAA,EACnC,CAAA,GACrB,oBAAC,YAAY,SAAb,EAAA,WACI,QACA,
|
|
1
|
+
{"version":3,"file":"BitkitMarkdownCard.js","names":["_Fragment"],"sources":["../../../lib/components/BitkitMarkdownCard/BitkitMarkdownCard.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { type BoxProps } from '@chakra-ui/react/box';\nimport { Card } from '@chakra-ui/react/card';\nimport { Collapsible } from '@chakra-ui/react/collapsible';\nimport { HStack } from '@chakra-ui/react/stack';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef, type JSX, type ReactNode } from 'react';\n\nimport {\n IconCheck,\n IconChevronDown,\n IconChevronUp,\n IconErrorCircleFilled,\n IconInfoCircle,\n IconWarning,\n} from '../../icons';\nimport BitkitButton from '../BitkitButton/BitkitButton';\nimport BitkitMarkdown from '../BitkitMarkdown/BitkitMarkdown';\n\n// ----- Status config -----\n\ntype Status = 'critical' | 'info' | 'success' | 'warning';\n\nconst STATUS_ICONS: Record<Status, JSX.Element> = {\n critical: <IconErrorCircleFilled size=\"24\" />,\n info: <IconInfoCircle size=\"24\" />,\n success: <IconCheck size=\"24\" />,\n warning: <IconWarning size=\"24\" />,\n};\n\n// ----- Props -----\n\ntype UncontrolledProps = {\n defaultOpen?: boolean;\n onOpenChange?: never;\n open?: never;\n};\n\ntype ControlledProps = {\n defaultOpen?: never;\n onOpenChange: (open: boolean) => void;\n open: boolean;\n};\n\nexport type BitkitMarkdownCardProps = Omit<BoxProps, 'children'> & {\n actions?: ReactNode;\n children: string;\n collapsedHeight?: string;\n size?: 'sm' | 'md' | 'lg';\n status?: Status;\n} & (UncontrolledProps | ControlledProps);\n\n// ----- Component -----\n\nconst BitkitMarkdownCard = forwardRef<HTMLDivElement, BitkitMarkdownCardProps>((props, ref) => {\n const {\n actions,\n children,\n collapsedHeight = '200px',\n css,\n defaultOpen,\n onOpenChange,\n open,\n size = 'md',\n status = 'info',\n ...rest\n } = props;\n\n const recipe = useSlotRecipe({ key: 'markdownCard' });\n const styles = recipe({ status });\n\n const handleOpenChange = onOpenChange ? (details: { open: boolean }) => onOpenChange(details.open) : undefined;\n\n return (\n <Card.Root ref={ref} css={[styles.root, css]} {...rest}>\n <HStack align=\"stretch\" gap=\"0\">\n <Box css={styles.iconBar}>{STATUS_ICONS[status]}</Box>\n <Box css={styles.content}>\n <Collapsible.Root\n open={open}\n defaultOpen={defaultOpen}\n collapsedHeight={collapsedHeight}\n onOpenChange={handleOpenChange}\n >\n <Collapsible.Content>\n <BitkitMarkdown size={size}>{children}</BitkitMarkdown>\n </Collapsible.Content>\n <Collapsible.Context>\n {(api) => (\n <>\n {!api.open && <Box css={styles.gradient} />}\n <HStack gap=\"16\" css={styles.footerButtons}>\n {actions}\n <BitkitButton\n {...api.getTriggerProps()}\n size=\"sm\"\n suffixIcon={api.open ? IconChevronUp : IconChevronDown}\n variant=\"secondary\"\n >\n {api.open ? 'Show less' : 'Show more'}\n </BitkitButton>\n </HStack>\n </>\n )}\n </Collapsible.Context>\n </Collapsible.Root>\n </Box>\n </HStack>\n </Card.Root>\n );\n});\n\nBitkitMarkdownCard.displayName = 'BitkitMarkdownCard';\n\nexport default BitkitMarkdownCard;\n"],"mappings":";;;;;;;;;;;;;;;;AAuBA,IAAM,eAA4C;CAChD,UAAU,oBAAC,uBAAD,EAAuB,MAAK,KAAM,CAAA;CAC5C,MAAM,oBAAC,gBAAD,EAAgB,MAAK,KAAM,CAAA;CACjC,SAAS,oBAAC,WAAD,EAAW,MAAK,KAAM,CAAA;CAC/B,SAAS,oBAAC,aAAD,EAAa,MAAK,KAAM,CAAA;AACnC;AA0BA,IAAM,qBAAqB,YAAqD,OAAO,QAAQ;CAC7F,MAAM,EACJ,SACA,UACA,kBAAkB,SAClB,KACA,aACA,cACA,MACA,OAAO,MACP,SAAS,QACT,GAAG,SACD;CAGJ,MAAM,SADS,cAAc,EAAE,KAAK,eAAe,CACpC,CAAA,CAAO,EAAE,OAAO,CAAC;CAEhC,MAAM,mBAAmB,gBAAgB,YAA+B,aAAa,QAAQ,IAAI,IAAI,KAAA;CAErG,OACE,oBAAC,KAAK,MAAN;EAAgB;EAAK,KAAK,CAAC,OAAO,MAAM,GAAG;EAAG,GAAI;EAChD,UAAA,qBAAC,QAAD;GAAQ,OAAM;GAAU,KAAI;GAA5B,UAAA,CACE,oBAAC,KAAD;IAAK,KAAK,OAAO;IAAU,UAAA,aAAa;GAAa,CAAA,GACrD,oBAAC,KAAD;IAAK,KAAK,OAAO;IACf,UAAA,qBAAC,YAAY,MAAb;KACQ;KACO;KACI;KACjB,cAAc;KAJhB,UAAA,CAME,oBAAC,YAAY,SAAb,EAAA,UACE,oBAAC,gBAAD;MAAsB;MAAO;KAAyB,CAAA,EACnC,CAAA,GACrB,oBAAC,YAAY,SAAb,EAAA,WACI,QACA,qBAAAA,YAAA,EAAA,UAAA,CACG,CAAC,IAAI,QAAQ,oBAAC,KAAD,EAAK,KAAK,OAAO,SAAW,CAAA,GAC1C,qBAAC,QAAD;MAAQ,KAAI;MAAK,KAAK,OAAO;MAA7B,UAAA,CACG,SACD,oBAAC,cAAD;OACE,GAAI,IAAI,gBAAgB;OACxB,MAAK;OACL,YAAY,IAAI,OAAO,gBAAgB;OACvC,SAAQ;OAEP,UAAA,IAAI,OAAO,cAAc;MACd,CAAA,CACR;KACR,CAAA,CAAA,EAAA,CAAA,EAEe,CAAA,CACL;;GACf,CAAA,CACC;;CACC,CAAA;AAEf,CAAC;AAED,mBAAmB,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitMultiselect.js","names":[],"sources":["../../../lib/components/BitkitMultiselect/BitkitMultiselect.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { createListCollection } from '@chakra-ui/react/collection';\nimport { useControllableState } from '@chakra-ui/react/hooks';\nimport { Portal } from '@chakra-ui/react/portal';\nimport { Select, type SelectRootProps, type SelectTriggerProps, useSelectContext } from '@chakra-ui/react/select';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef, type ReactNode, useContext } from 'react';\n\nimport { IconErrorCircleFilled, IconWarningYellow } from '../../icons';\nimport AssetSelectChevron from '../../utilities/AssetSelectChevron';\nimport BitkitPortalContext from '../../utilities/BitkitPortalContext';\nimport { withSubComponents } from '../../utilities/withSubComponents';\nimport BitkitCloseButton from '../BitkitCloseButton/BitkitCloseButton';\nimport BitkitField, { type BitkitFieldProps } from '../BitkitField/BitkitField';\nimport BitkitMultiselectMenu, {\n type BitkitMultiselectMenuItemProps,\n} from '../BitkitMultiselectMenu/BitkitMultiselectMenu';\nimport {\n type BitkitSelectMenuEmptyStateProps,\n type BitkitSelectMenuErrorStateProps,\n type BitkitSelectMenuScrollProps,\n type BitkitSelectMenuSearchProps,\n} from '../BitkitSelectMenu/BitkitSelectMenu';\nimport BitkitSelectMenuAction, { type BitkitSelectMenuActionChild } from '../BitkitSelectMenu/BitkitSelectMenuAction';\nimport BitkitTag from '../BitkitTag/BitkitTag';\n\nexport type BitkitMultiselectTriggerProps = SelectTriggerProps;\n\nexport type BitkitMultiselectProps = Omit<BitkitFieldProps, 'children' | 'onChange' | 'state'> & {\n children?: BitkitSelectMenuActionChild;\n constrained?: boolean;\n defaultValue?: Array<string>;\n isLoading?: boolean;\n /** Reddens the offending tags and errors the field, like BitkitTagsInput. Pair with `errorText`. */\n isValueInvalid?: (value: string) => boolean;\n items: Array<BitkitMultiselectMenuItemProps>;\n onValueChange?: (newVal: Array<string>) => void;\n placeholder?: string;\n disablePortal?: boolean;\n selectProps?: Omit<SelectRootProps, 'collection' | 'defaultValue' | 'multiple' | 'onValueChange' | 'value'>;\n size?: 'md' | 'lg';\n state?: 'disabled' | 'error' | 'readOnly' | 'warning';\n triggerProps?: BitkitMultiselectTriggerProps;\n value?: Array<string>;\n} & BitkitSelectMenuSearchProps &\n BitkitSelectMenuScrollProps &\n BitkitSelectMenuEmptyStateProps &\n BitkitSelectMenuErrorStateProps;\n\ntype MultiselectState = BitkitMultiselectProps['state'];\n\nconst NON_INTERACTIVE_STATES: ReadonlyArray<MultiselectState> = ['disabled', 'readOnly', 'error', 'warning'];\n\n/** Whether the clear-all button should be rendered (and the overlay should reserve extra room for it). */\nconst shouldShowClearButton = (constrained: boolean, selectionCount: number, state: MultiselectState): boolean =>\n !constrained && selectionCount > 0 && !NON_INTERACTIVE_STATES.includes(state);\n\ntype MultiselectOverlayProps = {\n constrained: boolean;\n isValueInvalid?: (value: string) => boolean;\n placeholder?: string;\n size: 'md' | 'lg';\n state?: MultiselectState;\n};\n\nconst MultiselectOverlay = ({ constrained, isValueInvalid, placeholder, size, state }: MultiselectOverlayProps) => {\n const select = useSelectContext();\n const recipe = useSlotRecipe({ key: 'multiselect' });\n const styles = recipe({ constrained, size });\n\n const selectedItems = select.selectedItems as Array<BitkitMultiselectMenuItemProps>;\n const selectedValues = select.value;\n const isDisabled = state === 'disabled';\n const isReadOnly = state === 'readOnly';\n const tagState = isDisabled ? 'disabled' : undefined;\n // Overlay reserves ~96px on the right when the clear-all is visible (to keep the chevron +\n // clear button out of the tag row), otherwise ~48px (chevron only). Using spacing tokens\n // because '80' (the minimum that fits both icons with gaps) isn't a valid token; '96' is\n // the next one up.\n const overlayPaddingEnd = shouldShowClearButton(constrained, selectedValues.length, state) ? '96' : '48';\n\n const resolvedPlaceholder = placeholder ?? (isReadOnly ? '(not selected)' : 'Select options');\n const canRemove = !isDisabled && !isReadOnly;\n\n const hasSelection = selectedValues.length > 0;\n\n const renderTags = () => {\n if (constrained) {\n return (\n <>\n {hasSelection && (\n <TagSlot>\n <BitkitTag\n size=\"sm\"\n colorVariant={selectedValues.some((v) => isValueInvalid?.(v)) ? 'red' : 'neutral'}\n labelText={String(selectedValues.length)}\n state={tagState}\n onRemove={canRemove ? () => select.clearValue() : undefined}\n />\n </TagSlot>\n )}\n <Text as=\"span\" css={styles.placeholderText} data-placeholder={hasSelection ? undefined : ''}>\n {resolvedPlaceholder}\n </Text>\n </>\n );\n }\n\n if (selectedItems.length === 0) {\n return (\n <Text as=\"span\" css={styles.placeholderText} data-placeholder=\"\">\n {resolvedPlaceholder}\n </Text>\n );\n }\n\n return selectedItems.map((item) => (\n <TagSlot key={item.value}>\n <BitkitTag\n size=\"sm\"\n colorVariant={isValueInvalid?.(item.value) ? 'red' : 'neutral'}\n labelText={item.label}\n state={tagState}\n onRemove={canRemove ? () => select.setValue(selectedValues.filter((v) => v !== item.value)) : undefined}\n />\n </TagSlot>\n ));\n };\n\n return (\n <Box css={styles.overlay} pointerEvents=\"none\" paddingInlineEnd={overlayPaddingEnd}>\n <Box css={styles.tagsBlock}>{renderTags()}</Box>\n </Box>\n );\n};\n\n// minWidth=\"0\" keeps the slot shrinkable inside the wrapping tags row: without it the slot holds\n// the tag's min-content width, which is the whole label now that it no longer wraps, and a long\n// selection overflows the control instead of ellipsizing. maxWidth=\"100%\" caps the other direction:\n// a tag alone on its own wrapped line has no sibling to shrink against, so it needs the row as its\n// own ceiling.\nconst TagSlot = ({ children }: { children: ReactNode }) => (\n <Box data-slot=\"tag\" display=\"inline-flex\" minWidth=\"0\" maxWidth=\"100%\" pointerEvents=\"auto\">\n {children}\n </Box>\n);\n\ntype ClearAllButtonProps = {\n state?: MultiselectState;\n};\n\nconst ClearAllButton = ({ state }: ClearAllButtonProps) => {\n const select = useSelectContext();\n\n // Constrained mode has its own inline clear-all on the counter tag; this is the non-constrained trigger-level clear.\n if (!shouldShowClearButton(false, select.value.length, state)) return null;\n\n return (\n <BitkitCloseButton size=\"sm\" colorVariant=\"neutral\" aria-label=\"Clear all\" onClick={() => select.clearValue()} />\n );\n};\n\nconst BitkitMultiselect = forwardRef<HTMLDivElement, BitkitMultiselectProps>((props, ref) => {\n const {\n children,\n constrained = false,\n defaultValue,\n emptyHelperText,\n emptyLabel,\n errorHelperText,\n errorLabel,\n isLoading,\n isValueInvalid,\n items,\n onScrolledToBottom,\n onSearchChange,\n onValueChange,\n placeholder,\n disablePortal,\n searchPlaceholder,\n searchValue,\n selectProps,\n size = 'lg',\n state,\n triggerProps,\n value,\n ...fieldProps\n } = props;\n\n const { css: triggerCss, ...restTriggerProps } = triggerProps ?? {};\n\n const collection = createListCollection({\n items,\n groupBy: (item) => item.group || '',\n isItemDisabled: (item) => !!item.disabled,\n });\n\n const recipe = useSlotRecipe({ key: 'multiselect' });\n const styles = recipe({ constrained, size });\n\n const { disablePortal: disablePortalFromContext } = useContext(BitkitPortalContext);\n const iconSize = size === 'lg' ? '24' : '16';\n\n const [currentValues, setCurrentValues] = useControllableState<Array<string>>({\n value,\n defaultValue: defaultValue ?? [],\n });\n const isInteractive = state !== 'disabled' && state !== 'readOnly';\n const hasInvalidValue = isInteractive && !!isValueInvalid && currentValues.some(isValueInvalid);\n const effectiveState = hasInvalidValue ? 'error' : state;\n const isInvalid = effectiveState === 'error' || !!fieldProps.errorText;\n\n return (\n <BitkitField ref={ref} state={effectiveState} {...fieldProps}>\n <Select.Root\n collection={collection}\n multiple\n {...selectProps}\n defaultValue={defaultValue}\n disabled={effectiveState === 'disabled'}\n invalid={isInvalid}\n onValueChange={(details) => {\n setCurrentValues(details.value);\n onValueChange?.(details.value);\n }}\n readOnly={effectiveState === 'readOnly'}\n // Zag's default scrollIntoView gates on `isScrollable(contentEl)`. Our content is\n // overflow:hidden + flex column (so the sticky-bottom create row stays visible while\n // the inner itemList Box scrolls). That gate fails, so keyboard highlight never\n // scrolls the items into view. Providing scrollToIndexFn bypasses the gate and lets\n // the browser's native scrollIntoView walk up to the real scroll container (itemList).\n scrollToIndexFn={({ getElement }) => getElement()?.scrollIntoView({ block: 'nearest' })}\n value={value}\n >\n <Select.Control css={styles.control} className=\"group\">\n <Select.HiddenSelect />\n <Select.Trigger\n css={[styles.trigger, triggerCss]}\n {...restTriggerProps}\n aria-readonly={effectiveState === 'readOnly' || undefined}\n />\n <MultiselectOverlay\n constrained={constrained}\n isValueInvalid={hasInvalidValue ? isValueInvalid : undefined}\n placeholder={placeholder}\n size={size}\n state={effectiveState}\n />\n <Select.IndicatorGroup css={styles.indicatorGroup}>\n {!constrained && <ClearAllButton state={effectiveState} />}\n {effectiveState === 'error' && (\n <Select.Indicator css={styles.indicator}>\n <IconErrorCircleFilled size={iconSize} color=\"icon/negative\" />\n </Select.Indicator>\n )}\n {effectiveState === 'warning' && (\n <Select.Indicator css={styles.indicator}>\n <IconWarningYellow size={iconSize} />\n </Select.Indicator>\n )}\n <Select.Indicator css={styles.indicator} asChild>\n <AssetSelectChevron />\n </Select.Indicator>\n </Select.IndicatorGroup>\n </Select.Control>\n <Portal disabled={disablePortal || disablePortalFromContext}>\n <Select.Positioner>\n <BitkitMultiselectMenu\n collection={collection}\n emptyHelperText={emptyHelperText}\n emptyLabel={emptyLabel}\n errorHelperText={errorHelperText}\n errorLabel={errorLabel}\n isLoading={isLoading}\n onScrolledToBottom={onScrolledToBottom}\n onSearchChange={onSearchChange}\n searchPlaceholder={searchPlaceholder}\n searchValue={searchValue}\n size={size}\n >\n {children}\n </BitkitMultiselectMenu>\n </Select.Positioner>\n </Portal>\n </Select.Root>\n </BitkitField>\n );\n});\n\nBitkitMultiselect.displayName = 'BitkitMultiselect';\n\nexport default withSubComponents(BitkitMultiselect, { Action: BitkitSelectMenuAction });\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"BitkitMultiselect.js","names":["_Fragment"],"sources":["../../../lib/components/BitkitMultiselect/BitkitMultiselect.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { createListCollection } from '@chakra-ui/react/collection';\nimport { useControllableState } from '@chakra-ui/react/hooks';\nimport { Portal } from '@chakra-ui/react/portal';\nimport { Select, type SelectRootProps, type SelectTriggerProps, useSelectContext } from '@chakra-ui/react/select';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef, type ReactNode, useContext } from 'react';\n\nimport { IconErrorCircleFilled, IconWarningYellow } from '../../icons';\nimport AssetSelectChevron from '../../utilities/AssetSelectChevron';\nimport BitkitPortalContext from '../../utilities/BitkitPortalContext';\nimport { withSubComponents } from '../../utilities/withSubComponents';\nimport BitkitCloseButton from '../BitkitCloseButton/BitkitCloseButton';\nimport BitkitField, { type BitkitFieldProps } from '../BitkitField/BitkitField';\nimport BitkitMultiselectMenu, {\n type BitkitMultiselectMenuItemProps,\n} from '../BitkitMultiselectMenu/BitkitMultiselectMenu';\nimport {\n type BitkitSelectMenuEmptyStateProps,\n type BitkitSelectMenuErrorStateProps,\n type BitkitSelectMenuScrollProps,\n type BitkitSelectMenuSearchProps,\n} from '../BitkitSelectMenu/BitkitSelectMenu';\nimport BitkitSelectMenuAction, { type BitkitSelectMenuActionChild } from '../BitkitSelectMenu/BitkitSelectMenuAction';\nimport BitkitTag from '../BitkitTag/BitkitTag';\n\nexport type BitkitMultiselectTriggerProps = SelectTriggerProps;\n\nexport type BitkitMultiselectProps = Omit<BitkitFieldProps, 'children' | 'onChange' | 'state'> & {\n children?: BitkitSelectMenuActionChild;\n constrained?: boolean;\n defaultValue?: Array<string>;\n isLoading?: boolean;\n /** Reddens the offending tags and errors the field, like BitkitTagsInput. Pair with `errorText`. */\n isValueInvalid?: (value: string) => boolean;\n items: Array<BitkitMultiselectMenuItemProps>;\n onValueChange?: (newVal: Array<string>) => void;\n placeholder?: string;\n disablePortal?: boolean;\n selectProps?: Omit<SelectRootProps, 'collection' | 'defaultValue' | 'multiple' | 'onValueChange' | 'value'>;\n size?: 'md' | 'lg';\n state?: 'disabled' | 'error' | 'readOnly' | 'warning';\n triggerProps?: BitkitMultiselectTriggerProps;\n value?: Array<string>;\n} & BitkitSelectMenuSearchProps &\n BitkitSelectMenuScrollProps &\n BitkitSelectMenuEmptyStateProps &\n BitkitSelectMenuErrorStateProps;\n\ntype MultiselectState = BitkitMultiselectProps['state'];\n\nconst NON_INTERACTIVE_STATES: ReadonlyArray<MultiselectState> = ['disabled', 'readOnly', 'error', 'warning'];\n\n/** Whether the clear-all button should be rendered (and the overlay should reserve extra room for it). */\nconst shouldShowClearButton = (constrained: boolean, selectionCount: number, state: MultiselectState): boolean =>\n !constrained && selectionCount > 0 && !NON_INTERACTIVE_STATES.includes(state);\n\ntype MultiselectOverlayProps = {\n constrained: boolean;\n isValueInvalid?: (value: string) => boolean;\n placeholder?: string;\n size: 'md' | 'lg';\n state?: MultiselectState;\n};\n\nconst MultiselectOverlay = ({ constrained, isValueInvalid, placeholder, size, state }: MultiselectOverlayProps) => {\n const select = useSelectContext();\n const recipe = useSlotRecipe({ key: 'multiselect' });\n const styles = recipe({ constrained, size });\n\n const selectedItems = select.selectedItems as Array<BitkitMultiselectMenuItemProps>;\n const selectedValues = select.value;\n const isDisabled = state === 'disabled';\n const isReadOnly = state === 'readOnly';\n const tagState = isDisabled ? 'disabled' : undefined;\n // Overlay reserves ~96px on the right when the clear-all is visible (to keep the chevron +\n // clear button out of the tag row), otherwise ~48px (chevron only). Using spacing tokens\n // because '80' (the minimum that fits both icons with gaps) isn't a valid token; '96' is\n // the next one up.\n const overlayPaddingEnd = shouldShowClearButton(constrained, selectedValues.length, state) ? '96' : '48';\n\n const resolvedPlaceholder = placeholder ?? (isReadOnly ? '(not selected)' : 'Select options');\n const canRemove = !isDisabled && !isReadOnly;\n\n const hasSelection = selectedValues.length > 0;\n\n const renderTags = () => {\n if (constrained) {\n return (\n <>\n {hasSelection && (\n <TagSlot>\n <BitkitTag\n size=\"sm\"\n colorVariant={selectedValues.some((v) => isValueInvalid?.(v)) ? 'red' : 'neutral'}\n labelText={String(selectedValues.length)}\n state={tagState}\n onRemove={canRemove ? () => select.clearValue() : undefined}\n />\n </TagSlot>\n )}\n <Text as=\"span\" css={styles.placeholderText} data-placeholder={hasSelection ? undefined : ''}>\n {resolvedPlaceholder}\n </Text>\n </>\n );\n }\n\n if (selectedItems.length === 0) {\n return (\n <Text as=\"span\" css={styles.placeholderText} data-placeholder=\"\">\n {resolvedPlaceholder}\n </Text>\n );\n }\n\n return selectedItems.map((item) => (\n <TagSlot key={item.value}>\n <BitkitTag\n size=\"sm\"\n colorVariant={isValueInvalid?.(item.value) ? 'red' : 'neutral'}\n labelText={item.label}\n state={tagState}\n onRemove={canRemove ? () => select.setValue(selectedValues.filter((v) => v !== item.value)) : undefined}\n />\n </TagSlot>\n ));\n };\n\n return (\n <Box css={styles.overlay} pointerEvents=\"none\" paddingInlineEnd={overlayPaddingEnd}>\n <Box css={styles.tagsBlock}>{renderTags()}</Box>\n </Box>\n );\n};\n\n// minWidth=\"0\" keeps the slot shrinkable inside the wrapping tags row: without it the slot holds\n// the tag's min-content width, which is the whole label now that it no longer wraps, and a long\n// selection overflows the control instead of ellipsizing. maxWidth=\"100%\" caps the other direction:\n// a tag alone on its own wrapped line has no sibling to shrink against, so it needs the row as its\n// own ceiling.\nconst TagSlot = ({ children }: { children: ReactNode }) => (\n <Box data-slot=\"tag\" display=\"inline-flex\" minWidth=\"0\" maxWidth=\"100%\" pointerEvents=\"auto\">\n {children}\n </Box>\n);\n\ntype ClearAllButtonProps = {\n state?: MultiselectState;\n};\n\nconst ClearAllButton = ({ state }: ClearAllButtonProps) => {\n const select = useSelectContext();\n\n // Constrained mode has its own inline clear-all on the counter tag; this is the non-constrained trigger-level clear.\n if (!shouldShowClearButton(false, select.value.length, state)) return null;\n\n return (\n <BitkitCloseButton size=\"sm\" colorVariant=\"neutral\" aria-label=\"Clear all\" onClick={() => select.clearValue()} />\n );\n};\n\nconst BitkitMultiselect = forwardRef<HTMLDivElement, BitkitMultiselectProps>((props, ref) => {\n const {\n children,\n constrained = false,\n defaultValue,\n emptyHelperText,\n emptyLabel,\n errorHelperText,\n errorLabel,\n isLoading,\n isValueInvalid,\n items,\n onScrolledToBottom,\n onSearchChange,\n onValueChange,\n placeholder,\n disablePortal,\n searchPlaceholder,\n searchValue,\n selectProps,\n size = 'lg',\n state,\n triggerProps,\n value,\n ...fieldProps\n } = props;\n\n const { css: triggerCss, ...restTriggerProps } = triggerProps ?? {};\n\n const collection = createListCollection({\n items,\n groupBy: (item) => item.group || '',\n isItemDisabled: (item) => !!item.disabled,\n });\n\n const recipe = useSlotRecipe({ key: 'multiselect' });\n const styles = recipe({ constrained, size });\n\n const { disablePortal: disablePortalFromContext } = useContext(BitkitPortalContext);\n const iconSize = size === 'lg' ? '24' : '16';\n\n const [currentValues, setCurrentValues] = useControllableState<Array<string>>({\n value,\n defaultValue: defaultValue ?? [],\n });\n const isInteractive = state !== 'disabled' && state !== 'readOnly';\n const hasInvalidValue = isInteractive && !!isValueInvalid && currentValues.some(isValueInvalid);\n const effectiveState = hasInvalidValue ? 'error' : state;\n const isInvalid = effectiveState === 'error' || !!fieldProps.errorText;\n\n return (\n <BitkitField ref={ref} state={effectiveState} {...fieldProps}>\n <Select.Root\n collection={collection}\n multiple\n {...selectProps}\n defaultValue={defaultValue}\n disabled={effectiveState === 'disabled'}\n invalid={isInvalid}\n onValueChange={(details) => {\n setCurrentValues(details.value);\n onValueChange?.(details.value);\n }}\n readOnly={effectiveState === 'readOnly'}\n // Zag's default scrollIntoView gates on `isScrollable(contentEl)`. Our content is\n // overflow:hidden + flex column (so the sticky-bottom create row stays visible while\n // the inner itemList Box scrolls). That gate fails, so keyboard highlight never\n // scrolls the items into view. Providing scrollToIndexFn bypasses the gate and lets\n // the browser's native scrollIntoView walk up to the real scroll container (itemList).\n scrollToIndexFn={({ getElement }) => getElement()?.scrollIntoView({ block: 'nearest' })}\n value={value}\n >\n <Select.Control css={styles.control} className=\"group\">\n <Select.HiddenSelect />\n <Select.Trigger\n css={[styles.trigger, triggerCss]}\n {...restTriggerProps}\n aria-readonly={effectiveState === 'readOnly' || undefined}\n />\n <MultiselectOverlay\n constrained={constrained}\n isValueInvalid={hasInvalidValue ? isValueInvalid : undefined}\n placeholder={placeholder}\n size={size}\n state={effectiveState}\n />\n <Select.IndicatorGroup css={styles.indicatorGroup}>\n {!constrained && <ClearAllButton state={effectiveState} />}\n {effectiveState === 'error' && (\n <Select.Indicator css={styles.indicator}>\n <IconErrorCircleFilled size={iconSize} color=\"icon/negative\" />\n </Select.Indicator>\n )}\n {effectiveState === 'warning' && (\n <Select.Indicator css={styles.indicator}>\n <IconWarningYellow size={iconSize} />\n </Select.Indicator>\n )}\n <Select.Indicator css={styles.indicator} asChild>\n <AssetSelectChevron />\n </Select.Indicator>\n </Select.IndicatorGroup>\n </Select.Control>\n <Portal disabled={disablePortal || disablePortalFromContext}>\n <Select.Positioner>\n <BitkitMultiselectMenu\n collection={collection}\n emptyHelperText={emptyHelperText}\n emptyLabel={emptyLabel}\n errorHelperText={errorHelperText}\n errorLabel={errorLabel}\n isLoading={isLoading}\n onScrolledToBottom={onScrolledToBottom}\n onSearchChange={onSearchChange}\n searchPlaceholder={searchPlaceholder}\n searchValue={searchValue}\n size={size}\n >\n {children}\n </BitkitMultiselectMenu>\n </Select.Positioner>\n </Portal>\n </Select.Root>\n </BitkitField>\n );\n});\n\nBitkitMultiselect.displayName = 'BitkitMultiselect';\n\nexport default withSubComponents(BitkitMultiselect, { Action: BitkitSelectMenuAction });\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitNoteCard.js","names":[],"sources":["../../../lib/components/BitkitNoteCard/BitkitNoteCard.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { Collapsible } from '@chakra-ui/react/collapsible';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { type ElementType, forwardRef, type ReactNode, useState } from 'react';\n\nimport { IconArrowNortheast, IconChevronDown, IconChevronUp } from '../../icons';\nimport { type NotificationVariant } from '../../theme/common/AlertAndToast.common';\nimport BitkitButton from '../BitkitButton/BitkitButton';\nimport BitkitLinkButton from '../BitkitLinkButton/BitkitLinkButton';\nimport BitkitList from '../BitkitList/BitkitList';\nimport { ICON_COMPONENTS_MAP, type NotificationAction } from '../common/notificationMaps';\n\n// ----- Props -----\n\nexport type BitkitNoteCardProps = Omit<BoxProps, 'children' | 'title'> & {\n action?: NotificationAction;\n isCollapsible?: boolean;\n /**\n * The message body. Rendered in a `div`, so block-level content — a `BitkitMarkdown`, a list,\n * a table — is valid here, not just phrasing content.\n */\n message?: ReactNode;\n messageList?: ReactNode[];\n status?: NotificationVariant;\n title?: string;\n};\n\n// ----- Component -----\n\nconst BitkitNoteCard = forwardRef<HTMLDivElement, BitkitNoteCardProps>((props, ref) => {\n const { action, css, isCollapsible = false, message, messageList, status = 'info', title, ...rest } = props;\n\n const recipe = useSlotRecipe({ key: 'noteCard' });\n const styles = recipe({ status });\n\n const [isOpen, setIsOpen] = useState(false);\n\n const IconComponent: ElementType = ICON_COMPONENTS_MAP[status];\n const isProgress = status === 'progress';\n const listItems = (messageList ?? []).filter(\n (item) => item !== null && item !== undefined && typeof item !== 'boolean',\n );\n const hasMessage = message !== null && message !== undefined && message !== '' && typeof message !== 'boolean';\n const hasList = listItems.length > 0;\n const hasToggle = isCollapsible && hasList;\n\n const list = hasList ? (\n <BitkitList css={styles.messageList} size=\"md\">\n {listItems.map((item, index) => (\n <BitkitList.Item key={index}>{item}</BitkitList.Item>\n ))}\n </BitkitList>\n ) : null;\n\n return (\n <Box ref={ref} css={[styles.root, css]} {...rest}>\n <Box css={styles.iconBar}>\n <Box css={styles.iconWrapper}>{isProgress ? <IconComponent size=\"lg\" /> : <IconComponent size=\"24\" />}</Box>\n </Box>\n <Box css={[styles.content, !action && { paddingInlineEnd: '24' }]}>\n <Box css={[styles.messageBlock, !title && { paddingBlockStart: '2' }]}>\n {title && <Text css={styles.title}>{title}</Text>}\n {hasMessage && (\n <Text as=\"div\" css={styles.message}>\n {message}\n </Text>\n )}\n {hasToggle ? (\n <Collapsible.Root\n css={styles.collapsible}\n onOpenChange={(details) => setIsOpen(details.open)}\n open={isOpen}\n unstyled\n >\n <Collapsible.Content css={styles.collapsibleContent}>{list}</Collapsible.Content>\n <Collapsible.Trigger asChild>\n <BitkitLinkButton css={styles.collapsibleTrigger} suffixIcon={isOpen ? IconChevronUp : IconChevronDown}>\n {isOpen ? 'Hide details' : 'Show details'}\n </BitkitLinkButton>\n </Collapsible.Trigger>\n </Collapsible.Root>\n ) : (\n list\n )}\n </Box>\n {action &&\n (action.href !== undefined ? (\n <BitkitButton\n css={[styles.actionArea, hasList && styles.actionAreaList]}\n href={action.href}\n isExternal={action.isExternal || action.target === '_blank'}\n onClick={action.onClick}\n size=\"md\"\n // See the known gap documented on `NotificationAction.state`: BitkitButton's anchor\n // variant has no loading state, so only `disabled` carries over here.\n state={action.state === 'loading' ? undefined : action.state}\n suffixIcon={action.isExternal ? IconArrowNortheast : undefined}\n target={action.target}\n variant=\"tertiary\"\n >\n {action.label}\n </BitkitButton>\n ) : (\n <BitkitButton\n css={[styles.actionArea, hasList && styles.actionAreaList]}\n onClick={action.onClick}\n size=\"md\"\n state={action.state}\n variant=\"tertiary\"\n marginBlock=\"4\"\n >\n {action.label}\n </BitkitButton>\n ))}\n </Box>\n </Box>\n );\n});\n\nBitkitNoteCard.displayName = 'BitkitNoteCard';\n\nexport default BitkitNoteCard;\n"],"mappings":";;;;;;;;;;;;;;AA8BA,IAAM,iBAAiB,YAAiD,OAAO,QAAQ;CACrF,MAAM,EAAE,QAAQ,KAAK,gBAAgB,OAAO,SAAS,aAAa,SAAS,QAAQ,OAAO,GAAG,SAAS;CAGtG,MAAM,SADS,cAAc,EAAE,KAAK,WAAW,CAChC,CAAA,CAAO,EAAE,OAAO,CAAC;CAEhC,MAAM,CAAC,QAAQ,aAAa,SAAS,KAAK;CAE1C,MAAM,gBAA6B,oBAAoB;CACvD,MAAM,aAAa,WAAW;CAC9B,MAAM,aAAa,eAAe,CAAC,EAAA,CAAG,QACnC,SAAS,SAAS,QAAQ,SAAS,KAAA,KAAa,OAAO,SAAS,SACnE;CACA,MAAM,aAAa,YAAY,QAAQ,YAAY,KAAA,KAAa,YAAY,MAAM,OAAO,YAAY;CACrG,MAAM,UAAU,UAAU,SAAS;CACnC,MAAM,YAAY,iBAAiB;CAEnC,MAAM,OAAO,UACX,
|
|
1
|
+
{"version":3,"file":"BitkitNoteCard.js","names":["BitkitList"],"sources":["../../../lib/components/BitkitNoteCard/BitkitNoteCard.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { Collapsible } from '@chakra-ui/react/collapsible';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { type ElementType, forwardRef, type ReactNode, useState } from 'react';\n\nimport { IconArrowNortheast, IconChevronDown, IconChevronUp } from '../../icons';\nimport { type NotificationVariant } from '../../theme/common/AlertAndToast.common';\nimport BitkitButton from '../BitkitButton/BitkitButton';\nimport BitkitLinkButton from '../BitkitLinkButton/BitkitLinkButton';\nimport BitkitList from '../BitkitList/BitkitList';\nimport { ICON_COMPONENTS_MAP, type NotificationAction } from '../common/notificationMaps';\n\n// ----- Props -----\n\nexport type BitkitNoteCardProps = Omit<BoxProps, 'children' | 'title'> & {\n action?: NotificationAction;\n isCollapsible?: boolean;\n /**\n * The message body. Rendered in a `div`, so block-level content — a `BitkitMarkdown`, a list,\n * a table — is valid here, not just phrasing content.\n */\n message?: ReactNode;\n messageList?: ReactNode[];\n status?: NotificationVariant;\n title?: string;\n};\n\n// ----- Component -----\n\nconst BitkitNoteCard = forwardRef<HTMLDivElement, BitkitNoteCardProps>((props, ref) => {\n const { action, css, isCollapsible = false, message, messageList, status = 'info', title, ...rest } = props;\n\n const recipe = useSlotRecipe({ key: 'noteCard' });\n const styles = recipe({ status });\n\n const [isOpen, setIsOpen] = useState(false);\n\n const IconComponent: ElementType = ICON_COMPONENTS_MAP[status];\n const isProgress = status === 'progress';\n const listItems = (messageList ?? []).filter(\n (item) => item !== null && item !== undefined && typeof item !== 'boolean',\n );\n const hasMessage = message !== null && message !== undefined && message !== '' && typeof message !== 'boolean';\n const hasList = listItems.length > 0;\n const hasToggle = isCollapsible && hasList;\n\n const list = hasList ? (\n <BitkitList css={styles.messageList} size=\"md\">\n {listItems.map((item, index) => (\n <BitkitList.Item key={index}>{item}</BitkitList.Item>\n ))}\n </BitkitList>\n ) : null;\n\n return (\n <Box ref={ref} css={[styles.root, css]} {...rest}>\n <Box css={styles.iconBar}>\n <Box css={styles.iconWrapper}>{isProgress ? <IconComponent size=\"lg\" /> : <IconComponent size=\"24\" />}</Box>\n </Box>\n <Box css={[styles.content, !action && { paddingInlineEnd: '24' }]}>\n <Box css={[styles.messageBlock, !title && { paddingBlockStart: '2' }]}>\n {title && <Text css={styles.title}>{title}</Text>}\n {hasMessage && (\n <Text as=\"div\" css={styles.message}>\n {message}\n </Text>\n )}\n {hasToggle ? (\n <Collapsible.Root\n css={styles.collapsible}\n onOpenChange={(details) => setIsOpen(details.open)}\n open={isOpen}\n unstyled\n >\n <Collapsible.Content css={styles.collapsibleContent}>{list}</Collapsible.Content>\n <Collapsible.Trigger asChild>\n <BitkitLinkButton css={styles.collapsibleTrigger} suffixIcon={isOpen ? IconChevronUp : IconChevronDown}>\n {isOpen ? 'Hide details' : 'Show details'}\n </BitkitLinkButton>\n </Collapsible.Trigger>\n </Collapsible.Root>\n ) : (\n list\n )}\n </Box>\n {action &&\n (action.href !== undefined ? (\n <BitkitButton\n css={[styles.actionArea, hasList && styles.actionAreaList]}\n href={action.href}\n isExternal={action.isExternal || action.target === '_blank'}\n onClick={action.onClick}\n size=\"md\"\n // See the known gap documented on `NotificationAction.state`: BitkitButton's anchor\n // variant has no loading state, so only `disabled` carries over here.\n state={action.state === 'loading' ? undefined : action.state}\n suffixIcon={action.isExternal ? IconArrowNortheast : undefined}\n target={action.target}\n variant=\"tertiary\"\n >\n {action.label}\n </BitkitButton>\n ) : (\n <BitkitButton\n css={[styles.actionArea, hasList && styles.actionAreaList]}\n onClick={action.onClick}\n size=\"md\"\n state={action.state}\n variant=\"tertiary\"\n marginBlock=\"4\"\n >\n {action.label}\n </BitkitButton>\n ))}\n </Box>\n </Box>\n );\n});\n\nBitkitNoteCard.displayName = 'BitkitNoteCard';\n\nexport default BitkitNoteCard;\n"],"mappings":";;;;;;;;;;;;;;AA8BA,IAAM,iBAAiB,YAAiD,OAAO,QAAQ;CACrF,MAAM,EAAE,QAAQ,KAAK,gBAAgB,OAAO,SAAS,aAAa,SAAS,QAAQ,OAAO,GAAG,SAAS;CAGtG,MAAM,SADS,cAAc,EAAE,KAAK,WAAW,CAChC,CAAA,CAAO,EAAE,OAAO,CAAC;CAEhC,MAAM,CAAC,QAAQ,aAAa,SAAS,KAAK;CAE1C,MAAM,gBAA6B,oBAAoB;CACvD,MAAM,aAAa,WAAW;CAC9B,MAAM,aAAa,eAAe,CAAC,EAAA,CAAG,QACnC,SAAS,SAAS,QAAQ,SAAS,KAAA,KAAa,OAAO,SAAS,SACnE;CACA,MAAM,aAAa,YAAY,QAAQ,YAAY,KAAA,KAAa,YAAY,MAAM,OAAO,YAAY;CACrG,MAAM,UAAU,UAAU,SAAS;CACnC,MAAM,YAAY,iBAAiB;CAEnC,MAAM,OAAO,UACX,oBAACA,oBAAD;EAAY,KAAK,OAAO;EAAa,MAAK;EACvC,UAAA,UAAU,KAAK,MAAM,UACpB,oBAACA,mBAAW,MAAZ,EAAA,UAA8B,KAAsB,GAA9B,KAA8B,CACrD;CACS,CAAA,IACV;CAEJ,OACE,qBAAC,KAAD;EAAU;EAAK,KAAK,CAAC,OAAO,MAAM,GAAG;EAAG,GAAI;EAA5C,UAAA,CACE,oBAAC,KAAD;GAAK,KAAK,OAAO;GACf,UAAA,oBAAC,KAAD;IAAK,KAAK,OAAO;IAAc,UAAA,aAAa,oBAAC,eAAD,EAAe,MAAK,KAAM,CAAA,IAAI,oBAAC,eAAD,EAAe,MAAK,KAAM,CAAA;GAAO,CAAA;EACxG,CAAA,GACL,qBAAC,KAAD;GAAK,KAAK,CAAC,OAAO,SAAS,CAAC,UAAU,EAAE,kBAAkB,KAAK,CAAC;GAAhE,UAAA,CACE,qBAAC,KAAD;IAAK,KAAK,CAAC,OAAO,cAAc,CAAC,SAAS,EAAE,mBAAmB,IAAI,CAAC;IAApE,UAAA;KACG,SAAS,oBAAC,MAAD;MAAM,KAAK,OAAO;MAAQ,UAAA;KAAY,CAAA;KAC/C,cACC,oBAAC,MAAD;MAAM,IAAG;MAAM,KAAK,OAAO;MACxB,UAAA;KACG,CAAA;KAEP,YACC,qBAAC,YAAY,MAAb;MACE,KAAK,OAAO;MACZ,eAAe,YAAY,UAAU,QAAQ,IAAI;MACjD,MAAM;MACN,UAAA;MAJF,UAAA,CAME,oBAAC,YAAY,SAAb;OAAqB,KAAK,OAAO;OAAqB,UAAA;MAA0B,CAAA,GAChF,oBAAC,YAAY,SAAb;OAAqB,SAAA;OACnB,UAAA,oBAAC,kBAAD;QAAkB,KAAK,OAAO;QAAoB,YAAY,SAAS,gBAAgB;QACpF,UAAA,SAAS,iBAAiB;OACX,CAAA;MACC,CAAA,CACL;KAElB,CAAA,IAAA;IAEC;GACJ,CAAA,GAAA,WACE,OAAO,SAAS,KAAA,IACf,oBAAC,cAAD;IACE,KAAK,CAAC,OAAO,YAAY,WAAW,OAAO,cAAc;IACzD,MAAM,OAAO;IACb,YAAY,OAAO,cAAc,OAAO,WAAW;IACnD,SAAS,OAAO;IAChB,MAAK;IAGL,OAAO,OAAO,UAAU,YAAY,KAAA,IAAY,OAAO;IACvD,YAAY,OAAO,aAAa,qBAAqB,KAAA;IACrD,QAAQ,OAAO;IACf,SAAQ;IAEP,UAAA,OAAO;GACI,CAAA,IAEd,oBAAC,cAAD;IACE,KAAK,CAAC,OAAO,YAAY,WAAW,OAAO,cAAc;IACzD,SAAS,OAAO;IAChB,MAAK;IACL,OAAO,OAAO;IACd,SAAQ;IACR,aAAY;IAEX,UAAA,OAAO;GACI,CAAA,EAEf;EACF,CAAA,CAAA;;AAET,CAAC;AAED,eAAe,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitOverflowContent.js","names":[],"sources":["../../../lib/components/BitkitOverflowContent/BitkitOverflowContent.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text, type TextProps } from '@chakra-ui/react/text';\nimport { forwardRef, type ReactNode, useState } from 'react';\n\nimport BitkitDialog from '../BitkitDialog/BitkitDialog';\nimport BitkitLinkButton, { type BitkitLinkButtonProps } from '../BitkitLinkButton/BitkitLinkButton';\n\nexport interface BitkitOverflowContentProps extends Omit<BoxProps, 'children' | 'title'> {\n buttonSize?: BitkitLinkButtonProps['size'];\n children: ReactNode;\n previewText?: string;\n textStyle?: TextProps['textStyle'];\n title: string;\n}\n\nconst BitkitOverflowContent = forwardRef<HTMLDivElement, BitkitOverflowContentProps>((props, ref) => {\n const { buttonSize = 'md', children, css, previewText, textStyle, title, ...rest } = props;\n const [open, setOpen] = useState(false);\n const recipe = useSlotRecipe({ key: 'overflowContent' });\n const styles = recipe();\n const preview = previewText || (typeof children === 'string' ? children : 'Click to view content');\n\n return (\n <>\n <Box ref={ref} css={[styles.root, css]} {...rest}>\n <Text css={styles.preview} textStyle={textStyle}>\n {preview}\n </Text>\n <BitkitLinkButton {...styles.action} onClick={() => setOpen(true)} size={buttonSize}>\n {`View ${title.toLowerCase()}`}\n </BitkitLinkButton>\n </Box>\n <BitkitDialog\n open={open}\n size=\"sm\"\n title={title}\n variant=\"overflowContent\"\n onOpenChange={({ open: isOpen }) => setOpen(isOpen)}\n >\n {children}\n </BitkitDialog>\n </>\n );\n});\n\nBitkitOverflowContent.displayName = 'BitkitOverflowContent';\n\nexport default BitkitOverflowContent;\n"],"mappings":";;;;;;;;AAgBA,IAAM,wBAAwB,YAAwD,OAAO,QAAQ;CACnG,MAAM,EAAE,aAAa,MAAM,UAAU,KAAK,aAAa,WAAW,OAAO,GAAG,SAAS;CACrF,MAAM,CAAC,MAAM,WAAW,SAAS,KAAK;CAEtC,MAAM,SADS,cAAc,EAAE,KAAK,kBAAkB,CACvC,CAAA,CAAO;CACtB,MAAM,UAAU,gBAAgB,OAAO,aAAa,WAAW,WAAW;CAE1E,OACE,
|
|
1
|
+
{"version":3,"file":"BitkitOverflowContent.js","names":["_Fragment","BitkitDialog"],"sources":["../../../lib/components/BitkitOverflowContent/BitkitOverflowContent.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text, type TextProps } from '@chakra-ui/react/text';\nimport { forwardRef, type ReactNode, useState } from 'react';\n\nimport BitkitDialog from '../BitkitDialog/BitkitDialog';\nimport BitkitLinkButton, { type BitkitLinkButtonProps } from '../BitkitLinkButton/BitkitLinkButton';\n\nexport interface BitkitOverflowContentProps extends Omit<BoxProps, 'children' | 'title'> {\n buttonSize?: BitkitLinkButtonProps['size'];\n children: ReactNode;\n previewText?: string;\n textStyle?: TextProps['textStyle'];\n title: string;\n}\n\nconst BitkitOverflowContent = forwardRef<HTMLDivElement, BitkitOverflowContentProps>((props, ref) => {\n const { buttonSize = 'md', children, css, previewText, textStyle, title, ...rest } = props;\n const [open, setOpen] = useState(false);\n const recipe = useSlotRecipe({ key: 'overflowContent' });\n const styles = recipe();\n const preview = previewText || (typeof children === 'string' ? children : 'Click to view content');\n\n return (\n <>\n <Box ref={ref} css={[styles.root, css]} {...rest}>\n <Text css={styles.preview} textStyle={textStyle}>\n {preview}\n </Text>\n <BitkitLinkButton {...styles.action} onClick={() => setOpen(true)} size={buttonSize}>\n {`View ${title.toLowerCase()}`}\n </BitkitLinkButton>\n </Box>\n <BitkitDialog\n open={open}\n size=\"sm\"\n title={title}\n variant=\"overflowContent\"\n onOpenChange={({ open: isOpen }) => setOpen(isOpen)}\n >\n {children}\n </BitkitDialog>\n </>\n );\n});\n\nBitkitOverflowContent.displayName = 'BitkitOverflowContent';\n\nexport default BitkitOverflowContent;\n"],"mappings":";;;;;;;;AAgBA,IAAM,wBAAwB,YAAwD,OAAO,QAAQ;CACnG,MAAM,EAAE,aAAa,MAAM,UAAU,KAAK,aAAa,WAAW,OAAO,GAAG,SAAS;CACrF,MAAM,CAAC,MAAM,WAAW,SAAS,KAAK;CAEtC,MAAM,SADS,cAAc,EAAE,KAAK,kBAAkB,CACvC,CAAA,CAAO;CACtB,MAAM,UAAU,gBAAgB,OAAO,aAAa,WAAW,WAAW;CAE1E,OACE,qBAAAA,YAAA,EAAA,UAAA,CACE,qBAAC,KAAD;EAAU;EAAK,KAAK,CAAC,OAAO,MAAM,GAAG;EAAG,GAAI;EAA5C,UAAA,CACE,oBAAC,MAAD;GAAM,KAAK,OAAO;GAAoB;GACnC,UAAA;EACG,CAAA,GACN,oBAAC,kBAAD;GAAkB,GAAI,OAAO;GAAQ,eAAe,QAAQ,IAAI;GAAG,MAAM;GACtE,UAAA,QAAQ,MAAM,YAAY;EACX,CAAA,CACf;CACL,CAAA,GAAA,oBAACC,sBAAD;EACQ;EACN,MAAK;EACE;EACP,SAAQ;EACR,eAAe,EAAE,MAAM,aAAa,QAAQ,MAAM;EAEjD;CACW,CAAA,CACd,EAAA,CAAA;AAEN,CAAC;AAED,sBAAsB,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitPageSidebar.js","names":[],"sources":["../../../lib/components/BitkitPageSidebar/BitkitPageSidebar.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { Separator, type SeparatorProps } from '@chakra-ui/react/separator';\nimport { chakra, type HTMLChakraProps, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef, type KeyboardEvent, type MouseEvent, type ReactNode, type Ref } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\nimport IconChevronLeft from '../../icons/IconChevronLeft';\nimport { type BitkitColorToken } from '../../theme/themeUtils';\nimport useIsTruncated from '../../utilities/useIsTruncated';\nimport { withSubComponents } from '../../utilities/withSubComponents';\nimport BitkitControlButton from '../BitkitControlButton/BitkitControlButton';\nimport BitkitGroupHeading, { type BitkitGroupHeadingProps } from '../BitkitGroupHeading/BitkitGroupHeading';\nimport BitkitOverflowTooltip from '../BitkitOverflowTooltip/BitkitOverflowTooltip';\n\n// The 16 and 24 icons are separate drawings, not one scaled to two sizes, so the breakpoint swap\n// cannot live in the recipe — both are rendered and one is hidden. A `useBreakpointValue` would\n// render a single icon, but it only re-reads on mount: resize a live page across `tablet` and the\n// row resizes underneath an icon that keeps its old size.\nconst showAtDesktop = { display: { base: 'none', tablet: 'block' } };\nconst showAtMobile = { display: { base: 'block', tablet: 'none' } };\n\n// ----- BitkitPageSidebar (Root) -----\n\nexport interface BitkitPageSidebarProps extends BoxProps {\n children: ReactNode;\n}\n\n/**\n * Page-level navigation sidebar. It expects three children, in this order:\n *\n * ```tsx\n * <BitkitPageSidebar>\n * <BitkitPageSidebar.Title>Title</BitkitPageSidebar.Title>\n * <BitkitPageSidebar.Body>\n * <BitkitPageSidebar.Item icon={IconWorkflow}>Workflows</BitkitPageSidebar.Item>\n * </BitkitPageSidebar.Body>\n * <BitkitPageSidebar.Footer>…</BitkitPageSidebar.Footer>\n * </BitkitPageSidebar>\n * ```\n *\n * `Title` and `Footer` are optional. The sidebar scrolls as a single block: when the navigation is\n * taller than the viewport the whole thing — footer included — grows and scrolls with the page,\n * which is why `Body` keeps a minimum gap above the footer so the two blocks never touch.\n *\n * The `<nav>` carries a default `aria-label` so it is not announced as an unnamed landmark. A page\n * with more than one sidebar should name each one — pass your own `aria-label` (or\n * `aria-labelledby`), which overrides the default.\n *\n * It stands at least viewport-tall by default. An embedded panel that should size to its content\n * opts out with `minHeight=\"auto\"`.\n *\n * Below the `tablet` breakpoint it switches to the mobile design on its own — full width, 48px\n * rows, larger icons and labels, a squared-off selection edge. There is no prop for it: a sidebar\n * that narrow is a sidebar filling a phone.\n */\nconst BitkitPageSidebar = forwardRef<HTMLElement, BitkitPageSidebarProps>((props, ref) => {\n const { children, css, ...rest } = props;\n\n const recipe = useSlotRecipe({ key: 'pageSidebar' });\n const styles = recipe();\n\n return (\n <Box ref={ref} aria-label=\"Page navigation\" asChild css={[styles.root, css]} {...rest}>\n <nav>{children}</nav>\n </Box>\n );\n});\n\nBitkitPageSidebar.displayName = 'BitkitPageSidebar';\n\n// ----- BitkitPageSidebar.Item -----\n\ninterface BitkitPageSidebarItemCommonProps {\n badge?: ReactNode;\n /**\n * The item's label. Typed as a string rather than `ReactNode` because the row truncates it with\n * an ellipsis, and the overflow tooltip needs the full text to reveal.\n */\n children: string;\n icon?: BitkitIconComponent;\n /**\n * Marks the item as the current page. Mutually exclusive with `state=\"disabled\"` — you cannot be\n * on a page whose nav item is unavailable — but the two are not type-checked against each other:\n * the combination only ever arrives from a computed `selected`, which no union can catch, and\n * checking it would break the ordinary `selected={item.id === currentId}` mapping. If both do\n * turn up, disabled wins, since that is the one of the two the design actually defines.\n */\n selected?: boolean;\n state?: 'disabled';\n suffixIcon?: BitkitIconComponent;\n}\n\ninterface BitkitPageSidebarItemLinkProps\n extends Omit<HTMLChakraProps<'a'>, 'children'>, BitkitPageSidebarItemCommonProps {\n href: string;\n}\n\ninterface BitkitPageSidebarItemButtonProps\n extends Omit<HTMLChakraProps<'button'>, 'children' | 'disabled'>, BitkitPageSidebarItemCommonProps {\n href?: never;\n}\n\nexport type BitkitPageSidebarItemProps = BitkitPageSidebarItemButtonProps | BitkitPageSidebarItemLinkProps;\n\nconst BitkitPageSidebarItem = forwardRef<HTMLButtonElement | HTMLAnchorElement, BitkitPageSidebarItemProps>(\n (props, ref) => {\n const { badge, children, icon: Icon, selected, state, suffixIcon: SuffixIcon, ...rest } = props;\n\n const isDisabled = state === 'disabled';\n // `selected` and `state=\"disabled\"` are not checked against each other in the types, so this is\n // the single place the overlap is resolved: disabled wins, and the two recipe variants can never\n // both claim the same slot.\n const isSelected = selected === true && !isDisabled;\n\n const recipe = useSlotRecipe({ key: 'pageSidebar' });\n const styles = recipe({ isDisabled, selected: isSelected });\n\n // The design gives neither a selected row nor a disabled one a trailing icon — the desktop\n // (`20014:6498`, `20014:6494`) and mobile (`9221:4417`) items drop it in those states.\n const VisibleSuffixIcon = isSelected || isDisabled ? undefined : SuffixIcon;\n\n const { isTruncated, ref: labelRef } = useIsTruncated<HTMLSpanElement>(children);\n\n const itemContent = (\n <>\n {/* `span`, not the default `div`: in button mode these sit inside a `<button>`, whose\n content model allows phrasing content only. */}\n <Box as=\"span\" css={styles.contentBlock}>\n {Icon && (\n <>\n <Icon css={[styles.itemIcon, showAtDesktop]} size=\"16\" />\n <Icon css={[styles.itemIcon, showAtMobile]} size=\"24\" />\n </>\n )}\n <Text as=\"span\" css={styles.itemLabel} ref={labelRef}>\n {children}\n </Text>\n </Box>\n {badge}\n {VisibleSuffixIcon && (\n <>\n <VisibleSuffixIcon css={[styles.suffixIcon, showAtDesktop]} size=\"16\" />\n <VisibleSuffixIcon css={[styles.suffixIcon, showAtMobile]} size=\"24\" />\n </>\n )}\n {isSelected && <Box as=\"span\" css={styles.selectionMarker} />}\n </>\n );\n\n // The overflow tooltip anchors to the row itself, which is the focusable element: anchored to an\n // inner node it would only ever open on hover, leaving keyboard users unable to read a truncated\n // label. `Tooltip.Trigger` renders `asChild` and composes refs, so the consumer's forwarded ref\n // survives, and the ref measuring the truncation sits on the label further in.\n const withTooltip = (row: ReactNode) => (\n <BitkitOverflowTooltip disabled={!isTruncated} text={children}>\n {row}\n </BitkitOverflowTooltip>\n );\n\n // `chakra.a` / `chakra.button` rather than a named primitive: the item carries its own slot recipe,\n // and Chakra's `Button`/`Link` would layer their own recipe styles on top of it.\n if (rest.href !== undefined) {\n const { className, href, onClick, onKeyDown, ...linkRest } = rest;\n const handleClick = isDisabled\n ? (event: MouseEvent<HTMLAnchorElement>) => {\n event.preventDefault();\n event.stopPropagation();\n }\n : onClick;\n const handleKeyDown = isDisabled\n ? (event: KeyboardEvent<HTMLAnchorElement>) => {\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n event.stopPropagation();\n }\n }\n : onKeyDown;\n\n return withTooltip(\n <chakra.a\n ref={ref as Ref<HTMLAnchorElement>}\n {...linkRest}\n aria-current={isSelected ? 'page' : undefined}\n aria-disabled={isDisabled || undefined}\n className={className ? `group ${className}` : 'group'}\n css={styles.item}\n // Dropping the attribute is what actually disables the link, the way `BitkitLink` and\n // `BitkitControlButton` do it. The handlers below only block `click` and `Enter`/`Space`;\n // a middle click fires `auxclick`, and \"Open link in new tab\" never reaches the page at\n // all, so both would still navigate while an `href` is there to follow.\n href={isDisabled ? undefined : href}\n onClick={handleClick}\n onKeyDown={handleKeyDown}\n >\n {itemContent}\n </chakra.a>,\n );\n }\n\n const { className, href: _href, ...buttonRest } = rest;\n\n return withTooltip(\n <chakra.button\n ref={ref as Ref<HTMLButtonElement>}\n {...buttonRest}\n aria-current={isSelected ? 'page' : undefined}\n className={className ? `group ${className}` : 'group'}\n css={styles.item}\n disabled={isDisabled}\n type=\"button\"\n >\n {itemContent}\n </chakra.button>,\n );\n },\n);\n\nBitkitPageSidebarItem.displayName = 'BitkitPageSidebarItem';\n\n// ----- BitkitPageSidebar.ProgressItem -----\n\nexport interface BitkitPageSidebarProgressItemProps extends Omit<HTMLChakraProps<'button'>, 'children' | 'disabled'> {\n /**\n * Trailing content between the label and the connector — a `BitkitBadge` counting what the stage\n * is waiting on. Sized to itself; the connector takes the rest.\n *\n * The design draws it 20px tall, which is `size=\"xs\"`. The badge arrives as a node, so the\n * component cannot set that for you — a taller one grows the row past its 40px.\n */\n badge?: ReactNode;\n /** The row's label. */\n children: ReactNode;\n /**\n * The status icon. Unlike `Item`, whose icon colour the sidebar owns, this one carries the\n * stage's status, so `iconColor` is the consumer's to set — `selected`, `notRequired` and\n * `state=\"disabled\"` still win over it, since those describe the row rather than the status.\n */\n icon: BitkitIconComponent;\n /**\n * A semantic token for the status the icon is showing. Left out, the icon takes the sidebar's own\n * `icon/secondary` — which is what the design gives a stage whose icon carries no status, such as\n * an approvals step.\n *\n * Narrowed to the `icon/*` and `color/*` tokens, so a name that does not exist is a compile error\n * rather than a colour that silently does not apply. Both families are here because the statuses\n * need both: the design takes success and failure from `icon/*` but in-progress from\n * `color/orange/bold`, which the `icon/*` set has no equivalent of.\n */\n iconColor?: BitkitColorToken<'color' | 'icon'>;\n /**\n * A stage the release does not have to clear. Steps the icon and the label down one level, so the\n * row reads as present but not awaited.\n */\n notRequired?: boolean;\n /** Follows the label after a middle dot — `auto-upload`, `not required`. */\n secondaryText?: string;\n selected?: boolean;\n state?: 'disabled';\n /**\n * Draws the dashed rule that runs from the badge to the trailing edge, tying one stage to the\n * next. The last stage in a list has nothing to tie to, so it goes without.\n */\n withConnector?: boolean;\n}\n\n/**\n * A stage of something that progresses, as a row of the page sidebar — a release running through\n * its steps, and whatever comes to look like it.\n *\n * It is a sibling of `Item` rather than a variant of it: the row reports where a stage stands\n * rather than navigating, so its icon is status-coloured, its label does not grow, and a dashed\n * connector runs to the trailing edge between the stages.\n *\n * Always a `<button>`, and always interactive — it carries the shared row's pointer cursor and\n * hover background, so a row without an `onClick` looks actionable and is not. `Item`'s\n * button-or-anchor union is deliberately not here: a stage is selected within the page it is\n * already on rather than navigated to.\n */\nconst BitkitPageSidebarProgressItem = forwardRef<HTMLButtonElement, BitkitPageSidebarProgressItemProps>(\n (props, ref) => {\n const {\n badge,\n children,\n className,\n css,\n icon: Icon,\n iconColor,\n notRequired,\n secondaryText,\n selected,\n state,\n withConnector,\n ...rest\n } = props;\n\n const isDisabled = state === 'disabled';\n // Disabled is the whole state of the row, so the other two are dropped rather than merged: the\n // recipe resolves a combination in its own order, and a disabled row came out of it carrying\n // the selected icon colour. Nothing about a disabled stage is selected or not-required.\n const isSelected = selected && !isDisabled;\n // And `selected` wins over `notRequired`, which the design decides rather than declaration\n // order: its `selected=yes, notRequired=true` variant draws the selected row's icon and label\n // and keeps `not required` in the secondary text -- which is what dropping this produces.\n const isNotRequired = notRequired && !isDisabled && !isSelected;\n\n const statusColor = isDisabled || isNotRequired || isSelected ? undefined : iconColor;\n\n const recipe = useSlotRecipe({ key: 'pageSidebar' });\n const styles = recipe({ isDisabled, notRequired: isNotRequired, selected: isSelected });\n\n return (\n <chakra.button\n ref={ref}\n {...rest}\n // `step` rather than the `page` an `Item` carries: these are stages of one thing, not\n // separate pages.\n aria-current={isSelected ? 'step' : undefined}\n className={className ? `group ${className}` : 'group'}\n css={[styles.item, styles.progressRow, css]}\n disabled={isDisabled}\n type=\"button\"\n >\n <Box as=\"span\" css={[styles.contentBlock, styles.progressContentBlock]}>\n {/* Two icons, one per size, for the reason `Item` has two -- see `showAtDesktop`.\n The status colour applies while the row is ordinary: `selected`, `notRequired` and\n disabled are states of the row rather than of the status, and the design recolours the\n icon in all three, so the recipe takes it back there. */}\n <Icon color={statusColor} css={[styles.progressIcon, showAtDesktop]} size=\"16\" />\n <Icon color={statusColor} css={[styles.progressIcon, showAtMobile]} size=\"24\" />\n <Box as=\"span\" css={styles.progressTextBlock}>\n <Text as=\"span\" css={styles.progressLabel}>\n {children}\n </Text>\n {secondaryText && (\n <Text as=\"span\" css={styles.progressSecondaryText}>\n {`\\u00b7 ${secondaryText}`}\n </Text>\n )}\n </Box>\n {(badge || withConnector) && (\n <Box as=\"span\" css={styles.progressBlocker}>\n {badge}\n {/* Decorative: it ties the stages together visually and has nothing to separate in\n the button's accessibility tree. */}\n {withConnector && <Separator aria-hidden css={styles.progressConnector} />}\n </Box>\n )}\n </Box>\n {isSelected && <Box as=\"span\" css={styles.selectionMarker} />}\n </chakra.button>\n );\n },\n);\n\nBitkitPageSidebarProgressItem.displayName = 'BitkitPageSidebarProgressItem';\n\n// ----- BitkitPageSidebar.Title -----\n\ninterface BitkitPageSidebarTitleCommonProps extends BoxProps {\n backLabel?: string;\n children: ReactNode;\n}\n\ninterface BitkitPageSidebarTitleLinkProps extends BitkitPageSidebarTitleCommonProps {\n backHref: string;\n onBackClick?: never;\n}\n\ninterface BitkitPageSidebarTitleButtonProps extends BitkitPageSidebarTitleCommonProps {\n backHref?: never;\n onBackClick: () => void;\n}\n\ninterface BitkitPageSidebarTitlePlainProps extends BitkitPageSidebarTitleCommonProps {\n backHref?: never;\n onBackClick?: never;\n}\n\nexport type BitkitPageSidebarTitleProps =\n | BitkitPageSidebarTitleButtonProps\n | BitkitPageSidebarTitleLinkProps\n | BitkitPageSidebarTitlePlainProps;\n\nconst BitkitPageSidebarTitle = forwardRef<HTMLDivElement, BitkitPageSidebarTitleProps>((props, ref) => {\n const { backHref, backLabel = 'Back', children, css, onBackClick, ...rest } = props;\n\n const hasBack = backHref !== undefined || onBackClick !== undefined;\n\n const recipe = useSlotRecipe({ key: 'pageSidebar' });\n const styles = recipe({ hasBack });\n\n return (\n <Box ref={ref} css={[styles.title, css]} {...rest}>\n <Box css={styles.titleBlock}>\n {/* The label tooltip opens to the right. Its default `top` has nowhere to go here — the\n button sits at the very top of the sidebar, so the tooltip jams against the viewport\n edge and covers the header instead of flipping. */}\n {hasBack &&\n (backHref !== undefined ? (\n <BitkitControlButton\n href={backHref}\n icon={IconChevronLeft}\n label={backLabel}\n size=\"xs\"\n tooltipProps={{ placement: 'right' }}\n />\n ) : (\n <BitkitControlButton\n icon={IconChevronLeft}\n label={backLabel}\n onClick={onBackClick}\n size=\"xs\"\n tooltipProps={{ placement: 'right' }}\n />\n ))}\n <Text as=\"span\" css={styles.titleText}>\n {children}\n </Text>\n </Box>\n </Box>\n );\n});\n\nBitkitPageSidebarTitle.displayName = 'BitkitPageSidebarTitle';\n\n// ----- BitkitPageSidebar.Body -----\n\nexport interface BitkitPageSidebarBodyProps extends BoxProps {\n children: ReactNode;\n}\n\n/**\n * Holds the navigation items. It absorbs the space left between `Title` and `Footer`, so the footer\n * sits at the bottom of the viewport on a short navigation, and keeps a minimum gap above the\n * footer so the two blocks stay visually separate however long the list gets.\n */\nconst BitkitPageSidebarBody = forwardRef<HTMLDivElement, BitkitPageSidebarBodyProps>((props, ref) => {\n const { children, css, ...rest } = props;\n\n const recipe = useSlotRecipe({ key: 'pageSidebar' });\n const styles = recipe();\n\n return (\n <Box ref={ref} css={[styles.body, css]} {...rest}>\n {children}\n </Box>\n );\n});\n\nBitkitPageSidebarBody.displayName = 'BitkitPageSidebarBody';\n\n// ----- BitkitPageSidebar.Footer -----\n\nexport interface BitkitPageSidebarFooterProps extends BoxProps {\n children: ReactNode;\n}\n\nconst BitkitPageSidebarFooter = forwardRef<HTMLDivElement, BitkitPageSidebarFooterProps>((props, ref) => {\n const { children, css, ...rest } = props;\n\n const recipe = useSlotRecipe({ key: 'pageSidebar' });\n const styles = recipe();\n\n return (\n <Box ref={ref} css={[styles.footer, css]} {...rest}>\n {children}\n </Box>\n );\n});\n\nBitkitPageSidebarFooter.displayName = 'BitkitPageSidebarFooter';\n\n// ----- BitkitPageSidebar.Project -----\n\nexport interface BitkitPageSidebarProjectProps extends BoxProps {\n label: string;\n value: string;\n}\n\nconst BitkitPageSidebarProject = forwardRef<HTMLDivElement, BitkitPageSidebarProjectProps>((props, ref) => {\n const { css, label, value, ...rest } = props;\n\n const recipe = useSlotRecipe({ key: 'pageSidebar' });\n const styles = recipe();\n\n const { isTruncated, ref: valueRef } = useIsTruncated<HTMLSpanElement>(value);\n\n return (\n <Box ref={ref} css={[styles.project, css]} {...rest}>\n <Text as=\"span\" css={styles.projectLabel}>\n {label}\n </Text>\n {/* Wrapper for the same reason as in Item: the trigger cannot be the element being measured. */}\n <BitkitOverflowTooltip disabled={!isTruncated} text={value}>\n <Box css={styles.projectValueWrapper}>\n <Text as=\"span\" css={styles.projectValue} ref={valueRef}>\n {value}\n </Text>\n </Box>\n </BitkitOverflowTooltip>\n </Box>\n );\n});\n\nBitkitPageSidebarProject.displayName = 'BitkitPageSidebarProject';\n\n// ----- BitkitPageSidebar.GroupHeading -----\n\nexport type BitkitPageSidebarGroupHeadingProps = BitkitGroupHeadingProps;\n\nconst BitkitPageSidebarGroupHeading = forwardRef<HTMLDivElement, BitkitPageSidebarGroupHeadingProps>((props, ref) => {\n return <BitkitGroupHeading ref={ref} paddingBlockEnd=\"8\" paddingBlockStart=\"16\" paddingInline=\"24\" {...props} />;\n});\n\nBitkitPageSidebarGroupHeading.displayName = 'BitkitPageSidebarGroupHeading';\n\n// ----- BitkitPageSidebar.Divider -----\n\nexport type BitkitPageSidebarDividerProps = SeparatorProps;\n\nconst BitkitPageSidebarDivider = forwardRef<HTMLDivElement, BitkitPageSidebarDividerProps>((props, ref) => {\n const { css, ...rest } = props;\n\n const recipe = useSlotRecipe({ key: 'pageSidebar' });\n const styles = recipe();\n\n return <Separator ref={ref} css={[styles.divider, css]} {...rest} />;\n});\n\nBitkitPageSidebarDivider.displayName = 'BitkitPageSidebarDivider';\n\nexport default withSubComponents(BitkitPageSidebar, {\n Body: BitkitPageSidebarBody,\n Divider: BitkitPageSidebarDivider,\n Footer: BitkitPageSidebarFooter,\n GroupHeading: BitkitPageSidebarGroupHeading,\n Item: BitkitPageSidebarItem,\n ProgressItem: BitkitPageSidebarProgressItem,\n Project: BitkitPageSidebarProject,\n Title: BitkitPageSidebarTitle,\n});\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"BitkitPageSidebar.js","names":["_Fragment"],"sources":["../../../lib/components/BitkitPageSidebar/BitkitPageSidebar.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { Separator, type SeparatorProps } from '@chakra-ui/react/separator';\nimport { chakra, type HTMLChakraProps, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef, type KeyboardEvent, type MouseEvent, type ReactNode, type Ref } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\nimport IconChevronLeft from '../../icons/IconChevronLeft';\nimport { type BitkitColorToken } from '../../theme/themeUtils';\nimport useIsTruncated from '../../utilities/useIsTruncated';\nimport { withSubComponents } from '../../utilities/withSubComponents';\nimport BitkitControlButton from '../BitkitControlButton/BitkitControlButton';\nimport BitkitGroupHeading, { type BitkitGroupHeadingProps } from '../BitkitGroupHeading/BitkitGroupHeading';\nimport BitkitOverflowTooltip from '../BitkitOverflowTooltip/BitkitOverflowTooltip';\n\n// The 16 and 24 icons are separate drawings, not one scaled to two sizes, so the breakpoint swap\n// cannot live in the recipe — both are rendered and one is hidden. A `useBreakpointValue` would\n// render a single icon, but it only re-reads on mount: resize a live page across `tablet` and the\n// row resizes underneath an icon that keeps its old size.\nconst showAtDesktop = { display: { base: 'none', tablet: 'block' } };\nconst showAtMobile = { display: { base: 'block', tablet: 'none' } };\n\n// ----- BitkitPageSidebar (Root) -----\n\nexport interface BitkitPageSidebarProps extends BoxProps {\n children: ReactNode;\n}\n\n/**\n * Page-level navigation sidebar. It expects three children, in this order:\n *\n * ```tsx\n * <BitkitPageSidebar>\n * <BitkitPageSidebar.Title>Title</BitkitPageSidebar.Title>\n * <BitkitPageSidebar.Body>\n * <BitkitPageSidebar.Item icon={IconWorkflow}>Workflows</BitkitPageSidebar.Item>\n * </BitkitPageSidebar.Body>\n * <BitkitPageSidebar.Footer>…</BitkitPageSidebar.Footer>\n * </BitkitPageSidebar>\n * ```\n *\n * `Title` and `Footer` are optional. The sidebar scrolls as a single block: when the navigation is\n * taller than the viewport the whole thing — footer included — grows and scrolls with the page,\n * which is why `Body` keeps a minimum gap above the footer so the two blocks never touch.\n *\n * The `<nav>` carries a default `aria-label` so it is not announced as an unnamed landmark. A page\n * with more than one sidebar should name each one — pass your own `aria-label` (or\n * `aria-labelledby`), which overrides the default.\n *\n * It stands at least viewport-tall by default. An embedded panel that should size to its content\n * opts out with `minHeight=\"auto\"`.\n *\n * Below the `tablet` breakpoint it switches to the mobile design on its own — full width, 48px\n * rows, larger icons and labels, a squared-off selection edge. There is no prop for it: a sidebar\n * that narrow is a sidebar filling a phone.\n */\nconst BitkitPageSidebar = forwardRef<HTMLElement, BitkitPageSidebarProps>((props, ref) => {\n const { children, css, ...rest } = props;\n\n const recipe = useSlotRecipe({ key: 'pageSidebar' });\n const styles = recipe();\n\n return (\n <Box ref={ref} aria-label=\"Page navigation\" asChild css={[styles.root, css]} {...rest}>\n <nav>{children}</nav>\n </Box>\n );\n});\n\nBitkitPageSidebar.displayName = 'BitkitPageSidebar';\n\n// ----- BitkitPageSidebar.Item -----\n\ninterface BitkitPageSidebarItemCommonProps {\n badge?: ReactNode;\n /**\n * The item's label. Typed as a string rather than `ReactNode` because the row truncates it with\n * an ellipsis, and the overflow tooltip needs the full text to reveal.\n */\n children: string;\n icon?: BitkitIconComponent;\n /**\n * Marks the item as the current page. Mutually exclusive with `state=\"disabled\"` — you cannot be\n * on a page whose nav item is unavailable — but the two are not type-checked against each other:\n * the combination only ever arrives from a computed `selected`, which no union can catch, and\n * checking it would break the ordinary `selected={item.id === currentId}` mapping. If both do\n * turn up, disabled wins, since that is the one of the two the design actually defines.\n */\n selected?: boolean;\n state?: 'disabled';\n suffixIcon?: BitkitIconComponent;\n}\n\ninterface BitkitPageSidebarItemLinkProps\n extends Omit<HTMLChakraProps<'a'>, 'children'>, BitkitPageSidebarItemCommonProps {\n href: string;\n}\n\ninterface BitkitPageSidebarItemButtonProps\n extends Omit<HTMLChakraProps<'button'>, 'children' | 'disabled'>, BitkitPageSidebarItemCommonProps {\n href?: never;\n}\n\nexport type BitkitPageSidebarItemProps = BitkitPageSidebarItemButtonProps | BitkitPageSidebarItemLinkProps;\n\nconst BitkitPageSidebarItem = forwardRef<HTMLButtonElement | HTMLAnchorElement, BitkitPageSidebarItemProps>(\n (props, ref) => {\n const { badge, children, icon: Icon, selected, state, suffixIcon: SuffixIcon, ...rest } = props;\n\n const isDisabled = state === 'disabled';\n // `selected` and `state=\"disabled\"` are not checked against each other in the types, so this is\n // the single place the overlap is resolved: disabled wins, and the two recipe variants can never\n // both claim the same slot.\n const isSelected = selected === true && !isDisabled;\n\n const recipe = useSlotRecipe({ key: 'pageSidebar' });\n const styles = recipe({ isDisabled, selected: isSelected });\n\n // The design gives neither a selected row nor a disabled one a trailing icon — the desktop\n // (`20014:6498`, `20014:6494`) and mobile (`9221:4417`) items drop it in those states.\n const VisibleSuffixIcon = isSelected || isDisabled ? undefined : SuffixIcon;\n\n const { isTruncated, ref: labelRef } = useIsTruncated<HTMLSpanElement>(children);\n\n const itemContent = (\n <>\n {/* `span`, not the default `div`: in button mode these sit inside a `<button>`, whose\n content model allows phrasing content only. */}\n <Box as=\"span\" css={styles.contentBlock}>\n {Icon && (\n <>\n <Icon css={[styles.itemIcon, showAtDesktop]} size=\"16\" />\n <Icon css={[styles.itemIcon, showAtMobile]} size=\"24\" />\n </>\n )}\n <Text as=\"span\" css={styles.itemLabel} ref={labelRef}>\n {children}\n </Text>\n </Box>\n {badge}\n {VisibleSuffixIcon && (\n <>\n <VisibleSuffixIcon css={[styles.suffixIcon, showAtDesktop]} size=\"16\" />\n <VisibleSuffixIcon css={[styles.suffixIcon, showAtMobile]} size=\"24\" />\n </>\n )}\n {isSelected && <Box as=\"span\" css={styles.selectionMarker} />}\n </>\n );\n\n // The overflow tooltip anchors to the row itself, which is the focusable element: anchored to an\n // inner node it would only ever open on hover, leaving keyboard users unable to read a truncated\n // label. `Tooltip.Trigger` renders `asChild` and composes refs, so the consumer's forwarded ref\n // survives, and the ref measuring the truncation sits on the label further in.\n const withTooltip = (row: ReactNode) => (\n <BitkitOverflowTooltip disabled={!isTruncated} text={children}>\n {row}\n </BitkitOverflowTooltip>\n );\n\n // `chakra.a` / `chakra.button` rather than a named primitive: the item carries its own slot recipe,\n // and Chakra's `Button`/`Link` would layer their own recipe styles on top of it.\n if (rest.href !== undefined) {\n const { className, href, onClick, onKeyDown, ...linkRest } = rest;\n const handleClick = isDisabled\n ? (event: MouseEvent<HTMLAnchorElement>) => {\n event.preventDefault();\n event.stopPropagation();\n }\n : onClick;\n const handleKeyDown = isDisabled\n ? (event: KeyboardEvent<HTMLAnchorElement>) => {\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n event.stopPropagation();\n }\n }\n : onKeyDown;\n\n return withTooltip(\n <chakra.a\n ref={ref as Ref<HTMLAnchorElement>}\n {...linkRest}\n aria-current={isSelected ? 'page' : undefined}\n aria-disabled={isDisabled || undefined}\n className={className ? `group ${className}` : 'group'}\n css={styles.item}\n // Dropping the attribute is what actually disables the link, the way `BitkitLink` and\n // `BitkitControlButton` do it. The handlers below only block `click` and `Enter`/`Space`;\n // a middle click fires `auxclick`, and \"Open link in new tab\" never reaches the page at\n // all, so both would still navigate while an `href` is there to follow.\n href={isDisabled ? undefined : href}\n onClick={handleClick}\n onKeyDown={handleKeyDown}\n >\n {itemContent}\n </chakra.a>,\n );\n }\n\n const { className, href: _href, ...buttonRest } = rest;\n\n return withTooltip(\n <chakra.button\n ref={ref as Ref<HTMLButtonElement>}\n {...buttonRest}\n aria-current={isSelected ? 'page' : undefined}\n className={className ? `group ${className}` : 'group'}\n css={styles.item}\n disabled={isDisabled}\n type=\"button\"\n >\n {itemContent}\n </chakra.button>,\n );\n },\n);\n\nBitkitPageSidebarItem.displayName = 'BitkitPageSidebarItem';\n\n// ----- BitkitPageSidebar.ProgressItem -----\n\nexport interface BitkitPageSidebarProgressItemProps extends Omit<HTMLChakraProps<'button'>, 'children' | 'disabled'> {\n /**\n * Trailing content between the label and the connector — a `BitkitBadge` counting what the stage\n * is waiting on. Sized to itself; the connector takes the rest.\n *\n * The design draws it 20px tall, which is `size=\"xs\"`. The badge arrives as a node, so the\n * component cannot set that for you — a taller one grows the row past its 40px.\n */\n badge?: ReactNode;\n /** The row's label. */\n children: ReactNode;\n /**\n * The status icon. Unlike `Item`, whose icon colour the sidebar owns, this one carries the\n * stage's status, so `iconColor` is the consumer's to set — `selected`, `notRequired` and\n * `state=\"disabled\"` still win over it, since those describe the row rather than the status.\n */\n icon: BitkitIconComponent;\n /**\n * A semantic token for the status the icon is showing. Left out, the icon takes the sidebar's own\n * `icon/secondary` — which is what the design gives a stage whose icon carries no status, such as\n * an approvals step.\n *\n * Narrowed to the `icon/*` and `color/*` tokens, so a name that does not exist is a compile error\n * rather than a colour that silently does not apply. Both families are here because the statuses\n * need both: the design takes success and failure from `icon/*` but in-progress from\n * `color/orange/bold`, which the `icon/*` set has no equivalent of.\n */\n iconColor?: BitkitColorToken<'color' | 'icon'>;\n /**\n * A stage the release does not have to clear. Steps the icon and the label down one level, so the\n * row reads as present but not awaited.\n */\n notRequired?: boolean;\n /** Follows the label after a middle dot — `auto-upload`, `not required`. */\n secondaryText?: string;\n selected?: boolean;\n state?: 'disabled';\n /**\n * Draws the dashed rule that runs from the badge to the trailing edge, tying one stage to the\n * next. The last stage in a list has nothing to tie to, so it goes without.\n */\n withConnector?: boolean;\n}\n\n/**\n * A stage of something that progresses, as a row of the page sidebar — a release running through\n * its steps, and whatever comes to look like it.\n *\n * It is a sibling of `Item` rather than a variant of it: the row reports where a stage stands\n * rather than navigating, so its icon is status-coloured, its label does not grow, and a dashed\n * connector runs to the trailing edge between the stages.\n *\n * Always a `<button>`, and always interactive — it carries the shared row's pointer cursor and\n * hover background, so a row without an `onClick` looks actionable and is not. `Item`'s\n * button-or-anchor union is deliberately not here: a stage is selected within the page it is\n * already on rather than navigated to.\n */\nconst BitkitPageSidebarProgressItem = forwardRef<HTMLButtonElement, BitkitPageSidebarProgressItemProps>(\n (props, ref) => {\n const {\n badge,\n children,\n className,\n css,\n icon: Icon,\n iconColor,\n notRequired,\n secondaryText,\n selected,\n state,\n withConnector,\n ...rest\n } = props;\n\n const isDisabled = state === 'disabled';\n // Disabled is the whole state of the row, so the other two are dropped rather than merged: the\n // recipe resolves a combination in its own order, and a disabled row came out of it carrying\n // the selected icon colour. Nothing about a disabled stage is selected or not-required.\n const isSelected = selected && !isDisabled;\n // And `selected` wins over `notRequired`, which the design decides rather than declaration\n // order: its `selected=yes, notRequired=true` variant draws the selected row's icon and label\n // and keeps `not required` in the secondary text -- which is what dropping this produces.\n const isNotRequired = notRequired && !isDisabled && !isSelected;\n\n const statusColor = isDisabled || isNotRequired || isSelected ? undefined : iconColor;\n\n const recipe = useSlotRecipe({ key: 'pageSidebar' });\n const styles = recipe({ isDisabled, notRequired: isNotRequired, selected: isSelected });\n\n return (\n <chakra.button\n ref={ref}\n {...rest}\n // `step` rather than the `page` an `Item` carries: these are stages of one thing, not\n // separate pages.\n aria-current={isSelected ? 'step' : undefined}\n className={className ? `group ${className}` : 'group'}\n css={[styles.item, styles.progressRow, css]}\n disabled={isDisabled}\n type=\"button\"\n >\n <Box as=\"span\" css={[styles.contentBlock, styles.progressContentBlock]}>\n {/* Two icons, one per size, for the reason `Item` has two -- see `showAtDesktop`.\n The status colour applies while the row is ordinary: `selected`, `notRequired` and\n disabled are states of the row rather than of the status, and the design recolours the\n icon in all three, so the recipe takes it back there. */}\n <Icon color={statusColor} css={[styles.progressIcon, showAtDesktop]} size=\"16\" />\n <Icon color={statusColor} css={[styles.progressIcon, showAtMobile]} size=\"24\" />\n <Box as=\"span\" css={styles.progressTextBlock}>\n <Text as=\"span\" css={styles.progressLabel}>\n {children}\n </Text>\n {secondaryText && (\n <Text as=\"span\" css={styles.progressSecondaryText}>\n {`\\u00b7 ${secondaryText}`}\n </Text>\n )}\n </Box>\n {(badge || withConnector) && (\n <Box as=\"span\" css={styles.progressBlocker}>\n {badge}\n {/* Decorative: it ties the stages together visually and has nothing to separate in\n the button's accessibility tree. */}\n {withConnector && <Separator aria-hidden css={styles.progressConnector} />}\n </Box>\n )}\n </Box>\n {isSelected && <Box as=\"span\" css={styles.selectionMarker} />}\n </chakra.button>\n );\n },\n);\n\nBitkitPageSidebarProgressItem.displayName = 'BitkitPageSidebarProgressItem';\n\n// ----- BitkitPageSidebar.Title -----\n\ninterface BitkitPageSidebarTitleCommonProps extends BoxProps {\n backLabel?: string;\n children: ReactNode;\n}\n\ninterface BitkitPageSidebarTitleLinkProps extends BitkitPageSidebarTitleCommonProps {\n backHref: string;\n onBackClick?: never;\n}\n\ninterface BitkitPageSidebarTitleButtonProps extends BitkitPageSidebarTitleCommonProps {\n backHref?: never;\n onBackClick: () => void;\n}\n\ninterface BitkitPageSidebarTitlePlainProps extends BitkitPageSidebarTitleCommonProps {\n backHref?: never;\n onBackClick?: never;\n}\n\nexport type BitkitPageSidebarTitleProps =\n BitkitPageSidebarTitleButtonProps | BitkitPageSidebarTitleLinkProps | BitkitPageSidebarTitlePlainProps;\n\nconst BitkitPageSidebarTitle = forwardRef<HTMLDivElement, BitkitPageSidebarTitleProps>((props, ref) => {\n const { backHref, backLabel = 'Back', children, css, onBackClick, ...rest } = props;\n\n const hasBack = backHref !== undefined || onBackClick !== undefined;\n\n const recipe = useSlotRecipe({ key: 'pageSidebar' });\n const styles = recipe({ hasBack });\n\n return (\n <Box ref={ref} css={[styles.title, css]} {...rest}>\n <Box css={styles.titleBlock}>\n {/* The label tooltip opens to the right. Its default `top` has nowhere to go here — the\n button sits at the very top of the sidebar, so the tooltip jams against the viewport\n edge and covers the header instead of flipping. */}\n {hasBack &&\n (backHref !== undefined ? (\n <BitkitControlButton\n href={backHref}\n icon={IconChevronLeft}\n label={backLabel}\n size=\"xs\"\n tooltipProps={{ placement: 'right' }}\n />\n ) : (\n <BitkitControlButton\n icon={IconChevronLeft}\n label={backLabel}\n onClick={onBackClick}\n size=\"xs\"\n tooltipProps={{ placement: 'right' }}\n />\n ))}\n <Text as=\"span\" css={styles.titleText}>\n {children}\n </Text>\n </Box>\n </Box>\n );\n});\n\nBitkitPageSidebarTitle.displayName = 'BitkitPageSidebarTitle';\n\n// ----- BitkitPageSidebar.Body -----\n\nexport interface BitkitPageSidebarBodyProps extends BoxProps {\n children: ReactNode;\n}\n\n/**\n * Holds the navigation items. It absorbs the space left between `Title` and `Footer`, so the footer\n * sits at the bottom of the viewport on a short navigation, and keeps a minimum gap above the\n * footer so the two blocks stay visually separate however long the list gets.\n */\nconst BitkitPageSidebarBody = forwardRef<HTMLDivElement, BitkitPageSidebarBodyProps>((props, ref) => {\n const { children, css, ...rest } = props;\n\n const recipe = useSlotRecipe({ key: 'pageSidebar' });\n const styles = recipe();\n\n return (\n <Box ref={ref} css={[styles.body, css]} {...rest}>\n {children}\n </Box>\n );\n});\n\nBitkitPageSidebarBody.displayName = 'BitkitPageSidebarBody';\n\n// ----- BitkitPageSidebar.Footer -----\n\nexport interface BitkitPageSidebarFooterProps extends BoxProps {\n children: ReactNode;\n}\n\nconst BitkitPageSidebarFooter = forwardRef<HTMLDivElement, BitkitPageSidebarFooterProps>((props, ref) => {\n const { children, css, ...rest } = props;\n\n const recipe = useSlotRecipe({ key: 'pageSidebar' });\n const styles = recipe();\n\n return (\n <Box ref={ref} css={[styles.footer, css]} {...rest}>\n {children}\n </Box>\n );\n});\n\nBitkitPageSidebarFooter.displayName = 'BitkitPageSidebarFooter';\n\n// ----- BitkitPageSidebar.Project -----\n\nexport interface BitkitPageSidebarProjectProps extends BoxProps {\n label: string;\n value: string;\n}\n\nconst BitkitPageSidebarProject = forwardRef<HTMLDivElement, BitkitPageSidebarProjectProps>((props, ref) => {\n const { css, label, value, ...rest } = props;\n\n const recipe = useSlotRecipe({ key: 'pageSidebar' });\n const styles = recipe();\n\n const { isTruncated, ref: valueRef } = useIsTruncated<HTMLSpanElement>(value);\n\n return (\n <Box ref={ref} css={[styles.project, css]} {...rest}>\n <Text as=\"span\" css={styles.projectLabel}>\n {label}\n </Text>\n {/* Wrapper for the same reason as in Item: the trigger cannot be the element being measured. */}\n <BitkitOverflowTooltip disabled={!isTruncated} text={value}>\n <Box css={styles.projectValueWrapper}>\n <Text as=\"span\" css={styles.projectValue} ref={valueRef}>\n {value}\n </Text>\n </Box>\n </BitkitOverflowTooltip>\n </Box>\n );\n});\n\nBitkitPageSidebarProject.displayName = 'BitkitPageSidebarProject';\n\n// ----- BitkitPageSidebar.GroupHeading -----\n\nexport type BitkitPageSidebarGroupHeadingProps = BitkitGroupHeadingProps;\n\nconst BitkitPageSidebarGroupHeading = forwardRef<HTMLDivElement, BitkitPageSidebarGroupHeadingProps>((props, ref) => {\n return <BitkitGroupHeading ref={ref} paddingBlockEnd=\"8\" paddingBlockStart=\"16\" paddingInline=\"24\" {...props} />;\n});\n\nBitkitPageSidebarGroupHeading.displayName = 'BitkitPageSidebarGroupHeading';\n\n// ----- BitkitPageSidebar.Divider -----\n\nexport type BitkitPageSidebarDividerProps = SeparatorProps;\n\nconst BitkitPageSidebarDivider = forwardRef<HTMLDivElement, BitkitPageSidebarDividerProps>((props, ref) => {\n const { css, ...rest } = props;\n\n const recipe = useSlotRecipe({ key: 'pageSidebar' });\n const styles = recipe();\n\n return <Separator ref={ref} css={[styles.divider, css]} {...rest} />;\n});\n\nBitkitPageSidebarDivider.displayName = 'BitkitPageSidebarDivider';\n\nexport default withSubComponents(BitkitPageSidebar, {\n Body: BitkitPageSidebarBody,\n Divider: BitkitPageSidebarDivider,\n Footer: BitkitPageSidebarFooter,\n GroupHeading: BitkitPageSidebarGroupHeading,\n Item: BitkitPageSidebarItem,\n ProgressItem: BitkitPageSidebarProgressItem,\n Project: BitkitPageSidebarProject,\n Title: BitkitPageSidebarTitle,\n});\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitPagination.js","names":[],"sources":["../../../lib/components/BitkitPagination/BitkitPagination.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { Separator } from '@chakra-ui/react/separator';\nimport { Skeleton } from '@chakra-ui/react/skeleton';\nimport { chakra, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef, useMemo } from 'react';\n\nimport { IconChevronLeft, IconChevronRight } from '../../icons';\nimport formatLabel from '../../utilities/formatLabel';\nimport BitkitIconButton from '../BitkitIconButton/BitkitIconButton';\nimport BitkitNativeSelect from '../BitkitNativeSelect/BitkitNativeSelect';\n\nexport interface BitkitPaginationLabels {\n items?: string;\n itemsPerPage?: string;\n nextPage?: string;\n pages?: string;\n previousPage?: string;\n}\n\nconst DEFAULT_LABELS: Required<BitkitPaginationLabels> = {\n items: '{start}\\u2013{end} of {total} items',\n itemsPerPage: 'Items per page:',\n nextPage: 'Next page',\n pages: 'of {totalPages} pages',\n previousPage: 'Previous page',\n};\n\nexport interface BitkitPaginationProps extends Omit<BoxProps, 'colorPalette' | 'page'> {\n labels?: BitkitPaginationLabels;\n onPageChange?: (page: number) => void;\n onPageSizeChange?: (pageSize: number) => void;\n page: number;\n pageSize: number;\n pageSizeOptions?: number[];\n state?: 'skeleton';\n totalItems: number;\n variant?: 'card' | 'page' | 'table';\n}\n\nconst BitkitPagination = forwardRef<HTMLDivElement, BitkitPaginationProps>((props, ref) => {\n const {\n css,\n labels: labelsProp,\n onPageChange,\n onPageSizeChange,\n page,\n pageSize,\n pageSizeOptions = [10, 25, 50],\n state,\n totalItems,\n variant = 'table',\n ...rest\n } = props;\n\n const recipe = useSlotRecipe({ key: 'pagination' });\n const styles = recipe({ variant });\n\n const safePageSize = Math.max(1, pageSize);\n const totalPages = Math.max(1, Math.ceil(totalItems / safePageSize));\n const safePage = Math.min(Math.max(1, page), totalPages);\n const start = totalItems === 0 ? 0 : (safePage - 1) * safePageSize + 1;\n const end = Math.min(safePage * safePageSize, totalItems);\n const isFirstPage = safePage <= 1;\n const isLastPage = safePage >= totalPages;\n const isSkeleton = state === 'skeleton';\n const showItemsPerPage = onPageSizeChange !== undefined;\n\n const values = { end, start, total: totalItems, totalPages };\n const labels = Object.fromEntries(\n Object.entries({ ...DEFAULT_LABELS, ...labelsProp }).map(([k, v]) => [k, formatLabel(v, values)]),\n ) as Required<BitkitPaginationLabels>;\n\n const pageSizeItems = useMemo(\n () => pageSizeOptions.map((opt) => ({ label: String(opt), value: String(opt) })),\n [pageSizeOptions],\n );\n\n const pageItems = useMemo(\n () => Array.from({ length: totalPages }, (_, i) => ({ label: String(i + 1), value: String(i + 1) })),\n [totalPages],\n );\n\n return (\n <Box ref={ref} css={[styles.root, css]} {...rest}>\n <chakra.div css={styles.itemsBlock}>\n {showItemsPerPage && (\n <>\n <chakra.span css={styles.text}>{labels.itemsPerPage}</chakra.span>\n <BitkitNativeSelect\n css={styles.itemsSelect}\n onChange={(e) => onPageSizeChange?.(Number(e.target.value))}\n size=\"md\"\n state={isSkeleton ? 'disabled' : undefined}\n value={String(safePageSize)}\n >\n {pageSizeItems.map((opt) => (\n <option key={opt.value} value={opt.value}>\n {opt.label}\n </option>\n ))}\n </BitkitNativeSelect>\n <Separator alignSelf=\"stretch\" borderColor=\"border/minimal\" marginInline=\"8\" orientation=\"vertical\" />\n </>\n )}\n {isSkeleton ? <Skeleton height=\"20\" width=\"96\" /> : <chakra.span css={styles.text}>{labels.items}</chakra.span>}\n </chakra.div>\n\n <chakra.div css={styles.pageBlock}>\n <Separator alignSelf=\"stretch\" borderColor=\"border/minimal\" marginInline=\"8\" orientation=\"vertical\" />\n <BitkitNativeSelect\n css={styles.pageSelect}\n onChange={(e) => onPageChange?.(Number(e.target.value))}\n size=\"md\"\n state={isSkeleton ? 'disabled' : undefined}\n value={String(safePage)}\n >\n {pageItems.map((opt) => (\n <option key={opt.value} value={opt.value}>\n {opt.label}\n </option>\n ))}\n </BitkitNativeSelect>\n {isSkeleton ? <Skeleton height=\"20\" width=\"64\" /> : <chakra.span css={styles.text}>{labels.pages}</chakra.span>}\n <BitkitIconButton\n icon={IconChevronLeft}\n label={labels.previousPage}\n marginInlineStart=\"8\"\n onClick={() => onPageChange?.(safePage - 1)}\n size=\"md\"\n state={isFirstPage || isSkeleton ? 'disabled' : undefined}\n variant=\"secondary\"\n />\n <BitkitIconButton\n icon={IconChevronRight}\n label={labels.nextPage}\n onClick={() => onPageChange?.(safePage + 1)}\n size=\"md\"\n state={isLastPage || isSkeleton ? 'disabled' : undefined}\n variant=\"secondary\"\n />\n </chakra.div>\n </Box>\n );\n});\n\nBitkitPagination.displayName = 'BitkitPagination';\n\nexport default BitkitPagination;\n"],"mappings":";;;;;;;;;;;;AAmBA,IAAM,iBAAmD;CACvD,OAAO;CACP,cAAc;CACd,UAAU;CACV,OAAO;CACP,cAAc;AAChB;AAcA,IAAM,mBAAmB,YAAmD,OAAO,QAAQ;CACzF,MAAM,EACJ,KACA,QAAQ,YACR,cACA,kBACA,MACA,UACA,kBAAkB;EAAC;EAAI;EAAI;CAAE,GAC7B,OACA,YACA,UAAU,SACV,GAAG,SACD;CAGJ,MAAM,SADS,cAAc,EAAE,KAAK,aAAa,CAClC,CAAA,CAAO,EAAE,QAAQ,CAAC;CAEjC,MAAM,eAAe,KAAK,IAAI,GAAG,QAAQ;CACzC,MAAM,aAAa,KAAK,IAAI,GAAG,KAAK,KAAK,aAAa,YAAY,CAAC;CACnE,MAAM,WAAW,KAAK,IAAI,KAAK,IAAI,GAAG,IAAI,GAAG,UAAU;CACvD,MAAM,QAAQ,eAAe,IAAI,KAAK,WAAW,KAAK,eAAe;CACrE,MAAM,MAAM,KAAK,IAAI,WAAW,cAAc,UAAU;CACxD,MAAM,cAAc,YAAY;CAChC,MAAM,aAAa,YAAY;CAC/B,MAAM,aAAa,UAAU;CAC7B,MAAM,mBAAmB,qBAAqB,KAAA;CAE9C,MAAM,SAAS;EAAE;EAAK;EAAO,OAAO;EAAY;CAAW;CAC3D,MAAM,SAAS,OAAO,YACpB,OAAO,QAAQ;EAAE,GAAG;EAAgB,GAAG;CAAW,CAAC,CAAC,CAAC,KAAK,CAAC,GAAG,OAAO,CAAC,GAAG,YAAY,GAAG,MAAM,CAAC,CAAC,CAClG;CAEA,MAAM,gBAAgB,cACd,gBAAgB,KAAK,SAAS;EAAE,OAAO,OAAO,GAAG;EAAG,OAAO,OAAO,GAAG;CAAE,EAAE,GAC/E,CAAC,eAAe,CAClB;CAEA,MAAM,YAAY,cACV,MAAM,KAAK,EAAE,QAAQ,WAAW,IAAI,GAAG,OAAO;EAAE,OAAO,OAAO,IAAI,CAAC;EAAG,OAAO,OAAO,IAAI,CAAC;CAAE,EAAE,GACnG,CAAC,UAAU,CACb;CAEA,OACE,qBAAC,KAAD;EAAU;EAAK,KAAK,CAAC,OAAO,MAAM,GAAG;EAAG,GAAI;EAA5C,UAAA,CACE,qBAAC,OAAO,KAAR;GAAY,KAAK,OAAO;GAAxB,UAAA,CACG,oBACC,
|
|
1
|
+
{"version":3,"file":"BitkitPagination.js","names":["_Fragment"],"sources":["../../../lib/components/BitkitPagination/BitkitPagination.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { Separator } from '@chakra-ui/react/separator';\nimport { Skeleton } from '@chakra-ui/react/skeleton';\nimport { chakra, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef, useMemo } from 'react';\n\nimport { IconChevronLeft, IconChevronRight } from '../../icons';\nimport formatLabel from '../../utilities/formatLabel';\nimport BitkitIconButton from '../BitkitIconButton/BitkitIconButton';\nimport BitkitNativeSelect from '../BitkitNativeSelect/BitkitNativeSelect';\n\nexport interface BitkitPaginationLabels {\n items?: string;\n itemsPerPage?: string;\n nextPage?: string;\n pages?: string;\n previousPage?: string;\n}\n\nconst DEFAULT_LABELS: Required<BitkitPaginationLabels> = {\n items: '{start}\\u2013{end} of {total} items',\n itemsPerPage: 'Items per page:',\n nextPage: 'Next page',\n pages: 'of {totalPages} pages',\n previousPage: 'Previous page',\n};\n\nexport interface BitkitPaginationProps extends Omit<BoxProps, 'colorPalette' | 'page'> {\n labels?: BitkitPaginationLabels;\n onPageChange?: (page: number) => void;\n onPageSizeChange?: (pageSize: number) => void;\n page: number;\n pageSize: number;\n pageSizeOptions?: number[];\n state?: 'skeleton';\n totalItems: number;\n variant?: 'card' | 'page' | 'table';\n}\n\nconst BitkitPagination = forwardRef<HTMLDivElement, BitkitPaginationProps>((props, ref) => {\n const {\n css,\n labels: labelsProp,\n onPageChange,\n onPageSizeChange,\n page,\n pageSize,\n pageSizeOptions = [10, 25, 50],\n state,\n totalItems,\n variant = 'table',\n ...rest\n } = props;\n\n const recipe = useSlotRecipe({ key: 'pagination' });\n const styles = recipe({ variant });\n\n const safePageSize = Math.max(1, pageSize);\n const totalPages = Math.max(1, Math.ceil(totalItems / safePageSize));\n const safePage = Math.min(Math.max(1, page), totalPages);\n const start = totalItems === 0 ? 0 : (safePage - 1) * safePageSize + 1;\n const end = Math.min(safePage * safePageSize, totalItems);\n const isFirstPage = safePage <= 1;\n const isLastPage = safePage >= totalPages;\n const isSkeleton = state === 'skeleton';\n const showItemsPerPage = onPageSizeChange !== undefined;\n\n const values = { end, start, total: totalItems, totalPages };\n const labels = Object.fromEntries(\n Object.entries({ ...DEFAULT_LABELS, ...labelsProp }).map(([k, v]) => [k, formatLabel(v, values)]),\n ) as Required<BitkitPaginationLabels>;\n\n const pageSizeItems = useMemo(\n () => pageSizeOptions.map((opt) => ({ label: String(opt), value: String(opt) })),\n [pageSizeOptions],\n );\n\n const pageItems = useMemo(\n () => Array.from({ length: totalPages }, (_, i) => ({ label: String(i + 1), value: String(i + 1) })),\n [totalPages],\n );\n\n return (\n <Box ref={ref} css={[styles.root, css]} {...rest}>\n <chakra.div css={styles.itemsBlock}>\n {showItemsPerPage && (\n <>\n <chakra.span css={styles.text}>{labels.itemsPerPage}</chakra.span>\n <BitkitNativeSelect\n css={styles.itemsSelect}\n onChange={(e) => onPageSizeChange?.(Number(e.target.value))}\n size=\"md\"\n state={isSkeleton ? 'disabled' : undefined}\n value={String(safePageSize)}\n >\n {pageSizeItems.map((opt) => (\n <option key={opt.value} value={opt.value}>\n {opt.label}\n </option>\n ))}\n </BitkitNativeSelect>\n <Separator alignSelf=\"stretch\" borderColor=\"border/minimal\" marginInline=\"8\" orientation=\"vertical\" />\n </>\n )}\n {isSkeleton ? <Skeleton height=\"20\" width=\"96\" /> : <chakra.span css={styles.text}>{labels.items}</chakra.span>}\n </chakra.div>\n\n <chakra.div css={styles.pageBlock}>\n <Separator alignSelf=\"stretch\" borderColor=\"border/minimal\" marginInline=\"8\" orientation=\"vertical\" />\n <BitkitNativeSelect\n css={styles.pageSelect}\n onChange={(e) => onPageChange?.(Number(e.target.value))}\n size=\"md\"\n state={isSkeleton ? 'disabled' : undefined}\n value={String(safePage)}\n >\n {pageItems.map((opt) => (\n <option key={opt.value} value={opt.value}>\n {opt.label}\n </option>\n ))}\n </BitkitNativeSelect>\n {isSkeleton ? <Skeleton height=\"20\" width=\"64\" /> : <chakra.span css={styles.text}>{labels.pages}</chakra.span>}\n <BitkitIconButton\n icon={IconChevronLeft}\n label={labels.previousPage}\n marginInlineStart=\"8\"\n onClick={() => onPageChange?.(safePage - 1)}\n size=\"md\"\n state={isFirstPage || isSkeleton ? 'disabled' : undefined}\n variant=\"secondary\"\n />\n <BitkitIconButton\n icon={IconChevronRight}\n label={labels.nextPage}\n onClick={() => onPageChange?.(safePage + 1)}\n size=\"md\"\n state={isLastPage || isSkeleton ? 'disabled' : undefined}\n variant=\"secondary\"\n />\n </chakra.div>\n </Box>\n );\n});\n\nBitkitPagination.displayName = 'BitkitPagination';\n\nexport default BitkitPagination;\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitPaginationLoadMore.js","names":[],"sources":["../../../lib/components/BitkitPaginationLoadMore/BitkitPaginationLoadMore.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { chakra, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef } from 'react';\n\nimport IconErrorCircleFilled from '../../icons/IconErrorCircleFilled';\nimport BitkitButton from '../BitkitButton/BitkitButton';\nimport BitkitInlineLoading from '../BitkitInlineLoading/BitkitInlineLoading';\nimport BitkitLinkButton from '../BitkitLinkButton/BitkitLinkButton';\n\nexport interface BitkitPaginationLoadMoreProps extends Omit<BoxProps, 'page' | 'size'> {\n loadError?: boolean;\n loadingMore?: boolean;\n onLoadMore: () => void;\n page: number;\n pageItemsCount: number;\n size?: 'md' | 'sm' | 'xs';\n totalCount: number;\n}\n\nconst BitkitPaginationLoadMore = forwardRef<HTMLDivElement, BitkitPaginationLoadMoreProps>((props, ref) => {\n const {\n css,\n loadError = false,\n loadingMore = false,\n onLoadMore,\n page,\n pageItemsCount,\n size = 'md',\n totalCount,\n ...rest\n } = props;\n\n const recipe = useSlotRecipe({ key: 'paginationLoadMore' });\n const styles = recipe({ size });\n\n const clampedPage = Math.max(1, page);\n const clampedPageItemsCount = Math.max(1, pageItemsCount);\n const shownCount = Math.min(clampedPage * clampedPageItemsCount, totalCount);\n const isComplete = shownCount >= totalCount;\n const loadMoreCount = Math.min(clampedPageItemsCount, totalCount - shownCount);\n\n // Follows the counter's textStyle, not the size name: sm uses body/md/regular too.\n const inlineLoadingSize = size === 'xs' ? 'sm' : 'md';\n\n return (\n <Box css={[styles.root, css]} ref={ref} {...rest}>\n <chakra.span css={styles.counter}>\n Showing {shownCount} of {totalCount}\n </chakra.span>\n {!isComplete && (\n <>\n {loadingMore ? (\n <BitkitInlineLoading color=\"text/tertiary\" label=\"Loading more...\" size={inlineLoadingSize} />\n ) : size === 'xs' ? (\n <BitkitLinkButton onClick={onLoadMore} size=\"sm\">\n {`Load ${loadMoreCount} more`}\n </BitkitLinkButton>\n ) : (\n <BitkitButton onClick={onLoadMore} size={size === 'md' ? 'md' : 'sm'} variant=\"tertiary\">\n {`Load ${loadMoreCount} more`}\n </BitkitButton>\n )}\n {/* A retry can report both states at once — the spinner replaces the stale error. */}\n {loadError && !loadingMore && (\n <Box css={styles.error} role=\"alert\">\n <IconErrorCircleFilled color=\"icon/negative\" size=\"16\" />\n <Text as=\"span\">Failed to load items.</Text>\n </Box>\n )}\n </>\n )}\n </Box>\n );\n});\n\nBitkitPaginationLoadMore.displayName = 'BitkitPaginationLoadMore';\n\nexport default BitkitPaginationLoadMore;\n"],"mappings":";;;;;;;;;;AAoBA,IAAM,2BAA2B,YAA2D,OAAO,QAAQ;CACzG,MAAM,EACJ,KACA,YAAY,OACZ,cAAc,OACd,YACA,MACA,gBACA,OAAO,MACP,YACA,GAAG,SACD;CAGJ,MAAM,SADS,cAAc,EAAE,KAAK,qBAAqB,CAC1C,CAAA,CAAO,EAAE,KAAK,CAAC;CAE9B,MAAM,cAAc,KAAK,IAAI,GAAG,IAAI;CACpC,MAAM,wBAAwB,KAAK,IAAI,GAAG,cAAc;CACxD,MAAM,aAAa,KAAK,IAAI,cAAc,uBAAuB,UAAU;CAC3E,MAAM,aAAa,cAAc;CACjC,MAAM,gBAAgB,KAAK,IAAI,uBAAuB,aAAa,UAAU;CAG7E,MAAM,oBAAoB,SAAS,OAAO,OAAO;CAEjD,OACE,qBAAC,KAAD;EAAK,KAAK,CAAC,OAAO,MAAM,GAAG;EAAQ;EAAK,GAAI;EAA5C,UAAA,CACE,qBAAC,OAAO,MAAR;GAAa,KAAK,OAAO;GAAzB,UAAA;IAAkC;IACvB;IAAW;IAAK;GACd;EACZ,CAAA,GAAA,CAAC,cACA,
|
|
1
|
+
{"version":3,"file":"BitkitPaginationLoadMore.js","names":["_Fragment"],"sources":["../../../lib/components/BitkitPaginationLoadMore/BitkitPaginationLoadMore.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { chakra, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef } from 'react';\n\nimport IconErrorCircleFilled from '../../icons/IconErrorCircleFilled';\nimport BitkitButton from '../BitkitButton/BitkitButton';\nimport BitkitInlineLoading from '../BitkitInlineLoading/BitkitInlineLoading';\nimport BitkitLinkButton from '../BitkitLinkButton/BitkitLinkButton';\n\nexport interface BitkitPaginationLoadMoreProps extends Omit<BoxProps, 'page' | 'size'> {\n loadError?: boolean;\n loadingMore?: boolean;\n onLoadMore: () => void;\n page: number;\n pageItemsCount: number;\n size?: 'md' | 'sm' | 'xs';\n totalCount: number;\n}\n\nconst BitkitPaginationLoadMore = forwardRef<HTMLDivElement, BitkitPaginationLoadMoreProps>((props, ref) => {\n const {\n css,\n loadError = false,\n loadingMore = false,\n onLoadMore,\n page,\n pageItemsCount,\n size = 'md',\n totalCount,\n ...rest\n } = props;\n\n const recipe = useSlotRecipe({ key: 'paginationLoadMore' });\n const styles = recipe({ size });\n\n const clampedPage = Math.max(1, page);\n const clampedPageItemsCount = Math.max(1, pageItemsCount);\n const shownCount = Math.min(clampedPage * clampedPageItemsCount, totalCount);\n const isComplete = shownCount >= totalCount;\n const loadMoreCount = Math.min(clampedPageItemsCount, totalCount - shownCount);\n\n // Follows the counter's textStyle, not the size name: sm uses body/md/regular too.\n const inlineLoadingSize = size === 'xs' ? 'sm' : 'md';\n\n return (\n <Box css={[styles.root, css]} ref={ref} {...rest}>\n <chakra.span css={styles.counter}>\n Showing {shownCount} of {totalCount}\n </chakra.span>\n {!isComplete && (\n <>\n {loadingMore ? (\n <BitkitInlineLoading color=\"text/tertiary\" label=\"Loading more...\" size={inlineLoadingSize} />\n ) : size === 'xs' ? (\n <BitkitLinkButton onClick={onLoadMore} size=\"sm\">\n {`Load ${loadMoreCount} more`}\n </BitkitLinkButton>\n ) : (\n <BitkitButton onClick={onLoadMore} size={size === 'md' ? 'md' : 'sm'} variant=\"tertiary\">\n {`Load ${loadMoreCount} more`}\n </BitkitButton>\n )}\n {/* A retry can report both states at once — the spinner replaces the stale error. */}\n {loadError && !loadingMore && (\n <Box css={styles.error} role=\"alert\">\n <IconErrorCircleFilled color=\"icon/negative\" size=\"16\" />\n <Text as=\"span\">Failed to load items.</Text>\n </Box>\n )}\n </>\n )}\n </Box>\n );\n});\n\nBitkitPaginationLoadMore.displayName = 'BitkitPaginationLoadMore';\n\nexport default BitkitPaginationLoadMore;\n"],"mappings":";;;;;;;;;;AAoBA,IAAM,2BAA2B,YAA2D,OAAO,QAAQ;CACzG,MAAM,EACJ,KACA,YAAY,OACZ,cAAc,OACd,YACA,MACA,gBACA,OAAO,MACP,YACA,GAAG,SACD;CAGJ,MAAM,SADS,cAAc,EAAE,KAAK,qBAAqB,CAC1C,CAAA,CAAO,EAAE,KAAK,CAAC;CAE9B,MAAM,cAAc,KAAK,IAAI,GAAG,IAAI;CACpC,MAAM,wBAAwB,KAAK,IAAI,GAAG,cAAc;CACxD,MAAM,aAAa,KAAK,IAAI,cAAc,uBAAuB,UAAU;CAC3E,MAAM,aAAa,cAAc;CACjC,MAAM,gBAAgB,KAAK,IAAI,uBAAuB,aAAa,UAAU;CAG7E,MAAM,oBAAoB,SAAS,OAAO,OAAO;CAEjD,OACE,qBAAC,KAAD;EAAK,KAAK,CAAC,OAAO,MAAM,GAAG;EAAQ;EAAK,GAAI;EAA5C,UAAA,CACE,qBAAC,OAAO,MAAR;GAAa,KAAK,OAAO;GAAzB,UAAA;IAAkC;IACvB;IAAW;IAAK;GACd;EACZ,CAAA,GAAA,CAAC,cACA,qBAAAA,YAAA,EAAA,UAAA,CACG,cACC,oBAAC,qBAAD;GAAqB,OAAM;GAAgB,OAAM;GAAkB,MAAM;EAAoB,CAAA,IAC3F,SAAS,OACX,oBAAC,kBAAD;GAAkB,SAAS;GAAY,MAAK;GACzC,UAAA,QAAQ,cAAc;EACP,CAAA,IAElB,oBAAC,cAAD;GAAc,SAAS;GAAY,MAAM,SAAS,OAAO,OAAO;GAAM,SAAQ;GAC3E,UAAA,QAAQ,cAAc;EACX,CAAA,GAGf,aAAa,CAAC,eACb,qBAAC,KAAD;GAAK,KAAK,OAAO;GAAO,MAAK;GAA7B,UAAA,CACE,oBAAC,uBAAD;IAAuB,OAAM;IAAgB,MAAK;GAAM,CAAA,GACxD,oBAAC,MAAD;IAAM,IAAG;IAAO,UAAA;GAA2B,CAAA,CACxC;EAEP,CAAA,CAAA,EAAA,CAAA,CAED;;AAET,CAAC;AAED,yBAAyB,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitPopover.js","names":[],"sources":["../../../lib/components/BitkitPopover/BitkitPopover.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { Popover, type PopoverRootProps, usePopoverContext, usePopoverStyles } from '@chakra-ui/react/popover';\nimport { Portal } from '@chakra-ui/react/portal';\nimport { chakra } from '@chakra-ui/react/styled-system';\nimport { type ReactNode, useCallback, useEffect, useRef, useState } from 'react';\n\nimport { IconArrowDown } from '../../icons';\nimport BitkitCloseButton from '../BitkitCloseButton/BitkitCloseButton';\n\nexport interface BitkitPopoverProps {\n /** Body content of the panel. Scrolls within the panel when it overflows. */\n children: ReactNode;\n /** Header title, shown next to the close button. */\n title: ReactNode;\n /** Optional footer content (e.g. actions). Laid out with space between for a secondary/primary pair. */\n footer?: ReactNode;\n /**\n * Element that toggles and anchors the popover. Omit when anchoring via\n * `positioning.getAnchorElement` (e.g. a trigger that can't be wrapped) and controlling `open`.\n */\n trigger?: ReactNode;\n /**\n * Move focus into the panel when it opens (default `true`). Turn it off for a panel that opens\n * while the user is typing elsewhere, such as hints beside a focused input.\n */\n autoFocus?: PopoverRootProps['autoFocus'];\n open?: PopoverRootProps['open'];\n defaultOpen?: PopoverRootProps['defaultOpen'];\n onOpenChange?: (open: boolean) => void;\n positioning?: PopoverRootProps['positioning'];\n persistentElements?: PopoverRootProps['persistentElements'];\n}\n\n/**\n * Scrolls the body and shows a scroll-to-bottom button with a fade gradient while the content\n * isn't scrolled to the bottom — mirrors the BitkitDialog scrollable-body behaviour.\n */\nconst ScrollablePopoverBody = ({ children }: { children: ReactNode }) => {\n const styles = usePopoverStyles();\n const { open } = usePopoverContext();\n const contentRef = useRef<HTMLDivElement>(null);\n const [isScrollButtonVisible, setIsScrollButtonVisible] = useState(false);\n\n const updateScrollButtonVisibility = useCallback(() => {\n const content = contentRef.current;\n if (!content) {\n setIsScrollButtonVisible(false);\n return;\n }\n const didScrollToBottom = content.scrollTop >= content.scrollHeight - content.offsetHeight - 1;\n setIsScrollButtonVisible(!didScrollToBottom);\n }, []);\n\n useEffect(() => {\n const content = contentRef.current;\n if (!open || !content) return undefined;\n\n content.addEventListener('scroll', updateScrollButtonVisibility);\n const resizeObserver = new ResizeObserver(updateScrollButtonVisibility);\n resizeObserver.observe(content);\n\n return () => {\n content.removeEventListener('scroll', updateScrollButtonVisibility);\n resizeObserver.disconnect();\n };\n }, [open, updateScrollButtonVisibility]);\n\n return (\n <Box css={styles.scrollBody}>\n <Popover.Body ref={contentRef}>{children}</Popover.Body>\n {isScrollButtonVisible && (\n <>\n <Box css={styles.scrollGradient} />\n <chakra.button\n aria-label=\"Scroll to bottom\"\n css={styles.scrollButton}\n type=\"button\"\n onClick={() => {\n contentRef.current?.scrollTo({ top: contentRef.current.scrollHeight, behavior: 'smooth' });\n }}\n >\n <IconArrowDown color=\"icon/tertiary\" size=\"16\" />\n </chakra.button>\n </>\n )}\n </Box>\n );\n};\n\n/**\n * An anchored, non-modal floating panel built on Chakra Popover, styled as a compact dialog:\n * a header (title + close button), a scrollable body, and an optional footer. Anchor it with a\n * `trigger`, or — when the trigger can't be wrapped — control `open` and pass\n * `positioning.getAnchorElement`.\n */\nconst BitkitPopover = ({\n children,\n title,\n footer,\n trigger,\n autoFocus,\n open,\n defaultOpen,\n onOpenChange,\n positioning,\n persistentElements,\n}: BitkitPopoverProps) => (\n <Popover.Root\n autoFocus={autoFocus}\n open={open}\n defaultOpen={defaultOpen}\n onOpenChange={onOpenChange ? ({ open: isOpen }) => onOpenChange(isOpen) : undefined}\n positioning={{ placement: 'bottom-start', gutter: 4, ...positioning }}\n persistentElements={persistentElements}\n >\n {trigger ? <Popover.Trigger asChild>{trigger}</Popover.Trigger> : null}\n <Portal>\n {/* z-index belongs on Content, not Positioner: Zag derives the positioner's inline z-index\n from Content's computed z-index, so a value set on Positioner is ignored. */}\n <Popover.Positioner>\n <Popover.Content>\n <Popover.Header>\n <Popover.Title>{title}</Popover.Title>\n <Popover.CloseTrigger asChild>\n <BitkitCloseButton aria-label=\"Close\" />\n </Popover.CloseTrigger>\n </Popover.Header>\n <ScrollablePopoverBody>{children}</ScrollablePopoverBody>\n {footer ? <Popover.Footer>{footer}</Popover.Footer> : null}\n </Popover.Content>\n </Popover.Positioner>\n </Portal>\n </Popover.Root>\n);\n\nBitkitPopover.displayName = 'BitkitPopover';\n\nexport default BitkitPopover;\n"],"mappings":";;;;;;;;;;;;;AAqCA,IAAM,yBAAyB,EAAE,eAAwC;CACvE,MAAM,SAAS,iBAAiB;CAChC,MAAM,EAAE,SAAS,kBAAkB;CACnC,MAAM,aAAa,OAAuB,IAAI;CAC9C,MAAM,CAAC,uBAAuB,4BAA4B,SAAS,KAAK;CAExE,MAAM,+BAA+B,kBAAkB;EACrD,MAAM,UAAU,WAAW;EAC3B,IAAI,CAAC,SAAS;GACZ,yBAAyB,KAAK;GAC9B;EACF;EACA,MAAM,oBAAoB,QAAQ,aAAa,QAAQ,eAAe,QAAQ,eAAe;EAC7F,yBAAyB,CAAC,iBAAiB;CAC7C,GAAG,CAAC,CAAC;CAEL,gBAAgB;EACd,MAAM,UAAU,WAAW;EAC3B,IAAI,CAAC,QAAQ,CAAC,SAAS,OAAO,KAAA;EAE9B,QAAQ,iBAAiB,UAAU,4BAA4B;EAC/D,MAAM,iBAAiB,IAAI,eAAe,4BAA4B;EACtE,eAAe,QAAQ,OAAO;EAE9B,aAAa;GACX,QAAQ,oBAAoB,UAAU,4BAA4B;GAClE,eAAe,WAAW;EAC5B;CACF,GAAG,CAAC,MAAM,4BAA4B,CAAC;CAEvC,OACE,qBAAC,KAAD;EAAK,KAAK,OAAO;EAAjB,UAAA,CACE,oBAAC,QAAQ,MAAT;GAAc,KAAK;GAAa;EAAuB,CAAA,GACtD,yBACC,
|
|
1
|
+
{"version":3,"file":"BitkitPopover.js","names":["_Fragment"],"sources":["../../../lib/components/BitkitPopover/BitkitPopover.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { Popover, type PopoverRootProps, usePopoverContext, usePopoverStyles } from '@chakra-ui/react/popover';\nimport { Portal } from '@chakra-ui/react/portal';\nimport { chakra } from '@chakra-ui/react/styled-system';\nimport { type ReactNode, useCallback, useEffect, useRef, useState } from 'react';\n\nimport { IconArrowDown } from '../../icons';\nimport BitkitCloseButton from '../BitkitCloseButton/BitkitCloseButton';\n\nexport interface BitkitPopoverProps {\n /** Body content of the panel. Scrolls within the panel when it overflows. */\n children: ReactNode;\n /** Header title, shown next to the close button. */\n title: ReactNode;\n /** Optional footer content (e.g. actions). Laid out with space between for a secondary/primary pair. */\n footer?: ReactNode;\n /**\n * Element that toggles and anchors the popover. Omit when anchoring via\n * `positioning.getAnchorElement` (e.g. a trigger that can't be wrapped) and controlling `open`.\n */\n trigger?: ReactNode;\n /**\n * Move focus into the panel when it opens (default `true`). Turn it off for a panel that opens\n * while the user is typing elsewhere, such as hints beside a focused input.\n */\n autoFocus?: PopoverRootProps['autoFocus'];\n open?: PopoverRootProps['open'];\n defaultOpen?: PopoverRootProps['defaultOpen'];\n onOpenChange?: (open: boolean) => void;\n positioning?: PopoverRootProps['positioning'];\n persistentElements?: PopoverRootProps['persistentElements'];\n}\n\n/**\n * Scrolls the body and shows a scroll-to-bottom button with a fade gradient while the content\n * isn't scrolled to the bottom — mirrors the BitkitDialog scrollable-body behaviour.\n */\nconst ScrollablePopoverBody = ({ children }: { children: ReactNode }) => {\n const styles = usePopoverStyles();\n const { open } = usePopoverContext();\n const contentRef = useRef<HTMLDivElement>(null);\n const [isScrollButtonVisible, setIsScrollButtonVisible] = useState(false);\n\n const updateScrollButtonVisibility = useCallback(() => {\n const content = contentRef.current;\n if (!content) {\n setIsScrollButtonVisible(false);\n return;\n }\n const didScrollToBottom = content.scrollTop >= content.scrollHeight - content.offsetHeight - 1;\n setIsScrollButtonVisible(!didScrollToBottom);\n }, []);\n\n useEffect(() => {\n const content = contentRef.current;\n if (!open || !content) return undefined;\n\n content.addEventListener('scroll', updateScrollButtonVisibility);\n const resizeObserver = new ResizeObserver(updateScrollButtonVisibility);\n resizeObserver.observe(content);\n\n return () => {\n content.removeEventListener('scroll', updateScrollButtonVisibility);\n resizeObserver.disconnect();\n };\n }, [open, updateScrollButtonVisibility]);\n\n return (\n <Box css={styles.scrollBody}>\n <Popover.Body ref={contentRef}>{children}</Popover.Body>\n {isScrollButtonVisible && (\n <>\n <Box css={styles.scrollGradient} />\n <chakra.button\n aria-label=\"Scroll to bottom\"\n css={styles.scrollButton}\n type=\"button\"\n onClick={() => {\n contentRef.current?.scrollTo({ top: contentRef.current.scrollHeight, behavior: 'smooth' });\n }}\n >\n <IconArrowDown color=\"icon/tertiary\" size=\"16\" />\n </chakra.button>\n </>\n )}\n </Box>\n );\n};\n\n/**\n * An anchored, non-modal floating panel built on Chakra Popover, styled as a compact dialog:\n * a header (title + close button), a scrollable body, and an optional footer. Anchor it with a\n * `trigger`, or — when the trigger can't be wrapped — control `open` and pass\n * `positioning.getAnchorElement`.\n */\nconst BitkitPopover = ({\n children,\n title,\n footer,\n trigger,\n autoFocus,\n open,\n defaultOpen,\n onOpenChange,\n positioning,\n persistentElements,\n}: BitkitPopoverProps) => (\n <Popover.Root\n autoFocus={autoFocus}\n open={open}\n defaultOpen={defaultOpen}\n onOpenChange={onOpenChange ? ({ open: isOpen }) => onOpenChange(isOpen) : undefined}\n positioning={{ placement: 'bottom-start', gutter: 4, ...positioning }}\n persistentElements={persistentElements}\n >\n {trigger ? <Popover.Trigger asChild>{trigger}</Popover.Trigger> : null}\n <Portal>\n {/* z-index belongs on Content, not Positioner: Zag derives the positioner's inline z-index\n from Content's computed z-index, so a value set on Positioner is ignored. */}\n <Popover.Positioner>\n <Popover.Content>\n <Popover.Header>\n <Popover.Title>{title}</Popover.Title>\n <Popover.CloseTrigger asChild>\n <BitkitCloseButton aria-label=\"Close\" />\n </Popover.CloseTrigger>\n </Popover.Header>\n <ScrollablePopoverBody>{children}</ScrollablePopoverBody>\n {footer ? <Popover.Footer>{footer}</Popover.Footer> : null}\n </Popover.Content>\n </Popover.Positioner>\n </Portal>\n </Popover.Root>\n);\n\nBitkitPopover.displayName = 'BitkitPopover';\n\nexport default BitkitPopover;\n"],"mappings":";;;;;;;;;;;;;AAqCA,IAAM,yBAAyB,EAAE,eAAwC;CACvE,MAAM,SAAS,iBAAiB;CAChC,MAAM,EAAE,SAAS,kBAAkB;CACnC,MAAM,aAAa,OAAuB,IAAI;CAC9C,MAAM,CAAC,uBAAuB,4BAA4B,SAAS,KAAK;CAExE,MAAM,+BAA+B,kBAAkB;EACrD,MAAM,UAAU,WAAW;EAC3B,IAAI,CAAC,SAAS;GACZ,yBAAyB,KAAK;GAC9B;EACF;EACA,MAAM,oBAAoB,QAAQ,aAAa,QAAQ,eAAe,QAAQ,eAAe;EAC7F,yBAAyB,CAAC,iBAAiB;CAC7C,GAAG,CAAC,CAAC;CAEL,gBAAgB;EACd,MAAM,UAAU,WAAW;EAC3B,IAAI,CAAC,QAAQ,CAAC,SAAS,OAAO,KAAA;EAE9B,QAAQ,iBAAiB,UAAU,4BAA4B;EAC/D,MAAM,iBAAiB,IAAI,eAAe,4BAA4B;EACtE,eAAe,QAAQ,OAAO;EAE9B,aAAa;GACX,QAAQ,oBAAoB,UAAU,4BAA4B;GAClE,eAAe,WAAW;EAC5B;CACF,GAAG,CAAC,MAAM,4BAA4B,CAAC;CAEvC,OACE,qBAAC,KAAD;EAAK,KAAK,OAAO;EAAjB,UAAA,CACE,oBAAC,QAAQ,MAAT;GAAc,KAAK;GAAa;EAAuB,CAAA,GACtD,yBACC,qBAAAA,YAAA,EAAA,UAAA,CACE,oBAAC,KAAD,EAAK,KAAK,OAAO,eAAiB,CAAA,GAClC,oBAAC,OAAO,QAAR;GACE,cAAW;GACX,KAAK,OAAO;GACZ,MAAK;GACL,eAAe;IACb,WAAW,SAAS,SAAS;KAAE,KAAK,WAAW,QAAQ;KAAc,UAAU;IAAS,CAAC;GAC3F;GAEA,UAAA,oBAAC,eAAD;IAAe,OAAM;IAAgB,MAAK;GAAM,CAAA;EACnC,CAAA,CACf,EAAA,CAAA,CAED;;AAET;;;;;;;AAQA,IAAM,iBAAiB,EACrB,UACA,OACA,QACA,SACA,WACA,MACA,aACA,cACA,aACA,yBAEA,qBAAC,QAAQ,MAAT;CACa;CACL;CACO;CACb,cAAc,gBAAgB,EAAE,MAAM,aAAa,aAAa,MAAM,IAAI,KAAA;CAC1E,aAAa;EAAE,WAAW;EAAgB,QAAQ;EAAG,GAAG;CAAY;CAChD;CANtB,UAAA,CAQG,UAAU,oBAAC,QAAQ,SAAT;EAAiB,SAAA;EAAS,UAAA;CAAyB,CAAA,IAAI,MAClE,oBAAC,QAAD,EAAA,UAGE,oBAAC,QAAQ,YAAT,EAAA,UACE,qBAAC,QAAQ,SAAT,EAAA,UAAA;EACE,qBAAC,QAAQ,QAAT,EAAA,UAAA,CACE,oBAAC,QAAQ,OAAT,EAAA,UAAgB,MAAqB,CAAA,GACrC,oBAAC,QAAQ,cAAT;GAAsB,SAAA;GACpB,UAAA,oBAAC,mBAAD,EAAmB,cAAW,QAAS,CAAA;EACnB,CAAA,CACR,EAAA,CAAA;EAChB,oBAAC,uBAAD,EAAwB,SAAgC,CAAA;EACvD,SAAS,oBAAC,QAAQ,QAAT,EAAA,UAAiB,OAAuB,CAAA,IAAI;CACvC,EAAA,CAAA,EACC,CAAA,EACd,CAAA,CACI;;AAGhB,cAAc,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitPromoBanner.js","names":[],"sources":["../../../lib/components/BitkitPromoBanner/BitkitPromoBanner.tsx"],"sourcesContent":["import { Alert, type AlertRootProps } from '@chakra-ui/react/alert';\nimport { Box } from '@chakra-ui/react/box';\nimport { Icon } from '@chakra-ui/react/icon';\nimport { type ReactNode } from 'react';\n\nimport { rem } from '../../theme/themeUtils';\nimport { NotificationContent } from '../common/NotificationContent';\nimport { BUTTON_COLORS_MAP, type NotificationAction } from '../common/notificationMaps';\nimport MascotSvg from './mascot.svg?react';\n\nexport type PromoBannerAction = NotificationAction;\n\nconst PROMO_BANNER_COLOR = BUTTON_COLORS_MAP.info;\n\nexport interface BitkitPromoBannerProps extends Omit<AlertRootProps, 'title' | 'variant'> {\n actionable?: PromoBannerAction;\n dismissible?: boolean;\n /** Custom leading illustration. Defaults to the built-in mascot. */\n illustration?: ReactNode;\n message: ReactNode;\n onClose?: () => void;\n title: ReactNode;\n}\n\nconst BitkitPromoBanner = (props: BitkitPromoBannerProps) => {\n const { actionable, css, dismissible, illustration, message, onClose, title, ...rest } = props;\n\n return (\n <Alert.Root\n {...rest}\n variant=\"info\"\n border=\"none\"\n position=\"relative\"\n flexDirection={{ base: 'column', tablet: 'row' }}\n alignItems={{ base: 'stretch', tablet: 'center' }}\n rowGap={{ base: '16', tablet: '0' }}\n paddingBlockEnd={{ base: actionable ? '20' : '16', tablet: rem(11) }}\n css={[{ '& .alert__title + *': { marginBlockStart: 0 } }, css]}\n >\n {illustration ? (\n <Box flexShrink={0} marginInlineEnd={{ base: '0', tablet: '12' }} aria-hidden>\n {illustration}\n </Box>\n ) : (\n <Icon\n asChild\n width={rem(72)}\n height={rem(68)}\n flexShrink={0}\n marginInlineEnd={{ base: '0', tablet: '12' }}\n marginBlock={{ base: '0', tablet: rem(-11) }}\n marginInlineStart={{ base: '0', tablet: rem(-12) }}\n >\n <MascotSvg />\n </Icon>\n )}\n <NotificationContent\n action={actionable}\n colorVariant={PROMO_BANNER_COLOR}\n dismissible={dismissible}\n messageText={message}\n onClose={onClose}\n stackable\n titleText={title}\n />\n </Alert.Root>\n );\n};\n\nBitkitPromoBanner.displayName = 'BitkitPromoBanner';\n\nexport default BitkitPromoBanner;\n"],"mappings":";;;;;;;;;AAYA,IAAM,qBAAqB,kBAAkB;AAY7C,IAAM,qBAAqB,UAAkC;CAC3D,MAAM,EAAE,YAAY,KAAK,aAAa,cAAc,SAAS,SAAS,OAAO,GAAG,SAAS;CAEzF,OACE,qBAAC,MAAM,MAAP;EACE,GAAI;EACJ,SAAQ;EACR,QAAO;EACP,UAAS;EACT,eAAe;GAAE,MAAM;GAAU,QAAQ;EAAM;EAC/C,YAAY;GAAE,MAAM;GAAW,QAAQ;EAAS;EAChD,QAAQ;GAAE,MAAM;GAAM,QAAQ;EAAI;EAClC,iBAAiB;GAAE,MAAM,aAAa,OAAO;GAAM,QAAQ,IAAI,EAAE;EAAE;EACnE,KAAK,CAAC,EAAE,uBAAuB,EAAE,kBAAkB,EAAE,EAAE,GAAG,GAAG;EAT/D,UAAA,CAWG,eACC,oBAAC,KAAD;GAAK,YAAY;GAAG,iBAAiB;IAAE,MAAM;IAAK,QAAQ;GAAK;GAAG,eAAA;GAC/D,UAAA;EACE,CAAA,IAEL,oBAAC,MAAD;GACE,SAAA;GACA,OAAO,IAAI,EAAE;GACb,QAAQ,IAAI,EAAE;GACd,YAAY;GACZ,iBAAiB;IAAE,MAAM;IAAK,QAAQ;GAAK;GAC3C,aAAa;IAAE,MAAM;IAAK,QAAQ,IAAI,GAAG;GAAE;GAC3C,mBAAmB;IAAE,MAAM;IAAK,QAAQ,IAAI,GAAG;GAAE;GAEjD,UAAA,
|
|
1
|
+
{"version":3,"file":"BitkitPromoBanner.js","names":["MascotSvg"],"sources":["../../../lib/components/BitkitPromoBanner/BitkitPromoBanner.tsx"],"sourcesContent":["import { Alert, type AlertRootProps } from '@chakra-ui/react/alert';\nimport { Box } from '@chakra-ui/react/box';\nimport { Icon } from '@chakra-ui/react/icon';\nimport { type ReactNode } from 'react';\n\nimport { rem } from '../../theme/themeUtils';\nimport { NotificationContent } from '../common/NotificationContent';\nimport { BUTTON_COLORS_MAP, type NotificationAction } from '../common/notificationMaps';\nimport MascotSvg from './mascot.svg?react';\n\nexport type PromoBannerAction = NotificationAction;\n\nconst PROMO_BANNER_COLOR = BUTTON_COLORS_MAP.info;\n\nexport interface BitkitPromoBannerProps extends Omit<AlertRootProps, 'title' | 'variant'> {\n actionable?: PromoBannerAction;\n dismissible?: boolean;\n /** Custom leading illustration. Defaults to the built-in mascot. */\n illustration?: ReactNode;\n message: ReactNode;\n onClose?: () => void;\n title: ReactNode;\n}\n\nconst BitkitPromoBanner = (props: BitkitPromoBannerProps) => {\n const { actionable, css, dismissible, illustration, message, onClose, title, ...rest } = props;\n\n return (\n <Alert.Root\n {...rest}\n variant=\"info\"\n border=\"none\"\n position=\"relative\"\n flexDirection={{ base: 'column', tablet: 'row' }}\n alignItems={{ base: 'stretch', tablet: 'center' }}\n rowGap={{ base: '16', tablet: '0' }}\n paddingBlockEnd={{ base: actionable ? '20' : '16', tablet: rem(11) }}\n css={[{ '& .alert__title + *': { marginBlockStart: 0 } }, css]}\n >\n {illustration ? (\n <Box flexShrink={0} marginInlineEnd={{ base: '0', tablet: '12' }} aria-hidden>\n {illustration}\n </Box>\n ) : (\n <Icon\n asChild\n width={rem(72)}\n height={rem(68)}\n flexShrink={0}\n marginInlineEnd={{ base: '0', tablet: '12' }}\n marginBlock={{ base: '0', tablet: rem(-11) }}\n marginInlineStart={{ base: '0', tablet: rem(-12) }}\n >\n <MascotSvg />\n </Icon>\n )}\n <NotificationContent\n action={actionable}\n colorVariant={PROMO_BANNER_COLOR}\n dismissible={dismissible}\n messageText={message}\n onClose={onClose}\n stackable\n titleText={title}\n />\n </Alert.Root>\n );\n};\n\nBitkitPromoBanner.displayName = 'BitkitPromoBanner';\n\nexport default BitkitPromoBanner;\n"],"mappings":";;;;;;;;;AAYA,IAAM,qBAAqB,kBAAkB;AAY7C,IAAM,qBAAqB,UAAkC;CAC3D,MAAM,EAAE,YAAY,KAAK,aAAa,cAAc,SAAS,SAAS,OAAO,GAAG,SAAS;CAEzF,OACE,qBAAC,MAAM,MAAP;EACE,GAAI;EACJ,SAAQ;EACR,QAAO;EACP,UAAS;EACT,eAAe;GAAE,MAAM;GAAU,QAAQ;EAAM;EAC/C,YAAY;GAAE,MAAM;GAAW,QAAQ;EAAS;EAChD,QAAQ;GAAE,MAAM;GAAM,QAAQ;EAAI;EAClC,iBAAiB;GAAE,MAAM,aAAa,OAAO;GAAM,QAAQ,IAAI,EAAE;EAAE;EACnE,KAAK,CAAC,EAAE,uBAAuB,EAAE,kBAAkB,EAAE,EAAE,GAAG,GAAG;EAT/D,UAAA,CAWG,eACC,oBAAC,KAAD;GAAK,YAAY;GAAG,iBAAiB;IAAE,MAAM;IAAK,QAAQ;GAAK;GAAG,eAAA;GAC/D,UAAA;EACE,CAAA,IAEL,oBAAC,MAAD;GACE,SAAA;GACA,OAAO,IAAI,EAAE;GACb,QAAQ,IAAI,EAAE;GACd,YAAY;GACZ,iBAAiB;IAAE,MAAM;IAAK,QAAQ;GAAK;GAC3C,aAAa;IAAE,MAAM;IAAK,QAAQ,IAAI,GAAG;GAAE;GAC3C,mBAAmB;IAAE,MAAM;IAAK,QAAQ,IAAI,GAAG;GAAE;GAEjD,UAAA,oBAACA,YAAD,CAAY,CAAA;EACR,CAAA,GAER,oBAAC,qBAAD;GACE,QAAQ;GACR,cAAc;GACD;GACb,aAAa;GACJ;GACT,WAAA;GACA,WAAW;EACZ,CAAA,CACS;;AAEhB;AAEA,kBAAkB,cAAc"}
|