plass-ui 1.2.0 → 1.3.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 (183) hide show
  1. package/CHANGELOG.md +78 -0
  2. package/dist/components/accordion/PlAccordion.js +1 -1
  3. package/dist/components/alert/PlAlert.js +1 -1
  4. package/dist/components/animate-headline/PlAnimateHeadline.js +1 -1
  5. package/dist/components/animate-lighting/PlAnimateLighting.js +1 -1
  6. package/dist/components/animate-typing/PlAnimateTyping.js +1 -1
  7. package/dist/components/aspect-ratio/PlAspectRatio.js +1 -1
  8. package/dist/components/avatar/PlAvatar.js +1 -1
  9. package/dist/components/avatar-group/PlAvatarGroup.js +1 -1
  10. package/dist/components/back-top/PlBackTop.d.ts +55 -0
  11. package/dist/components/back-top/PlBackTop.js +1 -0
  12. package/dist/components/back-top/index.d.ts +2 -0
  13. package/dist/components/back-top/index.js +1 -0
  14. package/dist/components/badge/PlBadge.js +1 -1
  15. package/dist/components/blockquote/PlBlockquote.js +1 -1
  16. package/dist/components/bottom-navigation/PlBottomNavigation.js +1 -1
  17. package/dist/components/box/PlBox.js +1 -1
  18. package/dist/components/breadcrumb/PlBreadcrumb.js +1 -1
  19. package/dist/components/button/PlButton.js +1 -1
  20. package/dist/components/calendar/PlCalendar.d.ts +104 -0
  21. package/dist/components/calendar/PlCalendar.js +1 -0
  22. package/dist/components/calendar/index.d.ts +2 -0
  23. package/dist/components/calendar/index.js +1 -0
  24. package/dist/components/card/PlCard.js +1 -1
  25. package/dist/components/carousel/PlCarousel.js +1 -1
  26. package/dist/components/chat-bubble/PlChatBubble.js +1 -1
  27. package/dist/components/checkbox/PlCheckbox.js +1 -1
  28. package/dist/components/chip/PlChip.js +1 -1
  29. package/dist/components/collapsible/PlCollapsible.js +1 -1
  30. package/dist/components/color-picker/PlColorPicker.js +1 -1
  31. package/dist/components/combobox/PlCombobox.d.ts +11 -2
  32. package/dist/components/combobox/PlCombobox.js +1 -1
  33. package/dist/components/command-palette/PlCommandPalette.d.ts +1 -1
  34. package/dist/components/command-palette/PlCommandPalette.js +1 -1
  35. package/dist/components/confirm/PlConfirmProvider.d.ts +100 -0
  36. package/dist/components/confirm/PlConfirmProvider.js +1 -0
  37. package/dist/components/confirm/index.d.ts +2 -0
  38. package/dist/components/confirm/index.js +1 -0
  39. package/dist/components/container/PlContainer.js +1 -1
  40. package/dist/components/date-picker/PlDatePicker.d.ts +41 -2
  41. package/dist/components/date-picker/PlDatePicker.js +1 -1
  42. package/dist/components/date-range-picker/PlDateRangePicker.js +1 -1
  43. package/dist/components/date-time-picker/PlDateTimePicker.js +1 -1
  44. package/dist/components/divider/PlDivider.js +1 -1
  45. package/dist/components/drawer/PlDrawer.d.ts +1 -1
  46. package/dist/components/drawer/PlDrawer.js +1 -1
  47. package/dist/components/empty/PlEmpty.d.ts +47 -0
  48. package/dist/components/empty/PlEmpty.js +1 -0
  49. package/dist/components/empty/index.d.ts +2 -0
  50. package/dist/components/empty/index.js +1 -0
  51. package/dist/components/file-picker/PlFilePicker.js +1 -1
  52. package/dist/components/floating-bottom-navigation/PlFloatingBottomNavigation.js +1 -1
  53. package/dist/components/footer/PlFooter.js +1 -1
  54. package/dist/components/header/PlHeader.js +1 -1
  55. package/dist/components/highlight/PlHighlight.js +1 -1
  56. package/dist/components/hot-keys/PlHotKeys.js +1 -1
  57. package/dist/components/image/PlImage.d.ts +72 -0
  58. package/dist/components/image/PlImage.js +1 -0
  59. package/dist/components/image/index.d.ts +2 -0
  60. package/dist/components/image/index.js +1 -0
  61. package/dist/components/list/PlList.js +1 -1
  62. package/dist/components/menu/PlMenu.d.ts +2 -2
  63. package/dist/components/menu/PlMenu.js +1 -1
  64. package/dist/components/menubar/PlMenubar.js +1 -1
  65. package/dist/components/modal/PlModal.d.ts +1 -1
  66. package/dist/components/modal/PlModal.js +1 -1
  67. package/dist/components/navigation-menu/PlNavigationMenu.js +1 -1
  68. package/dist/components/number-field/PlNumberField.d.ts +11 -2
  69. package/dist/components/number-field/PlNumberField.js +1 -1
  70. package/dist/components/otp-field/PlOtpField.d.ts +10 -1
  71. package/dist/components/otp-field/PlOtpField.js +1 -1
  72. package/dist/components/overlay/PlOverlay.d.ts +1 -1
  73. package/dist/components/overlay/PlOverlay.js +1 -1
  74. package/dist/components/page-layout/PlPageLayout.js +1 -1
  75. package/dist/components/pagination/PlPagination.js +1 -1
  76. package/dist/components/panes/PlPanes.js +1 -1
  77. package/dist/components/pill/PlPill.js +1 -1
  78. package/dist/components/popconfirm/PlPopconfirm.d.ts +61 -0
  79. package/dist/components/popconfirm/PlPopconfirm.js +1 -0
  80. package/dist/components/popconfirm/index.d.ts +2 -0
  81. package/dist/components/popconfirm/index.js +1 -0
  82. package/dist/components/popover/PlPopover.d.ts +1 -1
  83. package/dist/components/popover/PlPopover.js +1 -1
  84. package/dist/components/progress-box/PlProgressBox.js +1 -1
  85. package/dist/components/progress-circular/PlProgressCircular.js +1 -1
  86. package/dist/components/progress-linear/PlProgressLinear.js +1 -1
  87. package/dist/components/radio-group/PlRadioGroup.js +1 -1
  88. package/dist/components/rating/PlRating.js +1 -1
  89. package/dist/components/scroll-zone/PlScrollZone.js +1 -1
  90. package/dist/components/segmented-button/PlSegmentedButton.js +1 -1
  91. package/dist/components/select/PlSelect.d.ts +10 -1
  92. package/dist/components/select/PlSelect.js +1 -1
  93. package/dist/components/sidebar/PlSidebar.js +1 -1
  94. package/dist/components/skeleton/PlSkeleton.js +1 -1
  95. package/dist/components/slider/PlSlider.js +1 -1
  96. package/dist/components/spoiler/PlSpoiler.js +1 -1
  97. package/dist/components/stat/PlStat.d.ts +66 -0
  98. package/dist/components/stat/PlStat.js +1 -0
  99. package/dist/components/stat/index.d.ts +2 -0
  100. package/dist/components/stat/index.js +1 -0
  101. package/dist/components/stepper/PlStepper.d.ts +86 -0
  102. package/dist/components/stepper/PlStepper.js +1 -0
  103. package/dist/components/stepper/index.d.ts +2 -0
  104. package/dist/components/stepper/index.js +1 -0
  105. package/dist/components/switch/PlSwitch.js +1 -1
  106. package/dist/components/tabs/PlTabs.js +1 -1
  107. package/dist/components/text-field/PlTextField.d.ts +10 -1
  108. package/dist/components/text-field/PlTextField.js +1 -1
  109. package/dist/components/time-picker/PlTimePicker.js +1 -1
  110. package/dist/components/timeline/PlTimeline.d.ts +5 -8
  111. package/dist/components/timeline/PlTimeline.js +1 -1
  112. package/dist/components/toast/PlToast.d.ts +1 -1
  113. package/dist/components/toast/PlToast.js +1 -1
  114. package/dist/components/toggle/PlToggle.js +1 -1
  115. package/dist/components/toolbar/PlToolbar.js +1 -1
  116. package/dist/components/tooltip/PlTooltip.d.ts +1 -1
  117. package/dist/components/tooltip/PlTooltip.js +1 -1
  118. package/dist/components/transfer/PlTransfer.js +1 -1
  119. package/dist/components/tree/PlTree.d.ts +67 -0
  120. package/dist/components/tree/PlTree.js +1 -0
  121. package/dist/components/tree/index.d.ts +2 -0
  122. package/dist/components/tree/index.js +1 -0
  123. package/dist/components/visually-hidden/PlVisuallyHidden.d.ts +46 -0
  124. package/dist/components/visually-hidden/PlVisuallyHidden.js +1 -0
  125. package/dist/components/visually-hidden/index.d.ts +2 -0
  126. package/dist/components/visually-hidden/index.js +1 -0
  127. package/dist/css/back-top.css +2 -0
  128. package/dist/css/calendar.css +2 -0
  129. package/dist/css/confirm.css +2 -0
  130. package/dist/css/empty.css +2 -0
  131. package/dist/css/image.css +2 -0
  132. package/dist/css/popconfirm.css +2 -0
  133. package/dist/css/stat.css +2 -0
  134. package/dist/css/stepper.css +2 -0
  135. package/dist/css/tree.css +2 -0
  136. package/dist/css/visually-hidden.css +2 -0
  137. package/dist/hooks/index.d.ts +7 -0
  138. package/dist/hooks/index.js +1 -0
  139. package/dist/hooks/usePlBreakpoint.d.ts +38 -0
  140. package/dist/hooks/usePlBreakpoint.js +1 -0
  141. package/dist/hooks/usePlColorScheme.d.ts +66 -0
  142. package/dist/hooks/usePlColorScheme.js +1 -0
  143. package/dist/hooks/usePlHotKeys.d.ts +81 -0
  144. package/dist/hooks/usePlHotKeys.js +1 -0
  145. package/dist/hooks/usePlMediaQuery.d.ts +22 -0
  146. package/dist/hooks/usePlMediaQuery.js +1 -0
  147. package/dist/hooks/usePlReducedMotion.d.ts +22 -0
  148. package/dist/hooks/usePlReducedMotion.js +1 -0
  149. package/dist/index.d.ts +12 -0
  150. package/dist/index.js +1 -1
  151. package/dist/internal/animate.d.ts +0 -1
  152. package/dist/internal/animate.js +1 -1
  153. package/dist/internal/calendar.d.ts +25 -3
  154. package/dist/internal/calendar.js +1 -1
  155. package/dist/internal/color-scheme.d.ts +23 -0
  156. package/dist/internal/color-scheme.js +1 -0
  157. package/dist/internal/date.d.ts +21 -0
  158. package/dist/internal/date.js +1 -1
  159. package/dist/internal/defaults.d.ts +69 -0
  160. package/dist/internal/defaults.js +1 -0
  161. package/dist/internal/direction.d.ts +4 -0
  162. package/dist/internal/direction.js +1 -0
  163. package/dist/internal/grid.d.ts +2 -0
  164. package/dist/internal/grid.js +1 -1
  165. package/dist/internal/keys.d.ts +93 -0
  166. package/dist/internal/keys.js +1 -0
  167. package/dist/internal/media.d.ts +26 -0
  168. package/dist/internal/media.js +1 -0
  169. package/dist/internal/page-layout.d.ts +6 -6
  170. package/dist/internal/page-layout.js +1 -1
  171. package/dist/internal/steps.d.ts +76 -0
  172. package/dist/internal/steps.js +1 -0
  173. package/dist/provider/PlColorSchemeScript.d.ts +40 -0
  174. package/dist/provider/PlColorSchemeScript.js +1 -0
  175. package/dist/provider/PlassProvider.d.ts +39 -0
  176. package/dist/provider/PlassProvider.js +1 -0
  177. package/dist/provider/index.d.ts +5 -0
  178. package/dist/provider/index.js +1 -0
  179. package/dist/styles.css +1 -1
  180. package/dist/tailwind.css +29 -1
  181. package/dist/tokens.css +29 -1
  182. package/dist/types.d.ts +17 -0
  183. package/package.json +17 -1
