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.
Files changed (454) hide show
  1. package/CHANGELOG.md +962 -0
  2. package/README.md +19 -17
  3. package/dist/components/accordion/PlAccordion.d.ts +1 -1
  4. package/dist/components/alert/PlAlert.js +1 -1
  5. package/dist/components/anchor/PlAnchor.d.ts +85 -0
  6. package/dist/components/anchor/PlAnchor.js +1 -0
  7. package/dist/components/anchor/index.d.ts +2 -0
  8. package/dist/components/anchor/index.js +1 -0
  9. package/dist/components/animate-appear/PlAnimateAppear.d.ts +10 -0
  10. package/dist/components/animate-appear/PlAnimateAppear.js +1 -1
  11. package/dist/components/animate-blink/PlAnimateBlink.d.ts +2 -2
  12. package/dist/components/animate-blink/PlAnimateBlink.js +1 -1
  13. package/dist/components/animate-counter/PlAnimateCounter.d.ts +83 -0
  14. package/dist/components/animate-counter/PlAnimateCounter.js +1 -0
  15. package/dist/components/animate-counter/index.d.ts +2 -0
  16. package/dist/components/animate-counter/index.js +1 -0
  17. package/dist/components/animate-fade/PlAnimateFade.d.ts +2 -2
  18. package/dist/components/animate-fade/PlAnimateFade.js +1 -1
  19. package/dist/components/animate-float/PlAnimateFloat.d.ts +51 -0
  20. package/dist/components/animate-float/PlAnimateFloat.js +1 -0
  21. package/dist/components/animate-float/index.d.ts +2 -0
  22. package/dist/components/animate-float/index.js +1 -0
  23. package/dist/components/animate-grow/PlAnimateGrow.d.ts +2 -2
  24. package/dist/components/animate-grow/PlAnimateGrow.js +1 -1
  25. package/dist/components/animate-headline/PlAnimateHeadline.js +1 -1
  26. package/dist/components/animate-lighting/PlAnimateLighting.js +1 -1
  27. package/dist/components/animate-marquee/PlAnimateMarquee.d.ts +13 -4
  28. package/dist/components/animate-marquee/PlAnimateMarquee.js +1 -1
  29. package/dist/components/animate-reveal/PlAnimateReveal.d.ts +51 -0
  30. package/dist/components/animate-reveal/PlAnimateReveal.js +1 -0
  31. package/dist/components/animate-reveal/index.d.ts +2 -0
  32. package/dist/components/animate-reveal/index.js +1 -0
  33. package/dist/components/animate-rotate/PlAnimateRotate.d.ts +2 -2
  34. package/dist/components/animate-rotate/PlAnimateRotate.js +1 -1
  35. package/dist/components/animate-scramble/PlAnimateScramble.d.ts +75 -0
  36. package/dist/components/animate-scramble/PlAnimateScramble.js +1 -0
  37. package/dist/components/animate-scramble/index.d.ts +2 -0
  38. package/dist/components/animate-scramble/index.js +1 -0
  39. package/dist/components/animate-shake/PlAnimateShake.d.ts +57 -0
  40. package/dist/components/animate-shake/PlAnimateShake.js +1 -0
  41. package/dist/components/animate-shake/index.d.ts +2 -0
  42. package/dist/components/animate-shake/index.js +1 -0
  43. package/dist/components/animate-slide/PlAnimateSlide.d.ts +2 -2
  44. package/dist/components/animate-slide/PlAnimateSlide.js +1 -1
  45. package/dist/components/animate-split/PlAnimateSplit.d.ts +57 -0
  46. package/dist/components/animate-split/PlAnimateSplit.js +1 -0
  47. package/dist/components/animate-split/index.d.ts +2 -0
  48. package/dist/components/animate-split/index.js +1 -0
  49. package/dist/components/animate-typing/PlAnimateTyping.d.ts +3 -2
  50. package/dist/components/animate-typing/PlAnimateTyping.js +1 -1
  51. package/dist/components/animate-zoom/PlAnimateZoom.d.ts +2 -2
  52. package/dist/components/animate-zoom/PlAnimateZoom.js +1 -1
  53. package/dist/components/app-logo/PlAppLogo.d.ts +78 -0
  54. package/dist/components/app-logo/PlAppLogo.js +1 -0
  55. package/dist/components/app-logo/index.d.ts +2 -0
  56. package/dist/components/app-logo/index.js +1 -0
  57. package/dist/components/area-chart/PlAreaChart.d.ts +54 -0
  58. package/dist/components/area-chart/PlAreaChart.js +1 -0
  59. package/dist/components/area-chart/index.d.ts +2 -0
  60. package/dist/components/area-chart/index.js +1 -0
  61. package/dist/components/aspect-ratio/PlAspectRatio.d.ts +2 -1
  62. package/dist/components/aspect-ratio/PlAspectRatio.js +1 -1
  63. package/dist/components/avatar/PlAvatar.js +1 -1
  64. package/dist/components/back-top/PlBackTop.d.ts +2 -1
  65. package/dist/components/back-top/PlBackTop.js +1 -1
  66. package/dist/components/badge/PlBadge.js +1 -1
  67. package/dist/components/bar-chart/PlBarChart.d.ts +63 -0
  68. package/dist/components/bar-chart/PlBarChart.js +1 -0
  69. package/dist/components/bar-chart/index.d.ts +2 -0
  70. package/dist/components/bar-chart/index.js +1 -0
  71. package/dist/components/bottom-navigation/PlBottomNavigation.d.ts +3 -0
  72. package/dist/components/breadcrumb/PlBreadcrumb.js +1 -1
  73. package/dist/components/button/PlButton.d.ts +8 -0
  74. package/dist/components/button/PlButton.js +1 -1
  75. package/dist/components/button-group/PlButtonGroup.js +1 -1
  76. package/dist/components/calendar/PlCalendar.js +1 -1
  77. package/dist/components/card/PlCard.js +1 -1
  78. package/dist/components/carousel/PlCarousel.d.ts +1 -1
  79. package/dist/components/carousel/PlCarousel.js +1 -1
  80. package/dist/components/chat-bubble/PlChatBubble.d.ts +4 -1
  81. package/dist/components/chat-bubble/PlChatBubble.js +1 -1
  82. package/dist/components/checkbox/PlCheckbox.js +1 -1
  83. package/dist/components/chip/PlChip.d.ts +6 -2
  84. package/dist/components/chip/PlChip.js +1 -1
  85. package/dist/components/code-block/PlCodeBlock.d.ts +192 -0
  86. package/dist/components/code-block/PlCodeBlock.js +1 -0
  87. package/dist/components/code-block/index.d.ts +2 -0
  88. package/dist/components/code-block/index.js +1 -0
  89. package/dist/components/color-picker/PlColorPicker.js +1 -1
  90. package/dist/components/combobox/PlCombobox.d.ts +6 -5
  91. package/dist/components/combobox/PlCombobox.js +1 -1
  92. package/dist/components/command-palette/PlCommandPalette.d.ts +6 -2
  93. package/dist/components/command-palette/PlCommandPalette.js +1 -1
  94. package/dist/components/confirm/PlConfirmProvider.js +1 -1
  95. package/dist/components/container/PlContainer.d.ts +22 -6
  96. package/dist/components/container/PlContainer.js +1 -1
  97. package/dist/components/data-list/PlDataList.d.ts +74 -0
  98. package/dist/components/data-list/PlDataList.js +1 -0
  99. package/dist/components/data-list/index.d.ts +2 -0
  100. package/dist/components/data-list/index.js +1 -0
  101. package/dist/components/data-table/PlDataTable.d.ts +216 -0
  102. package/dist/components/data-table/PlDataTable.js +1 -0
  103. package/dist/components/data-table/index.d.ts +2 -0
  104. package/dist/components/data-table/index.js +1 -0
  105. package/dist/components/date-picker/PlDatePicker.js +1 -1
  106. package/dist/components/date-range-picker/PlDateRangePicker.js +1 -1
  107. package/dist/components/date-time-picker/PlDateTimePicker.js +1 -1
  108. package/dist/components/drawer/PlDrawer.d.ts +1 -1
  109. package/dist/components/drawer/PlDrawer.js +1 -1
  110. package/dist/components/file-picker/PlFilePicker.d.ts +4 -1
  111. package/dist/components/file-picker/PlFilePicker.js +1 -1
  112. package/dist/components/flex/PlFlex.d.ts +83 -0
  113. package/dist/components/flex/PlFlex.js +1 -0
  114. package/dist/components/flex/index.d.ts +2 -0
  115. package/dist/components/flex/index.js +1 -0
  116. package/dist/components/floating-action-button/PlFloatingActionButton.d.ts +81 -0
  117. package/dist/components/floating-action-button/PlFloatingActionButton.js +1 -0
  118. package/dist/components/floating-action-button/index.d.ts +2 -0
  119. package/dist/components/floating-action-button/index.js +1 -0
  120. package/dist/components/floating-bottom-navigation/PlFloatingBottomNavigation.d.ts +3 -0
  121. package/dist/components/floating-bottom-navigation/PlFloatingBottomNavigation.js +1 -1
  122. package/dist/components/footer/PlFooter.d.ts +4 -3
  123. package/dist/components/footer/PlFooter.js +1 -1
  124. package/dist/components/form/PlForm.js +1 -1
  125. package/dist/components/gallery/PlGallery.d.ts +192 -0
  126. package/dist/components/gallery/PlGallery.js +1 -0
  127. package/dist/components/gallery/PlGalleryViewer.d.ts +31 -0
  128. package/dist/components/gallery/PlGalleryViewer.js +1 -0
  129. package/dist/components/gallery/index.d.ts +2 -0
  130. package/dist/components/gallery/index.js +1 -0
  131. package/dist/components/gauge-chart/PlGaugeChart.d.ts +64 -0
  132. package/dist/components/gauge-chart/PlGaugeChart.js +1 -0
  133. package/dist/components/gauge-chart/index.d.ts +2 -0
  134. package/dist/components/gauge-chart/index.js +1 -0
  135. package/dist/components/grid/PlGrid.js +1 -1
  136. package/dist/components/grid/PlGridItem.js +1 -1
  137. package/dist/components/header/PlHeader.d.ts +4 -3
  138. package/dist/components/header/PlHeader.js +1 -1
  139. package/dist/components/heatmap-chart/PlHeatmapChart.d.ts +69 -0
  140. package/dist/components/heatmap-chart/PlHeatmapChart.js +1 -0
  141. package/dist/components/heatmap-chart/index.d.ts +2 -0
  142. package/dist/components/heatmap-chart/index.js +1 -0
  143. package/dist/components/highlight/PlHighlight.js +1 -1
  144. package/dist/components/hot-keys/PlHotKeys.js +1 -1
  145. package/dist/components/hover-card/PlHoverCard.d.ts +96 -0
  146. package/dist/components/hover-card/PlHoverCard.js +1 -0
  147. package/dist/components/hover-card/index.d.ts +2 -0
  148. package/dist/components/hover-card/index.js +1 -0
  149. package/dist/components/how-to-steps/PlHowToSteps.d.ts +87 -0
  150. package/dist/components/how-to-steps/PlHowToSteps.js +1 -0
  151. package/dist/components/how-to-steps/index.d.ts +2 -0
  152. package/dist/components/how-to-steps/index.js +1 -0
  153. package/dist/components/image/PlImage.d.ts +195 -8
  154. package/dist/components/image/PlImage.js +1 -1
  155. package/dist/components/image/PlImagePreview.d.ts +58 -0
  156. package/dist/components/image/PlImagePreview.js +1 -0
  157. package/dist/components/image/index.d.ts +1 -1
  158. package/dist/components/line-chart/PlLineChart.d.ts +74 -0
  159. package/dist/components/line-chart/PlLineChart.js +1 -0
  160. package/dist/components/line-chart/index.d.ts +2 -0
  161. package/dist/components/line-chart/index.js +1 -0
  162. package/dist/components/menu/PlMenu.d.ts +14 -5
  163. package/dist/components/menu/PlMenu.js +1 -1
  164. package/dist/components/meter/PlMeter.d.ts +83 -0
  165. package/dist/components/meter/PlMeter.js +1 -0
  166. package/dist/components/meter/index.d.ts +2 -0
  167. package/dist/components/meter/index.js +1 -0
  168. package/dist/components/mockup/PlMockup.d.ts +146 -0
  169. package/dist/components/mockup/PlMockup.js +1 -0
  170. package/dist/components/mockup/index.d.ts +2 -0
  171. package/dist/components/mockup/index.js +1 -0
  172. package/dist/components/modal/PlModal.d.ts +1 -1
  173. package/dist/components/modal/PlModal.js +1 -1
  174. package/dist/components/navigation-menu/PlNavigationMenu.d.ts +7 -1
  175. package/dist/components/navigation-menu/PlNavigationMenu.js +1 -1
  176. package/dist/components/number-field/PlNumberField.d.ts +1 -1
  177. package/dist/components/number-field/PlNumberField.js +1 -1
  178. package/dist/components/otp-field/PlOtpField.d.ts +6 -0
  179. package/dist/components/otp-field/PlOtpField.js +1 -1
  180. package/dist/components/overlay/PlOverlay.d.ts +1 -1
  181. package/dist/components/overlay/PlOverlay.js +1 -1
  182. package/dist/components/page-layout/PlPageLayout.js +1 -1
  183. package/dist/components/pagination/PlPagination.d.ts +12 -9
  184. package/dist/components/pagination/PlPagination.js +1 -1
  185. package/dist/components/panes/PlPanes.d.ts +7 -2
  186. package/dist/components/panes/PlPanes.js +1 -1
  187. package/dist/components/pie-chart/PlPieChart.d.ts +58 -0
  188. package/dist/components/pie-chart/PlPieChart.js +1 -0
  189. package/dist/components/pie-chart/index.d.ts +2 -0
  190. package/dist/components/pie-chart/index.js +1 -0
  191. package/dist/components/pill/PlPill.js +1 -1
  192. package/dist/components/popconfirm/PlPopconfirm.d.ts +1 -1
  193. package/dist/components/popconfirm/PlPopconfirm.js +1 -1
  194. package/dist/components/popover/PlPopover.d.ts +6 -6
  195. package/dist/components/popover/PlPopover.js +1 -1
  196. package/dist/components/portal/PlPortal.d.ts +78 -0
  197. package/dist/components/portal/PlPortal.js +1 -0
  198. package/dist/components/portal/index.d.ts +2 -0
  199. package/dist/components/portal/index.js +1 -0
  200. package/dist/components/progress-box/PlProgressBox.js +1 -1
  201. package/dist/components/progress-circular/PlProgressCircular.js +1 -1
  202. package/dist/components/progress-linear/PlProgressLinear.js +1 -1
  203. package/dist/components/radio-group/PlRadioGroup.js +1 -1
  204. package/dist/components/rating/PlRating.d.ts +1 -1
  205. package/dist/components/rating/PlRating.js +1 -1
  206. package/dist/components/scatter-chart/PlScatterChart.d.ts +46 -0
  207. package/dist/components/scatter-chart/PlScatterChart.js +1 -0
  208. package/dist/components/scatter-chart/index.d.ts +2 -0
  209. package/dist/components/scatter-chart/index.js +1 -0
  210. package/dist/components/scroll-area/PlScrollArea.d.ts +98 -0
  211. package/dist/components/scroll-area/PlScrollArea.js +1 -0
  212. package/dist/components/scroll-area/index.d.ts +2 -0
  213. package/dist/components/scroll-area/index.js +1 -0
  214. package/dist/components/scroll-zone/PlScrollZone.d.ts +27 -10
  215. package/dist/components/scroll-zone/PlScrollZone.js +1 -1
  216. package/dist/components/segmented-button/PlSegmentedButton.js +1 -1
  217. package/dist/components/select/PlSelect.js +1 -1
  218. package/dist/components/show/PlShow.d.ts +76 -0
  219. package/dist/components/show/PlShow.js +1 -0
  220. package/dist/components/show/index.d.ts +2 -0
  221. package/dist/components/show/index.js +1 -0
  222. package/dist/components/sidebar/PlSidebar.js +1 -1
  223. package/dist/components/sidebar/PlSidebarTrigger.js +1 -1
  224. package/dist/components/skeleton/PlSkeleton.js +1 -1
  225. package/dist/components/slider/PlSlider.d.ts +13 -1
  226. package/dist/components/slider/PlSlider.js +1 -1
  227. package/dist/components/sparkline/PlSparkline.d.ts +68 -0
  228. package/dist/components/sparkline/PlSparkline.js +1 -0
  229. package/dist/components/sparkline/index.d.ts +2 -0
  230. package/dist/components/sparkline/index.js +1 -0
  231. package/dist/components/spoiler/PlSpoiler.d.ts +16 -1
  232. package/dist/components/spoiler/PlSpoiler.js +1 -1
  233. package/dist/components/stack/PlStack.d.ts +114 -0
  234. package/dist/components/stack/PlStack.js +1 -0
  235. package/dist/components/stack/index.d.ts +2 -0
  236. package/dist/components/stack/index.js +1 -0
  237. package/dist/components/stat/PlStat.d.ts +4 -0
  238. package/dist/components/stat/PlStat.js +1 -1
  239. package/dist/components/stepper/PlStepper.d.ts +3 -3
  240. package/dist/components/stepper/PlStepper.js +1 -1
  241. package/dist/components/switch/PlSwitch.js +1 -1
  242. package/dist/components/table/PlTable.d.ts +5 -5
  243. package/dist/components/table/PlTable.js +1 -1
  244. package/dist/components/tabs/PlTabs.d.ts +27 -2
  245. package/dist/components/tabs/PlTabs.js +1 -1
  246. package/dist/components/text-link/PlTextLink.js +1 -1
  247. package/dist/components/time-picker/PlTimePicker.js +1 -1
  248. package/dist/components/timeline/PlTimeline.d.ts +2 -2
  249. package/dist/components/timeline/PlTimeline.js +1 -1
  250. package/dist/components/timeline-chart/PlTimelineChart.d.ts +44 -0
  251. package/dist/components/timeline-chart/PlTimelineChart.js +1 -0
  252. package/dist/components/timeline-chart/index.d.ts +2 -0
  253. package/dist/components/timeline-chart/index.js +1 -0
  254. package/dist/components/toast/PlToast.d.ts +1 -1
  255. package/dist/components/toast/PlToast.js +1 -1
  256. package/dist/components/toggle/PlToggle.js +1 -1
  257. package/dist/components/toggle/PlToggleGroup.js +1 -1
  258. package/dist/components/tooltip/PlTooltip.js +1 -1
  259. package/dist/components/tour/PlTour.d.ts +134 -0
  260. package/dist/components/tour/PlTour.js +1 -0
  261. package/dist/components/tour/index.d.ts +2 -0
  262. package/dist/components/tour/index.js +1 -0
  263. package/dist/components/transfer/PlTransfer.d.ts +10 -1
  264. package/dist/components/transfer/PlTransfer.js +1 -1
  265. package/dist/components/tree/PlTree.js +1 -1
  266. package/dist/components/tree-select/PlTreeSelect.d.ts +99 -0
  267. package/dist/components/tree-select/PlTreeSelect.js +1 -0
  268. package/dist/components/tree-select/index.d.ts +2 -0
  269. package/dist/components/tree-select/index.js +1 -0
  270. package/dist/components/typography/PlTypography.js +1 -1
  271. package/dist/components/window-pane/PlWindowPane.d.ts +179 -0
  272. package/dist/components/window-pane/PlWindowPane.js +1 -0
  273. package/dist/components/window-pane/index.d.ts +2 -0
  274. package/dist/components/window-pane/index.js +1 -0
  275. package/dist/css/anchor.css +2 -0
  276. package/dist/css/animate-counter.css +2 -0
  277. package/dist/css/animate-float.css +2 -0
  278. package/dist/css/animate-reveal.css +2 -0
  279. package/dist/css/animate-scramble.css +2 -0
  280. package/dist/css/animate-shake.css +2 -0
  281. package/dist/css/animate-split.css +2 -0
  282. package/dist/css/app-logo.css +2 -0
  283. package/dist/css/area-chart.css +3 -0
  284. package/dist/css/back-top.css +2 -0
  285. package/dist/css/bar-chart.css +3 -0
  286. package/dist/css/calendar.css +1 -0
  287. package/dist/css/carousel.css +2 -0
  288. package/dist/css/code-block.css +2 -0
  289. package/dist/css/color-picker.css +1 -0
  290. package/dist/css/combobox.css +1 -0
  291. package/dist/css/command-palette.css +1 -0
  292. package/dist/css/confirm.css +2 -0
  293. package/dist/css/data-list.css +2 -0
  294. package/dist/css/data-table.css +7 -0
  295. package/dist/css/date-picker.css +1 -0
  296. package/dist/css/date-range-picker.css +1 -0
  297. package/dist/css/date-time-picker.css +1 -0
  298. package/dist/css/flex.css +2 -0
  299. package/dist/css/floating-action-button.css +4 -0
  300. package/dist/css/gallery.css +7 -0
  301. package/dist/css/gauge-chart.css +3 -0
  302. package/dist/css/heatmap-chart.css +3 -0
  303. package/dist/css/hover-card.css +2 -0
  304. package/dist/css/how-to-steps.css +2 -0
  305. package/dist/css/icon-button.css +1 -0
  306. package/dist/css/image.css +2 -0
  307. package/dist/css/line-chart.css +3 -0
  308. package/dist/css/menubar.css +1 -0
  309. package/dist/css/meter.css +2 -0
  310. package/dist/css/mockup.css +2 -0
  311. package/dist/css/pagination.css +1 -0
  312. package/dist/css/pie-chart.css +3 -0
  313. package/dist/css/popconfirm.css +2 -0
  314. package/dist/css/portal.css +2 -0
  315. package/dist/css/scatter-chart.css +3 -0
  316. package/dist/css/scroll-area.css +2 -0
  317. package/dist/css/scroll-zone.css +2 -0
  318. package/dist/css/show.css +2 -0
  319. package/dist/css/sidebar.css +3 -0
  320. package/dist/css/sparkline.css +3 -0
  321. package/dist/css/spoiler.css +1 -0
  322. package/dist/css/stack.css +2 -0
  323. package/dist/css/stat.css +1 -0
  324. package/dist/css/time-picker.css +1 -0
  325. package/dist/css/timeline-chart.css +3 -0
  326. package/dist/css/tour.css +3 -0
  327. package/dist/css/transfer.css +4 -0
  328. package/dist/css/tree-select.css +4 -0
  329. package/dist/css/window-pane.css +2 -0
  330. package/dist/hooks/index.d.ts +6 -0
  331. package/dist/hooks/index.js +1 -1
  332. package/dist/hooks/usePlBreakpoint.d.ts +3 -0
  333. package/dist/hooks/usePlBreakpoint.js +1 -1
  334. package/dist/hooks/usePlDisclosure.d.ts +44 -0
  335. package/dist/hooks/usePlDisclosure.js +1 -0
  336. package/dist/hooks/usePlElementSize.d.ts +34 -0
  337. package/dist/hooks/usePlElementSize.js +1 -0
  338. package/dist/hooks/usePlHotKeys.d.ts +5 -1
  339. package/dist/hooks/usePlHotKeys.js +1 -1
  340. package/dist/hooks/usePlOnScreen.d.ts +54 -0
  341. package/dist/hooks/usePlOnScreen.js +1 -0
  342. package/dist/index.d.ts +34 -1
  343. package/dist/index.js +1 -1
  344. package/dist/internal/animate.d.ts +121 -7
  345. package/dist/internal/animate.js +1 -1
  346. package/dist/internal/breakpoints.d.ts +31 -0
  347. package/dist/internal/breakpoints.js +1 -0
  348. package/dist/internal/button-group.d.ts +29 -2
  349. package/dist/internal/button-group.js +2 -2
  350. package/dist/internal/calendar.d.ts +11 -36
  351. package/dist/internal/calendar.js +1 -1
  352. package/dist/internal/chart-frame.d.ts +462 -0
  353. package/dist/internal/chart-frame.js +1 -0
  354. package/dist/internal/chart-line.d.ts +44 -0
  355. package/dist/internal/chart-line.js +1 -0
  356. package/dist/internal/chart.d.ts +551 -0
  357. package/dist/internal/chart.js +1 -0
  358. package/dist/internal/color-scheme.js +1 -1
  359. package/dist/internal/data-table.d.ts +70 -0
  360. package/dist/internal/data-table.js +1 -0
  361. package/dist/internal/date.d.ts +10 -0
  362. package/dist/internal/date.js +1 -1
  363. package/dist/internal/defaults.d.ts +8 -3
  364. package/dist/internal/drag.d.ts +65 -0
  365. package/dist/internal/drag.js +1 -0
  366. package/dist/internal/focusable.d.ts +8 -0
  367. package/dist/internal/focusable.js +1 -0
  368. package/dist/internal/form.d.ts +61 -0
  369. package/dist/internal/form.js +1 -0
  370. package/dist/internal/format.d.ts +2 -0
  371. package/dist/internal/format.js +1 -1
  372. package/dist/internal/gallery.d.ts +80 -0
  373. package/dist/internal/gallery.js +1 -0
  374. package/dist/internal/glow.d.ts +17 -0
  375. package/dist/internal/glow.js +1 -0
  376. package/dist/internal/grid.d.ts +6 -27
  377. package/dist/internal/grid.js +1 -1
  378. package/dist/internal/highlight.d.ts +98 -0
  379. package/dist/internal/highlight.js +1 -0
  380. package/dist/internal/icons.d.ts +10 -0
  381. package/dist/internal/icons.js +1 -1
  382. package/dist/internal/image.d.ts +94 -0
  383. package/dist/internal/image.js +1 -0
  384. package/dist/internal/inert.d.ts +19 -0
  385. package/dist/internal/inert.js +1 -0
  386. package/dist/internal/keys.d.ts +19 -0
  387. package/dist/internal/keys.js +1 -1
  388. package/dist/internal/labels.d.ts +182 -0
  389. package/dist/internal/labels.js +1 -0
  390. package/dist/internal/link.d.ts +17 -0
  391. package/dist/internal/link.js +1 -1
  392. package/dist/internal/mockup.d.ts +193 -0
  393. package/dist/internal/mockup.js +1 -0
  394. package/dist/internal/page-layout.d.ts +14 -7
  395. package/dist/internal/page-layout.js +1 -1
  396. package/dist/internal/picker.d.ts +43 -6
  397. package/dist/internal/picker.js +1 -1
  398. package/dist/internal/progress.d.ts +22 -8
  399. package/dist/internal/progress.js +1 -1
  400. package/dist/internal/responsive.d.ts +108 -0
  401. package/dist/internal/responsive.js +1 -0
  402. package/dist/internal/scramble.d.ts +35 -0
  403. package/dist/internal/scramble.js +1 -0
  404. package/dist/internal/scroll-target.d.ts +5 -0
  405. package/dist/internal/scroll-target.js +1 -0
  406. package/dist/internal/steps.js +1 -1
  407. package/dist/internal/styles.d.ts +81 -0
  408. package/dist/internal/styles.js +1 -1
  409. package/dist/internal/table.d.ts +86 -0
  410. package/dist/internal/table.js +1 -0
  411. package/dist/internal/text.d.ts +39 -0
  412. package/dist/internal/text.js +1 -0
  413. package/dist/internal/threshold.d.ts +19 -0
  414. package/dist/internal/threshold.js +1 -0
  415. package/dist/internal/tour.d.ts +42 -0
  416. package/dist/internal/tour.js +1 -0
  417. package/dist/internal/watermark.d.ts +44 -0
  418. package/dist/internal/watermark.js +1 -0
  419. package/dist/internal/wheel.d.ts +52 -0
  420. package/dist/internal/wheel.js +1 -0
  421. package/dist/internal/window.d.ts +201 -0
  422. package/dist/internal/window.js +1 -0
  423. package/dist/locales/de.d.ts +3 -0
  424. package/dist/locales/de.js +1 -0
  425. package/dist/locales/en.d.ts +2 -0
  426. package/dist/locales/en.js +1 -0
  427. package/dist/locales/es.d.ts +3 -0
  428. package/dist/locales/es.js +1 -0
  429. package/dist/locales/fr.d.ts +3 -0
  430. package/dist/locales/fr.js +1 -0
  431. package/dist/locales/index.d.ts +33 -0
  432. package/dist/locales/index.js +1 -0
  433. package/dist/locales/ja.d.ts +3 -0
  434. package/dist/locales/ja.js +1 -0
  435. package/dist/locales/ko.d.ts +3 -0
  436. package/dist/locales/ko.js +1 -0
  437. package/dist/locales/zh-Hans.d.ts +3 -0
  438. package/dist/locales/zh-Hans.js +1 -0
  439. package/dist/provider/PlColorSchemeScript.js +1 -1
  440. package/dist/provider/PlassProvider.js +1 -1
  441. package/dist/provider/index.d.ts +1 -0
  442. package/dist/provider/index.js +1 -1
  443. package/dist/styles.css +1 -1
  444. package/dist/tailwind.css +1357 -25
  445. package/dist/tokens.css +1357 -25
  446. package/dist/types.d.ts +368 -2
  447. package/package.json +26 -16
  448. package/dist/components/avatar-group/PlAvatarGroup.d.ts +0 -47
  449. package/dist/components/avatar-group/PlAvatarGroup.js +0 -1
  450. package/dist/components/avatar-group/index.d.ts +0 -2
  451. package/dist/components/avatar-group/index.js +0 -1
  452. package/dist/css/avatar-group.css +0 -2
  453. package/dist/internal/avatar-group.d.ts +0 -25
  454. 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 t from"react";import{useDefaults as l}from"../../internal/defaults.js";import{Field as r}from"@base-ui/react/field";import{OTPField as n}from"@base-ui/react/otp-field";import{hotKeyHandler as s}from"../../internal/keys.js";import{cx as o,disabledClasses as i,fieldReadOnlyClasses as m,fieldRestClasses as d,hasContent as u,metaTextClasses as c,stackGapClasses as p,surfaceSlots as f,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"},h={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]"},b={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"}},v={numeric:"numeric",alpha:"alpha",alphanumeric:"alphanumeric",any:"none"};export const PlOtpField=/* @__PURE__ */t.forwardRef(function PlOtpField({variant:N="glass",size:w,color:V,density:j,elevation:F=0,length:C=6,charset:M="numeric",mask:O=!1,groupSize:k,separator:z="–",value:I,defaultValue:R,onValueChange:S,onComplete:q,onValueInvalid:D,autoSubmit:K=!1,label:P,description:_,error:A,invalid:E,name:L,required:T=!1,disabled:B=!1,readOnly:G=!1,autoFocus:H=!1,className:J,hotKeys:Q,classNames:U,style:W,...X},Y){const Z=l(),$=w??Z.size??"md",ee=V??Z.color??"primary",ae=j??Z.density??"default",te=Math.min(12,Math.max(2,Math.round(C))),le=u(A),re=E??le,ne=re?"danger":ee,se=o("text-center font-medium [font-family:inherit]",g[$],y[$],h[$],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?i[N]:G?m[N]:d[N]),oe=k&&k>0?Math.round(k):0;return a(r.Root,{disabled:B,invalid:re,className:o("inline-flex flex-col align-top",p[$],J),style:{...f(ne,F),...W},children:[u(P)?e(r.Label,{className:o(c[$],"font-medium",B?"text-(--plass-muted-fg)":"text-(--plass-fg)",U?.label),children:P}):null,e(n.Root,{ref:Y,onKeyDown:s(Q,void 0),length:te,validationType:v[M],mask:O,name:L,required:T,disabled:B,readOnly:G,autoSubmit:K,value:I,defaultValue:R,onValueChange:e=>S?.(e),onValueComplete:e=>q?.(e),onValueInvalid:e=>D?.(e),className:o("flex items-center",b[ae][$],U?.control),...X,children:Array.from({length:te},(l,r)=>a(t.Fragment,{children:[oe>0&&r>0&&r%oe===0?e("span",{"aria-hidden":"true",className:o("select-none px-0.5 text-(--plass-muted-fg)",y[$]),children:z}):null,e(n.Input,{className:se,autoFocus:H&&0===r})]},r))}),u(_)?e(r.Description,{className:o(c[$],"text-(--plass-muted-fg)",U?.description),children:_}):null,e(r.Error,le?{match:!0,className:o(c[$],"text-(--p-accent)",U?.error),children:A}:{className:o(c[$],"text-(--p-accent)",U?.error)})]})});
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{Dialog as l}from"@base-ui/react/dialog";import{cx as r,surfaceSlots as t}from"../../internal/styles.js";const i={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:""},o={start:"items-start",center:"items-center",end:"items-end"},n={xs:"p-3",sm:"p-4",md:"p-6",lg:"p-8",xl:"p-10"},p=/* @__PURE__ */["[transition:opacity_var(--plass-duration)_var(--plass-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" ");export function PlOverlay({open:c,defaultOpen:m,onOpenChange:d,tone:f="scrim",dismissible:u=!1,modal:b=!0,align:x="center",size:y,color:g,label:j="Overlay",className:k,classNames:h,style:v,children:z,...O}){const N=s(),w=y??N.size??"md",P=g??N.color??"primary";return e(l.Root,{open:c,defaultOpen:m,modal:b,disablePointerDismissal:!u,onOpenChange:(e,a)=>{u||e||"escape-key"!==a.reason?d?.(e):a.cancel()},children:a(l.Portal,{children:[e(l.Backdrop,{className:r("plass-portal fixed inset-0 z-(--plass-z-portal)",p,i[f],h?.backdrop)}),e(l.Viewport,{className:["plass-portal fixed inset-0 z-(--plass-z-portal) flex justify-center",o[x],n[w]].join(" "),children:e(l.Popup,{"aria-label":j,className:["flex max-h-full max-w-full flex-col items-center justify-center","[outline:none]",p,k??""].filter(Boolean).join(" "),style:{...t(P,0),...v},...O,children:z})})]})})}
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 n,PlassSidebarSideContext as r}from"../../internal/page-layout.js";import{controlSlots as s,cx as a,hasContent as i,toLength as u}from"../../internal/styles.js";const c=["header","footer"];export const PlPageLayout=/* @__PURE__ */o.forwardRef(function PlPageLayout({header:d,footer:f,sidebar:p,endSidebar:m,headerSpan:h="full",footerSpan:v="full",scroll:x="page",height:y="viewport",collapseBelow:b="md",sidebarOpen:g,defaultSidebarOpen:w=!1,onSidebarOpenChange:P,endSidebarOpen:S,defaultEndSidebarOpen:k=!1,onEndSidebarOpenChange:C,skipLink:O=!0,skipLabel:N="Skip to content",mainId:j="main",mainProps:$,color:R,className:z,style:L,children:E,...B},H){const M=t(),_=R??M.color??"primary",[I,q]=o.useState(w),[A,D]=o.useState(k),F=o.useMemo(()=>({start:g??I,end:S??A}),[g,I,S,A]),G=o.useCallback((e,l)=>{if("start"===e)return void 0===g&&q(l),void P?.(l);void 0===S&&D(l),C?.(l)},[g,S,P,C]),J=o.useRef(null),K=o.useCallback(e=>{J.current=e,"function"==typeof H?H(e):H&&(H.current=e)},[H]),Q=o.useRef({header:null,footer:null}),T=o.useRef(null),U=o.useCallback(()=>{const e=J.current;if(e)for(const l of c){const o=Q.current[l],t="header"===l?h:v;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")}},[h,v]),V=o.useCallback(()=>{const e=T.current;if(e){e.disconnect();for(const l of c){const o=Q.current[l];o&&e.observe(o)}}U()},[U]);o.useEffect(()=>(T.current=new ResizeObserver(()=>U()),V(),()=>{T.current?.disconnect(),T.current=null}),[U,V]);const W=o.useCallback((e,l)=>{Q.current[e]=l,V()},[V]),X=o.useMemo(()=>({present:!0,register:W,collapseBelow:b,open:F,setOpen:G,scroll:x}),[W,b,F,G,x]),Y="content"===x,Z=u("viewport"===y||"auto"===y?void 0:y),ee=void 0!==Z?"":"auto"===y?Y?"h-full":"min-h-full":Y?"h-dvh":"min-h-dvh",le=i(d)?d:null,oe=i(f)?f:null;return e(n.Provider,{value:X,children:l("div",{ref:K,className:a("relative flex w-full flex-col",Y?"overflow-hidden":"",ee,"full"===h?"[padding-top:var(--p-layout-header-inset,0px)]":"","full"===v?"[padding-bottom:var(--p-layout-footer-inset,0px)]":"",z),style:void 0===Z?L:{...Y?{height:Z}:{minHeight:Z},...L},...B,children:[O?e("a",{href:`#${j}`,className:a("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:s(_,2,"solid"),children:N}):null,"full"===h?le:null,l("div",{className:a("flex w-full flex-1",Y?"min-h-0":""),children:[i(p)?e(r.Provider,{value:"start",children:p}):null,l("div",{className:a("flex min-w-0 flex-1 flex-col",Y?"min-h-0":"","content"===h?"[padding-top:var(--p-layout-header-inset,0px)]":"","content"===v?"[padding-bottom:var(--p-layout-footer-inset,0px)]":""),children:["content"===h?le:null,e("main",{...$,id:j,className:a("min-w-0 flex-1",Y?"min-h-0 overflow-y-auto":"",$?.className),children:E}),"content"===v?oe:null]}),i(m)?e(r.Provider,{value:"end",children:m}):null]}),"full"===v?oe:null]})})});
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. A link with nowhere to go
47
- * — the current page, a stepper at the end of the row — stays a `<button>`,
48
- * because `disabled` is not something an `<a>` can be.
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
- * They are props rather than being read from a message catalogue for the same
78
- * reason `PlTable` takes its `empty` line as one: a library that shipped
79
- * translations would have to be told which language a page is in, and the page
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
- /** The live-region sentence a screen reader hears when the page changes. */
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 t}from"react/jsx-runtime";import*as a from"react";import{useDefaults as n}from"../../internal/defaults.js";import{PlButton as r}from"../button/PlButton.js";import{ChevronIcon as l}from"../../internal/icons.js";import{controlTextClasses as i,gapClasses as o,srOnlyClasses as s}from"../../internal/styles.js";function range(e,t){return Array.from({length:Math.max(0,t-e+1)},(t,a)=>e+a)}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 c={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__ */a.forwardRef(function PlPagination({variant:m="ghost",size:u,color:d,density:h,elevation:f=0,count:p,page:g,defaultPage:x=1,onPageChange:b,siblingCount:v=1,boundaryCount:y=1,showEdges:M=!1,showArrows:P=!0,disabled:j=!1,getPageHref:w,renderLink:L,label:N="Pagination",pageLabel:C=e=>`Page ${e}`,previousLabel:k="Previous page",nextLabel:$="Next page",firstLabel:z="First page",lastLabel:D="Last page",statusLabel:I=(e,t)=>`Page ${e} of ${t}`,className:K,children:B,...A},R){const E=n(),F=u??E.size??"md",H=d??E.color??"primary",S=h??E.density??"compact",[W,q]=a.useState(x),G=Math.min(Math.max(g??W,1),Math.max(p,1));if(p<2)return null;const J=function paginationRange(e,t,a,n){const r=range(1,Math.min(n,e)),l=range(Math.max(e-n+1,n+1),e),i=Math.max(Math.min(t-a,e-n-2*a-1),n+2),o=Math.min(Math.max(t+a,n+2*a+2),l.length>0?l[0]-2:e-1);return[...r,...i>n+2?["start-ellipsis"]:n+1<e-n?[n+1]:[],...range(i,o),...o<e-n-1?["end-ellipsis"]:e-n>n?[e-n]:[],...l]}(p,G,v,y),O=G<=1,Q=G>=p,linkProps=(t,a,n)=>{if(!w||a)return null;const r=w(t);return{render:L?L(t,r):e("a",{href:r}),rel:n}},press=(e,t)=>{e.metaKey||e.ctrlKey||e.shiftKey||e.altKey||w&&!b||(e.preventDefault(),(e=>{const t=Math.min(Math.max(e,1),p);t!==G&&(void 0===g&&q(t),b?.(t))})(t))},stepper=(t,a,n,l,i,o,s)=>e("li",{className:"flex",children:e(r,{variant:m,size:F,color:H,density:S,elevation:f,disabled:j||l,"aria-label":a,startIcon:e("span",{className:`flex items-center ${i}`,children:o}),onClick:e=>press(e,n),...linkProps(n,j||l,s)})},t);return t("nav",{ref:R,"aria-label":N,className:["flex items-center",K??""].filter(Boolean).join(" "),...A,children:[t("ul",{role:"list",className:`m-0 flex list-none items-center p-0 ${o[F]}`,children:[M?stepper("first",z,1,O,"rotate-180 rtl:rotate-0",e(DoubleChevronIcon,{})):null,P?stepper("previous",k,G-1,O,"rotate-90 rtl:-rotate-90",e(l,{}),"prev"):null,J.map((t,a)=>e("li","number"==typeof t?{className:"flex",children:e(r,{variant:t===G?"solid":m,size:F,color:H,density:S,elevation:f,disabled:j,"aria-label":C(t),"aria-current":t===G?"page":void 0,className:"tabular-nums",onClick:e=>press(e,t),...linkProps(t,j||t===G),children:t})}:{"aria-hidden":"true",className:["flex select-none items-center justify-center","text-(--plass-muted-fg)",i[F],c[F]].join(" "),children:"…"},`slot-${a}`)),P?stepper("next",$,G+1,Q,"-rotate-90 rtl:rotate-90",e(l,{}),"next"):null,M?stepper("last",D,p,Q,"rtl:rotate-180",e(DoubleChevronIcon,{})):null]}),e("span",{className:s,"aria-live":"polite",children:I(G,p)}),B]})});
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 i,transitionClasses as o}from"../../internal/styles.js";const s=/* @__PURE__ */r.createContext({basis:null}),a={xs:"basis-1",sm:"basis-1.5",md:"basis-2",lg:"basis-2.5",xl:"basis-3"},l={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:c="horizontal",resizable:u=!0,color:d,size:m,onResize:p,onResizeEnd:f,className:g,style:h,children:x,...v},b){const y=n(),w=d??y.color??"primary",z=m??y.size??"md",P=r.Children.toArray(x).filter(r.isValidElement),S=P.length,R=r.useRef(null),C=r.useCallback(e=>{R.current=e,"function"==typeof b?b(e):b&&(b.current=e)},[b]),E=r.useRef([]);E.current=P.map(e=>e.props);const[k,N]=r.useState(null),M=k&&k.length===S?k:null,L=r.useRef(null);L.current=M;const $="horizontal"===c,j=l[z]*Math.max(0,S-1);function grip(e){const t=R.current,r=L.current;if(!u||!t||!r||void 0===r[e+1])return null;const n=t.getBoundingClientRect(),i=($?n.width:n.height)-j;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)),d=Math.min(toPixels(o?.maxSize,i,t)??l,l-(toPixels(s?.minSize,i,t)??0));return d<c?null:{root:t,current:r,extent:i,start:a,pair:l,resize(t){const n=Math.min(d,Math.max(c,a+t)),o=[...r];return o[e]=n/i,o[e+1]=(l-n)/i,N(o),p?.(o.map(e=>100*e)),o}}}r.useEffect(()=>{const e=R.current;if(!e)return;const measure=()=>{const t=e.getBoundingClientRect(),r=($?t.width:t.height)-j;r<=0||N(t=>t&&t.length===S?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()},[S,$,j]);const A=r.useRef(null);r.useEffect(()=>()=>A.current?.(),[]);const D=i("group/handle relative z-1 flex shrink-0 grow-0 items-center justify-center",a[z],o,"[outline:none] focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:outline-offset-0",u?i($?"cursor-col-resize":"cursor-row-resize","hover:bg-(--p-soft) data-[dragging]:bg-(--p-soft)"):"");return e("div",{ref:C,className:i("flex h-full w-full",$?"flex-row":"flex-col","min-h-0 min-w-0",g),style:{"--p-accent":`var(--plass-${w}-accent)`,"--p-soft":`var(--plass-${w}-soft)`,"--p-ring":`var(--plass-${w}-ring)`,...h},...v,children:P.map((n,a)=>t(r.Fragment,{children:[a>0?e("div",{role:"separator","aria-orientation":$?"vertical":"horizontal","aria-valuenow":M?Math.round(100*M[a-1]):void 0,"aria-valuemin":0,"aria-valuemax":100,"aria-disabled":!u||void 0,tabIndex:u?0:-1,className:D,onPointerDown:e=>{0===e.button&&function beginDrag(e,t){const r=grip(e);if(!r)return;const n=t.currentTarget;n.setPointerCapture(t.pointerId),n.dataset.dragging="true";const i=document.body.style.getPropertyValue("-webkit-user-select");document.body.style.setProperty("-webkit-user-select","none");const o=$?t.clientX:t.clientY,s=$&&"rtl"===getComputedStyle(r.root).direction?-1:1;let a=r.current;const move=e=>{const t=$?e.clientX:e.clientY;a=r.resize((t-o)*s)},release=()=>{A.current=null,n.removeEventListener("pointermove",move),n.removeEventListener("pointerup",end),n.removeEventListener("pointercancel",end),delete n.dataset.dragging,i?document.body.style.setProperty("-webkit-user-select",i):document.body.style.removeProperty("-webkit-user-select")},end=()=>{release(),f?.(a.map(e=>100*e))};A.current=release,n.addEventListener("pointermove",move),n.addEventListener("pointerup",end),n.addEventListener("pointercancel",end)}(a-1,e)},onKeyDown:e=>{const t=$?"ArrowLeft":"ArrowUp",r=$?"ArrowRight":"ArrowDown";if(e.key!==t&&e.key!==r)return;e.preventDefault();const n=$&&"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);f?.(n.map(e=>100*e))}(a-1,i*n)},children:e("span",{"aria-hidden":"true",className:i("pointer-events-none bg-(--plass-border)",o,$?"h-full w-px":"h-px w-full",u?"group-hover/handle:bg-(--p-accent) group-focus-visible/handle:bg-(--p-accent) group-data-[dragging]/handle:bg-(--p-accent)":"")})}):null,e(s.Provider,{value:{basis:M?`calc((100% - ${j}px) * ${M[a].toFixed(6)})`:null},children:n})]},n.key??a))})});export const PlPane=/* @__PURE__ */r.forwardRef(function PlPane({defaultSize:t,minSize:n,maxSize:o,className:a,style:l,children:c,...u},d){const{basis:m}=r.useContext(s);return e("div",{ref:d,className:i("relative min-h-0 min-w-0 overflow-auto",a),style:{flex:m?`0 0 ${m}`:"1 1 0%",...l},...u,children:c})});
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,2 @@
1
+ export { PlPieChart } from './PlPieChart.js';
2
+ export type { PlPieChartProps } from './PlPieChart.js';
@@ -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{useDefaults as r}from"../../internal/defaults.js";import{controlSlots as n,controlTextClasses as o,cx as i,focusRingClasses as a,gapClasses as c,glassClasses as d,hasContent as m,iconClasses as p,iconSizeClasses as f,metaTextClasses as x,paddingXClasses as u,sheetBodyClasses as h,transitionClasses as g}from"../../internal/styles.js";const v={solid:"text-(--p-on-solid) [background-image:var(--p-fill)] [box-shadow:var(--p-elev),var(--p-lift)]",glass:/* @__PURE__ */[d,"border text-(--p-accent) bg-(--plass-glass)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:`${d} text-(--p-accent) bg-(--p-soft)`},b={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)"},w={xs:"min-h-5.5",sm:"min-h-6.5",md:"min-h-8",lg:"min-h-10",xl:"min-h-12"},y={xs:"rounded-[0.6875rem]",sm:"rounded-[0.8125rem]",md:"rounded-[1rem]",lg:"rounded-[1.25rem]",xl:"rounded-[1.5rem]"},N={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"}},j={static:{top:"",bottom:""},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:d="solid",size:k,color:z,density:_,elevation:P=2,startIcon:R,endIcon:C,title:H,description:I,details:O,expanded:$=!1,position:B="static",side:E="top",className:F,style:S,children:q,onClick:A,...D},G){const J=r(),K=k??J.size??"md",L=z??J.color??"secondary",M=_??J.density??"default",Q=l.useRef(null),[T,U]=l.useState(0);l.useEffect(()=>{const e=Q.current;if(!e||"undefined"==typeof ResizeObserver)return;const s=new ResizeObserver(()=>U(e.scrollHeight));return s.observe(e),U(e.scrollHeight),()=>s.disconnect()},[O]);const V=Boolean(A),W=u[M][K],X=s(t,{children:[m(R)?e("span",{className:i("flex shrink-0 items-center justify-center overflow-hidden rounded-full [&_img]:size-full [&_img]:object-cover",f[K]),children:R}):null,m(H)||m(I)||m(q)?s("span",{className:i("flex min-w-0 flex-1 flex-col items-center justify-center text-center",N[M][K]),children:[m(H)?e("span",{className:"max-w-full truncate",children:H}):null,m(I)?e("span",{className:i("max-w-full truncate font-normal",x[K],"[color:color-mix(in_oklab,currentColor_72%,transparent)]"),children:I}):null,q]}):null]});return s("div",{ref:G,className:i("inline-flex max-w-full flex-col overflow-hidden align-middle",y[K],"font-medium whitespace-nowrap select-none",o[K],v[d],g,p,V?`plass-glow ${b[d]}`:"",j[B][E],F),style:{...n(L,P,d),...S},...D,children:[s("div",{className:i("flex shrink-0 items-center py-1",w[K],c[K],V?"ps-0":W,m(C)?"pe-1":V?"pe-0":""),children:[V?e("button",{type:"button",className:i("flex min-w-0 flex-1 cursor-pointer items-center justify-center self-stretch","rounded-[inherit]",c[K],W,a),onClick:A,children:X}):X,m(C)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:C}):null]}),m(O)?e("div",{className:i("overflow-hidden","[transition:height_var(--plass-duration-slow)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]"),style:{height:$?T:0},inert:!$,children:e("div",{ref:Q,className:i("whitespace-normal pb-2",W,h[K]),children:O})}):null]})});
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{cx as s}from"../../internal/styles.js";export function PlPopconfirm({trigger:a,title:c,description:l,confirmLabel:m="Confirm",cancelLabel:d="Cancel",onConfirm:p,onCancel:f,color:u,size:g,side:h="top",align:C="center",width:j=280,open:y,defaultOpen:x,onOpenChange:P,className:v}){const w=r(),z=g??w.size??"md",b=u??"danger",[N,O]=t.useState(x??!1),k=y??N,[L,S]=t.useState(!1),setOpen=e=>{void 0===y&&O(e),P?.(e)};return e(n,{trigger:a,open:k,onOpenChange:e=>{L||(e||f?.(),setOpen(e))},title:c,description:l,side:h,align:C,width:j,color:b,size:z,showClose:!1,className:v,children:o("div",{className:s("mt-3 flex flex-wrap items-center justify-end gap-2"),children:[e(i,{variant:"ghost",color:"secondary",size:z,density:"compact",disabled:L,onClick:()=>{f?.(),setOpen(!1)},children:d}),e(i,{color:b,size:z,density:"compact",loading:L,autoFocus:!0,onClick:async()=>{const e=p?.();if(e instanceof Promise){S(!0);try{await e,setOpen(!1)}catch{}finally{S(!1)}}else setOpen(!1)},children:m})]})})}
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, unlike on a `PlTooltip`. A tooltip is a filled plate and its
44
- * wedge is the same solid colour; this surface is translucent over a blurred
45
- * backdrop, and a wedge sticking out past the popup's own box cannot carry
46
- * that backdrop with it. Turn it on where the trigger is far enough away that
47
- * the popup needs to say what it belongs to.
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 e,jsxs as s}from"react/jsx-runtime";import{useDefaults as a}from"../../internal/defaults.js";import{Popover as l}from"@base-ui/react/popover";import{CloseIcon as t}from"../../internal/icons.js";import{cx as o,focusRingClasses as r,glassClasses as i,hasContent as n,metaTextClasses as d,radiusClasses as p,sheetBodyClasses as c,sheetHeaderGapClasses as m,sheetPaddingXClasses as f,sheetPaddingYClasses as g,sheetSectionGapClasses as h,sheetTitleClasses as u,surfaceSlots as x}from"../../internal/styles.js";const v={xs:"max-w-56",sm:"max-w-64",md:"max-w-80",lg:"max-w-96",xl:"max-w-lg"},b=/* @__PURE__ */[i,"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(" "),w={xs:8,sm:9,md:10,lg:11,xl:12},y=/* @__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)",r].join(" ");export const PlPopoverClose=l.Close;export function PlPopover({size:r,color:i,density:N,trigger:j,title:k,description:O,children:P,side:_="bottom",align:z="center",sideOffset:C=6,alignOffset:L=0,arrow:M=!1,open:T,defaultOpen:W,onOpenChange:A,modal:B=!1,dismissible:D=!0,showClose:E=!1,closeLabel:R="Close",width:$,className:q,style:F,...G}){const H=a(),I=r??H.size??"md",J=i??H.color??"primary",K=N??H.density??"default",Q=f[K][I],S=g[K][I],U=w[I],V=n(k)||n(O);return s(l.Root,{open:T,defaultOpen:W,modal:B,onOpenChange:(e,s)=>{D||e||"escape-key"!==s.reason&&"outside-press"!==s.reason&&"focus-out"!==s.reason?A?.(e):s.cancel()},children:[j?e(l.Trigger,{render:j}):null,e(l.Portal,{children:e(l.Positioner,{className:"plass-portal z-(--plass-z-portal) [outline:none]",side:_,align:z,sideOffset:C,alignOffset:L,children:s(l.Popup,{className:o(b,p[I],c[I],h[I],Q,S,void 0===$?v[I]:"",q),style:{...x(J,3),...void 0===$?null:{maxWidth:"number"==typeof $?`${$}px`:$},...F},...G,children:[M?e(l.Arrow,{className:o("data-[side=top]:bottom-[-1px]","data-[side=bottom]:top-[-1px] data-[side=bottom]:rotate-180","data-[side=left]:right-[-1px] data-[side=left]:-rotate-90","data-[side=right]:left-[-1px] data-[side=right]:rotate-90"),children:s("svg",{width:U,height:U/2,viewBox:"0 0 10 5","aria-hidden":"true",className:"block",children:[e("path",{d:"M0 0h10L5 5z",fill:"var(--plass-glass-press)"}),e("path",{d:"M0 0 5 5 10 0",fill:"none",stroke:"var(--plass-glass-line)",strokeWidth:"1",vectorEffect:"non-scaling-stroke"})]})}):null,V||E?s("div",{className:"flex shrink-0 items-start gap-3",children:[s("div",{className:o("flex min-w-0 flex-1 flex-col",m[I]),children:[n(k)?e(l.Title,{className:o("m-0 font-semibold",u[I]),children:k}):null,n(O)?e(l.Description,{className:o("m-0 text-(--plass-muted-fg)",d[I]),children:O}):null]}),E?e(l.Close,{"aria-label":R,className:y,children:e(t,{})}):null]}):null,n(P)?e("div",{className:"min-w-0",children:P}):null]})})})]})}
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,2 @@
1
+ export { PlPortal } from './PlPortal.js';
2
+ export type { PlPortalContainer, PlPortalProps } from './PlPortal.js';
@@ -0,0 +1 @@
1
+ export{PlPortal}from"./PlPortal.js";
@@ -1 +1 @@
1
- "use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as l from"react";import{useDefaults as s}from"../../internal/defaults.js";import{Progress as r}from"@base-ui/react/progress";import{fillTransitionClasses as t,plateGapClasses as i,plateRadiusClasses as n,plateSizeClasses as o,progressAriaText as m,progressFraction as c,progressSlots as u,progressText as f,trackClasses as d}from"../../internal/progress.js";import{cx as p,metaTextClasses as x,stackGapClasses as h}from"../../internal/styles.js";export const PlProgressBox=/* @__PURE__ */l.forwardRef(function PlProgressBox({size:l,color:g,count:y=4,value:b=null,min:j=0,max:v=100,label:w,showValue:N=!1,format:M,className:P,style:k,...V},z){const A=s(),B=l??A.size??"md",R=g??A.color??"primary",T=c(b,j,v),L=null===T,$=void 0!==M,q=Math.max(1,Math.floor(y));return a(r.Root,{ref:z,value:b??null,min:j,max:v,format:M,getAriaValueText:m(T,$),className:p("inline-flex flex-col",h[B],P),style:{...u(R),...k},...V,children:[w||N?a("div",{className:p("flex items-baseline gap-2",w?"justify-between":"justify-end",x[B]),children:[w?e(r.Label,{className:"min-w-0 truncate text-(--plass-fg)",children:w}):null,N?e(r.Value,{className:"shrink-0 tabular-nums text-(--plass-muted-fg)",children:e=>f(T,e,$)}):null]}):null,e(r.Track,{className:p("flex",i[B]),children:Array.from({length:q},(a,l)=>e("span",{className:p("relative overflow-hidden",d,o[B],n[B]),children:e("span",{"aria-hidden":"true",className:p("absolute inset-y-0 start-0 [background-image:var(--p-fill)]",L?"plass-plate-wave w-full":t),style:L?{"--p-i":l}:{width:`${Math.min(100,Math.max(0,100*(T*q-l)))}%`}})},l))})]})});
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 t}from"@base-ui/react/progress";import{progressAriaText as l,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(t.Root,{ref:P,value:x??null,min:k,max:g,format:$,getAriaValueText:l(z,I),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(t.Label,{className:"min-w-0 truncate text-(--plass-fg)",children:v}):null,y?r(t.Value,{className:"shrink-0 tabular-nums text-(--plass-muted-fg)",children:r=>n(z,r,I)}):null]})});
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 r from"react";import{useDefaults as s}from"../../internal/defaults.js";import{Progress as a}from"@base-ui/react/progress";import{barThicknessClasses as t,fillTransitionClasses as o,progressAriaText as n,progressFraction as i,progressSlots as m,progressText as u,trackClasses as c}from"../../internal/progress.js";import{cx as f,metaTextClasses as d,stackGapClasses as p}from"../../internal/styles.js";export const PlProgressLinear=/* @__PURE__ */r.forwardRef(function PlProgressLinear({size:r,color:x,value:g=null,min:b=0,max:h=100,label:j,showValue:w=!1,format:v,className:N,style:y,...P},k){const L=s(),V=r??L.size??"md",z=x??L.color??"primary",R=i(g,b,h),T=null===R,A=void 0!==v;return l(a.Root,{ref:k,value:g??null,min:b,max:h,format:v,getAriaValueText:n(R,A),className:f("flex w-full flex-col",p[V],N),style:{...m(z),...y},...P,children:[j||w?l("div",{className:f("flex items-baseline gap-2",j?"justify-between":"justify-end",d[V]),children:[j?e(a.Label,{className:"min-w-0 truncate text-(--plass-fg)",children:j}):null,w?e(a.Value,{className:"shrink-0 tabular-nums text-(--plass-muted-fg)",children:e=>u(R,e,A)}):null]}):null,e(a.Track,{className:f("relative w-full overflow-hidden rounded-full",c,t[V]),children:e(a.Indicator,{className:f("rounded-full [background-image:var(--p-fill)]",T?"plass-progress-sweep":`absolute top-0 ${o}`)})})]})});
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 r}from"react/jsx-runtime";import*as a 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 c,focusRingClasses as d,glassClasses as n,hasContent as p,metaTextClasses as m,tickDotClasses as f,tickRowTextClasses as u,tickSizeClasses as h,transitionClasses as b}from"../../internal/styles.js";const g=/* @__PURE__ */a.createContext({size:"md",color:"primary",readOnly:!1}),x=/* @__PURE__ */["relative inline-flex shrink-0 items-center justify-center rounded-full border","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",b,d].join(" "),v=/* @__PURE__ */[n,"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"].join(" "),N=/* @__PURE__ */[n,"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]"].join(" "),k=/* @__PURE__ */[n,"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]"].join(" ");export const PlRadio=/* @__PURE__ */a.forwardRef(function PlRadio({label:l,description:s,disabled:i=!1,className:c,style:d,...n},p){const b=a.useContext(g),y=n.readOnly??b.readOnly;return e(t.Root,{disabled:i,className:["flex flex-col",c??""].filter(Boolean).join(" "),style:d,children:r("div",{className:`flex items-start gap-2 ${u[b.size]}`,children:[e("span",{className:"flex h-[1lh] shrink-0 items-center",children:e(o.Root,{ref:p,className:[x,h[b.size],i?k:y?N:v].join(" "),disabled:i,...n,children:e(o.Indicator,{className:`rounded-full bg-current ${f[b.size]}`})})}),l||s?r("span",{className:"flex min-w-0 flex-col gap-0.5",children:[l?e(t.Label,{className:i?"text-(--plass-muted-fg)":"cursor-pointer text-(--plass-fg)",children:l}):null,s?e(t.Description,{className:`${m[b.size]} text-(--plass-muted-fg)`,children:s}):null]}):null]})})});export const PlRadioGroup=/* @__PURE__ */a.forwardRef(function PlRadioGroup({size:o,color:d,orientation:n="vertical",label:f,description:u,error:h,invalid:b,disabled:x=!1,readOnly:v=!1,className:N,classNames:k,style:y,children:j,...R},z){const w=l(),O=o??w.size??"md",P=d??w.color??"primary",G=p(h),$=b??G,B=$?"danger":P,C=a.useMemo(()=>({size:O,color:B,readOnly:v}),[O,B,v]);return e(g.Provider,{value:C,children:r(t.Root,{disabled:x,invalid:$,className:["flex flex-col gap-1.5",N??""].filter(Boolean).join(" "),style:{...i(B,0,"solid"),...y},children:[f?e(t.Label,{className:c(m[O],"font-semibold",x?"text-(--plass-muted-fg)":"text-(--plass-fg)",k?.label),children:f}):null,u?e(t.Description,{className:c(m[O],"text-(--plass-muted-fg)",k?.description),children:u}):null,e(s,{ref:z,disabled:x,readOnly:v,className:c("flex","horizontal"===n?"flex-row flex-wrap gap-x-5 gap-y-2":"flex-col gap-2",k?.control),...R,children:j}),e(t.Error,G?{match:!0,className:c(m[O],"text-(--p-accent)",k?.error),children:h}:{className:c(m[O],"text-(--p-accent)",k?.error)})]})})});
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
  }