plass-ui 1.3.0 → 1.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +962 -0
- package/README.md +19 -17
- package/dist/components/accordion/PlAccordion.d.ts +1 -1
- package/dist/components/alert/PlAlert.js +1 -1
- package/dist/components/anchor/PlAnchor.d.ts +85 -0
- package/dist/components/anchor/PlAnchor.js +1 -0
- package/dist/components/anchor/index.d.ts +2 -0
- package/dist/components/anchor/index.js +1 -0
- package/dist/components/animate-appear/PlAnimateAppear.d.ts +10 -0
- package/dist/components/animate-appear/PlAnimateAppear.js +1 -1
- package/dist/components/animate-blink/PlAnimateBlink.d.ts +2 -2
- package/dist/components/animate-blink/PlAnimateBlink.js +1 -1
- package/dist/components/animate-counter/PlAnimateCounter.d.ts +83 -0
- package/dist/components/animate-counter/PlAnimateCounter.js +1 -0
- package/dist/components/animate-counter/index.d.ts +2 -0
- package/dist/components/animate-counter/index.js +1 -0
- package/dist/components/animate-fade/PlAnimateFade.d.ts +2 -2
- package/dist/components/animate-fade/PlAnimateFade.js +1 -1
- package/dist/components/animate-float/PlAnimateFloat.d.ts +51 -0
- package/dist/components/animate-float/PlAnimateFloat.js +1 -0
- package/dist/components/animate-float/index.d.ts +2 -0
- package/dist/components/animate-float/index.js +1 -0
- package/dist/components/animate-grow/PlAnimateGrow.d.ts +2 -2
- package/dist/components/animate-grow/PlAnimateGrow.js +1 -1
- package/dist/components/animate-headline/PlAnimateHeadline.js +1 -1
- package/dist/components/animate-lighting/PlAnimateLighting.js +1 -1
- package/dist/components/animate-marquee/PlAnimateMarquee.d.ts +13 -4
- package/dist/components/animate-marquee/PlAnimateMarquee.js +1 -1
- package/dist/components/animate-reveal/PlAnimateReveal.d.ts +51 -0
- package/dist/components/animate-reveal/PlAnimateReveal.js +1 -0
- package/dist/components/animate-reveal/index.d.ts +2 -0
- package/dist/components/animate-reveal/index.js +1 -0
- package/dist/components/animate-rotate/PlAnimateRotate.d.ts +2 -2
- package/dist/components/animate-rotate/PlAnimateRotate.js +1 -1
- package/dist/components/animate-scramble/PlAnimateScramble.d.ts +75 -0
- package/dist/components/animate-scramble/PlAnimateScramble.js +1 -0
- package/dist/components/animate-scramble/index.d.ts +2 -0
- package/dist/components/animate-scramble/index.js +1 -0
- package/dist/components/animate-shake/PlAnimateShake.d.ts +57 -0
- package/dist/components/animate-shake/PlAnimateShake.js +1 -0
- package/dist/components/animate-shake/index.d.ts +2 -0
- package/dist/components/animate-shake/index.js +1 -0
- package/dist/components/animate-slide/PlAnimateSlide.d.ts +2 -2
- package/dist/components/animate-slide/PlAnimateSlide.js +1 -1
- package/dist/components/animate-split/PlAnimateSplit.d.ts +57 -0
- package/dist/components/animate-split/PlAnimateSplit.js +1 -0
- package/dist/components/animate-split/index.d.ts +2 -0
- package/dist/components/animate-split/index.js +1 -0
- package/dist/components/animate-typing/PlAnimateTyping.d.ts +3 -2
- package/dist/components/animate-typing/PlAnimateTyping.js +1 -1
- package/dist/components/animate-zoom/PlAnimateZoom.d.ts +2 -2
- package/dist/components/animate-zoom/PlAnimateZoom.js +1 -1
- package/dist/components/app-logo/PlAppLogo.d.ts +78 -0
- package/dist/components/app-logo/PlAppLogo.js +1 -0
- package/dist/components/app-logo/index.d.ts +2 -0
- package/dist/components/app-logo/index.js +1 -0
- package/dist/components/area-chart/PlAreaChart.d.ts +54 -0
- package/dist/components/area-chart/PlAreaChart.js +1 -0
- package/dist/components/area-chart/index.d.ts +2 -0
- package/dist/components/area-chart/index.js +1 -0
- package/dist/components/aspect-ratio/PlAspectRatio.d.ts +2 -1
- package/dist/components/aspect-ratio/PlAspectRatio.js +1 -1
- package/dist/components/avatar/PlAvatar.js +1 -1
- package/dist/components/back-top/PlBackTop.d.ts +2 -1
- package/dist/components/back-top/PlBackTop.js +1 -1
- package/dist/components/badge/PlBadge.js +1 -1
- package/dist/components/bar-chart/PlBarChart.d.ts +63 -0
- package/dist/components/bar-chart/PlBarChart.js +1 -0
- package/dist/components/bar-chart/index.d.ts +2 -0
- package/dist/components/bar-chart/index.js +1 -0
- package/dist/components/bottom-navigation/PlBottomNavigation.d.ts +3 -0
- package/dist/components/breadcrumb/PlBreadcrumb.js +1 -1
- package/dist/components/button/PlButton.d.ts +8 -0
- package/dist/components/button/PlButton.js +1 -1
- package/dist/components/button-group/PlButtonGroup.js +1 -1
- package/dist/components/calendar/PlCalendar.js +1 -1
- package/dist/components/card/PlCard.js +1 -1
- package/dist/components/carousel/PlCarousel.d.ts +1 -1
- package/dist/components/carousel/PlCarousel.js +1 -1
- package/dist/components/chat-bubble/PlChatBubble.d.ts +4 -1
- package/dist/components/chat-bubble/PlChatBubble.js +1 -1
- package/dist/components/checkbox/PlCheckbox.js +1 -1
- package/dist/components/chip/PlChip.d.ts +6 -2
- package/dist/components/chip/PlChip.js +1 -1
- package/dist/components/code-block/PlCodeBlock.d.ts +192 -0
- package/dist/components/code-block/PlCodeBlock.js +1 -0
- package/dist/components/code-block/index.d.ts +2 -0
- package/dist/components/code-block/index.js +1 -0
- package/dist/components/color-picker/PlColorPicker.js +1 -1
- package/dist/components/combobox/PlCombobox.d.ts +6 -5
- package/dist/components/combobox/PlCombobox.js +1 -1
- package/dist/components/command-palette/PlCommandPalette.d.ts +6 -2
- package/dist/components/command-palette/PlCommandPalette.js +1 -1
- package/dist/components/confirm/PlConfirmProvider.js +1 -1
- package/dist/components/container/PlContainer.d.ts +22 -6
- package/dist/components/container/PlContainer.js +1 -1
- package/dist/components/data-list/PlDataList.d.ts +74 -0
- package/dist/components/data-list/PlDataList.js +1 -0
- package/dist/components/data-list/index.d.ts +2 -0
- package/dist/components/data-list/index.js +1 -0
- package/dist/components/data-table/PlDataTable.d.ts +216 -0
- package/dist/components/data-table/PlDataTable.js +1 -0
- package/dist/components/data-table/index.d.ts +2 -0
- package/dist/components/data-table/index.js +1 -0
- package/dist/components/date-picker/PlDatePicker.js +1 -1
- package/dist/components/date-range-picker/PlDateRangePicker.js +1 -1
- package/dist/components/date-time-picker/PlDateTimePicker.js +1 -1
- package/dist/components/drawer/PlDrawer.d.ts +1 -1
- package/dist/components/drawer/PlDrawer.js +1 -1
- package/dist/components/file-picker/PlFilePicker.d.ts +4 -1
- package/dist/components/file-picker/PlFilePicker.js +1 -1
- package/dist/components/flex/PlFlex.d.ts +83 -0
- package/dist/components/flex/PlFlex.js +1 -0
- package/dist/components/flex/index.d.ts +2 -0
- package/dist/components/flex/index.js +1 -0
- package/dist/components/floating-action-button/PlFloatingActionButton.d.ts +81 -0
- package/dist/components/floating-action-button/PlFloatingActionButton.js +1 -0
- package/dist/components/floating-action-button/index.d.ts +2 -0
- package/dist/components/floating-action-button/index.js +1 -0
- package/dist/components/floating-bottom-navigation/PlFloatingBottomNavigation.d.ts +3 -0
- package/dist/components/floating-bottom-navigation/PlFloatingBottomNavigation.js +1 -1
- package/dist/components/footer/PlFooter.d.ts +4 -3
- package/dist/components/footer/PlFooter.js +1 -1
- package/dist/components/form/PlForm.js +1 -1
- package/dist/components/gallery/PlGallery.d.ts +192 -0
- package/dist/components/gallery/PlGallery.js +1 -0
- package/dist/components/gallery/PlGalleryViewer.d.ts +31 -0
- package/dist/components/gallery/PlGalleryViewer.js +1 -0
- package/dist/components/gallery/index.d.ts +2 -0
- package/dist/components/gallery/index.js +1 -0
- package/dist/components/gauge-chart/PlGaugeChart.d.ts +64 -0
- package/dist/components/gauge-chart/PlGaugeChart.js +1 -0
- package/dist/components/gauge-chart/index.d.ts +2 -0
- package/dist/components/gauge-chart/index.js +1 -0
- package/dist/components/grid/PlGrid.js +1 -1
- package/dist/components/grid/PlGridItem.js +1 -1
- package/dist/components/header/PlHeader.d.ts +4 -3
- package/dist/components/header/PlHeader.js +1 -1
- package/dist/components/heatmap-chart/PlHeatmapChart.d.ts +69 -0
- package/dist/components/heatmap-chart/PlHeatmapChart.js +1 -0
- package/dist/components/heatmap-chart/index.d.ts +2 -0
- package/dist/components/heatmap-chart/index.js +1 -0
- package/dist/components/highlight/PlHighlight.js +1 -1
- package/dist/components/hot-keys/PlHotKeys.js +1 -1
- package/dist/components/hover-card/PlHoverCard.d.ts +96 -0
- package/dist/components/hover-card/PlHoverCard.js +1 -0
- package/dist/components/hover-card/index.d.ts +2 -0
- package/dist/components/hover-card/index.js +1 -0
- package/dist/components/how-to-steps/PlHowToSteps.d.ts +87 -0
- package/dist/components/how-to-steps/PlHowToSteps.js +1 -0
- package/dist/components/how-to-steps/index.d.ts +2 -0
- package/dist/components/how-to-steps/index.js +1 -0
- package/dist/components/image/PlImage.d.ts +195 -8
- package/dist/components/image/PlImage.js +1 -1
- package/dist/components/image/PlImagePreview.d.ts +58 -0
- package/dist/components/image/PlImagePreview.js +1 -0
- package/dist/components/image/index.d.ts +1 -1
- package/dist/components/line-chart/PlLineChart.d.ts +74 -0
- package/dist/components/line-chart/PlLineChart.js +1 -0
- package/dist/components/line-chart/index.d.ts +2 -0
- package/dist/components/line-chart/index.js +1 -0
- package/dist/components/menu/PlMenu.d.ts +14 -5
- package/dist/components/menu/PlMenu.js +1 -1
- package/dist/components/meter/PlMeter.d.ts +83 -0
- package/dist/components/meter/PlMeter.js +1 -0
- package/dist/components/meter/index.d.ts +2 -0
- package/dist/components/meter/index.js +1 -0
- package/dist/components/mockup/PlMockup.d.ts +146 -0
- package/dist/components/mockup/PlMockup.js +1 -0
- package/dist/components/mockup/index.d.ts +2 -0
- package/dist/components/mockup/index.js +1 -0
- package/dist/components/modal/PlModal.d.ts +1 -1
- package/dist/components/modal/PlModal.js +1 -1
- package/dist/components/navigation-menu/PlNavigationMenu.d.ts +7 -1
- package/dist/components/navigation-menu/PlNavigationMenu.js +1 -1
- package/dist/components/number-field/PlNumberField.d.ts +1 -1
- package/dist/components/number-field/PlNumberField.js +1 -1
- package/dist/components/otp-field/PlOtpField.d.ts +6 -0
- package/dist/components/otp-field/PlOtpField.js +1 -1
- package/dist/components/overlay/PlOverlay.d.ts +1 -1
- package/dist/components/overlay/PlOverlay.js +1 -1
- package/dist/components/page-layout/PlPageLayout.js +1 -1
- package/dist/components/pagination/PlPagination.d.ts +12 -9
- package/dist/components/pagination/PlPagination.js +1 -1
- package/dist/components/panes/PlPanes.d.ts +7 -2
- package/dist/components/panes/PlPanes.js +1 -1
- package/dist/components/pie-chart/PlPieChart.d.ts +58 -0
- package/dist/components/pie-chart/PlPieChart.js +1 -0
- package/dist/components/pie-chart/index.d.ts +2 -0
- package/dist/components/pie-chart/index.js +1 -0
- package/dist/components/pill/PlPill.js +1 -1
- package/dist/components/popconfirm/PlPopconfirm.d.ts +1 -1
- package/dist/components/popconfirm/PlPopconfirm.js +1 -1
- package/dist/components/popover/PlPopover.d.ts +6 -6
- package/dist/components/popover/PlPopover.js +1 -1
- package/dist/components/portal/PlPortal.d.ts +78 -0
- package/dist/components/portal/PlPortal.js +1 -0
- package/dist/components/portal/index.d.ts +2 -0
- package/dist/components/portal/index.js +1 -0
- package/dist/components/progress-box/PlProgressBox.js +1 -1
- package/dist/components/progress-circular/PlProgressCircular.js +1 -1
- package/dist/components/progress-linear/PlProgressLinear.js +1 -1
- package/dist/components/radio-group/PlRadioGroup.js +1 -1
- package/dist/components/rating/PlRating.d.ts +1 -1
- package/dist/components/rating/PlRating.js +1 -1
- package/dist/components/scatter-chart/PlScatterChart.d.ts +46 -0
- package/dist/components/scatter-chart/PlScatterChart.js +1 -0
- package/dist/components/scatter-chart/index.d.ts +2 -0
- package/dist/components/scatter-chart/index.js +1 -0
- package/dist/components/scroll-area/PlScrollArea.d.ts +98 -0
- package/dist/components/scroll-area/PlScrollArea.js +1 -0
- package/dist/components/scroll-area/index.d.ts +2 -0
- package/dist/components/scroll-area/index.js +1 -0
- package/dist/components/scroll-zone/PlScrollZone.d.ts +27 -10
- package/dist/components/scroll-zone/PlScrollZone.js +1 -1
- package/dist/components/segmented-button/PlSegmentedButton.js +1 -1
- package/dist/components/select/PlSelect.js +1 -1
- package/dist/components/show/PlShow.d.ts +76 -0
- package/dist/components/show/PlShow.js +1 -0
- package/dist/components/show/index.d.ts +2 -0
- package/dist/components/show/index.js +1 -0
- package/dist/components/sidebar/PlSidebar.js +1 -1
- package/dist/components/sidebar/PlSidebarTrigger.js +1 -1
- package/dist/components/skeleton/PlSkeleton.js +1 -1
- package/dist/components/slider/PlSlider.d.ts +13 -1
- package/dist/components/slider/PlSlider.js +1 -1
- package/dist/components/sparkline/PlSparkline.d.ts +68 -0
- package/dist/components/sparkline/PlSparkline.js +1 -0
- package/dist/components/sparkline/index.d.ts +2 -0
- package/dist/components/sparkline/index.js +1 -0
- package/dist/components/spoiler/PlSpoiler.d.ts +16 -1
- package/dist/components/spoiler/PlSpoiler.js +1 -1
- package/dist/components/stack/PlStack.d.ts +114 -0
- package/dist/components/stack/PlStack.js +1 -0
- package/dist/components/stack/index.d.ts +2 -0
- package/dist/components/stack/index.js +1 -0
- package/dist/components/stat/PlStat.d.ts +4 -0
- package/dist/components/stat/PlStat.js +1 -1
- package/dist/components/stepper/PlStepper.d.ts +3 -3
- package/dist/components/stepper/PlStepper.js +1 -1
- package/dist/components/switch/PlSwitch.js +1 -1
- package/dist/components/table/PlTable.d.ts +5 -5
- package/dist/components/table/PlTable.js +1 -1
- package/dist/components/tabs/PlTabs.d.ts +27 -2
- package/dist/components/tabs/PlTabs.js +1 -1
- package/dist/components/text-link/PlTextLink.js +1 -1
- package/dist/components/time-picker/PlTimePicker.js +1 -1
- package/dist/components/timeline/PlTimeline.d.ts +2 -2
- package/dist/components/timeline/PlTimeline.js +1 -1
- package/dist/components/timeline-chart/PlTimelineChart.d.ts +44 -0
- package/dist/components/timeline-chart/PlTimelineChart.js +1 -0
- package/dist/components/timeline-chart/index.d.ts +2 -0
- package/dist/components/timeline-chart/index.js +1 -0
- package/dist/components/toast/PlToast.d.ts +1 -1
- package/dist/components/toast/PlToast.js +1 -1
- package/dist/components/toggle/PlToggle.js +1 -1
- package/dist/components/toggle/PlToggleGroup.js +1 -1
- package/dist/components/tooltip/PlTooltip.js +1 -1
- package/dist/components/tour/PlTour.d.ts +134 -0
- package/dist/components/tour/PlTour.js +1 -0
- package/dist/components/tour/index.d.ts +2 -0
- package/dist/components/tour/index.js +1 -0
- package/dist/components/transfer/PlTransfer.d.ts +10 -1
- package/dist/components/transfer/PlTransfer.js +1 -1
- package/dist/components/tree/PlTree.js +1 -1
- package/dist/components/tree-select/PlTreeSelect.d.ts +99 -0
- package/dist/components/tree-select/PlTreeSelect.js +1 -0
- package/dist/components/tree-select/index.d.ts +2 -0
- package/dist/components/tree-select/index.js +1 -0
- package/dist/components/typography/PlTypography.js +1 -1
- package/dist/components/window-pane/PlWindowPane.d.ts +179 -0
- package/dist/components/window-pane/PlWindowPane.js +1 -0
- package/dist/components/window-pane/index.d.ts +2 -0
- package/dist/components/window-pane/index.js +1 -0
- package/dist/css/anchor.css +2 -0
- package/dist/css/animate-counter.css +2 -0
- package/dist/css/animate-float.css +2 -0
- package/dist/css/animate-reveal.css +2 -0
- package/dist/css/animate-scramble.css +2 -0
- package/dist/css/animate-shake.css +2 -0
- package/dist/css/animate-split.css +2 -0
- package/dist/css/app-logo.css +2 -0
- package/dist/css/area-chart.css +3 -0
- package/dist/css/back-top.css +2 -0
- package/dist/css/bar-chart.css +3 -0
- package/dist/css/calendar.css +1 -0
- package/dist/css/carousel.css +2 -0
- package/dist/css/code-block.css +2 -0
- package/dist/css/color-picker.css +1 -0
- package/dist/css/combobox.css +1 -0
- package/dist/css/command-palette.css +1 -0
- package/dist/css/confirm.css +2 -0
- package/dist/css/data-list.css +2 -0
- package/dist/css/data-table.css +7 -0
- package/dist/css/date-picker.css +1 -0
- package/dist/css/date-range-picker.css +1 -0
- package/dist/css/date-time-picker.css +1 -0
- package/dist/css/flex.css +2 -0
- package/dist/css/floating-action-button.css +4 -0
- package/dist/css/gallery.css +7 -0
- package/dist/css/gauge-chart.css +3 -0
- package/dist/css/heatmap-chart.css +3 -0
- package/dist/css/hover-card.css +2 -0
- package/dist/css/how-to-steps.css +2 -0
- package/dist/css/icon-button.css +1 -0
- package/dist/css/image.css +2 -0
- package/dist/css/line-chart.css +3 -0
- package/dist/css/menubar.css +1 -0
- package/dist/css/meter.css +2 -0
- package/dist/css/mockup.css +2 -0
- package/dist/css/pagination.css +1 -0
- package/dist/css/pie-chart.css +3 -0
- package/dist/css/popconfirm.css +2 -0
- package/dist/css/portal.css +2 -0
- package/dist/css/scatter-chart.css +3 -0
- package/dist/css/scroll-area.css +2 -0
- package/dist/css/scroll-zone.css +2 -0
- package/dist/css/show.css +2 -0
- package/dist/css/sidebar.css +3 -0
- package/dist/css/sparkline.css +3 -0
- package/dist/css/spoiler.css +1 -0
- package/dist/css/stack.css +2 -0
- package/dist/css/stat.css +1 -0
- package/dist/css/time-picker.css +1 -0
- package/dist/css/timeline-chart.css +3 -0
- package/dist/css/tour.css +3 -0
- package/dist/css/transfer.css +4 -0
- package/dist/css/tree-select.css +4 -0
- package/dist/css/window-pane.css +2 -0
- package/dist/hooks/index.d.ts +6 -0
- package/dist/hooks/index.js +1 -1
- package/dist/hooks/usePlBreakpoint.d.ts +3 -0
- package/dist/hooks/usePlBreakpoint.js +1 -1
- package/dist/hooks/usePlDisclosure.d.ts +44 -0
- package/dist/hooks/usePlDisclosure.js +1 -0
- package/dist/hooks/usePlElementSize.d.ts +34 -0
- package/dist/hooks/usePlElementSize.js +1 -0
- package/dist/hooks/usePlHotKeys.d.ts +5 -1
- package/dist/hooks/usePlHotKeys.js +1 -1
- package/dist/hooks/usePlOnScreen.d.ts +54 -0
- package/dist/hooks/usePlOnScreen.js +1 -0
- package/dist/index.d.ts +34 -1
- package/dist/index.js +1 -1
- package/dist/internal/animate.d.ts +121 -7
- package/dist/internal/animate.js +1 -1
- package/dist/internal/breakpoints.d.ts +31 -0
- package/dist/internal/breakpoints.js +1 -0
- package/dist/internal/button-group.d.ts +29 -2
- package/dist/internal/button-group.js +2 -2
- package/dist/internal/calendar.d.ts +11 -36
- package/dist/internal/calendar.js +1 -1
- package/dist/internal/chart-frame.d.ts +462 -0
- package/dist/internal/chart-frame.js +1 -0
- package/dist/internal/chart-line.d.ts +44 -0
- package/dist/internal/chart-line.js +1 -0
- package/dist/internal/chart.d.ts +551 -0
- package/dist/internal/chart.js +1 -0
- package/dist/internal/color-scheme.js +1 -1
- package/dist/internal/data-table.d.ts +70 -0
- package/dist/internal/data-table.js +1 -0
- package/dist/internal/date.d.ts +10 -0
- package/dist/internal/date.js +1 -1
- package/dist/internal/defaults.d.ts +8 -3
- package/dist/internal/drag.d.ts +65 -0
- package/dist/internal/drag.js +1 -0
- package/dist/internal/focusable.d.ts +8 -0
- package/dist/internal/focusable.js +1 -0
- package/dist/internal/form.d.ts +61 -0
- package/dist/internal/form.js +1 -0
- package/dist/internal/format.d.ts +2 -0
- package/dist/internal/format.js +1 -1
- package/dist/internal/gallery.d.ts +80 -0
- package/dist/internal/gallery.js +1 -0
- package/dist/internal/glow.d.ts +17 -0
- package/dist/internal/glow.js +1 -0
- package/dist/internal/grid.d.ts +6 -27
- package/dist/internal/grid.js +1 -1
- package/dist/internal/highlight.d.ts +98 -0
- package/dist/internal/highlight.js +1 -0
- package/dist/internal/icons.d.ts +10 -0
- package/dist/internal/icons.js +1 -1
- package/dist/internal/image.d.ts +94 -0
- package/dist/internal/image.js +1 -0
- package/dist/internal/inert.d.ts +19 -0
- package/dist/internal/inert.js +1 -0
- package/dist/internal/keys.d.ts +19 -0
- package/dist/internal/keys.js +1 -1
- package/dist/internal/labels.d.ts +182 -0
- package/dist/internal/labels.js +1 -0
- package/dist/internal/link.d.ts +17 -0
- package/dist/internal/link.js +1 -1
- package/dist/internal/mockup.d.ts +193 -0
- package/dist/internal/mockup.js +1 -0
- package/dist/internal/page-layout.d.ts +14 -7
- package/dist/internal/page-layout.js +1 -1
- package/dist/internal/picker.d.ts +43 -6
- package/dist/internal/picker.js +1 -1
- package/dist/internal/progress.d.ts +22 -8
- package/dist/internal/progress.js +1 -1
- package/dist/internal/responsive.d.ts +108 -0
- package/dist/internal/responsive.js +1 -0
- package/dist/internal/scramble.d.ts +35 -0
- package/dist/internal/scramble.js +1 -0
- package/dist/internal/scroll-target.d.ts +5 -0
- package/dist/internal/scroll-target.js +1 -0
- package/dist/internal/steps.js +1 -1
- package/dist/internal/styles.d.ts +81 -0
- package/dist/internal/styles.js +1 -1
- package/dist/internal/table.d.ts +86 -0
- package/dist/internal/table.js +1 -0
- package/dist/internal/text.d.ts +39 -0
- package/dist/internal/text.js +1 -0
- package/dist/internal/threshold.d.ts +19 -0
- package/dist/internal/threshold.js +1 -0
- package/dist/internal/tour.d.ts +42 -0
- package/dist/internal/tour.js +1 -0
- package/dist/internal/watermark.d.ts +44 -0
- package/dist/internal/watermark.js +1 -0
- package/dist/internal/wheel.d.ts +52 -0
- package/dist/internal/wheel.js +1 -0
- package/dist/internal/window.d.ts +201 -0
- package/dist/internal/window.js +1 -0
- package/dist/locales/de.d.ts +3 -0
- package/dist/locales/de.js +1 -0
- package/dist/locales/en.d.ts +2 -0
- package/dist/locales/en.js +1 -0
- package/dist/locales/es.d.ts +3 -0
- package/dist/locales/es.js +1 -0
- package/dist/locales/fr.d.ts +3 -0
- package/dist/locales/fr.js +1 -0
- package/dist/locales/index.d.ts +33 -0
- package/dist/locales/index.js +1 -0
- package/dist/locales/ja.d.ts +3 -0
- package/dist/locales/ja.js +1 -0
- package/dist/locales/ko.d.ts +3 -0
- package/dist/locales/ko.js +1 -0
- package/dist/locales/zh-Hans.d.ts +3 -0
- package/dist/locales/zh-Hans.js +1 -0
- package/dist/provider/PlColorSchemeScript.js +1 -1
- package/dist/provider/PlassProvider.js +1 -1
- package/dist/provider/index.d.ts +1 -0
- package/dist/provider/index.js +1 -1
- package/dist/styles.css +1 -1
- package/dist/tailwind.css +1357 -25
- package/dist/tokens.css +1357 -25
- package/dist/types.d.ts +368 -2
- package/package.json +26 -16
- package/dist/components/avatar-group/PlAvatarGroup.d.ts +0 -47
- package/dist/components/avatar-group/PlAvatarGroup.js +0 -1
- package/dist/components/avatar-group/index.d.ts +0 -2
- package/dist/components/avatar-group/index.js +0 -1
- package/dist/css/avatar-group.css +0 -2
- package/dist/internal/avatar-group.d.ts +0 -25
- package/dist/internal/avatar-group.js +0 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as
|
|
1
|
+
"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as l from"react";import{useDefaults as t}from"../../internal/defaults.js";import{useLabels as r}from"../../internal/labels.js";import{Field as n}from"@base-ui/react/field";import{OTPField as s}from"@base-ui/react/otp-field";import{hotKeyHandler as o}from"../../internal/keys.js";import{cx as i,disabledClasses as m,fieldReadOnlyClasses as d,fieldRestClasses as c,hasContent as u,metaTextClasses as p,stackGapClasses as f,surfaceSlots as h,transitionClasses as x}from"../../internal/styles.js";const g={xs:"h-7 w-6",sm:"h-8 w-7",md:"h-10 w-8",lg:"h-12 w-10",xl:"h-14 w-12"},b={xs:"rounded-[0.3125rem]",sm:"rounded-[0.375rem]",md:"rounded-[0.4375rem]",lg:"rounded-[0.5625rem]",xl:"rounded-[0.6875rem]"},y={xs:"text-[0.8125rem]",sm:"text-[0.9375rem]",md:"text-[1.0625rem]",lg:"text-[1.25rem]",xl:"text-[1.5rem]"},v={default:{xs:"gap-1",sm:"gap-1",md:"gap-1.5",lg:"gap-2",xl:"gap-2.5"},compact:{xs:"gap-0.5",sm:"gap-0.5",md:"gap-1",lg:"gap-1",xl:"gap-1.5"}},N={numeric:"numeric",alpha:"alpha",alphanumeric:"alphanumeric",any:"none"};export const PlOtpField=/* @__PURE__ */l.forwardRef(function PlOtpField({variant:$="glass",size:j,color:w,density:V,elevation:F=0,length:C=6,charset:I="numeric",mask:M=!1,groupSize:O,separator:S="–",value:k,defaultValue:z,onValueChange:R,onComplete:q,onValueInvalid:A,autoSubmit:D=!1,label:K,description:L,error:P,invalid:_,name:E,required:T=!1,disabled:B=!1,readOnly:G=!1,autoFocus:H=!1,slotLabel:J,className:Q,hotKeys:U,classNames:W,style:X,...Y},Z){const ee=t(),ae=r(),le=J??ae.otpSlot,te=l.useId(),re=j??ee.size??"md",ne=w??ee.color??"primary",se=V??ee.density??"default",oe=Math.min(12,Math.max(2,Math.round(C))),ie=u(P),me=_??ie,de=me?"danger":ne,ce=i("text-center font-medium [font-family:inherit]",g[re],y[re],b[re],x,"caret-(--p-accent) selection:bg-(--p-soft-press)","focus:[outline:2px_solid_var(--p-ring)] focus:[outline-offset:0px]","focus:[transition-duration:0ms]",B?m[$]:G?d[$]:c[$]),ue=O&&O>0?Math.round(O):0;return a(n.Root,{disabled:B,invalid:me,className:i("inline-flex flex-col align-top",f[re],Q),style:{...h(de,F),...X},children:[u(K)?e(n.Label,{className:i(p[re],"font-medium",B?"text-(--plass-muted-fg)":"text-(--plass-fg)",W?.label),children:e("span",{id:`${te}-label`,children:K})}):null,e(s.Root,{ref:Z,onKeyDown:o(U,void 0),length:oe,validationType:N[I],mask:M,name:E,required:T,disabled:B,readOnly:G,autoSubmit:D,value:k,defaultValue:z,onValueChange:e=>R?.(e),onValueComplete:e=>q?.(e),onValueInvalid:e=>A?.(e),className:i("flex items-center",v[se][re],W?.control),...Y,children:Array.from({length:oe},(t,r)=>a(l.Fragment,{children:[ue>0&&r>0&&r%ue===0?e("span",{"aria-hidden":"true",className:i("select-none px-0.5 text-(--plass-muted-fg)",y[re]),children:S}):null,e(s.Input,{className:ce,autoFocus:H&&0===r,"aria-labelledby":u(K)?`${te}-label ${te}-${r}`:`${te}-${r}`})]},r))}),Array.from({length:oe},(a,l)=>e("span",{id:`${te}-${l}`,hidden:!0,children:le(l+1,oe)},l)),u(L)?e(n.Description,{className:i(p[re],"text-(--plass-muted-fg)",W?.description),children:L}):null,e(n.Error,ie?{match:!0,className:i(p[re],"text-(--p-accent)",W?.error),children:P}:{className:i(p[re],"text-(--p-accent)",W?.error)})]})});
|
|
@@ -95,4 +95,4 @@ export interface PlOverlayProps extends Omit<React.ComponentPropsWithoutRef<'div
|
|
|
95
95
|
* held inside, the page behind going inert, and focus returning to wherever it
|
|
96
96
|
* came from when the overlay closes.
|
|
97
97
|
*/
|
|
98
|
-
export declare function PlOverlay({ open, defaultOpen, onOpenChange, tone, dismissible, modal, align, size: sizeProp, color: colorProp, label, className, classNames, style, children, ...props }: PlOverlayProps): React.JSX.Element;
|
|
98
|
+
export declare function PlOverlay({ open, defaultOpen, onOpenChange, tone, dismissible, modal, align, size: sizeProp, color: colorProp, label: labelProp, className, classNames, style, children, ...props }: PlOverlayProps): React.JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import{useDefaults as s}from"../../internal/defaults.js";import{
|
|
1
|
+
"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import{useDefaults as s}from"../../internal/defaults.js";import{useLabels as l}from"../../internal/labels.js";import{Dialog as r}from"@base-ui/react/dialog";import{cx as t,surfaceSlots as i}from"../../internal/styles.js";const o={scrim:"bg-(--plass-scrim) [backdrop-filter:blur(2px)] [-webkit-backdrop-filter:blur(2px)]",glass:/* @__PURE__ */["[background-color:color-mix(in_oklab,var(--plass-scrim)_45%,transparent)]","[backdrop-filter:var(--plass-blur)] [-webkit-backdrop-filter:var(--plass-blur)]"].join(" "),solid:"bg-(--plass-surface)",clear:""},n={start:"items-start",center:"items-center",end:"items-end"},p={xs:"p-3",sm:"p-4",md:"p-6",lg:"p-8",xl:"p-10"},c=/* @__PURE__ */["[transition:opacity_var(--plass-duration-slow)_var(--plass-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" ");export function PlOverlay({open:m,defaultOpen:d,onOpenChange:f,tone:b="scrim",dismissible:u=!1,modal:x=!0,align:y="center",size:g,color:j,label:k,className:h,classNames:v,style:z,children:w,...N}){const O=s(),P=l(),_=k??P.overlay,B=g??O.size??"md",C=j??O.color??"primary";return e(r.Root,{open:m,defaultOpen:d,modal:x,disablePointerDismissal:!u,onOpenChange:(e,a)=>{u||e||"escape-key"!==a.reason?f?.(e):a.cancel()},children:a(r.Portal,{children:[e(r.Backdrop,{className:t("plass-portal fixed inset-0 z-(--plass-z-portal)",c,o[b],v?.backdrop)}),e(r.Viewport,{className:["plass-portal fixed inset-0 z-(--plass-z-portal) flex justify-center",n[y],p[B]].join(" "),children:e(r.Popup,{"aria-label":_,className:["flex max-h-full max-w-full flex-col items-center justify-center","[outline:none]",c,h??""].filter(Boolean).join(" "),style:{...i(C,0),...z},...N,children:w})})]})})}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as o from"react";import{useDefaults as t}from"../../internal/defaults.js";import{PlPageLayoutContext as
|
|
1
|
+
"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as o from"react";import{useDefaults as t}from"../../internal/defaults.js";import{useLabels as n}from"../../internal/labels.js";import{PlPageLayoutContext as r,PlassSidebarSideContext as s}from"../../internal/page-layout.js";import{controlSlots as a,cx as i,hasContent as u,toLength as c}from"../../internal/styles.js";const d=["header","footer"];export const PlPageLayout=/* @__PURE__ */o.forwardRef(function PlPageLayout({header:f,footer:p,sidebar:m,endSidebar:h,headerSpan:v="full",footerSpan:x="full",scroll:y="page",height:b="viewport",collapseBelow:g="md",sidebarOpen:w,defaultSidebarOpen:P=!1,onSidebarOpenChange:k,endSidebarOpen:S,defaultEndSidebarOpen:C=!1,onEndSidebarOpenChange:O,skipLink:j=!0,skipLabel:N,mainId:$="main",mainProps:R,color:z,className:L,style:E,children:M,...B},H){const _=t(),I=n(),T=N??I.skipToContent,q=z??_.color??"primary",[A,D]=o.useState(P),[F,G]=o.useState(C),J=o.useMemo(()=>({start:w??A,end:S??F}),[w,A,S,F]),K=o.useCallback((e,l)=>{if("start"===e)return void 0===w&&D(l),void k?.(l);void 0===S&&G(l),O?.(l)},[w,S,k,O]),Q=o.useRef(null),U=o.useCallback(e=>{Q.current=e,"function"==typeof H?H(e):H&&(H.current=e)},[H]),V=o.useRef({header:null,footer:null}),W=o.useRef(null),X=o.useCallback(()=>{const e=Q.current;if(e)for(const l of d){const o=V.current[l],t="header"===l?v:x;if(!o){e.style.setProperty(`--p-layout-${l}`,"0px"),e.style.setProperty(`--p-layout-${l}-inset`,"0px");continue}const n=getComputedStyle(o).position,r=`${o.offsetHeight}px`,s="sticky"===n||"fixed"===n;e.style.setProperty(`--p-layout-${l}`,s&&"full"===t?r:"0px"),e.style.setProperty(`--p-layout-${l}-inset`,"fixed"===n?r:"0px")}},[v,x]),Y=o.useCallback(()=>{const e=W.current;if(e){e.disconnect();for(const l of d){const o=V.current[l];o&&e.observe(o)}}X()},[X]);o.useEffect(()=>(W.current=new ResizeObserver(()=>X()),Y(),()=>{W.current?.disconnect(),W.current=null}),[X,Y]);const Z=o.useCallback((e,l)=>{V.current[e]=l,Y()},[Y]),ee=o.useMemo(()=>({present:!0,register:Z,collapseBelow:g,open:J,setOpen:K,scroll:y}),[Z,g,J,K,y]),le=o.useMemo(()=>({...ee,register:()=>{}}),[ee]),oe="content"===y,te=c("viewport"===b||"auto"===b?void 0:b),ne=void 0!==te?"":"auto"===b?oe?"h-full":"min-h-full":oe?"h-dvh":"min-h-dvh",re=u(f)?f:null,se=u(p)?p:null;return e(r.Provider,{value:ee,children:l("div",{ref:U,className:i("relative flex w-full flex-col",oe?"overflow-hidden":"",ne,"full"===v?"[padding-top:var(--p-layout-header-inset,0px)]":"","full"===x?"[padding-bottom:var(--p-layout-footer-inset,0px)]":"",L),style:void 0===te?E:{...oe?{height:te}:{minHeight:te},...E},...B,children:[j?e("a",{href:`#${$}`,className:i("absolute start-3 top-3 z-40 size-px overflow-hidden whitespace-nowrap","[clip-path:inset(50%)] focus:size-auto focus:overflow-visible focus:[clip-path:none]","focus:rounded-(--plass-radius-md) focus:[background-image:var(--p-fill)]","focus:px-4 focus:py-2 focus:font-medium focus:text-(--p-on-solid) focus:no-underline","focus:[box-shadow:var(--p-elev),var(--p-lift)]","focus:[outline:2px_solid_var(--p-ring)] focus:[outline-offset:0px]"),style:a(q,2,"solid"),children:T}):null,"full"===v?re:null,l("div",{className:i("flex w-full flex-1",oe?"min-h-0":""),children:[u(m)?e(s.Provider,{value:"start",children:m}):null,l("div",{className:i("flex min-w-0 flex-1 flex-col",oe?"min-h-0":"","content"===v?"[padding-top:var(--p-layout-header-inset,0px)]":"","content"===x?"[padding-bottom:var(--p-layout-footer-inset,0px)]":""),children:["content"===v?re:null,e("main",{...R,id:$,className:i("min-w-0 flex-1",oe?"min-h-0 overflow-y-auto":"",R?.className),children:e(r.Provider,{value:le,children:M})}),"content"===x?se:null]}),u(h)?e(s.Provider,{value:"end",children:h}):null]}),"full"===x?se:null]})})});
|
|
@@ -43,9 +43,10 @@ export interface PlPaginationProps extends PlassStyleProps, Omit<React.Component
|
|
|
43
43
|
* press is going before making it.
|
|
44
44
|
*
|
|
45
45
|
* `onPageChange` still fires and the press is still cancelled first, so a
|
|
46
|
-
* client-side router keeps the page it already has.
|
|
47
|
-
*
|
|
48
|
-
*
|
|
46
|
+
* client-side router keeps the page it already has. The current page stays a
|
|
47
|
+
* link, marked `aria-current`, and a stepper at the end of the row stays an
|
|
48
|
+
* `<a>` with no address, marked `aria-disabled`: a pressed control that turned
|
|
49
|
+
* into a different element would take the reader's focus with it.
|
|
49
50
|
*/
|
|
50
51
|
getPageHref?: (page: number) => string;
|
|
51
52
|
/**
|
|
@@ -74,19 +75,21 @@ export interface PlPaginationProps extends PlassStyleProps, Omit<React.Component
|
|
|
74
75
|
/**
|
|
75
76
|
* The accessible names, none of which is ever drawn.
|
|
76
77
|
*
|
|
77
|
-
*
|
|
78
|
-
*
|
|
79
|
-
*
|
|
80
|
-
* already knows.
|
|
78
|
+
* Left out, each one is read from the label pack a `PlassProvider` set, so a
|
|
79
|
+
* translated application passes none of them. Given, a prop wins over the
|
|
80
|
+
* pack for this one pager.
|
|
81
81
|
*/
|
|
82
82
|
label?: string;
|
|
83
|
-
/** Accessible name of a page button. @default `Page {n}
|
|
83
|
+
/** Accessible name of a page button. @default `Page {n}`, from the label pack */
|
|
84
84
|
pageLabel?: (page: number) => string;
|
|
85
85
|
previousLabel?: string;
|
|
86
86
|
nextLabel?: string;
|
|
87
87
|
firstLabel?: string;
|
|
88
88
|
lastLabel?: string;
|
|
89
|
-
/**
|
|
89
|
+
/**
|
|
90
|
+
* The live-region sentence a screen reader hears when the page changes.
|
|
91
|
+
* @default `Page {n} of {total}`, from the label pack
|
|
92
|
+
*/
|
|
90
93
|
statusLabel?: (page: number, count: number) => string;
|
|
91
94
|
}
|
|
92
95
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as
|
|
1
|
+
"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as t from"react";import{useDefaults as n}from"../../internal/defaults.js";import{useLabels as r}from"../../internal/labels.js";import{PlButton as i}from"../button/PlButton.js";import{ChevronIcon as l}from"../../internal/icons.js";import{controlTextClasses as o,gapClasses as s,srOnlyClasses as c}from"../../internal/styles.js";function range(e,a){return Array.from({length:Math.max(0,a-e+1)},(a,t)=>e+t)}function DoubleChevronIcon(){return e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:e("path",{d:"m7.5 4.5 3.5 3.5-3.5 3.5M3.5 4.5 7 8l-3.5 3.5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})}const m={xs:"h-6 min-w-6",sm:"h-8 min-w-8",md:"h-10 min-w-10",lg:"h-12 min-w-12",xl:"h-14 min-w-14"};export const PlPagination=/* @__PURE__ */t.forwardRef(function PlPagination({variant:u="ghost",size:d,color:h,density:f,elevation:p=0,count:g,page:b,defaultPage:x=1,onPageChange:v,siblingCount:y=1,boundaryCount:M=1,showEdges:j=!1,showArrows:w=!0,disabled:L=!1,getPageHref:N,renderLink:P,label:C,pageLabel:k,previousLabel:D,nextLabel:I,firstLabel:z,lastLabel:K,statusLabel:B,className:$,children:A,...R},S){const W=n(),E=r(),F=C??E.pagination,H=D??E.paginationPrevious,q=I??E.paginationNext,G=z??E.paginationFirst,J=K??E.paginationLast,O=k??E.paginationPage,Q=B??E.paginationStatus,T=d??W.size??"md",U=h??W.color??"primary",V=f??W.density??"compact",[X,Y]=t.useState(x),Z=Math.min(Math.max(b??X,1),Math.max(g,1));if(g<2)return null;const _=function paginationRange(e,a,t,n){const r=range(1,Math.min(n,e)),i=range(Math.max(e-n+1,n+1),e),l=Math.max(Math.min(a-t,e-n-2*t-1),n+2),o=Math.min(Math.max(a+t,n+2*t+2),i.length>0?i[0]-2:e-1);return[...r,...l>n+2?["start-ellipsis"]:n+1<e-n?[n+1]:[],...range(l,o),...o<e-n-1?["end-ellipsis"]:e-n>n?[e-n]:[],...i]}(g,Z,y,M),ee=Z<=1,ae=Z>=g,linkProps=(a,t,n)=>{if(!N||L)return null;if(t)return{render:e("a",{role:"link"}),"aria-disabled":!0,tabIndex:0};const r=N(a);return{render:P?P(a,r):e("a",{href:r}),rel:n}},press=(e,a)=>{e.metaKey||e.ctrlKey||e.shiftKey||e.altKey||N&&!v||(e.preventDefault(),(e=>{const a=Math.min(Math.max(e,1),g);a!==Z&&(void 0===b&&Y(a),v?.(a))})(a))},stepper=(a,t,n,r,l,o,s)=>e("li",{className:"flex",children:e(i,{variant:u,size:T,color:U,density:V,elevation:p,disabled:L||r,focusableWhenDisabled:!L,"aria-label":t,startIcon:e("span",{className:`flex items-center ${l}`,children:o}),onClick:e=>press(e,n),...linkProps(n,r,s)})},a);return a("nav",{ref:S,"aria-label":F,className:["flex items-center",$??""].filter(Boolean).join(" "),...R,children:[a("ul",{role:"list",className:`m-0 flex list-none items-center p-0 ${s[T]}`,children:[j?stepper("first",G,1,ee,"rotate-180 rtl:rotate-0",e(DoubleChevronIcon,{})):null,w?stepper("previous",H,Z-1,ee,"rotate-90 rtl:-rotate-90",e(l,{}),"prev"):null,_.map((a,t)=>e("li","number"==typeof a?{className:"flex",children:e(i,{variant:a===Z?"solid":u,size:T,color:U,density:V,elevation:p,disabled:L,"aria-label":O(a),"aria-current":a===Z?"page":void 0,className:"tabular-nums",onClick:e=>press(e,a),...linkProps(a,!1),children:a})}:{"aria-hidden":"true",className:["flex select-none items-center justify-center","text-(--plass-muted-fg)",o[T],m[T]].join(" "),children:"…"},`slot-${t}`)),w?stepper("next",q,Z+1,ae,"-rotate-90 rtl:rotate-90",e(l,{}),"next"):null,j?stepper("last",J,g,ae,"rtl:rotate-180",e(DoubleChevronIcon,{})):null]}),e("span",{className:c,"aria-live":"polite",children:Q(Z,g)}),A]})});
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import type { PlassColor, PlassOrientation, PlassSize } from '../../types.js';
|
|
2
|
+
import type { PlassColor, PlassOrientation, PlassResponsive, PlassSize } from '../../types.js';
|
|
3
3
|
/**
|
|
4
4
|
* A pane's share of the split, as a percentage of the container or as a CSS
|
|
5
5
|
* length.
|
|
@@ -17,7 +17,7 @@ export interface PlPanesProps extends Omit<React.ComponentPropsWithoutRef<'div'>
|
|
|
17
17
|
* handles between them; `vertical` stacks them.
|
|
18
18
|
* @default 'horizontal'
|
|
19
19
|
*/
|
|
20
|
-
orientation?: PlassOrientation
|
|
20
|
+
orientation?: PlassResponsive<PlassOrientation>;
|
|
21
21
|
/**
|
|
22
22
|
* Whether the handles between the panes can be dragged. Turn it off for a
|
|
23
23
|
* split that is a layout rather than a control.
|
|
@@ -32,6 +32,11 @@ export interface PlPanesProps extends Omit<React.ComponentPropsWithoutRef<'div'>
|
|
|
32
32
|
onResize?: (sizes: number[]) => void;
|
|
33
33
|
/** Fires once, with the same shape, when the handle is let go. */
|
|
34
34
|
onResizeEnd?: (sizes: number[]) => void;
|
|
35
|
+
/**
|
|
36
|
+
* What a screen reader calls a handle, before the share it is at. Without one,
|
|
37
|
+
* every handle of a split is read only as "separator" and a number.
|
|
38
|
+
*/
|
|
39
|
+
label?: string;
|
|
35
40
|
/** The panes. Anything that is not a `PlPane` is still laid out, but has no size. */
|
|
36
41
|
children?: React.ReactNode;
|
|
37
42
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as r from"react";import{useDefaults as n}from"../../internal/defaults.js";import{cx as
|
|
1
|
+
"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as r from"react";import{useDefaults as n}from"../../internal/defaults.js";import{beginPointerDrag as i}from"../../internal/drag.js";import{cx as o,transitionClasses as s}from"../../internal/styles.js";import{useResponsiveValue as a}from"../../internal/responsive.js";const l=/* @__PURE__ */r.createContext({basis:null,id:void 0}),c={xs:"basis-1",sm:"basis-1.5",md:"basis-2",lg:"basis-2.5",xl:"basis-3"},u={xs:4,sm:6,md:8,lg:10,xl:12};function toPixels(e,t,r){if(null==e)return;if("number"==typeof e)return t*e/100;const n=/^\s*(-?[\d.]+)\s*(px|rem|em|%)\s*$/.exec(e);if(!n)return;const i=Number(n[1]);if(!Number.isNaN(i))switch(n[2]){case"px":return i;case"%":return t*i/100;case"rem":return i*parseFloat(getComputedStyle(document.documentElement).fontSize||"16");case"em":return i*parseFloat(r&&getComputedStyle(r).fontSize||"16");default:return}}export const PlPanes=/* @__PURE__ */r.forwardRef(function PlPanes({orientation:d,resizable:m=!0,color:f,size:p,onResize:g,onResizeEnd:h,label:x,className:v,style:b,children:z,...w},y){const P=a(d,"horizontal"),S=n(),R=f??S.color??"primary",C=p??S.size??"md",M=r.Children.toArray(z).filter(r.isValidElement),N=M.length,$=r.useId(),paneId=e=>M[e]?.props.id??`${$}-pane-${e}`,j=r.useRef(null),k=r.useCallback(e=>{j.current=e,"function"==typeof y?y(e):y&&(y.current=e)},[y]),E=r.useRef([]);E.current=M.map(e=>e.props);const[A,D]=r.useState(null),F=A&&A.length===N?A:null,I=r.useRef(null);I.current=F;const B="horizontal"===P,T=u[C]*Math.max(0,N-1);function grip(e){const t=j.current,r=I.current;if(!m||!t||!r||void 0===r[e+1])return null;const n=t.getBoundingClientRect(),i=(B?n.width:n.height)-T;if(i<=0)return null;const o=E.current[e],s=E.current[e+1],a=r[e]*i,l=a+r[e+1]*i,c=Math.max(toPixels(o?.minSize,i,t)??0,l-(toPixels(s?.maxSize,i,t)??l)),u=Math.min(toPixels(o?.maxSize,i,t)??l,l-(toPixels(s?.minSize,i,t)??0));return u<c?null:{root:t,current:r,extent:i,start:a,pair:l,resize(t){const n=Math.min(u,Math.max(c,a+t)),o=[...r];return o[e]=n/i,o[e+1]=(l-n)/i,D(o),g?.(o.map(e=>100*e)),o}}}r.useEffect(()=>{const e=j.current;if(!e)return;const measure=()=>{const t=e.getBoundingClientRect(),r=(B?t.width:t.height)-T;r<=0||D(t=>t&&t.length===N?t:function initialFractions(e,t,r){const n=e.map(e=>toPixels(e.defaultSize,t,r)),i=n.reduce((e,t)=>e+(t??0),0),o=n.filter(e=>void 0===e).length,s=o>0?Math.max(0,t-i)/o:0,a=n.map(e=>Math.max(0,e??s)),l=a.reduce((e,t)=>e+t,0);return l<=0?a.map(()=>1/Math.max(1,a.length)):a.map(e=>e/l)}(E.current,r,e))};measure();const t=new ResizeObserver(measure);return t.observe(e),()=>t.disconnect()},[N,B,T]);const X=r.useRef(null);r.useEffect(()=>()=>X.current?.(),[]);const Y=o("group/handle relative z-1 flex shrink-0 grow-0 items-center justify-center",c[C],s,"[outline:none] focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:outline-offset-0",m?o(B?"cursor-col-resize":"cursor-row-resize","touch-none","hover:bg-(--p-soft) data-[dragging]:bg-(--p-soft)"):"");return e("div",{ref:k,className:o("flex h-full w-full",B?"flex-row":"flex-col","min-h-0 min-w-0",v),style:{"--p-accent":`var(--plass-${R}-accent)`,"--p-soft":`var(--plass-${R}-soft)`,"--p-ring":`var(--plass-${R}-ring)`,...b},...w,children:M.map((n,a)=>t(r.Fragment,{children:[a>0?e("div",{role:"separator","aria-label":x,"aria-controls":paneId(a-1),"aria-orientation":B?"vertical":"horizontal","aria-valuenow":F?Math.round(100*F[a-1]):void 0,"aria-valuemin":0,"aria-valuemax":100,"aria-disabled":!m||void 0,tabIndex:m?0:-1,className:Y,onPointerDown:e=>{0===e.button&&function beginDrag(e,t){const r=grip(e);if(!r)return;const n=B?t.clientX:t.clientY,o=B&&"rtl"===getComputedStyle(r.root).direction?-1:1;let s=r.current;const a=i({target:t.currentTarget,pointerId:t.pointerId,onMove:e=>{const t=B?e.clientX:e.clientY;s=r.resize((t-n)*o)},onEnd:()=>{X.current=null,h?.(s.map(e=>100*e))}});X.current=a}(a-1,e)},onKeyDown:e=>{const t=B?"ArrowLeft":"ArrowUp",r=B?"ArrowRight":"ArrowDown";if(e.key!==t&&e.key!==r)return;e.preventDefault();const n=B&&"rtl"===getComputedStyle(e.currentTarget).direction?-1:1,i=e.key===r?16:-16;!function nudge(e,t){const r=grip(e);if(!r)return;const n=r.resize(t);h?.(n.map(e=>100*e))}(a-1,i*n)},children:e("span",{"aria-hidden":"true",className:o("pointer-events-none bg-(--plass-border)",s,B?"h-full w-px":"h-px w-full",m?"group-hover/handle:bg-(--p-accent) group-focus-visible/handle:bg-(--p-accent) group-data-[dragging]/handle:bg-(--p-accent)":"")})}):null,e(l.Provider,{value:{basis:F?`calc((100% - ${T}px) * ${F[a].toFixed(6)})`:null,id:paneId(a)},children:n})]},n.key??a))})});export const PlPane=/* @__PURE__ */r.forwardRef(function PlPane({defaultSize:t,minSize:n,maxSize:i,className:s,style:a,children:c,...u},d){const{basis:m,id:f}=r.useContext(l);return e("div",{ref:d,id:f,className:o("relative min-h-0 min-w-0 overflow-auto",s),style:{flex:m?`0 0 ${m}`:"1 1 0%",...a},...u,children:c})});
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { type ChartBaseProps } from '../../internal/chart-frame.js';
|
|
3
|
+
import type { PlassChartCategory, PlassChartDatum } from '../../types.js';
|
|
4
|
+
export interface PlPieChartProps extends ChartBaseProps {
|
|
5
|
+
/**
|
|
6
|
+
* The slices. Numbers, or points that carry their own name and colour.
|
|
7
|
+
*
|
|
8
|
+
* One series and not an array of them, because that is what a pie *is*: the
|
|
9
|
+
* slices are the entities here, so each one takes a palette slot of its own
|
|
10
|
+
* and the legend lists them rather than listing series.
|
|
11
|
+
*/
|
|
12
|
+
data: readonly PlassChartDatum[];
|
|
13
|
+
/** What each slice is called. Points may carry their own `x` instead. */
|
|
14
|
+
categories?: readonly PlassChartCategory[];
|
|
15
|
+
/**
|
|
16
|
+
* - `pie` — a filled disc. The default.
|
|
17
|
+
* - `donut` — a ring, with room in the middle for the total.
|
|
18
|
+
* - `semi` — half a ring, opened along the bottom. For a gauge, or for a
|
|
19
|
+
* dashboard tile that is wider than it is tall.
|
|
20
|
+
* @default 'pie'
|
|
21
|
+
*/
|
|
22
|
+
shape?: 'pie' | 'donut' | 'semi';
|
|
23
|
+
/**
|
|
24
|
+
* Where the first slice starts, in degrees clockwise from twelve o'clock.
|
|
25
|
+
* Ignored by `semi`, which is defined by where it opens.
|
|
26
|
+
* @default 0
|
|
27
|
+
*/
|
|
28
|
+
startAngle?: number;
|
|
29
|
+
/**
|
|
30
|
+
* What goes in the hole. A `donut` or a `semi` with nothing in the middle is
|
|
31
|
+
* a pie with a bite out of it; the total, or the one figure the chart is
|
|
32
|
+
* about, is what the ring was drawn around.
|
|
33
|
+
*/
|
|
34
|
+
center?: React.ReactNode;
|
|
35
|
+
/**
|
|
36
|
+
* Writes each slice's share on it, where the slice is wide enough for the
|
|
37
|
+
* text to fit with room either side. A label that does not fit is dropped
|
|
38
|
+
* rather than clipped — the tooltip and the table still have it.
|
|
39
|
+
*
|
|
40
|
+
* The number written is the **share**, not the value: a share is what a pie
|
|
41
|
+
* is a picture of, and the value is one hover away.
|
|
42
|
+
* @default 'none'
|
|
43
|
+
*/
|
|
44
|
+
valueLabels?: 'none' | 'all';
|
|
45
|
+
}
|
|
46
|
+
/**
|
|
47
|
+
* Parts of a whole, at a glance.
|
|
48
|
+
*
|
|
49
|
+
* The narrowest chart in the library and the easiest one to misuse. An angle is
|
|
50
|
+
* a poor thing to compare — two slices within a few percent of each other are
|
|
51
|
+
* indistinguishable, and a reader cannot rank six of them — so the pie is right
|
|
52
|
+
* for exactly one question: *is one of these most of it?* Anything finer than
|
|
53
|
+
* that, and anything past six slices, is a [`PlBarChart`](./bar-chart).
|
|
54
|
+
*
|
|
55
|
+
* A slice's colour follows the slice and not its size, so a chart that is
|
|
56
|
+
* refiltered or resorted keeps every category the colour it had.
|
|
57
|
+
*/
|
|
58
|
+
export declare function PlPieChart({ data, categories, shape, startAngle, center, valueLabels, height, format, locale: localeProp, label, legend, tooltip, empty, size: sizeProp, variant, padded, className, ...box }: PlPieChartProps): React.JSX.Element;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{ChartDataTable as l,ChartLegendBar as n,ChartStatus as i,ChartSurface as r,ChartTooltipPanel as s,markTransitionClasses as o,useMeasuredWidth as d,useVisibility as u}from"../../internal/chart-frame.js";import{arcPath as m,categoryAt as c,chartFontSizes as h,compactNumber as v,dimmedByHover as f,formatCategory as p,markGap as x,plotHeights as b,seriesColor as g,toValue as y}from"../../internal/chart.js";import{useDefaults as M}from"../../internal/defaults.js";import{numberFormatter as j}from"../../internal/format.js";import{useLabels as N}from"../../internal/labels.js";import{cx as w,metaTextClasses as I}from"../../internal/styles.js";const P={pie:0,donut:.62,semi:.62};export function PlPieChart({data:z,categories:k,shape:A="pie",startAngle:S=0,center:$,valueLabels:L="none",height:B,format:E,locale:R,label:C,legend:D,tooltip:O,empty:_,size:K,variant:V="ghost",padded:W=!1,className:q,...F}){const G=M(),H=K??G.size??"md",J=R??G.locale,Q=a.useRef(null),T=d(Q),U=N(),X=a.useId(),Y=a.useCallback(e=>E?j(J,E).format(e):v(e,J),[E,J]),Z=a.useMemo(()=>z.map(y),[z]),ee=a.useMemo(()=>Z.map((e,t)=>({name:p(c(t,k,[Z]),J),data:[z[t]],color:e.color})),[Z,k,z,J]),te=u(ee),[ae,le]=a.useState(null),ne=ee.map((e,t)=>g(e,t)),ie=Z.reduce((e,t,a)=>te.visible[a]&&null!==t.value?e+Math.abs(t.value):e,0),re="semi"===A,se="number"==typeof B?B:b[H],oe=h[H],de=!1===D?{interactive:!1}:!0===D||void 0===D?{}:D,ue=!1!==D&&ee.length>1,me=de.side??"bottom",ce=!1===O?{mode:"none"}:!0===O||void 0===O?{}:O,he="none"===ce.mode,ve=T/2,fe=Math.max(0,Math.min(T/2,re?se:se/2)-2),pe=re?Math.min(se,se/2+fe/2):se/2,xe=fe*P[A],be=ie<=0,ge=fe>0?Math.min(4,x/fe*(180/Math.PI)):0,ye=re?180:360,Me=[];let je=re?-90:S;Z.forEach((e,t)=>{if(!te.visible[t]||null===e.value||0===e.value)return;const a=Math.abs(e.value)/ie,l=a*ye;Me.push({index:t,start:je,end:je+l,value:e.value,share:a}),je+=l});const Ne=null===ae?[]:[{seriesIndex:ae,name:ee[ae]?.name,color:Z[ae]?.color??ne[ae],value:Z[ae]?.value??null,formatted:`${Y(Z[ae]?.value??0)} · ${Math.round(10*(Math.abs(Z[ae]?.value??0)/ie*100+Number.EPSILON))/10}%`,label:Z[ae]?.label}];return t(r,{...F,size:H,variant:V,padded:W,className:q,legendSide:me,legend:ue?e(n,{series:ee,colors:ne,options:de,visibility:te,size:H,values:de.showValue?Z.map(e=>null===e.value?void 0:Y(e.value)):void 0}):null,table:be?null:e(l,{id:X,caption:C,categories:ee.map(e=>e.name??""),series:[{name:C,data:z}],values:[Z],format:Y,locale:J}),children:[t("div",{ref:Q,role:"img",tabIndex:be?void 0:0,"aria-label":C??U.chart,"aria-describedby":be?void 0:X,onPointerLeave:()=>le(null),onBlur:()=>le(null),onKeyDown:e=>{if("ArrowRight"!==e.key&&"ArrowLeft"!==e.key)return;const t=Me.map(e=>e.index);if(0===t.length)return;const a=null===ae?-1:t.indexOf(ae),l="ArrowRight"===e.key?a+1:a-1;le(t[(l+t.length)%t.length]),e.preventDefault()},className:w("relative w-full rounded-(--plass-radius-xs)","focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:outline-offset-2"),style:{height:se},children:[be?e("div",{className:w("flex h-full items-center justify-center text-(--plass-muted-fg)",I[H]),children:_??U.empty}):T>0&&fe>0?t("svg",{width:T,height:se,viewBox:`0 0 ${T} ${se}`,"aria-hidden":"true",className:"block",children:[Me.map(t=>{const a=f(te.hovered,t.index,te.visible)||null!==ae&&ae!==t.index,l=t.end-t.start>2*ge?ge/2:0;return e("path",{d:m(ve,pe,fe,xe,t.start+l,t.end-l),fill:Z[t.index].color??ne[t.index],opacity:a?.32:1,onPointerEnter:he?void 0:()=>le(t.index),className:o},t.index)}),"all"===L?Me.map(t=>{const a=((t.start+t.end)/2-90)*(Math.PI/180),l=xe>0?(xe+fe)/2:.68*fe,n=`${Math.round(100*t.share)}%`;return(t.end-t.start)*(Math.PI/180)*l<2*oe||fe-xe<1.6*oe?null:e("text",{x:ve+l*Math.cos(a),y:pe+l*Math.sin(a),textAnchor:"middle",dominantBaseline:"central",fontSize:oe,fontWeight:600,fill:"var(--plass-surface)",className:"tabular-nums",children:n},t.index)}):null]}):null,$&&xe>0?e("div",{className:"pointer-events-none absolute flex flex-col items-center justify-center text-center",style:{insetInlineStart:ve-xe,top:pe-xe,width:2*xe,height:re?xe:2*xe},children:$}):null,null===ae||he?null:ce.render?e("div",{className:"pointer-events-none absolute top-0 start-1/2 z-10",children:ce.render({index:ae,category:ee[ae]?.name??ae,items:Ne})}):e(s,{heading:ee[ae]?.name,items:Ne,x:ve,y:8,flip:!1,size:H})]}),he?null:e(i,{heading:null===ae?void 0:ee[ae]?.name,items:Ne})]})}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export{PlPieChart}from"./PlPieChart.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as s,Fragment as t}from"react/jsx-runtime";import*as l from"react";import{
|
|
1
|
+
"use client";import{jsx as e,jsxs as s,Fragment as t}from"react/jsx-runtime";import*as l from"react";import{followPointer as r}from"../../internal/glow.js";import{useDefaults as o}from"../../internal/defaults.js";import{inertProps as n}from"../../internal/inert.js";import{controlSlots as i,controlTextClasses as a,cx as c,focusRingClasses as d,forcedEdgeClasses as m,gapClasses as p,glassClasses as f,hasContent as x,iconClasses as u,iconSizeClasses as h,metaTextClasses as v,paddingXClasses as g,sheetBodyClasses as b,transitionClasses as w}from"../../internal/styles.js";const y={solid:`text-(--p-on-solid) [background-image:var(--p-fill)] [box-shadow:var(--p-elev),var(--p-lift)] ${m}`,glass:/* @__PURE__ */[f,"border text-(--p-accent) bg-(--plass-glass)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:`${f} text-(--p-accent) bg-(--p-soft)`},j={solid:"hover:brightness-105 active:brightness-95",glass:"hover:bg-(--plass-glass-hover) hover:[border-color:var(--p-line)] active:bg-(--plass-glass-press)",ghost:"hover:bg-(--p-soft-hover) active:bg-(--p-soft-press)"},N={xs:"min-h-5.5",sm:"min-h-6.5",md:"min-h-8",lg:"min-h-10",xl:"min-h-12"},k={xs:"rounded-[0.6875rem]",sm:"rounded-[0.8125rem]",md:"rounded-[1rem]",lg:"rounded-[1.25rem]",xl:"rounded-[1.5rem]"},z={default:{xs:"px-3",sm:"px-4",md:"px-5",lg:"px-6",xl:"px-8"},compact:{xs:"px-1.5",sm:"px-2",md:"px-2.5",lg:"px-3",xl:"px-4"}},P={static:{top:"relative",bottom:"relative"},sticky:{top:"sticky top-3 z-20",bottom:"sticky bottom-3 z-20"},fixed:{top:"fixed inset-x-0 top-3 z-30 mx-auto w-fit",bottom:"fixed inset-x-0 bottom-3 z-30 mx-auto w-fit"}};export const PlPill=/* @__PURE__ */l.forwardRef(function PlPill({variant:m="solid",size:f,color:_,density:R,elevation:C=2,startIcon:I,endIcon:$,title:H,description:M,details:O,expanded:B=!1,position:E="static",side:F="top",className:S,style:q,children:A,onClick:D,onPointerMove:G,...J},K){const L=o(),Q=f??L.size??"md",T=_??L.color??"secondary",U=R??L.density??"default",V=l.useRef(null),W=l.useId(),[X,Y]=l.useState(0),Z=x(O);l.useEffect(()=>{const e=V.current;if(!e||"undefined"==typeof ResizeObserver)return;const s=new ResizeObserver(()=>Y(e.scrollHeight));return s.observe(e),Y(e.scrollHeight),()=>s.disconnect()},[Z]);const ee=Boolean(D),se=g[U][Q],te=s(t,{children:[x(I)?e("span",{className:c("flex shrink-0 items-center justify-center overflow-hidden rounded-full [&_img]:size-full [&_img]:object-cover",h[Q]),children:I}):null,x(H)||x(M)||x(A)?s("span",{className:c("flex min-w-0 flex-1 flex-col items-center justify-center text-center",z[U][Q]),children:[x(H)?e("span",{className:"max-w-full truncate",children:H}):null,x(M)?e("span",{className:c("max-w-full truncate font-normal",v[Q],"[color:color-mix(in_oklab,currentColor_72%,transparent)]"),children:M}):null,A]}):null]});return s("div",{ref:K,className:c("inline-flex max-w-full flex-col overflow-hidden align-middle",k[Q],"font-medium whitespace-nowrap select-none",a[Q],y[m],w,u,ee?`plass-glow ${j[m]}`:"",P[E][F],S),style:{...i(T,C,m),...q},onPointerMove:e=>{ee&&r(e),G?.(e)},...J,children:[s("div",{className:c("flex shrink-0 items-center py-1",N[Q],p[Q],ee?"ps-0":se,x($)?"pe-1":ee?"pe-0":""),children:[ee?e("button",{type:"button",className:c("flex min-w-0 flex-1 cursor-pointer items-center justify-center self-stretch","rounded-[inherit]",p[Q],se,d),"aria-expanded":Z?B:void 0,"aria-controls":Z?W:void 0,onClick:D,children:te}):te,x($)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:$}):null]}),Z?e("div",{id:W,className:c("overflow-hidden","[transition:height_var(--plass-duration-slow)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]"),style:{height:B?X:0},...n(!B),children:e("div",{ref:V,className:c("whitespace-normal pb-2",se,b[Q]),children:O})}):null]})});
|
|
@@ -58,4 +58,4 @@ export interface PlPopconfirmProps {
|
|
|
58
58
|
* is not an inconsistency: nobody reaches for a popconfirm to ask whether to
|
|
59
59
|
* save.
|
|
60
60
|
*/
|
|
61
|
-
export declare function PlPopconfirm({ trigger, title, description, confirmLabel, cancelLabel, onConfirm, onCancel, color: colorProp, size: sizeProp, side, align, width, open: openProp, defaultOpen, onOpenChange, className }: PlPopconfirmProps): React.JSX.Element;
|
|
61
|
+
export declare function PlPopconfirm({ trigger, title, description, confirmLabel: confirmLabelProp, cancelLabel: cancelLabelProp, onConfirm, onCancel, color: colorProp, size: sizeProp, side, align, width, open: openProp, defaultOpen, onOpenChange, className }: PlPopconfirmProps): React.JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as o}from"react/jsx-runtime";import*as t from"react";import{PlButton as i}from"../button/PlButton.js";import{PlPopover as n}from"../popover/PlPopover.js";import{useDefaults as r}from"../../internal/defaults.js";import{
|
|
1
|
+
"use client";import{jsx as e,jsxs as o}from"react/jsx-runtime";import*as t from"react";import{PlButton as i}from"../button/PlButton.js";import{PlPopover as n}from"../popover/PlPopover.js";import{useDefaults as r}from"../../internal/defaults.js";import{useLabels as s}from"../../internal/labels.js";import{cx as a}from"../../internal/styles.js";export function PlPopconfirm({trigger:l,title:c,description:m,confirmLabel:p,cancelLabel:d,onConfirm:f,onCancel:u,color:g,size:h,side:j="top",align:y="center",width:C=280,open:x,defaultOpen:P,onOpenChange:b,className:v}){const w=r(),z=s(),N=p??z.confirm,O=d??z.cancel,k=h??w.size??"md",L=g??"danger",[S,B]=t.useState(P??!1),F=x??S,[q,A]=t.useState(!1),setOpen=e=>{void 0===x&&B(e),b?.(e)};return e(n,{trigger:l,open:F,onOpenChange:e=>{q||(e||u?.(),setOpen(e))},title:c,description:m,side:j,align:y,width:C,color:L,size:k,showClose:!1,className:v,children:o("div",{className:a("mt-3 flex flex-wrap items-center justify-end gap-2"),children:[e(i,{variant:"ghost",color:"secondary",size:k,density:"compact",disabled:q,onClick:()=>{u?.(),setOpen(!1)},children:O}),e(i,{color:L,size:k,density:"compact",loading:q,autoFocus:!0,onClick:async()=>{const e=f?.();if(e instanceof Promise){A(!0);try{await e,setOpen(!1)}catch{}finally{A(!1)}}else setOpen(!1)},children:N})]})})}
|
|
@@ -40,11 +40,11 @@ export interface PlPopoverProps extends Pick<PlassStyleProps, 'size' | 'color' |
|
|
|
40
40
|
/**
|
|
41
41
|
* Draws the little wedge pointing at the trigger.
|
|
42
42
|
*
|
|
43
|
-
* Off by default
|
|
44
|
-
* wedge
|
|
45
|
-
*
|
|
46
|
-
*
|
|
47
|
-
*
|
|
43
|
+
* Off by default. This surface is translucent over a blurred backdrop, and a
|
|
44
|
+
* wedge sticking out past the popup's own box cannot carry that backdrop with
|
|
45
|
+
* it, so the wedge is the one part of the sheet the blur does not reach. Turn
|
|
46
|
+
* it on where the trigger is far enough away that the popup needs to say what
|
|
47
|
+
* it belongs to.
|
|
48
48
|
* @default false
|
|
49
49
|
*/
|
|
50
50
|
arrow?: boolean;
|
|
@@ -104,4 +104,4 @@ export declare const PlPopoverClose: React.ForwardRefExoticComponent<Omit<import
|
|
|
104
104
|
* the `aria-labelledby` / `aria-describedby` wiring. What is left here is the
|
|
105
105
|
* surface, the width ladder and the header.
|
|
106
106
|
*/
|
|
107
|
-
export declare function PlPopover({ size: sizeProp, color: colorProp, density: densityProp, trigger, title, description, children, side, align, sideOffset, alignOffset, arrow, open, defaultOpen, onOpenChange, modal, dismissible, showClose, closeLabel, width, className, style, ...props }: PlPopoverProps): React.JSX.Element;
|
|
107
|
+
export declare function PlPopover({ size: sizeProp, color: colorProp, density: densityProp, trigger, title, description, children, side, align, sideOffset, alignOffset, arrow, open, defaultOpen, onOpenChange, modal, dismissible, showClose, closeLabel: closeLabelProp, width, className, style, ...props }: PlPopoverProps): React.JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as
|
|
1
|
+
"use client";import{jsx as s,jsxs as e}from"react/jsx-runtime";import{useDefaults as l}from"../../internal/defaults.js";import{useLabels as a}from"../../internal/labels.js";import{Popover as o}from"@base-ui/react/popover";import{CloseIcon as r}from"../../internal/icons.js";import{PopupArrow as i}from"../../internal/picker.js";import{cx as n,focusRingClasses as t,glassClasses as p,hasContent as d,metaTextClasses as c,radiusClasses as m,sheetBodyClasses as f,sheetHeaderGapClasses as u,sheetPaddingXClasses as g,sheetPaddingYClasses as x,sheetSectionGapClasses as h,sheetTitleClasses as v,surfaceSlots as b}from"../../internal/styles.js";const y={xs:"max-w-56",sm:"max-w-64",md:"max-w-80",lg:"max-w-96",xl:"max-w-lg"},w=/* @__PURE__ */[p,"relative flex flex-col","border text-(--plass-fg) bg-(--plass-glass-press)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--plass-shadow-3),var(--plass-gloss-glass)]","[outline:none]","[transition:opacity_var(--plass-duration)_var(--plass-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),j={xs:8,sm:9,md:10,lg:11,xl:12},N=/* @__PURE__ */["flex size-[1.6em] shrink-0 cursor-pointer items-center justify-center","rounded-full text-(--plass-muted-fg)","[&_svg]:size-[1.1em] [&_svg]:shrink-0","[transition:background-color_var(--plass-duration)_var(--plass-ease),color_var(--plass-duration)_var(--plass-ease)]","hover:bg-(--p-soft) hover:text-(--plass-fg)",t].join(" ");export const PlPopoverClose=o.Close;export function PlPopover({size:t,color:p,density:O,trigger:P,title:_,description:z,children:k,side:C="bottom",align:T="center",sideOffset:A=6,alignOffset:D=0,arrow:L=!1,open:R,defaultOpen:W,onOpenChange:$,modal:q=!1,dismissible:B=!0,showClose:E=!1,closeLabel:F,width:G,className:H,style:I,...J}){const K=l(),M=a(),Q=F??M.close,S=t??K.size??"md",U=p??K.color??"primary",V=O??K.density??"default",X=g[V][S],Y=x[V][S],Z=j[S],ss=d(_)||d(z);return e(o.Root,{open:R,defaultOpen:W,modal:q,onOpenChange:(s,e)=>{B||s||"escape-key"!==e.reason&&"outside-press"!==e.reason&&"focus-out"!==e.reason?$?.(s):e.cancel()},children:[P?s(o.Trigger,{render:P}):null,s(o.Portal,{children:s(o.Positioner,{className:"plass-portal z-(--plass-z-portal) [outline:none]",side:C,align:T,sideOffset:A,alignOffset:D,children:e(o.Popup,{className:n(w,m[S],f[S],h[S],X,Y,void 0===G?y[S]:"",H),style:{...b(U,3),...void 0===G?null:{maxWidth:"number"==typeof G?`${G}px`:G},...I},...J,children:[L?s(i,{as:o.Arrow,size:Z}):null,ss||E?e("div",{className:"flex shrink-0 items-start gap-3",children:[e("div",{className:n("flex min-w-0 flex-1 flex-col",u[S]),children:[d(_)?s(o.Title,{className:n("m-0 font-semibold",v[S]),children:_}):null,d(z)?s(o.Description,{className:n("m-0 text-(--plass-muted-fg)",c[S]),children:z}):null]}),E?s(o.Close,{"aria-label":Q,className:N,children:s(r,{})}):null]}):null,d(k)?s("div",{className:"min-w-0",children:k}):null]})})})]})}
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { useRender } from '@base-ui/react/use-render';
|
|
3
|
+
/**
|
|
4
|
+
* Somewhere in the document to put the children.
|
|
5
|
+
*
|
|
6
|
+
* Four shapes, and the last three exist because of the same fact: the element a
|
|
7
|
+
* portal targets is usually one React has not created yet when the prop is
|
|
8
|
+
* being built. A ref is `null` on the render that creates it, and a query
|
|
9
|
+
* finds nothing until the tree is in the document — so the target is resolved
|
|
10
|
+
* after mount rather than read off the props.
|
|
11
|
+
*/
|
|
12
|
+
export type PlPortalContainer = Element | DocumentFragment | React.RefObject<Element | null> | (() => Element | DocumentFragment | null) | null;
|
|
13
|
+
export interface PlPortalProps extends React.ComponentPropsWithoutRef<'div'> {
|
|
14
|
+
/**
|
|
15
|
+
* Where the children go. `document.body` when it is not said.
|
|
16
|
+
*
|
|
17
|
+
* Takes an element, a fragment, a **ref**, or a function returning one of
|
|
18
|
+
* those. The ref and the function are resolved after mount, which is what
|
|
19
|
+
* lets a portal target something React itself renders.
|
|
20
|
+
*/
|
|
21
|
+
container?: PlPortalContainer;
|
|
22
|
+
/**
|
|
23
|
+
* Renders in place instead of moving anything.
|
|
24
|
+
*
|
|
25
|
+
* **Decide it once, at mount.** A portalled subtree and an inline one are
|
|
26
|
+
* different children as far as React is concerned, so turning this on or off
|
|
27
|
+
* remounts everything inside and throws away what was in it: a half-filled
|
|
28
|
+
* form, a scroll position, a video that was playing. That is
|
|
29
|
+
* reconciliation rather than a shortcoming here, and no portal escapes it.
|
|
30
|
+
*
|
|
31
|
+
* It is a prop rather than an absence so that a caller can decide from
|
|
32
|
+
* something only they know — a subtree that is already inside a portal, an
|
|
33
|
+
* embed with no `document.body` worth reaching, a test that wants the markup
|
|
34
|
+
* where it was written.
|
|
35
|
+
* @default false
|
|
36
|
+
*/
|
|
37
|
+
disabled?: boolean;
|
|
38
|
+
/**
|
|
39
|
+
* Renders something other than a `<div>`: `render={<ul />}` for a portal
|
|
40
|
+
* whose target is a list, `render={<tbody />}` for one whose target is a
|
|
41
|
+
* table. Base UI's own escape hatch, and the answer to a wrapper that is the
|
|
42
|
+
* wrong element for where it landed.
|
|
43
|
+
*/
|
|
44
|
+
render?: useRender.RenderProp;
|
|
45
|
+
/** What is moved. */
|
|
46
|
+
children?: React.ReactNode;
|
|
47
|
+
}
|
|
48
|
+
/**
|
|
49
|
+
* Children, rendered somewhere else in the document.
|
|
50
|
+
*
|
|
51
|
+
* `createPortal` with the three things this library has to add on top, and it
|
|
52
|
+
* is worth being clear that the first is the only real reason to reach for it.
|
|
53
|
+
*
|
|
54
|
+
* **It carries `plass-portal`.** Every surface the library sends through a
|
|
55
|
+
* portal — a modal, a drawer, a menu, a popover, a tooltip, a toast — lands with
|
|
56
|
+
* that class on it, because a portalled subtree leaves whatever element a host
|
|
57
|
+
* had scoped its CSS reset to and the class is how that host finds it again.
|
|
58
|
+
* A caller's own portal that did not carry it is the one subtree on the page
|
|
59
|
+
* the reset misses.
|
|
60
|
+
*
|
|
61
|
+
* **It renders nothing until it has mounted.** There is no `document` on a
|
|
62
|
+
* server, so the HTML that ships never contains a portalled subtree and the
|
|
63
|
+
* hydrating render does not either. That is not a limitation to work around —
|
|
64
|
+
* it is what a portal is — so anything that has to be in the server's HTML does
|
|
65
|
+
* not belong in one.
|
|
66
|
+
*
|
|
67
|
+
* **`container` is resolved after mount**, which is what lets it be a ref or a
|
|
68
|
+
* query. The element a portal targets is usually one React has not created yet
|
|
69
|
+
* at the moment the prop is written.
|
|
70
|
+
*
|
|
71
|
+
* What it does **not** do is carry the colour scheme. `styles.css` answers to a
|
|
72
|
+
* `.dark` or a `[data-theme]` on any ancestor, and a portal to `document.body`
|
|
73
|
+
* has left every ancestor it had — so a subtree pinned to one theme goes back
|
|
74
|
+
* to the page's. That is true of the library's own popups too, and the fix is
|
|
75
|
+
* the same for both: portal into an element that is inside the theme, with
|
|
76
|
+
* `container`.
|
|
77
|
+
*/
|
|
78
|
+
export declare const PlPortal: React.ForwardRefExoticComponent<PlPortalProps & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use client";import*as e from"react";import{createPortal as r}from"react-dom";import{useRender as t}from"@base-ui/react/use-render";import{cx as n}from"../../internal/styles.js";export const PlPortal=/* @__PURE__ */e.forwardRef(function PlPortal({container:o,disabled:c=!1,render:s,className:a,children:l,...u},i){const[d,m]=e.useState(null);e.useEffect(()=>{c||m(function resolveContainer(e){return"function"==typeof e?e()??document.body:e&&"current"in e?e.current??document.body:e??document.body}(o))},[o,c]);const f=t({render:s,ref:i,props:{className:n("plass-portal",a),children:l,...u}});return c?f:d?r(f,d):null});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export{PlPortal}from"./PlPortal.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as
|
|
1
|
+
"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as a from"react";import{useDefaults as s}from"../../internal/defaults.js";import{Progress as r}from"@base-ui/react/progress";import{fillClasses as t,fillTransitionClasses as o,plateGapClasses as n,plateRadiusClasses as i,plateSizeClasses as m,progressAriaText as c,progressFraction as u,progressSlots as f,progressText as d,trackClasses as p}from"../../internal/progress.js";import{cx as x,metaTextClasses as h,stackGapClasses as g}from"../../internal/styles.js";export const PlProgressBox=/* @__PURE__ */a.forwardRef(function PlProgressBox({size:a,color:y,count:j=4,value:w=null,min:N=0,max:b=100,label:v,showValue:M=!1,format:P,className:V,style:k,...z},A){const B=s(),R=a??B.size??"md",T=y??B.color??"primary",L=u(w,N,b),$=null===L,q=void 0!==P,C=Math.max(1,Math.floor(j));return l(r.Root,{ref:A,value:w??null,min:N,max:b,format:P,locale:B.locale,getAriaValueText:c(L,q,B.locale),className:x("inline-flex flex-col",g[R],V),style:{...f(T),...k},...z,children:[v||M?l("div",{className:x("flex items-baseline gap-2",v?"justify-between":"justify-end",h[R]),children:[v?e(r.Label,{className:"min-w-0 truncate text-(--plass-fg)",children:v}):null,M?e(r.Value,{className:"shrink-0 tabular-nums text-(--plass-muted-fg)",children:e=>d(L,e,q,B.locale)}):null]}):null,e(r.Track,{className:x("flex",n[R]),children:Array.from({length:C},(l,a)=>e("span",{className:x("relative overflow-hidden",p,m[R],i[R]),children:e("span",{"aria-hidden":"true",className:x("absolute inset-y-0 start-0",t,$?"plass-plate-wave w-full":o),style:$?{"--p-i":a}:{width:`${Math.min(100,Math.max(0,100*(L*C-a)))}%`}})},a))})]})});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as r,jsxs as s}from"react/jsx-runtime";import*as e from"react";import{useDefaults as a}from"../../internal/defaults.js";import{Progress as
|
|
1
|
+
"use client";import{jsx as r,jsxs as s}from"react/jsx-runtime";import*as e from"react";import{useDefaults as a}from"../../internal/defaults.js";import{Progress as l}from"@base-ui/react/progress";import{progressAriaText as t,progressFraction as o,progressSlots as i,progressText as n,ringDiameters as c,ringStrokes as m}from"../../internal/progress.js";import{cx as f,gapClasses as u,metaTextClasses as d}from"../../internal/styles.js";export const PlProgressCircular=/* @__PURE__ */e.forwardRef(function PlProgressCircular({size:p,color:h,value:x=null,min:k=0,max:g=100,label:v,showValue:y=!1,format:$,className:j,style:w,...N},P){const b=a(),C=p??b.size??"md",V=h??b.color??"primary",z=o(x,k,g),D=null===z,I=void 0!==$,L=`${e.useId()}-fill`,R=c[C],W=m[C],_=R/2,A=_-W/2,B=2*Math.PI*A,G=D?`${.28*B} ${B}`:`${B}`,M=D?0:B*(1-z);return s(l.Root,{ref:P,value:x??null,min:k,max:g,format:$,locale:b.locale,getAriaValueText:t(z,I,b.locale),className:f("inline-flex items-center",u[C],d[C],j),style:{...i(V),...w},...N,children:[s("svg",{className:f("shrink-0",D&&"plass-ring-spin"),width:R,height:R,viewBox:`0 0 ${R} ${R}`,fill:"none","aria-hidden":"true",children:[r("defs",{children:s("linearGradient",{id:L,x1:"0",y1:"0",x2:"1",y2:"1",children:[r("stop",{offset:"0%",stopColor:"var(--p-solid)"}),r("stop",{offset:"100%",stopColor:"var(--p-solid-to)"})]})}),r("circle",{cx:_,cy:_,r:A,stroke:"var(--plass-track)",strokeWidth:W}),r("circle",{cx:_,cy:_,r:A,stroke:`url(#${L})`,strokeWidth:W,strokeLinecap:"round",strokeDasharray:G,strokeDashoffset:M,transform:`rotate(-90 ${_} ${_})`,className:"[transition:stroke-dashoffset_var(--plass-duration-slow)_var(--plass-ease)]"})]}),v?r(l.Label,{className:"min-w-0 truncate text-(--plass-fg)",children:v}):null,y?r(l.Value,{className:"shrink-0 tabular-nums text-(--plass-muted-fg)",children:r=>n(z,r,I,b.locale)}):null]})});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as
|
|
1
|
+
"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as s from"react";import{useDefaults as r}from"../../internal/defaults.js";import{Progress as a}from"@base-ui/react/progress";import{barThicknessClasses as o,fillClasses as t,fillTransitionClasses as n,progressAriaText as i,progressFraction as m,progressSlots as u,progressText as c,trackClasses as f}from"../../internal/progress.js";import{cx as d,metaTextClasses as p,stackGapClasses as x}from"../../internal/styles.js";export const PlProgressLinear=/* @__PURE__ */s.forwardRef(function PlProgressLinear({size:s,color:g,value:h=null,min:j=0,max:w=100,label:b,showValue:N=!1,format:v,className:y,style:P,...L},V){const k=r(),z=s??k.size??"md",R=g??k.color??"primary",T=m(h,j,w),A=null===T,I=void 0!==v;return l(a.Root,{ref:V,value:h??null,min:j,max:w,format:v,locale:k.locale,getAriaValueText:i(T,I,k.locale),className:d("flex w-full flex-col",x[z],y),style:{...u(R),...P},...L,children:[b||N?l("div",{className:d("flex items-baseline gap-2",b?"justify-between":"justify-end",p[z]),children:[b?e(a.Label,{className:"min-w-0 truncate text-(--plass-fg)",children:b}):null,N?e(a.Value,{className:"shrink-0 tabular-nums text-(--plass-muted-fg)",children:e=>c(T,e,I,k.locale)}):null]}):null,e(a.Track,{className:d("relative w-full overflow-hidden rounded-full",f,o[z]),children:e(a.Indicator,{className:d("rounded-full",t,A?"plass-progress-sweep":`absolute top-0 ${n}`)})})]})});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as
|
|
1
|
+
"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as r from"react";import{useDefaults as l}from"../../internal/defaults.js";import{Radio as o}from"@base-ui/react/radio";import{RadioGroup as s}from"@base-ui/react/radio-group";import{Field as t}from"@base-ui/react/field";import{controlSlots as i,cx as n,focusRingClasses as d,forcedCheckedClasses as c,forcedDisabledCheckedClasses as p,glassClasses as m,hasContent as u,metaTextClasses as f,tickDotClasses as h,tickRowTextClasses as b,tickSizeClasses as g,transitionClasses as x}from"../../internal/styles.js";const v=/* @__PURE__ */r.createContext({size:"md",color:"primary",readOnly:!1,disabled:!1}),k=/* @__PURE__ */["relative inline-flex shrink-0 items-center justify-center rounded-full border","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",x,d].join(" "),y=/* @__PURE__ */[m,"cursor-pointer bg-(--plass-glass) [border-color:var(--plass-border)]","hover:bg-(--plass-glass-hover) hover:[border-color:var(--p-line)]","data-[checked]:[background-image:var(--p-fill)] data-[checked]:text-(--p-on-solid)","data-[checked]:[border-color:transparent] data-[checked]:hover:brightness-105",c].join(" "),N=/* @__PURE__ */[m,"cursor-default bg-(--plass-glass) [border-color:var(--plass-border)]","saturate-[0.55]","data-[checked]:[background-image:var(--p-fill)] data-[checked]:text-(--p-on-solid)","data-[checked]:[border-color:transparent]",c].join(" "),j=/* @__PURE__ */[m,"cursor-not-allowed bg-(--plass-glass) [border-color:var(--plass-border)]","opacity-50 saturate-[0.35]","data-[checked]:[background-image:var(--p-fill)] data-[checked]:text-(--p-on-solid)","data-[checked]:[border-color:transparent]",p].join(" "),R=/* @__PURE__ */["rounded-full bg-current","[transition-property:width,height]","[transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]","motion-reduce:[transition-duration:0ms]"].join(" ");export const PlRadio=/* @__PURE__ */r.forwardRef(function PlRadio({label:l,description:s,disabled:i=!1,className:n,style:d,...c},p){const m=r.useContext(v),u=c.readOnly??m.readOnly,x=i||m.disabled;return e(t.Root,{disabled:i,className:["flex flex-col",n??""].filter(Boolean).join(" "),style:d,children:a("div",{className:`flex items-start gap-2 ${b[m.size]}`,children:[e("span",{className:"flex h-[1lh] shrink-0 items-center",children:e(o.Root,{ref:p,className:[k,g[m.size],x?j:u?N:y].join(" "),disabled:i,...c,children:e(o.Indicator,{keepMounted:!0,className:`${R} ${h[m.size]}`})})}),l||s?a("span",{className:"flex min-w-0 flex-col gap-0.5",children:[l?e(t.Label,{className:x?"text-(--plass-muted-fg)":"cursor-pointer text-(--plass-fg)",children:l}):null,s?e(t.Description,{className:`${f[m.size]} text-(--plass-muted-fg)`,children:s}):null]}):null]})})});export const PlRadioGroup=/* @__PURE__ */r.forwardRef(function PlRadioGroup({size:o,color:d,orientation:c="vertical",label:p,description:m,error:h,invalid:b,disabled:g=!1,readOnly:x=!1,className:k,classNames:y,style:N,children:j,...R},z){const w=l(),O=o??w.size??"md",P=d??w.color??"primary",$=u(h),G=b??$,B=G?"danger":P,C=r.useMemo(()=>({size:O,color:B,readOnly:x,disabled:g}),[O,B,x,g]);return e(v.Provider,{value:C,children:a(t.Root,{disabled:g,invalid:G,className:["flex flex-col gap-1.5",k??""].filter(Boolean).join(" "),style:{...i(B,0,"solid"),...N},children:[p?e(t.Label,{className:n(f[O],"font-semibold",g?"text-(--plass-muted-fg)":"text-(--plass-fg)",y?.label),children:p}):null,m?e(t.Description,{className:n(f[O],"text-(--plass-muted-fg)",y?.description),children:m}):null,e(s,{ref:z,disabled:g,readOnly:x,className:n("flex","horizontal"===c?"flex-row flex-wrap gap-x-5 gap-y-2":"flex-col gap-2",y?.control),...R,children:j}),e(t.Error,$?{match:!0,className:n(f[O],"text-(--p-accent)",y?.error),children:h}:{className:n(f[O],"text-(--p-accent)",y?.error)})]})})});
|
|
@@ -60,7 +60,7 @@ export interface PlRatingProps extends Omit<React.ComponentPropsWithoutRef<'div'
|
|
|
60
60
|
label?: string;
|
|
61
61
|
/**
|
|
62
62
|
* What one star, and the whole control once it is read only, is called.
|
|
63
|
-
* @default `{value} out of {count}`
|
|
63
|
+
* @default `{value} out of {count}`, and `No rating` at zero, from the label pack
|
|
64
64
|
*/
|
|
65
65
|
valueLabel?: (value: number, count: number) => string;
|
|
66
66
|
}
|