@@ -1 +1 @@
1
- "use client";import{jsxs as e,jsx as t}from"react/jsx-runtime";import*as s from"react";import{Menubar as o}from"@base-ui/react/menubar";import{PlMenu as r}from"../menu/PlMenu.js";import{MenuContext as n}from"../../internal/menu.js";import{controlTextClasses as a,cx as i,gapClasses as l,hasContent as c,iconClasses as p,paddingXClasses as d,radiusClasses as u,transitionClasses as m}from"../../internal/styles.js";const f={xs:"h-4.5",sm:"h-5.5",md:"h-6.5",lg:"h-8",xl:"h-10"},b=/* @__PURE__ */["inline-flex shrink-0 cursor-pointer select-none items-center justify-center","whitespace-nowrap font-medium leading-none","text-(--plass-fg) bg-transparent","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",m,p,"hover:bg-(--p-soft)","data-[popup-open]:bg-(--p-soft-hover) data-[popup-open]:text-(--p-accent)","focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:[outline-offset:-2px]","disabled:cursor-not-allowed disabled:opacity-50 disabled:saturate-[0.35]","disabled:hover:bg-transparent"].join(" ");export function PlMenubarMenu({label:o,startIcon:p,disabled:m=!1,children:h,className:v,style:x}){const{size:g,color:y,density:j}=s.useContext(n);return t(r,{size:g,color:y,density:j,disabled:m,openOnHover:!0,sideOffset:4,trigger:e("button",{type:"button",disabled:m,className:i(b,f[g],a[g],l[g],d["default"===j?"compact":j][g],u[g],v),style:x,children:[c(p)?p:null,o]}),children:h})}export const PlMenubar=/* @__PURE__ */s.forwardRef(function PlMenubar({size:e="md",color:r="primary",density:a="default",orientation:c="horizontal",modal:p=!0,loopFocus:d=!0,disabled:u=!1,className:m,style:f,children:b,...h},v){const x=s.useMemo(()=>({size:e,color:r,density:a}),[e,r,a]);return t(n.Provider,{value:x,children:t(o,{ref:v,orientation:c,modal:p,loopFocus:d,disabled:u,className:i("flex items-center","vertical"===c?"flex-col items-stretch":"flex-row",l[e],m),style:{"--p-soft":`var(--plass-${r}-soft)`,"--p-soft-hover":`var(--plass-${r}-soft-hover)`,"--p-accent":`var(--plass-${r}-accent)`,"--p-ring":`var(--plass-${r}-ring)`,...f},...h,children:b})})});
1
+ "use client";import{jsxs as e,jsx as t}from"react/jsx-runtime";import*as s from"react";import{useDefaults as o}from"../../internal/defaults.js";import{Menubar as r}from"@base-ui/react/menubar";import{PlMenu as n}from"../menu/PlMenu.js";import{MenuContext as a}from"../../internal/menu.js";import{controlTextClasses as i,cx as l,gapClasses as c,hasContent as p,iconClasses as d,paddingXClasses as u,radiusClasses as m,transitionClasses as f}from"../../internal/styles.js";const b={xs:"h-4.5",sm:"h-5.5",md:"h-6.5",lg:"h-8",xl:"h-10"},h=/* @__PURE__ */["inline-flex shrink-0 cursor-pointer select-none items-center justify-center","whitespace-nowrap font-medium leading-none","text-(--plass-fg) bg-transparent","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",f,d,"hover:bg-(--p-soft)","data-[popup-open]:bg-(--p-soft-hover) data-[popup-open]:text-(--p-accent)","focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:[outline-offset:-2px]","disabled:cursor-not-allowed disabled:opacity-50 disabled:saturate-[0.35]","disabled:hover:bg-transparent"].join(" ");export function PlMenubarMenu({label:o,startIcon:r,disabled:d=!1,children:f,className:v,style:x}){const{size:g,color:y,density:j}=s.useContext(a);return t(n,{size:g,color:y,density:j,disabled:d,openOnHover:!0,sideOffset:4,trigger:e("button",{type:"button",disabled:d,className:l(h,b[g],i[g],c[g],u["default"===j?"compact":j][g],m[g],v),style:x,children:[p(r)?r:null,o]}),children:f})}export const PlMenubar=/* @__PURE__ */s.forwardRef(function PlMenubar({size:e,color:n,density:i,orientation:p="horizontal",modal:d=!0,loopFocus:u=!0,disabled:m=!1,className:f,style:b,children:h,...v},x){const g=o(),y=e??g.size??"md",j=n??g.color??"primary",M=i??g.density??"default",w=s.useMemo(()=>({size:y,color:j,density:M}),[y,j,M]);return t(a.Provider,{value:w,children:t(r,{ref:x,orientation:p,modal:d,loopFocus:u,disabled:m,className:l("flex items-center","vertical"===p?"flex-col items-stretch":"flex-row",c[y],f),style:{"--p-soft":`var(--plass-${j}-soft)`,"--p-soft-hover":`var(--plass-${j}-soft-hover)`,"--p-accent":`var(--plass-${j}-accent)`,"--p-ring":`var(--plass-${j}-ring)`,...b},...v,children:h})})});
@@ -111,4 +111,4 @@ export declare const PlModalClose: React.ForwardRefExoticComponent<Omit<import("
111
111
  * the header and the actions stay put while only the body scrolls, which is why
112
112
  * `dividers` matters more here than on a PlCard.
113
113
  */
114
- export declare function PlModal({ size, color, density, open, defaultOpen, onOpenChange, trigger, title, description, actions, dividers, showClose, closeLabel, width, fullWidth, fullScreen, modal, dismissible, className, classNames, style, children, ...props }: PlModalProps): React.JSX.Element;
114
+ export declare function PlModal({ size: sizeProp, color: colorProp, density: densityProp, open, defaultOpen, onOpenChange, trigger, title, description, actions, dividers, showClose, closeLabel, width, fullWidth, fullScreen, modal, dismissible, className, classNames, style, children, ...props }: PlModalProps): React.JSX.Element;
@@ -1 +1 @@
1
- "use client";import{jsx as e,jsxs as s}from"react/jsx-runtime";import{Dialog as l}from"@base-ui/react/dialog";import{CloseIcon as a}from"../../internal/icons.js";import{cx as i,focusRingClasses as o,glassClasses as r,hasContent as t,metaTextClasses as n,radiusClasses as d,sheetBodyClasses as c,sheetHeaderGapClasses as p,sheetLineClasses as m,sheetPaddingXClasses as f,sheetPaddingYClasses as u,sheetSectionGapClasses as x,sheetTitleClasses as h,surfaceSlots as g}from"../../internal/styles.js";const v={xs:"max-w-80",sm:"max-w-96",md:"max-w-lg",lg:"max-w-2xl",xl:"max-w-4xl"},y=/* @__PURE__ */[r,"relative flex w-full flex-col overflow-hidden","border text-(--plass-fg) bg-(--plass-glass-press)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--plass-shadow-4),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(" "),b=/* @__PURE__ */["fixed inset-0 z-(--plass-z-portal) bg-(--plass-scrim)","[backdrop-filter:blur(2px)] [-webkit-backdrop-filter:blur(2px)]","[transition:opacity_var(--plass-duration)_var(--plass-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" ");export const PlModalClose=l.Close;export function PlModal({size:r="md",color:w="primary",density:j="default",open:N,defaultOpen:k,onOpenChange:$,trigger:_,title:z,description:C,actions:P,dividers:B=!1,showClose:O=!0,closeLabel:D="Close",width:M,fullWidth:T=!0,fullScreen:W=!1,modal:L=!0,dismissible:R=!0,className:S,classNames:V,style:q,children:A,...E}){const F=f[j][r],G=u[j][r],H=B?`${F} ${G}`:F,I=t(z)||t(C),J=t(P);return s(l.Root,{open:N,defaultOpen:k,modal:L,disablePointerDismissal:!R,onOpenChange:(e,s)=>{R||e||"escape-key"!==s.reason?$?.(e):s.cancel()},children:[_?e(l.Trigger,{render:_}):null,s(l.Portal,{children:[e(l.Backdrop,{className:i("plass-portal",b,V?.backdrop)}),e(l.Viewport,{className:["plass-portal fixed inset-0 z-(--plass-z-portal) flex justify-center",W?"items-stretch":"items-center p-4"].join(" "),children:s(l.Popup,{className:[y,c[r],W?"h-full max-w-none rounded-none":`max-h-full ${d[r]} ${void 0===M?v[r]:""}`,W||T?"":"w-auto",B?"":`${G} ${x[r]}`,S??""].filter(Boolean).join(" "),style:{...g(w,3),...void 0===M?null:{maxWidth:"number"==typeof M?`${M}px`:M},...q},...E,children:[I||O?s("div",{className:`flex shrink-0 items-start gap-3 ${H}`,children:[s("div",{className:`flex min-w-0 flex-1 flex-col ${p[r]}`,children:[t(z)?e(l.Title,{className:`m-0 font-semibold ${h[r]}`,children:z}):null,t(C)?e(l.Description,{className:`m-0 text-(--plass-muted-fg) ${n[r]}`,children:C}):null]}),O?e(l.Close,{"aria-label":D,className:["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)",o].join(" "),children:e(a,{})}):null]}):null,t(A)?e("div",{className:["min-h-0 flex-1 overflow-y-auto overscroll-contain",H,B&&(I||O)?m:"",B?"":"-my-1 py-1"].filter(Boolean).join(" "),children:A}):null,J?e("div",{className:["flex shrink-0 flex-wrap items-center justify-end gap-2",H,B?m:""].filter(Boolean).join(" "),children:P}):null]})})]})]})}
1
+ "use client";import{jsx as e,jsxs as s}from"react/jsx-runtime";import{useDefaults as l}from"../../internal/defaults.js";import{Dialog as a}from"@base-ui/react/dialog";import{CloseIcon as i}from"../../internal/icons.js";import{cx as o,focusRingClasses as r,glassClasses as t,hasContent as n,metaTextClasses as d,radiusClasses as c,sheetBodyClasses as p,sheetHeaderGapClasses as m,sheetLineClasses as f,sheetPaddingXClasses as u,sheetPaddingYClasses as x,sheetSectionGapClasses as h,sheetTitleClasses as g,surfaceSlots as v}from"../../internal/styles.js";const y={xs:"max-w-80",sm:"max-w-96",md:"max-w-lg",lg:"max-w-2xl",xl:"max-w-4xl"},b=/* @__PURE__ */[t,"relative flex w-full flex-col overflow-hidden","border text-(--plass-fg) bg-(--plass-glass-press)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--plass-shadow-4),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=/* @__PURE__ */["fixed inset-0 z-(--plass-z-portal) bg-(--plass-scrim)","[backdrop-filter:blur(2px)] [-webkit-backdrop-filter:blur(2px)]","[transition:opacity_var(--plass-duration)_var(--plass-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" ");export const PlModalClose=a.Close;export function PlModal({size:t,color:j,density:N,open:k,defaultOpen:$,onOpenChange:_,trigger:z,title:C,description:P,actions:B,dividers:O=!1,showClose:D=!0,closeLabel:M="Close",width:T,fullWidth:W=!0,fullScreen:L=!1,modal:R=!0,dismissible:S=!0,className:V,classNames:q,style:A,children:E,...F}){const G=l(),H=t??G.size??"md",I=j??G.color??"primary",J=N??G.density??"default",K=u[J][H],Q=x[J][H],U=O?`${K} ${Q}`:K,X=n(C)||n(P),Y=n(B);return s(a.Root,{open:k,defaultOpen:$,modal:R,disablePointerDismissal:!S,onOpenChange:(e,s)=>{S||e||"escape-key"!==s.reason?_?.(e):s.cancel()},children:[z?e(a.Trigger,{render:z}):null,s(a.Portal,{children:[e(a.Backdrop,{className:o("plass-portal",w,q?.backdrop)}),e(a.Viewport,{className:["plass-portal fixed inset-0 z-(--plass-z-portal) flex justify-center",L?"items-stretch":"items-center p-4"].join(" "),children:s(a.Popup,{className:[b,p[H],L?"h-full max-w-none rounded-none":`max-h-full ${c[H]} ${void 0===T?y[H]:""}`,L||W?"":"w-auto",O?"":`${Q} ${h[H]}`,V??""].filter(Boolean).join(" "),style:{...v(I,3),...void 0===T?null:{maxWidth:"number"==typeof T?`${T}px`:T},...A},...F,children:[X||D?s("div",{className:`flex shrink-0 items-start gap-3 ${U}`,children:[s("div",{className:`flex min-w-0 flex-1 flex-col ${m[H]}`,children:[n(C)?e(a.Title,{className:`m-0 font-semibold ${g[H]}`,children:C}):null,n(P)?e(a.Description,{className:`m-0 text-(--plass-muted-fg) ${d[H]}`,children:P}):null]}),D?e(a.Close,{"aria-label":M,className:["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(" "),children:e(i,{})}):null]}):null,n(E)?e("div",{className:["min-h-0 flex-1 overflow-y-auto overscroll-contain",U,O&&(X||D)?f:"",O?"":"-my-1 py-1"].filter(Boolean).join(" "),children:E}):null,Y?e("div",{className:["flex shrink-0 flex-wrap items-center justify-end gap-2",U,O?f:""].filter(Boolean).join(" "),children:B}):null]})})]})]})}
@@ -1 +1 @@
1
- "use client";import{jsx as e,jsxs as a,Fragment as s}from"react/jsx-runtime";import*as t from"react";import{NavigationMenu as n}from"@base-ui/react/navigation-menu";import{ChevronIcon as l}from"../../internal/icons.js";import{safeRel as r}from"../../internal/link.js";import{controlHeightClasses as i,controlTextClasses as o,controlTextLeadingClasses as d,cx as c,focusRingClasses as p,focusRingInsetClasses as u,gapClasses as m,glassClasses as f,hasContent as h,iconClasses as g,metaTextClasses as v,paddingXClasses as x,radiusClasses as y,surfaceSlots as N,transitionClasses as b}from"../../internal/styles.js";const w=/* @__PURE__ */t.createContext({size:"md",density:"default"}),j=/* @__PURE__ */["inline-flex shrink-0 cursor-pointer select-none items-center justify-center","whitespace-nowrap font-medium leading-none no-underline","text-(--plass-fg) bg-transparent","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",b,g,p,"hover:bg-(--p-soft)","data-[popup-open]:bg-(--p-soft-hover) data-[popup-open]:text-(--p-accent)","data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50","data-[disabled]:saturate-[0.35] data-[disabled]:hover:bg-transparent"].join(" "),P=/* @__PURE__ */[f,"relative 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] overflow-hidden","[transition:opacity_var(--plass-duration)_var(--plass-ease),width_var(--plass-duration)_var(--plass-ease),height_var(--plass-duration)_var(--plass-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),k=/* @__PURE__ */["flex min-w-0 cursor-pointer items-start no-underline","text-(--plass-fg) bg-transparent",b,g,"hover:bg-(--p-soft)",u].join(" "),z={xs:"p-1",sm:"p-1.5",md:"p-2",lg:"p-2.5",xl:"p-3"};export const PlNavigationMenuLink=/* @__PURE__ */t.forwardRef(function PlNavigationMenuLink({href:s,title:l,description:r,startIcon:i,className:o,children:p,...u},f){const{size:g,density:N}=t.useContext(w);return a(n.Link,{ref:f,href:s,className:c(k,y[g],m[g],x[N][g],"py-2",o),...u,children:[h(i)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:i}):null,a("span",{className:"flex min-w-0 flex-col gap-0.5",children:[e("span",{className:c("font-medium",d[g]),children:l}),h(r)?e("span",{className:c("text-(--plass-muted-fg)",v[g]),children:r}):null,p]})]})});export function PlNavigationMenuItem({label:d,href:p,target:u,rel:f,startIcon:g,value:v,disabled:N=!1,columns:b=1,children:P,className:k,style:_}){const{size:C,density:M}=t.useContext(w),I=void 0!==p&&!h(P),L=c(j,i[C],o[C],m[C],x[M][C],y[C],k);return e(n.Item,{value:v,children:I?a(n.Link,{href:p,target:u,rel:r(u,f),className:L,style:_,children:[h(g)?g:null,d]}):a(s,{children:[a(n.Trigger,{disabled:N,className:L,style:_,children:[h(g)?g:null,d,e(n.Icon,{className:"flex items-center [transition:rotate_var(--plass-duration)_var(--plass-ease)] data-[popup-open]:rotate-180",children:e(l,{})})]}),e(n.Content,{className:c("grid gap-1",z[C]),style:b>1?{gridTemplateColumns:`repeat(${b}, minmax(0, 1fr))`}:void 0,children:P})]})})}export const PlNavigationMenu=/* @__PURE__ */t.forwardRef(function PlNavigationMenu({size:s="md",color:l="primary",density:r="default",orientation:i="horizontal",value:o,defaultValue:d,onValueChange:p,delay:u,closeDelay:f,sideOffset:h=8,className:g,style:v,children:x,...b},j){const k=t.useMemo(()=>({size:s,density:r}),[s,r]);return e(w.Provider,{value:k,children:a(n.Root,{ref:j,orientation:i,value:o,defaultValue:d,onValueChange:e=>p?.(e),delay:u,closeDelay:f,className:g,style:{...N(l,3),...v},...b,children:[e(n.List,{className:c("flex items-center","vertical"===i?"flex-col items-stretch":"flex-row",m[s]),children:x}),e(n.Portal,{children:e(n.Positioner,{className:"plass-portal z-(--plass-z-portal) [outline:none]",sideOffset:h,collisionPadding:12,children:e(n.Popup,{className:c(P,y[s]),children:e(n.Viewport,{})})})})]})})});
1
+ "use client";import{jsx as e,jsxs as a,Fragment as s}from"react/jsx-runtime";import*as t from"react";import{useDefaults as n}from"../../internal/defaults.js";import{NavigationMenu as l}from"@base-ui/react/navigation-menu";import{ChevronIcon as r}from"../../internal/icons.js";import{safeRel as i}from"../../internal/link.js";import{controlHeightClasses as o,controlTextClasses as d,controlTextLeadingClasses as c,cx as p,focusRingClasses as u,focusRingInsetClasses as m,gapClasses as f,glassClasses as h,hasContent as g,iconClasses as v,metaTextClasses as x,paddingXClasses as y,radiusClasses as N,surfaceSlots as b,transitionClasses as w}from"../../internal/styles.js";const j=/* @__PURE__ */t.createContext({size:"md",density:"default"}),P=/* @__PURE__ */["inline-flex shrink-0 cursor-pointer select-none items-center justify-center","whitespace-nowrap font-medium leading-none no-underline","text-(--plass-fg) bg-transparent","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",w,v,u,"hover:bg-(--p-soft)","data-[popup-open]:bg-(--p-soft-hover) data-[popup-open]:text-(--p-accent)","data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50","data-[disabled]:saturate-[0.35] data-[disabled]:hover:bg-transparent"].join(" "),z=/* @__PURE__ */[h,"relative 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] overflow-hidden","[transition:opacity_var(--plass-duration)_var(--plass-ease),width_var(--plass-duration)_var(--plass-ease),height_var(--plass-duration)_var(--plass-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),k=/* @__PURE__ */["flex min-w-0 cursor-pointer items-start no-underline","text-(--plass-fg) bg-transparent",w,v,"hover:bg-(--p-soft)",m].join(" "),_={xs:"p-1",sm:"p-1.5",md:"p-2",lg:"p-2.5",xl:"p-3"};export const PlNavigationMenuLink=/* @__PURE__ */t.forwardRef(function PlNavigationMenuLink({href:s,title:n,description:r,startIcon:i,className:o,children:d,...u},m){const{size:h,density:v}=t.useContext(j);return a(l.Link,{ref:m,href:s,className:p(k,N[h],f[h],y[v][h],"py-2",o),...u,children:[g(i)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:i}):null,a("span",{className:"flex min-w-0 flex-col gap-0.5",children:[e("span",{className:p("font-medium",c[h]),children:n}),g(r)?e("span",{className:p("text-(--plass-muted-fg)",x[h]),children:r}):null,d]})]})});export function PlNavigationMenuItem({label:n,href:c,target:u,rel:m,startIcon:h,value:v,disabled:x=!1,columns:b=1,children:w,className:z,style:k}){const{size:C,density:M}=t.useContext(j),I=void 0!==c&&!g(w),L=p(P,o[C],d[C],f[C],y[M][C],N[C],z);return e(l.Item,{value:v,children:I?a(l.Link,{href:c,target:u,rel:i(u,m),className:L,style:k,children:[g(h)?h:null,n]}):a(s,{children:[a(l.Trigger,{disabled:x,className:L,style:k,children:[g(h)?h:null,n,e(l.Icon,{className:"flex items-center [transition:rotate_var(--plass-duration)_var(--plass-ease)] data-[popup-open]:rotate-180",children:e(r,{})})]}),e(l.Content,{className:p("grid gap-1",_[C]),style:b>1?{gridTemplateColumns:`repeat(${b}, minmax(0, 1fr))`}:void 0,children:w})]})})}export const PlNavigationMenu=/* @__PURE__ */t.forwardRef(function PlNavigationMenu({size:s,color:r,density:i,orientation:o="horizontal",value:d,defaultValue:c,onValueChange:u,delay:m,closeDelay:h,sideOffset:g=8,className:v,style:x,children:y,...w},P){const k=n(),_=s??k.size??"md",C=r??k.color??"primary",M=i??k.density??"default",I=t.useMemo(()=>({size:_,density:M}),[_,M]);return e(j.Provider,{value:I,children:a(l.Root,{ref:P,orientation:o,value:d,defaultValue:c,onValueChange:e=>u?.(e),delay:m,closeDelay:h,className:v,style:{...b(C,3),...x},...w,children:[e(l.List,{className:p("flex items-center","vertical"===o?"flex-col items-stretch":"flex-row",f[_]),children:y}),e(l.Portal,{children:e(l.Positioner,{className:"plass-portal z-(--plass-z-portal) [outline:none]",sideOffset:g,collisionPadding:12,children:e(l.Popup,{className:p(z,N[_]),children:e(l.Viewport,{})})})})]})})});
@@ -1,5 +1,5 @@
1
1
  import * as React from 'react';
2
- import type { PlassElevation, PlassFieldClassNames, PlassStyleProps } from '../../types.js';
2
+ import type { PlassElevation, PlassFieldClassNames, PlassHotKeys, PlassStyleProps } from '../../types.js';
3
3
  /**
4
4
  * Where the two steppers sit.
5
5
  *
@@ -17,6 +17,15 @@ export type PlNumberFieldSteppers = 'end' | 'split' | 'none';
17
17
  export interface PlNumberFieldProps extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'defaultValue' | 'children'> {
18
18
  /** Classes on the parts a `className` does not reach. */
19
19
  classNames?: PlassFieldClassNames;
20
+ /**
21
+ * Chords this field answers to, in the vocabulary `PlHotKeys` draws.
22
+ *
23
+ * `{ 'Mod+Enter': save, Escape: cancel }` — the same string a `PlHotKeys`
24
+ * beside the field would print, so the cap and the binding cannot drift. A
25
+ * chord that matches is **consumed**: the handler runs and the key reaches
26
+ * neither the control's own behaviour nor the form around it.
27
+ */
28
+ hotKeys?: PlassHotKeys;
20
29
  /**
21
30
  * Drop shadow depth. `0` is the default — a field is a well cut into the
22
31
  * sheet, not a key resting on it.
@@ -132,4 +141,4 @@ export interface PlNumberFieldProps extends PlassStyleProps, Omit<React.Componen
132
141
  * clamping, the press-and-hold repeat on the steppers, and the hidden input that
133
142
  * submits with a form.
134
143
  */
135
- export declare function PlNumberField({ variant, size, color, density, elevation, value, defaultValue, onValueChange, onValueCommitted, min, max, step, largeStep, smallStep, snapOnStep, allowWheelScrub, format, locale, steppers, incrementLabel, decrementLabel, label, description, error, invalid, startIcon, endIcon, fullWidth, disabled, readOnly, required, name, placeholder, id, className, classNames, style, ...props }: PlNumberFieldProps): React.JSX.Element;
144
+ export declare function PlNumberField({ variant, size: sizeProp, color: colorProp, density: densityProp, elevation, value, defaultValue, onValueChange, onValueCommitted, min, max, step, largeStep, smallStep, snapOnStep, allowWheelScrub, format, locale: localeProp, steppers, incrementLabel, decrementLabel, label, description, error, invalid, startIcon, endIcon, fullWidth, disabled, readOnly, required, name, placeholder, id, className, hotKeys, classNames, style, ...props }: PlNumberFieldProps): React.JSX.Element;
@@ -1 +1 @@
1
- "use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import{NumberField as l}from"@base-ui/react/number-field";import{Field as t}from"@base-ui/react/field";import{MinusIcon as s,PlusIcon as n}from"../../internal/icons.js";import{controlHeightClasses as r,controlTextLeadingClasses as i,cx as o,disabledClasses as c,fieldReadOnlyClasses as d,fieldRestClasses as p,focusRingClasses as m,focusWithinRingClasses as u,gapClasses as f,hasContent as h,iconClasses as b,metaTextClasses as x,paddingXClasses as g,radiusClasses as v,stackGapClasses as N,surfaceSlots as j,transitionClasses as y}from"../../internal/styles.js";const w=/* @__PURE__ */["group relative flex w-full cursor-text items-center","[-webkit-tap-highlight-color:transparent]",y,"focus-within:[transition-duration:0ms]",u,b].join(" "),k=/* @__PURE__ */["inline-flex size-[1.7em] shrink-0 cursor-pointer items-center justify-center","rounded-(--plass-radius-xs) text-(--plass-muted-fg) select-none","[&_svg]:size-[0.9em] [&_svg]:shrink-0","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]","[transition:background-color_var(--plass-duration)_var(--plass-ease),color_var(--plass-duration)_var(--plass-ease),opacity_var(--plass-duration)_var(--plass-ease)]","active:[transition-duration:0ms]","hover:bg-(--p-soft) hover:text-(--p-accent)","active:bg-(--p-soft-press)",m,"disabled:cursor-not-allowed disabled:bg-transparent disabled:opacity-40"].join(" ");export function PlNumberField({variant:m="glass",size:u="md",color:b="primary",density:y="default",elevation:S=0,value:_,defaultValue:V,onValueChange:I,onValueCommitted:C,min:O,max:z,step:B,largeStep:D,smallStep:L,snapOnStep:W,allowWheelScrub:q=!1,format:F,locale:R,steppers:E="end",incrementLabel:G="Increase",decrementLabel:P="Decrease",label:$,description:A,error:H,invalid:J,startIcon:K,endIcon:M,fullWidth:Q=!1,disabled:T=!1,readOnly:U=!1,required:X=!1,name:Y,placeholder:Z,id:ee,className:ae,classNames:le,style:te,...se}){const ne=h(H),re=J??ne,ie=re?"danger":b,oe=g[y][u],ce={end:`${oe} pe-1`,split:"px-1",none:oe},de=e(l.Decrement,{"aria-label":P,className:k,children:e(s,{})}),pe=e(l.Increment,{"aria-label":G,className:k,children:e(n,{})}),me="none"!==E&&!U;return a(t.Root,{disabled:T,invalid:re,className:["flex-col align-top",N[u],Q?"flex w-full":"inline-flex",ae??""].filter(Boolean).join(" "),style:{...j(ie,S),...te},...se,children:[$?e(t.Label,{className:o(x[u],"font-medium text-(--plass-fg)",T?"opacity-50":"",le?.label),children:$}):null,e(l.Root,{id:ee,name:Y,className:"contents",value:_,defaultValue:V,onValueChange:e=>I?.(e),onValueCommitted:e=>C?.(e),min:O,max:z,step:B,largeStep:D,smallStep:L,snapOnStep:W,allowWheelScrub:q,format:F,locale:R,disabled:T,readOnly:U,required:X,children:a(l.Group,{className:[w,r[u],i[u],v[u],f[u],me?ce[E]:oe,T?c[m]:U?d[m]:p[m],le?.control].filter(Boolean).join(" "),children:[me&&"split"===E?de:null,K?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",children:K}):null,e(l.Input,{placeholder:Z,className:["min-w-0 flex-1 self-stretch bg-transparent [font:inherit] text-inherit","[outline:none]","tabular-nums","split"===E&&me?"text-center":"","placeholder:text-(--plass-muted-fg)","caret-(--p-accent) selection:bg-(--p-soft-press)","disabled:cursor-not-allowed"].filter(Boolean).join(" ")}),M?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",children:M}):null,me&&"end"===E?a("span",{className:"flex shrink-0 items-center gap-0.5",children:[de,pe]}):null,me&&"split"===E?pe:null]})}),A?e(t.Description,{className:o(x[u],"text-(--plass-muted-fg)",le?.description),children:A}):null,e(t.Error,ne?{match:!0,className:o(x[u],"text-(--p-accent)",le?.error),children:H}:{className:o(x[u],"text-(--p-accent)",le?.error)})]})}
1
+ "use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import{useDefaults as a}from"../../internal/defaults.js";import{NumberField as t}from"@base-ui/react/number-field";import{Field as s}from"@base-ui/react/field";import{MinusIcon as n,PlusIcon as r}from"../../internal/icons.js";import{hotKeyHandler as i}from"../../internal/keys.js";import{controlHeightClasses as o,controlTextLeadingClasses as c,cx as d,disabledClasses as p,fieldReadOnlyClasses as m,fieldRestClasses as u,focusRingClasses as f,focusWithinRingClasses as h,gapClasses as b,hasContent as x,iconClasses as g,metaTextClasses as v,paddingXClasses as N,radiusClasses as y,stackGapClasses as j,surfaceSlots as w,transitionClasses as k}from"../../internal/styles.js";const S=/* @__PURE__ */["group relative flex w-full cursor-text items-center","[-webkit-tap-highlight-color:transparent]",k,"focus-within:[transition-duration:0ms]",h,g].join(" "),_=/* @__PURE__ */["inline-flex size-[1.7em] shrink-0 cursor-pointer items-center justify-center","rounded-(--plass-radius-xs) text-(--plass-muted-fg) select-none","[&_svg]:size-[0.9em] [&_svg]:shrink-0","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]","[transition:background-color_var(--plass-duration)_var(--plass-ease),color_var(--plass-duration)_var(--plass-ease),opacity_var(--plass-duration)_var(--plass-ease)]","active:[transition-duration:0ms]","hover:bg-(--p-soft) hover:text-(--p-accent)","active:bg-(--p-soft-press)",f,"disabled:cursor-not-allowed disabled:bg-transparent disabled:opacity-40"].join(" ");export function PlNumberField({variant:f="glass",size:h,color:g,density:k,elevation:V=0,value:I,defaultValue:z,onValueChange:C,onValueCommitted:D,min:O,max:B,step:L,largeStep:W,smallStep:q,snapOnStep:F,allowWheelScrub:K=!1,format:R,locale:E,steppers:G="end",incrementLabel:P="Increase",decrementLabel:$="Decrease",label:A,description:H,error:J,invalid:M,startIcon:Q,endIcon:T,fullWidth:U=!1,disabled:X=!1,readOnly:Y=!1,required:Z=!1,name:ee,placeholder:le,id:ae,className:te,hotKeys:se,classNames:ne,style:re,...ie}){const oe=a(),ce=E??oe.locale,de=h??oe.size??"md",pe=g??oe.color??"primary",me=k??oe.density??"default",ue=x(J),fe=M??ue,he=fe?"danger":pe,be=N[me][de],xe={end:`${be} pe-1`,split:"px-1",none:be},ge=e(t.Decrement,{"aria-label":$,className:_,children:e(n,{})}),ve=e(t.Increment,{"aria-label":P,className:_,children:e(r,{})}),Ne="none"!==G&&!Y;return l(s.Root,{disabled:X,invalid:fe,className:["flex-col align-top",j[de],U?"flex w-full":"inline-flex",te??""].filter(Boolean).join(" "),style:{...w(he,V),...re},...ie,children:[A?e(s.Label,{className:d(v[de],"font-medium text-(--plass-fg)",X?"opacity-50":"",ne?.label),children:A}):null,e(t.Root,{id:ae,name:ee,className:"contents",value:I,defaultValue:z,onValueChange:e=>C?.(e),onValueCommitted:e=>D?.(e),min:O,max:B,step:L,largeStep:W,smallStep:q,snapOnStep:F,allowWheelScrub:K,format:R,locale:ce,disabled:X,readOnly:Y,required:Z,children:l(t.Group,{className:[S,o[de],c[de],y[de],b[de],Ne?xe[G]:be,X?p[f]:Y?m[f]:u[f],ne?.control].filter(Boolean).join(" "),children:[Ne&&"split"===G?ge:null,Q?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",children:Q}):null,e(t.Input,{placeholder:le,onKeyDown:i(se,void 0),className:["min-w-0 flex-1 self-stretch bg-transparent [font:inherit] text-inherit","[outline:none]","tabular-nums","split"===G&&Ne?"text-center":"","placeholder:text-(--plass-muted-fg)","caret-(--p-accent) selection:bg-(--p-soft-press)","disabled:cursor-not-allowed"].filter(Boolean).join(" ")}),T?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",children:T}):null,Ne&&"end"===G?l("span",{className:"flex shrink-0 items-center gap-0.5",children:[ge,ve]}):null,Ne&&"split"===G?ve:null]})}),H?e(s.Description,{className:d(v[de],"text-(--plass-muted-fg)",ne?.description),children:H}):null,e(s.Error,ue?{match:!0,className:d(v[de],"text-(--p-accent)",ne?.error),children:J}:{className:d(v[de],"text-(--p-accent)",ne?.error)})]})}
@@ -1,5 +1,5 @@
1
1
  import * as React from 'react';
2
- import type { PlassElevation, PlassFieldClassNames, PlassStyleProps } from '../../types.js';
2
+ import type { PlassElevation, PlassFieldClassNames, PlassHotKeys, PlassStyleProps } from '../../types.js';
3
3
  /**
4
4
  * What may be typed into a slot.
5
5
  *
@@ -11,6 +11,15 @@ export type PlOtpCharset = 'numeric' | 'alpha' | 'alphanumeric' | 'any';
11
11
  export interface PlOtpFieldProps extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'defaultValue' | 'onChange' | 'children'> {
12
12
  /** Classes on the parts a `className` does not reach. */
13
13
  classNames?: PlassFieldClassNames;
14
+ /**
15
+ * Chords this field answers to, in the vocabulary `PlHotKeys` draws.
16
+ *
17
+ * `{ 'Mod+Enter': save, Escape: cancel }` — the same string a `PlHotKeys`
18
+ * beside the field would print, so the cap and the binding cannot drift. A
19
+ * chord that matches is **consumed**: the handler runs and the key reaches
20
+ * neither the control's own behaviour nor the form around it.
21
+ */
22
+ hotKeys?: PlassHotKeys;
14
23
  /** Drop shadow depth. `0` is the default — a field is cut into the sheet. */
15
24
  elevation?: PlassElevation;
16
25
  /**
@@ -1 +1 @@
1
- "use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as t from"react";import{Field as l}from"@base-ui/react/field";import{OTPField as r}from"@base-ui/react/otp-field";import{cx as n,disabledClasses as s,fieldReadOnlyClasses as o,fieldRestClasses as i,hasContent as m,metaTextClasses as d,stackGapClasses as u,surfaceSlots as c,transitionClasses as p}from"../../internal/styles.js";const f={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"},x={xs:"rounded-[0.3125rem]",sm:"rounded-[0.375rem]",md:"rounded-[0.4375rem]",lg:"rounded-[0.5625rem]",xl:"rounded-[0.6875rem]"},g={xs:"text-[0.8125rem]",sm:"text-[0.9375rem]",md:"text-[1.0625rem]",lg:"text-[1.25rem]",xl:"text-[1.5rem]"},h={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"}},b={numeric:"numeric",alpha:"alpha",alphanumeric:"alphanumeric",any:"none"};export const PlOtpField=/* @__PURE__ */t.forwardRef(function PlOtpField({variant:y="glass",size:v="md",color:N="primary",density:V="default",elevation:w=0,length:F=6,charset:j="numeric",mask:C=!1,groupSize:M,separator:O="–",value:I,defaultValue:R,onValueChange:S,onComplete:k,onValueInvalid:q,autoSubmit:z=!1,label:P,description:_,error:A,invalid:D,name:E,required:L=!1,disabled:T=!1,readOnly:B=!1,autoFocus:G=!1,className:H,classNames:J,style:K,...Q},U){const W=Math.min(12,Math.max(2,Math.round(F))),X=m(A),Y=D??X,Z=Y?"danger":N,$=n("text-center font-medium [font-family:inherit]",f[v],g[v],x[v],p,"caret-(--p-accent) selection:bg-(--p-soft-press)","focus:[outline:2px_solid_var(--p-ring)] focus:[outline-offset:0px]","focus:[transition-duration:0ms]",T?s[y]:B?o[y]:i[y]),ee=M&&M>0?Math.round(M):0;return a(l.Root,{disabled:T,invalid:Y,className:n("inline-flex flex-col align-top",u[v],H),style:{...c(Z,w),...K},children:[m(P)?e(l.Label,{className:n(d[v],"font-medium",T?"text-(--plass-muted-fg)":"text-(--plass-fg)",J?.label),children:P}):null,e(r.Root,{ref:U,length:W,validationType:b[j],mask:C,name:E,required:L,disabled:T,readOnly:B,autoSubmit:z,value:I,defaultValue:R,onValueChange:e=>S?.(e),onValueComplete:e=>k?.(e),onValueInvalid:e=>q?.(e),className:n("flex items-center",h[V][v],J?.control),...Q,children:Array.from({length:W},(l,s)=>a(t.Fragment,{children:[ee>0&&s>0&&s%ee===0?e("span",{"aria-hidden":"true",className:n("select-none px-0.5 text-(--plass-muted-fg)",g[v]),children:O}):null,e(r.Input,{className:$,autoFocus:G&&0===s})]},s))}),m(_)?e(l.Description,{className:n(d[v],"text-(--plass-muted-fg)",J?.description),children:_}):null,e(l.Error,X?{match:!0,className:n(d[v],"text-(--p-accent)",J?.error),children:A}:{className:n(d[v],"text-(--p-accent)",J?.error)})]})});
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)})]})});
@@ -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, color, 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, 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{Dialog as s}from"@base-ui/react/dialog";import{cx as l,surfaceSlots as r}from"../../internal/styles.js";const t={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:""},i={start:"items-start",center:"items-center",end:"items-end"},o={xs:"p-3",sm:"p-4",md:"p-6",lg:"p-8",xl:"p-10"},n=/* @__PURE__ */["[transition:opacity_var(--plass-duration)_var(--plass-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" ");export function PlOverlay({open:p,defaultOpen:c,onOpenChange:m,tone:d="scrim",dismissible:f=!1,modal:b=!0,align:u="center",size:x="md",color:y="primary",label:g="Overlay",className:k,classNames:j,style:h,children:v,...O}){return e(s.Root,{open:p,defaultOpen:c,modal:b,disablePointerDismissal:!f,onOpenChange:(e,a)=>{f||e||"escape-key"!==a.reason?m?.(e):a.cancel()},children:a(s.Portal,{children:[e(s.Backdrop,{className:l("plass-portal fixed inset-0 z-(--plass-z-portal)",n,t[d],j?.backdrop)}),e(s.Viewport,{className:["plass-portal fixed inset-0 z-(--plass-z-portal) flex justify-center",i[u],o[x]].join(" "),children:e(s.Popup,{"aria-label":g,className:["flex max-h-full max-w-full flex-col items-center justify-center","[outline:none]",n,k??""].filter(Boolean).join(" "),style:{...r(y,0),...h},...O,children:v})})]})})}
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 +1 @@
1
- "use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as t from"react";import{PlPageLayoutContext as o,PlassSidebarSideContext as n}from"../../internal/page-layout.js";import{controlSlots as r,cx as s,hasContent as a,toLength as i}from"../../internal/styles.js";const u=["header","footer"];export const PlPageLayout=/* @__PURE__ */t.forwardRef(function PlPageLayout({header:c,footer:d,sidebar:f,endSidebar:p,headerSpan:h="full",footerSpan:m="full",scroll:v="page",height:x="viewport",collapseBelow:y="md",sidebarOpen:b,defaultSidebarOpen:g=!1,onSidebarOpenChange:w,endSidebarOpen:P,defaultEndSidebarOpen:S=!1,onEndSidebarOpenChange:k,skipLink:C=!0,skipLabel:O="Skip to content",mainId:N="main",mainProps:$,color:j="primary",className:R,style:z,children:L,...E},B){const[H,M]=t.useState(g),[_,I]=t.useState(S),q=t.useMemo(()=>({start:b??H,end:P??_}),[b,H,P,_]),A=t.useCallback((e,l)=>{if("start"===e)return void 0===b&&M(l),void w?.(l);void 0===P&&I(l),k?.(l)},[b,P,w,k]),D=t.useRef(null),F=t.useCallback(e=>{D.current=e,"function"==typeof B?B(e):B&&(B.current=e)},[B]),G=t.useRef({header:null,footer:null}),J=t.useRef(null),K=t.useCallback(()=>{const e=D.current;if(e)for(const l of u){const t=G.current[l],o="header"===l?h:m;if(!t){e.style.setProperty(`--p-layout-${l}`,"0px"),e.style.setProperty(`--p-layout-${l}-inset`,"0px");continue}const n=getComputedStyle(t).position,r=`${t.offsetHeight}px`,s="sticky"===n||"fixed"===n;e.style.setProperty(`--p-layout-${l}`,s&&"full"===o?r:"0px"),e.style.setProperty(`--p-layout-${l}-inset`,"fixed"===n?r:"0px")}},[h,m]),Q=t.useCallback(()=>{const e=J.current;if(e){e.disconnect();for(const l of u){const t=G.current[l];t&&e.observe(t)}}K()},[K]);t.useEffect(()=>(J.current=new ResizeObserver(()=>K()),Q(),()=>{J.current?.disconnect(),J.current=null}),[K,Q]);const T=t.useCallback((e,l)=>{G.current[e]=l,Q()},[Q]),U=t.useMemo(()=>({present:!0,register:T,collapseBelow:y,open:q,setOpen:A,scroll:v}),[T,y,q,A,v]),V="content"===v,W=i("viewport"===x||"auto"===x?void 0:x),X=void 0!==W?"":"auto"===x?V?"h-full":"min-h-full":V?"h-dvh":"min-h-dvh",Y=a(c)?c:null,Z=a(d)?d:null;return e(o.Provider,{value:U,children:l("div",{ref:F,className:s("relative flex w-full flex-col",V?"overflow-hidden":"",X,"full"===h?"[padding-top:var(--p-layout-header-inset,0px)]":"","full"===m?"[padding-bottom:var(--p-layout-footer-inset,0px)]":"",R),style:void 0===W?z:{...V?{height:W}:{minHeight:W},...z},...E,children:[C?e("a",{href:`#${N}`,className:s("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:r(j,2,"solid"),children:O}):null,"full"===h?Y:null,l("div",{className:s("flex w-full flex-1",V?"min-h-0":""),children:[a(f)?e(n.Provider,{value:"start",children:f}):null,l("div",{className:s("flex min-w-0 flex-1 flex-col",V?"min-h-0":"","content"===h?"[padding-top:var(--p-layout-header-inset,0px)]":"","content"===m?"[padding-bottom:var(--p-layout-footer-inset,0px)]":""),children:["content"===h?Y:null,e("main",{...$,id:N,className:s("min-w-0 flex-1",V?"min-h-0 overflow-y-auto":"",$?.className),children:L}),"content"===m?Z:null]}),a(p)?e(n.Provider,{value:"end",children:p}):null]}),"full"===m?Z: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{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 +1 @@
1
- "use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{PlButton as n}from"../button/PlButton.js";import{ChevronIcon as r}from"../../internal/icons.js";import{controlTextClasses as l,gapClasses as i,srOnlyClasses as o}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 s={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:c="ghost",size:m="md",color:u="primary",density:h="compact",elevation:d=0,count:f,page:g,defaultPage:p=1,onPageChange:x,siblingCount:b=1,boundaryCount:v=1,showEdges:y=!1,showArrows:M=!0,disabled:P=!1,getPageHref:j,renderLink:w,label:L="Pagination",pageLabel:N=e=>`Page ${e}`,previousLabel:C="Previous page",nextLabel:k="Next page",firstLabel:$="First page",lastLabel:D="Last page",statusLabel:I=(e,t)=>`Page ${e} of ${t}`,className:K,children:z,...B},A){const[R,E]=a.useState(p),F=Math.min(Math.max(g??R,1),Math.max(f,1));if(f<2)return null;const H=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]}(f,F,b,v),S=F<=1,W=F>=f,linkProps=(t,a,n)=>{if(!j||a)return null;const r=j(t);return{render:w?w(t,r):e("a",{href:r}),rel:n}},press=(e,t)=>{e.metaKey||e.ctrlKey||e.shiftKey||e.altKey||j&&!x||(e.preventDefault(),(e=>{const t=Math.min(Math.max(e,1),f);t!==F&&(void 0===g&&E(t),x?.(t))})(t))},stepper=(t,a,r,l,i,o,s)=>e("li",{className:"flex",children:e(n,{variant:c,size:m,color:u,density:h,elevation:d,disabled:P||l,"aria-label":a,startIcon:e("span",{className:`flex items-center ${i}`,children:o}),onClick:e=>press(e,r),...linkProps(r,P||l,s)})},t);return t("nav",{ref:A,"aria-label":L,className:["flex items-center",K??""].filter(Boolean).join(" "),...B,children:[t("ul",{role:"list",className:`m-0 flex list-none items-center p-0 ${i[m]}`,children:[y?stepper("first",$,1,S,"rotate-180 rtl:rotate-0",e(DoubleChevronIcon,{})):null,M?stepper("previous",C,F-1,S,"rotate-90 rtl:-rotate-90",e(r,{}),"prev"):null,H.map((t,a)=>e("li","number"==typeof t?{className:"flex",children:e(n,{variant:t===F?"solid":c,size:m,color:u,density:h,elevation:d,disabled:P,"aria-label":N(t),"aria-current":t===F?"page":void 0,className:"tabular-nums",onClick:e=>press(e,t),...linkProps(t,P||t===F),children:t})}:{"aria-hidden":"true",className:["flex select-none items-center justify-center","text-(--plass-muted-fg)",l[m],s[m]].join(" "),children:"…"},`slot-${a}`)),M?stepper("next",k,F+1,W,"-rotate-90 rtl:rotate-90",e(r,{}),"next"):null,y?stepper("last",D,f,W,"rtl:rotate-180",e(DoubleChevronIcon,{})):null]}),e("span",{className:o,"aria-live":"polite",children:I(F,f)}),z]})});
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 +1 @@
1
- "use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{cx as r,transitionClasses as i}from"../../internal/styles.js";const s=/* @__PURE__ */n.createContext({basis:null}),o={xs:"basis-1",sm:"basis-1.5",md:"basis-2",lg:"basis-2.5",xl:"basis-3"},a={xs:4,sm:6,md:8,lg:10,xl:12};function toPixels(e,t,n){if(null==e)return;if("number"==typeof e)return t*e/100;const r=/^\s*(-?[\d.]+)\s*(px|rem|em|%)\s*$/.exec(e);if(!r)return;const i=Number(r[1]);if(!Number.isNaN(i))switch(r[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(n&&getComputedStyle(n).fontSize||"16");default:return}}export const PlPanes=/* @__PURE__ */n.forwardRef(function PlPanes({orientation:l="horizontal",resizable:c=!0,color:u="primary",size:d="md",onResize:m,onResizeEnd:p,className:f,style:g,children:h,...x},v){const b=n.Children.toArray(h).filter(n.isValidElement),y=b.length,w=n.useRef(null),z=n.useCallback(e=>{w.current=e,"function"==typeof v?v(e):v&&(v.current=e)},[v]),P=n.useRef([]);P.current=b.map(e=>e.props);const[S,R]=n.useState(null),E=S&&S.length===y?S:null,k=n.useRef(null);k.current=E;const C="horizontal"===l,N=a[d]*Math.max(0,y-1);function grip(e){const t=w.current,n=k.current;if(!c||!t||!n||void 0===n[e+1])return null;const r=t.getBoundingClientRect(),i=(C?r.width:r.height)-N;if(i<=0)return null;const s=P.current[e],o=P.current[e+1],a=n[e]*i,l=a+n[e+1]*i,u=Math.max(toPixels(s?.minSize,i,t)??0,l-(toPixels(o?.maxSize,i,t)??l)),d=Math.min(toPixels(s?.maxSize,i,t)??l,l-(toPixels(o?.minSize,i,t)??0));return d<u?null:{root:t,current:n,extent:i,start:a,pair:l,resize(t){const r=Math.min(d,Math.max(u,a+t)),s=[...n];return s[e]=r/i,s[e+1]=(l-r)/i,R(s),m?.(s.map(e=>100*e)),s}}}n.useEffect(()=>{const e=w.current;if(!e)return;const measure=()=>{const t=e.getBoundingClientRect(),n=(C?t.width:t.height)-N;n<=0||R(t=>t&&t.length===y?t:function initialFractions(e,t,n){const r=e.map(e=>toPixels(e.defaultSize,t,n)),i=r.reduce((e,t)=>e+(t??0),0),s=r.filter(e=>void 0===e).length,o=s>0?Math.max(0,t-i)/s:0,a=r.map(e=>Math.max(0,e??o)),l=a.reduce((e,t)=>e+t,0);return l<=0?a.map(()=>1/Math.max(1,a.length)):a.map(e=>e/l)}(P.current,n,e))};measure();const t=new ResizeObserver(measure);return t.observe(e),()=>t.disconnect()},[y,C,N]);const M=n.useRef(null);n.useEffect(()=>()=>M.current?.(),[]);const L=r("group/handle relative z-1 flex shrink-0 grow-0 items-center justify-center",o[d],i,"[outline:none] focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:outline-offset-0",c?r(C?"cursor-col-resize":"cursor-row-resize","hover:bg-(--p-soft) data-[dragging]:bg-(--p-soft)"):"");return e("div",{ref:z,className:r("flex h-full w-full",C?"flex-row":"flex-col","min-h-0 min-w-0",f),style:{"--p-accent":`var(--plass-${u}-accent)`,"--p-soft":`var(--plass-${u}-soft)`,"--p-ring":`var(--plass-${u}-ring)`,...g},...x,children:b.map((o,a)=>t(n.Fragment,{children:[a>0?e("div",{role:"separator","aria-orientation":C?"vertical":"horizontal","aria-valuenow":E?Math.round(100*E[a-1]):void 0,"aria-valuemin":0,"aria-valuemax":100,"aria-disabled":!c||void 0,tabIndex:c?0:-1,className:L,onPointerDown:e=>{0===e.button&&function beginDrag(e,t){const n=grip(e);if(!n)return;const r=t.currentTarget;r.setPointerCapture(t.pointerId),r.dataset.dragging="true";const i=document.body.style.getPropertyValue("-webkit-user-select");document.body.style.setProperty("-webkit-user-select","none");const s=C?t.clientX:t.clientY,o=C&&"rtl"===getComputedStyle(n.root).direction?-1:1;let a=n.current;const move=e=>{const t=C?e.clientX:e.clientY;a=n.resize((t-s)*o)},release=()=>{M.current=null,r.removeEventListener("pointermove",move),r.removeEventListener("pointerup",end),r.removeEventListener("pointercancel",end),delete r.dataset.dragging,i?document.body.style.setProperty("-webkit-user-select",i):document.body.style.removeProperty("-webkit-user-select")},end=()=>{release(),p?.(a.map(e=>100*e))};M.current=release,r.addEventListener("pointermove",move),r.addEventListener("pointerup",end),r.addEventListener("pointercancel",end)}(a-1,e)},onKeyDown:e=>{const t=C?"ArrowLeft":"ArrowUp",n=C?"ArrowRight":"ArrowDown";e.key!==t&&e.key!==n||(e.preventDefault(),function nudge(e,t){const n=grip(e);if(!n)return;const r=n.resize(t);p?.(r.map(e=>100*e))}(a-1,e.key===n?16:-16))},children:e("span",{"aria-hidden":"true",className:r("pointer-events-none bg-(--plass-border)",i,C?"h-full w-px":"h-px w-full",c?"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:E?`calc((100% - ${N}px) * ${E[a].toFixed(6)})`:null},children:o})]},o.key??a))})});export const PlPane=/* @__PURE__ */n.forwardRef(function PlPane({defaultSize:t,minSize:i,maxSize:o,className:a,style:l,children:c,...u},d){const{basis:m}=n.useContext(s);return e("div",{ref:d,className:r("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{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 +1 @@
1
- "use client";import{jsx as e,jsxs as s,Fragment as t}from"react/jsx-runtime";import*as l from"react";import{controlSlots as n,controlTextClasses as r,cx as o,focusRingClasses as i,gapClasses as a,glassClasses as c,hasContent as d,iconClasses as m,iconSizeClasses as p,metaTextClasses as f,paddingXClasses as x,sheetBodyClasses as u,transitionClasses as h}from"../../internal/styles.js";const g={solid:"text-(--p-on-solid) [background-image:var(--p-fill)] [box-shadow:var(--p-elev),var(--p-lift)]",glass:/* @__PURE__ */[c,"border text-(--p-accent) bg-(--plass-glass)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:`${c} text-(--p-accent) bg-(--p-soft)`},v={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)"},b={xs:"min-h-5.5",sm:"min-h-6.5",md:"min-h-8",lg:"min-h-10",xl:"min-h-12"},w={xs:"rounded-[0.6875rem]",sm:"rounded-[0.8125rem]",md:"rounded-[1rem]",lg:"rounded-[1.25rem]",xl:"rounded-[1.5rem]"},y={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"}},N={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:c="solid",size:k="md",color:j="secondary",density:z="default",elevation:_=2,startIcon:P,endIcon:R,title:C,description:H,details:I,expanded:O=!1,position:$="static",side:B="top",className:E,style:F,children:S,onClick:q,...A},D){const G=l.useRef(null),[J,K]=l.useState(0);l.useEffect(()=>{const e=G.current;if(!e||"undefined"==typeof ResizeObserver)return;const s=new ResizeObserver(()=>K(e.scrollHeight));return s.observe(e),K(e.scrollHeight),()=>s.disconnect()},[I]);const L=Boolean(q),M=x[z][k],Q=s(t,{children:[d(P)?e("span",{className:o("flex shrink-0 items-center justify-center overflow-hidden rounded-full [&_img]:size-full [&_img]:object-cover",p[k]),children:P}):null,d(C)||d(H)||d(S)?s("span",{className:o("flex min-w-0 flex-1 flex-col items-center justify-center text-center",y[z][k]),children:[d(C)?e("span",{className:"max-w-full truncate",children:C}):null,d(H)?e("span",{className:o("max-w-full truncate font-normal",f[k],"[color:color-mix(in_oklab,currentColor_72%,transparent)]"),children:H}):null,S]}):null]});return s("div",{ref:D,className:o("inline-flex max-w-full flex-col overflow-hidden align-middle",w[k],"font-medium whitespace-nowrap select-none",r[k],g[c],h,m,L?`plass-glow ${v[c]}`:"",N[$][B],E),style:{...n(j,_,c),...F},...A,children:[s("div",{className:o("flex shrink-0 items-center py-1",b[k],a[k],L?"ps-0":M,d(R)?"pe-1":L?"pe-0":""),children:[L?e("button",{type:"button",className:o("flex min-w-0 flex-1 cursor-pointer items-center justify-center self-stretch","rounded-[inherit]",a[k],M,i),onClick:q,children:Q}):Q,d(R)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:R}):null]}),d(I)?e("div",{className:o("overflow-hidden","[transition:height_var(--plass-duration-slow)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]"),style:{height:O?J:0},inert:!O,children:e("div",{ref:G,className:o("whitespace-normal pb-2",M,u[k]),children:I})}):null]})});
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]})});
@@ -0,0 +1,61 @@
1
+ import * as React from 'react';
2
+ import type { PlassAlign, PlassColor, PlassSize, PlassSide } from '../../types.js';
3
+ export interface PlPopconfirmProps {
4
+ /** What opens it. The element it is put on keeps everything it already had. */
5
+ trigger: React.ReactElement;
6
+ /** The question, as the heading that names the popup. */
7
+ title?: React.ReactNode;
8
+ /** A line under it. Say what happens. */
9
+ description?: React.ReactNode;
10
+ /** The word on the button that answers yes. @default 'Confirm' */
11
+ confirmLabel?: React.ReactNode;
12
+ /** The word on the button that answers no. @default 'Cancel' */
13
+ cancelLabel?: React.ReactNode;
14
+ /**
15
+ * What confirming does. **A promise is waited for**: the button shows its
16
+ * loading state until it settles and the popup closes only if it resolves, so
17
+ * a failed request leaves the question on screen instead of pretending.
18
+ *
19
+ * A rejection is caught and goes no further. Keeping the question up is the
20
+ * whole of what this component owes a failure; what the failure *means* is
21
+ * the caller's, and `onConfirm` is where to report it from.
22
+ */
23
+ onConfirm?: () => void | Promise<unknown>;
24
+ /** What cancelling does, beyond closing. */
25
+ onCancel?: () => void;
26
+ /** @default 'danger' */
27
+ color?: PlassColor;
28
+ /** @default 'md' */
29
+ size?: PlassSize;
30
+ /** Which edge of the trigger it opens against. @default 'top' */
31
+ side?: PlassSide;
32
+ /** @default 'center' */
33
+ align?: PlassAlign;
34
+ /** How wide the sheet may get. @default 280 */
35
+ width?: number | string;
36
+ /** The popup is open. Use with `onOpenChange` for a controlled one. */
37
+ open?: boolean;
38
+ defaultOpen?: boolean;
39
+ onOpenChange?: (open: boolean) => void;
40
+ /** Classes on the popup, alongside the component's own. */
41
+ className?: string;
42
+ }
43
+ /**
44
+ * A question asked where it was raised, rather than in the middle of the page.
45
+ *
46
+ * The difference from [`PlConfirmProvider`](../feedback/confirm) is not the
47
+ * words, it is **how much it interrupts**. A modal takes the page away and is
48
+ * right for the question that deserves that — deleting an account, discarding
49
+ * an hour of work. This is right for the row's own delete button: the question
50
+ * appears against the thing it is about, the rest of the table stays readable,
51
+ * and a reader who changes their mind presses Escape and is exactly where they
52
+ * were.
53
+ *
54
+ * The rule of thumb is what happens if they answer by accident. If the answer
55
+ * is "they can undo it", this is the one.
56
+ *
57
+ * `color` defaults to `danger` here and to `primary` on a `PlButton`, and that
58
+ * is not an inconsistency: nobody reaches for a popconfirm to ask whether to
59
+ * save.
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;
@@ -0,0 +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})]})})}
@@ -0,0 +1,2 @@
1
+ export { PlPopconfirm } from './PlPopconfirm.js';
2
+ export type { PlPopconfirmProps } from './PlPopconfirm.js';
@@ -0,0 +1 @@
1
+ export{PlPopconfirm}from"./PlPopconfirm.js";
@@ -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, color, density, 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, 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{Popover as a}from"@base-ui/react/popover";import{CloseIcon as l}from"../../internal/icons.js";import{cx as t,focusRingClasses as o,glassClasses as r,hasContent as i,metaTextClasses as n,radiusClasses as d,sheetBodyClasses as p,sheetHeaderGapClasses as c,sheetPaddingXClasses as m,sheetPaddingYClasses as f,sheetSectionGapClasses as g,sheetTitleClasses as h,surfaceSlots as u}from"../../internal/styles.js";const x={xs:"max-w-56",sm:"max-w-64",md:"max-w-80",lg:"max-w-96",xl:"max-w-lg"},v=/* @__PURE__ */[r,"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(" "),b={xs:8,sm:9,md:10,lg:11,xl:12},w=/* @__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)",o].join(" ");export const PlPopoverClose=a.Close;export function PlPopover({size:o="md",color:r="primary",density:y="default",trigger:N,title:k,description:j,children:O,side:P="bottom",align:_="center",sideOffset:C=6,alignOffset:z=0,arrow:L=!1,open:M,defaultOpen:T,onOpenChange:W,modal:A=!1,dismissible:B=!0,showClose:D=!1,closeLabel:E="Close",width:R,className:$,style:q,...F}){const G=m[y][o],H=f[y][o],I=b[o],J=i(k)||i(j);return s(a.Root,{open:M,defaultOpen:T,modal:A,onOpenChange:(e,s)=>{B||e||"escape-key"!==s.reason&&"outside-press"!==s.reason&&"focus-out"!==s.reason?W?.(e):s.cancel()},children:[N?e(a.Trigger,{render:N}):null,e(a.Portal,{children:e(a.Positioner,{className:"plass-portal z-(--plass-z-portal) [outline:none]",side:P,align:_,sideOffset:C,alignOffset:z,children:s(a.Popup,{className:t(v,d[o],p[o],g[o],G,H,void 0===R?x[o]:"",$),style:{...u(r,3),...void 0===R?null:{maxWidth:"number"==typeof R?`${R}px`:R},...q},...F,children:[L?e(a.Arrow,{className:t("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:I,height:I/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,J||D?s("div",{className:"flex shrink-0 items-start gap-3",children:[s("div",{className:t("flex min-w-0 flex-1 flex-col",c[o]),children:[i(k)?e(a.Title,{className:t("m-0 font-semibold",h[o]),children:k}):null,i(j)?e(a.Description,{className:t("m-0 text-(--plass-muted-fg)",n[o]),children:j}):null]}),D?e(a.Close,{"aria-label":E,className:w,children:e(l,{})}):null]}):null,i(O)?e("div",{className:"min-w-0",children:O}):null]})})})]})}
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 +1 @@
1
- "use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as l from"react";import{Progress as s}from"@base-ui/react/progress";import{fillTransitionClasses as r,plateGapClasses as t,plateRadiusClasses as n,plateSizeClasses as i,progressAriaText as o,progressFraction as m,progressSlots as c,progressText as u,trackClasses as f}from"../../internal/progress.js";import{cx as d,metaTextClasses as p,stackGapClasses as x}from"../../internal/styles.js";export const PlProgressBox=/* @__PURE__ */l.forwardRef(function PlProgressBox({size:l="md",color:h="primary",count:g=4,value:y=null,min:b=0,max:v=100,label:w,showValue:N=!1,format:j,className:M,style:P,...k},V){const A=m(y,b,v),B=null===A,R=void 0!==j,T=Math.max(1,Math.floor(g));return a(s.Root,{ref:V,value:y??null,min:b,max:v,format:j,getAriaValueText:o(A,R),className:d("inline-flex flex-col",x[l],M),style:{...c(h),...P},...k,children:[w||N?a("div",{className:d("flex items-baseline gap-2",w?"justify-between":"justify-end",p[l]),children:[w?e(s.Label,{className:"min-w-0 truncate text-(--plass-fg)",children:w}):null,N?e(s.Value,{className:"shrink-0 tabular-nums text-(--plass-muted-fg)",children:e=>u(A,e,R)}):null]}):null,e(s.Track,{className:d("flex",t[l]),children:Array.from({length:T},(a,s)=>e("span",{className:d("relative overflow-hidden",f,i[l],n[l]),children:e("span",{"aria-hidden":"true",className:d("absolute inset-y-0 start-0 [background-image:var(--p-fill)]",B?"plass-plate-wave w-full":r),style:B?{"--p-i":s}:{width:`${Math.min(100,Math.max(0,100*(A*T-s)))}%`}})},s))})]})});
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 +1 @@
1
- "use client";import{jsx as r,jsxs as s}from"react/jsx-runtime";import*as e from"react";import{Progress as a}from"@base-ui/react/progress";import{progressAriaText as t,progressFraction as l,progressSlots as o,progressText as i,ringDiameters as n,ringStrokes as c}from"../../internal/progress.js";import{cx as m,gapClasses as f,metaTextClasses as u}from"../../internal/styles.js";export const PlProgressCircular=/* @__PURE__ */e.forwardRef(function PlProgressCircular({size:d="md",color:p="primary",value:h=null,min:x=0,max:k=100,label:g,showValue:v=!1,format:y,className:$,style:w,...N},j){const P=l(h,x,k),b=null===P,C=void 0!==y,V=`${e.useId()}-fill`,D=n[d],I=c[d],L=D/2,R=L-I/2,W=2*Math.PI*R,_=b?`${.28*W} ${W}`:`${W}`,z=b?0:W*(1-P);return s(a.Root,{ref:j,value:h??null,min:x,max:k,format:y,getAriaValueText:t(P,C),className:m("inline-flex items-center",f[d],u[d],$),style:{...o(p),...w},...N,children:[s("svg",{className:m("shrink-0",b&&"plass-ring-spin"),width:D,height:D,viewBox:`0 0 ${D} ${D}`,fill:"none","aria-hidden":"true",children:[r("defs",{children:s("linearGradient",{id:V,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:L,cy:L,r:R,stroke:"var(--plass-track)",strokeWidth:I}),r("circle",{cx:L,cy:L,r:R,stroke:`url(#${V})`,strokeWidth:I,strokeLinecap:"round",strokeDasharray:_,strokeDashoffset:z,transform:`rotate(-90 ${L} ${L})`,className:"[transition:stroke-dashoffset_var(--plass-duration-slow)_var(--plass-ease)]"})]}),g?r(a.Label,{className:"min-w-0 truncate text-(--plass-fg)",children:g}):null,v?r(a.Value,{className:"shrink-0 tabular-nums text-(--plass-muted-fg)",children:r=>i(P,r,C)}):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 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 +1 @@
1
- "use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as s from"react";import{Progress as r}from"@base-ui/react/progress";import{barThicknessClasses as a,fillTransitionClasses as t,progressAriaText as n,progressFraction as o,progressSlots as i,progressText as m,trackClasses as u}from"../../internal/progress.js";import{cx as c,metaTextClasses as f,stackGapClasses as d}from"../../internal/styles.js";export const PlProgressLinear=/* @__PURE__ */s.forwardRef(function PlProgressLinear({size:s="md",color:p="primary",value:x=null,min:g=0,max:b=100,label:h,showValue:w=!1,format:j,className:v,style:N,...y},P){const k=o(x,g,b),L=null===k,V=void 0!==j;return l(r.Root,{ref:P,value:x??null,min:g,max:b,format:j,getAriaValueText:n(k,V),className:c("flex w-full flex-col",d[s],v),style:{...i(p),...N},...y,children:[h||w?l("div",{className:c("flex items-baseline gap-2",h?"justify-between":"justify-end",f[s]),children:[h?e(r.Label,{className:"min-w-0 truncate text-(--plass-fg)",children:h}):null,w?e(r.Value,{className:"shrink-0 tabular-nums text-(--plass-muted-fg)",children:e=>m(k,e,V)}):null]}):null,e(r.Track,{className:c("relative w-full overflow-hidden rounded-full",u,a[s]),children:e(r.Indicator,{className:c("rounded-full [background-image:var(--p-fill)]",L?"plass-progress-sweep":`absolute top-0 ${t}`)})})]})});
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 +1 @@
1
- "use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as r from"react";import{Radio as l}from"@base-ui/react/radio";import{RadioGroup as o}from"@base-ui/react/radio-group";import{Field as s}from"@base-ui/react/field";import{controlSlots as t,cx as i,focusRingClasses as c,glassClasses as d,hasContent as n,metaTextClasses as p,tickDotClasses as m,tickRowTextClasses as f,tickSizeClasses as u,transitionClasses as h}from"../../internal/styles.js";const b=/* @__PURE__ */r.createContext({size:"md",color:"primary",readOnly:!1}),g=/* @__PURE__ */["relative inline-flex shrink-0 items-center justify-center rounded-full border","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",h,c].join(" "),x=/* @__PURE__ */[d,"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(" "),v=/* @__PURE__ */[d,"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(" "),N=/* @__PURE__ */[d,"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__ */r.forwardRef(function PlRadio({label:o,description:t,disabled:i=!1,className:c,style:d,...n},h){const k=r.useContext(b),y=n.readOnly??k.readOnly;return e(s.Root,{disabled:i,className:["flex flex-col",c??""].filter(Boolean).join(" "),style:d,children:a("div",{className:`flex items-start gap-2 ${f[k.size]}`,children:[e("span",{className:"flex h-[1lh] shrink-0 items-center",children:e(l.Root,{ref:h,className:[g,u[k.size],i?N:y?v:x].join(" "),disabled:i,...n,children:e(l.Indicator,{className:`rounded-full bg-current ${m[k.size]}`})})}),o||t?a("span",{className:"flex min-w-0 flex-col gap-0.5",children:[o?e(s.Label,{className:i?"text-(--plass-muted-fg)":"cursor-pointer text-(--plass-fg)",children:o}):null,t?e(s.Description,{className:`${p[k.size]} text-(--plass-muted-fg)`,children:t}):null]}):null]})})});export const PlRadioGroup=/* @__PURE__ */r.forwardRef(function PlRadioGroup({size:l="md",color:c="primary",orientation:d="vertical",label:m,description:f,error:u,invalid:h,disabled:g=!1,readOnly:x=!1,className:v,classNames:N,style:k,children:y,...j},R){const z=n(u),w=h??z,O=w?"danger":c,P=r.useMemo(()=>({size:l,color:O,readOnly:x}),[l,O,x]);return e(b.Provider,{value:P,children:a(s.Root,{disabled:g,invalid:w,className:["flex flex-col gap-1.5",v??""].filter(Boolean).join(" "),style:{...t(O,0,"solid"),...k},children:[m?e(s.Label,{className:i(p[l],"font-semibold",g?"text-(--plass-muted-fg)":"text-(--plass-fg)",N?.label),children:m}):null,f?e(s.Description,{className:i(p[l],"text-(--plass-muted-fg)",N?.description),children:f}):null,e(o,{ref:R,disabled:g,readOnly:x,className:i("flex","horizontal"===d?"flex-row flex-wrap gap-x-5 gap-y-2":"flex-col gap-2",N?.control),...j,children:y}),e(s.Error,z?{match:!0,className:i(p[l],"text-(--p-accent)",N?.error),children:u}:{className:i(p[l],"text-(--p-accent)",N?.error)})]})})});
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 +1 @@
1
- "use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as t from"react";import{StarIcon as n,StarOutlineIcon as r}from"../../internal/icons.js";import{controlSlots as l,cx as i,focusWithinRingClasses as s,gapClasses as o,iconSizeClasses as c,radiusClasses as d,srOnlyClasses as u,transitionClasses as m}from"../../internal/styles.js";const h="flex items-center justify-center";function defaultValueLabel(e,a){return e<=0?"No rating":`${e} out of ${a}`}export const PlRating=/* @__PURE__ */t.forwardRef(function PlRating({value:p,defaultValue:f=0,onValueChange:y,count:b=5,precision:x=1,icon:v,emptyIcon:g,clearable:N=!0,readOnly:M=!1,disabled:w=!1,name:j,required:L=!1,size:P="md",color:k="warning",label:R="Rating",valueLabel:V=defaultValueLabel,className:q,style:C,onPointerLeave:I,...S},A){const $=t.useId(),z=j??$,[E,F]=t.useState(f),O=void 0!==p,B=O?p:E,[D,G]=t.useState(null),H=Math.max(1,Math.floor(b)),J=x>0&&x<=1?x:1,K=Math.round(1/J),Q=Math.max(0,Math.min(H,D??B)),change=e=>{O||F(e),y?.(e)},T=Array.from({length:H},(t,l)=>{const o=Math.max(0,Math.min(1,Q-l));return a("span",{className:i("relative inline-flex shrink-0",c[P],d.xs,M||w?"":s),children:[e("span",{className:i(h,c[P],"text-(--p-empty)"),children:g??e(r,{})}),e("span",{"aria-hidden":"true",className:"pointer-events-none absolute inset-y-0 start-0 overflow-hidden",style:{width:100*o+"%"},children:e("span",{className:i(h,c[P],"text-(--p-accent)",m),children:v??e(n,{})})}),M?null:Array.from({length:K},(a,t)=>{const n=Number((l+(t+1)*J).toFixed(4));return e("label",{className:i("absolute inset-y-0",w?"cursor-not-allowed":"cursor-pointer"),style:{insetInlineStart:100*t/K+"%",width:100/K+"%"},onPointerEnter:()=>{w||G(n)},children:e("input",{type:"radio",className:u,name:z,value:n,checked:B===n,disabled:w,required:L,"aria-label":V(n,H),onChange:()=>change(n),onClick:()=>{N&&B===n&&change(0)}})},n)})]},l)}),U=i("inline-flex items-center align-middle",o[P],w?"cursor-not-allowed opacity-50 saturate-[0.35]":"",q),W={...l(k,0,"solid"),"--p-empty":"color-mix(in oklab, var(--plass-muted-fg) 40%, transparent)",...C};return e("div",M?{ref:A,role:"img","aria-label":V(Math.max(0,Math.min(H,B)),H),className:U,style:W,onPointerLeave:I,...S,children:T}:{ref:A,role:"radiogroup","aria-label":R,"aria-disabled":w||void 0,"aria-required":L||void 0,className:U,style:W,onPointerLeave:e=>{G(null),I?.(e)},...S,children:T})});
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{StarIcon as r,StarOutlineIcon as l}from"../../internal/icons.js";import{controlSlots as i,cx as s,focusWithinRingClasses as o,gapClasses as c,iconSizeClasses as d,radiusClasses as u,srOnlyClasses as m,transitionClasses as h}from"../../internal/styles.js";const f="flex items-center justify-center";function defaultValueLabel(e,a){return e<=0?"No rating":`${e} out of ${a}`}export const PlRating=/* @__PURE__ */t.forwardRef(function PlRating({value:p,defaultValue:y=0,onValueChange:b,count:x=5,precision:v=1,icon:g,emptyIcon:N,clearable:M=!0,readOnly:j=!1,disabled:w=!1,name:L,required:P=!1,size:k,color:R,label:V="Rating",valueLabel:q=defaultValueLabel,className:C,style:I,onPointerLeave:S,...z},A){const $=n(),E=k??$.size??"md",F=R??$.color??"warning",O=t.useId(),B=L??O,[D,G]=t.useState(y),H=void 0!==p,J=H?p:D,[K,Q]=t.useState(null),T=Math.max(1,Math.floor(x)),U=v>0&&v<=1?v:1,W=Math.round(1/U),X=Math.max(0,Math.min(T,K??J)),change=e=>{H||G(e),b?.(e)},Y=Array.from({length:T},(t,n)=>{const i=Math.max(0,Math.min(1,X-n));return a("span",{className:s("relative inline-flex shrink-0",d[E],u.xs,j||w?"":o),children:[e("span",{className:s(f,d[E],"text-(--p-empty)"),children:N??e(l,{})}),e("span",{"aria-hidden":"true",className:"pointer-events-none absolute inset-y-0 start-0 overflow-hidden",style:{width:100*i+"%"},children:e("span",{className:s(f,d[E],"text-(--p-accent)",h),children:g??e(r,{})})}),j?null:Array.from({length:W},(a,t)=>{const r=Number((n+(t+1)*U).toFixed(4));return e("label",{className:s("absolute inset-y-0",w?"cursor-not-allowed":"cursor-pointer"),style:{insetInlineStart:100*t/W+"%",width:100/W+"%"},onPointerEnter:()=>{w||Q(r)},children:e("input",{type:"radio",className:m,name:B,value:r,checked:J===r,disabled:w,required:P,"aria-label":q(r,T),onChange:()=>change(r),onClick:()=>{M&&J===r&&change(0)}})},r)})]},n)}),Z=s("inline-flex items-center align-middle",c[E],w?"cursor-not-allowed opacity-50 saturate-[0.35]":"",C),_={...i(F,0,"solid"),"--p-empty":"color-mix(in oklab, var(--plass-muted-fg) 40%, transparent)",...I};return e("div",j?{ref:A,role:"img","aria-label":q(Math.max(0,Math.min(T,J)),T),className:Z,style:_,onPointerLeave:S,...z,children:Y}:{ref:A,role:"radiogroup","aria-label":V,"aria-disabled":w||void 0,"aria-required":P||void 0,className:Z,style:_,onPointerLeave:e=>{Q(null),S?.(e)},...z,children:Y})});