plass-ui 1.6.0 → 1.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +276 -0
- package/README.md +3 -1
- package/dist/components/accordion/PlAccordion.d.ts +13 -0
- package/dist/components/accordion/PlAccordion.js +1 -1
- package/dist/components/accordion/index.d.ts +1 -1
- package/dist/components/alert/PlAlert.js +1 -1
- package/dist/components/animate-headline/PlAnimateHeadline.d.ts +10 -1
- package/dist/components/animate-marquee/PlAnimateMarquee.d.ts +8 -1
- package/dist/components/animate-marquee/PlAnimateMarquee.js +1 -1
- package/dist/components/app-logo/PlAppLogo.js +1 -1
- package/dist/components/area-chart/PlAreaChart.d.ts +35 -6
- package/dist/components/area-chart/PlAreaChart.js +1 -1
- package/dist/components/aspect-ratio/PlAspectRatio.js +1 -1
- package/dist/components/avatar/PlAvatar.js +1 -1
- package/dist/components/back-top/PlBackTop.d.ts +5 -5
- package/dist/components/back-top/PlBackTop.js +1 -1
- package/dist/components/badge/PlBadge.js +1 -1
- package/dist/components/bar-chart/PlBarChart.d.ts +54 -2
- package/dist/components/bar-chart/PlBarChart.js +1 -1
- package/dist/components/blockquote/PlBlockquote.d.ts +2 -2
- package/dist/components/blockquote/PlBlockquote.js +1 -1
- package/dist/components/bottom-navigation/PlBottomNavigation.js +1 -1
- package/dist/components/button/PlButton.d.ts +7 -0
- package/dist/components/button/PlButton.js +1 -1
- package/dist/components/calendar/PlCalendar.js +1 -1
- package/dist/components/card/PlCard.d.ts +7 -4
- package/dist/components/carousel/PlCarousel.d.ts +14 -4
- package/dist/components/carousel/PlCarousel.js +1 -1
- package/dist/components/chat-bubble/PlChatBubble.js +1 -1
- package/dist/components/checkbox/PlCheckbox.js +1 -1
- package/dist/components/chip/PlChip.d.ts +2 -1
- package/dist/components/chip/PlChip.js +1 -1
- package/dist/components/collapsible/PlCollapsible.d.ts +11 -0
- package/dist/components/collapsible/PlCollapsible.js +1 -1
- package/dist/components/color-picker/PlColorPicker.d.ts +3 -1
- package/dist/components/color-picker/PlColorPicker.js +1 -1
- package/dist/components/combobox/PlCombobox.d.ts +11 -5
- package/dist/components/combobox/PlCombobox.js +1 -1
- package/dist/components/command-palette/PlCommandPalette.js +1 -1
- package/dist/components/confirm/PlConfirmProvider.js +1 -1
- package/dist/components/data-table/PlDataTable.d.ts +13 -2
- package/dist/components/data-table/PlDataTable.js +1 -1
- package/dist/components/drawer/PlDrawer.js +1 -1
- package/dist/components/fieldset/PlFieldset.js +1 -1
- package/dist/components/file-picker/PlFilePicker.d.ts +3 -1
- package/dist/components/file-picker/PlFilePicker.js +1 -1
- package/dist/components/floating-action-button/PlFloatingActionButton.d.ts +5 -0
- package/dist/components/floating-action-button/PlFloatingActionButton.js +1 -1
- package/dist/components/floating-bottom-navigation/PlFloatingBottomNavigation.js +1 -1
- package/dist/components/footer/PlFooter.d.ts +3 -1
- package/dist/components/gallery/PlGallery.js +1 -1
- package/dist/components/gauge-chart/PlGaugeChart.js +1 -1
- package/dist/components/header/PlHeader.d.ts +4 -2
- package/dist/components/header/PlHeader.js +1 -1
- package/dist/components/heatmap-chart/PlHeatmapChart.js +1 -1
- package/dist/components/hover-card/PlHoverCard.js +1 -1
- package/dist/components/how-to-steps/PlHowToSteps.js +1 -1
- package/dist/components/image/PlImage.js +1 -1
- package/dist/components/line-chart/PlLineChart.d.ts +32 -6
- package/dist/components/line-chart/PlLineChart.js +1 -1
- package/dist/components/menu/PlMenu.js +1 -1
- package/dist/components/mockup/PlMockup.d.ts +5 -0
- package/dist/components/mockup/PlMockup.js +1 -1
- package/dist/components/modal/PlModal.js +1 -1
- package/dist/components/navigation-menu/PlNavigationMenu.d.ts +4 -3
- package/dist/components/navigation-menu/PlNavigationMenu.js +1 -1
- package/dist/components/number-field/PlNumberField.d.ts +7 -5
- package/dist/components/number-field/PlNumberField.js +1 -1
- package/dist/components/otp-field/PlOtpField.js +1 -1
- package/dist/components/overlay/PlOverlay.js +1 -1
- package/dist/components/page-layout/PlPageLayout.d.ts +14 -3
- package/dist/components/page-layout/PlPageLayout.js +1 -1
- package/dist/components/pagination/PlPagination.js +1 -1
- package/dist/components/panes/PlPanes.js +1 -1
- package/dist/components/pie-chart/PlPieChart.d.ts +26 -1
- package/dist/components/pie-chart/PlPieChart.js +1 -1
- package/dist/components/pill/PlPill.js +1 -1
- package/dist/components/popconfirm/PlPopconfirm.d.ts +8 -1
- package/dist/components/popconfirm/PlPopconfirm.js +1 -1
- package/dist/components/popover/PlPopover.js +1 -1
- package/dist/components/progress-box/PlProgressBox.js +1 -1
- package/dist/components/progress-circular/PlProgressCircular.js +1 -1
- package/dist/components/progress-linear/PlProgressLinear.js +1 -1
- package/dist/components/radio-group/PlRadioGroup.js +1 -1
- package/dist/components/rating/PlRating.js +1 -1
- package/dist/components/scatter-chart/PlScatterChart.js +1 -1
- package/dist/components/scroll-area/PlScrollArea.js +1 -1
- package/dist/components/segmented-button/PlSegmentedButton.js +1 -1
- package/dist/components/select/PlSelect.d.ts +4 -1
- package/dist/components/select/PlSelect.js +1 -1
- package/dist/components/sidebar/PlSidebar.js +1 -1
- package/dist/components/slider/PlSlider.js +1 -1
- package/dist/components/sparkline/PlSparkline.js +1 -1
- package/dist/components/stepper/PlStepper.js +1 -1
- package/dist/components/switch/PlSwitch.js +1 -1
- package/dist/components/table/PlTable.d.ts +11 -1
- package/dist/components/table/PlTable.js +1 -1
- package/dist/components/tabs/PlTabs.d.ts +18 -1
- package/dist/components/tabs/PlTabs.js +1 -1
- package/dist/components/text-field/PlTextField.d.ts +6 -8
- package/dist/components/text-field/PlTextField.js +1 -1
- package/dist/components/text-link/PlTextLink.js +1 -1
- package/dist/components/timeline-chart/PlTimelineChart.js +1 -1
- package/dist/components/toast/PlToast.js +1 -1
- package/dist/components/toggle/PlToggle.js +1 -1
- package/dist/components/tooltip/PlTooltip.d.ts +4 -0
- package/dist/components/tooltip/PlTooltip.js +1 -1
- package/dist/components/tour/PlTour.js +1 -1
- package/dist/components/transfer/PlTransfer.d.ts +5 -2
- package/dist/components/transfer/PlTransfer.js +1 -1
- package/dist/components/tree/PlTree.js +1 -1
- package/dist/components/window-pane/PlWindowPane.d.ts +13 -3
- package/dist/components/window-pane/PlWindowPane.js +1 -1
- package/dist/internal/animate.js +1 -1
- package/dist/internal/bottom-bar.d.ts +29 -0
- package/dist/internal/bottom-bar.js +1 -0
- package/dist/internal/calendar.js +1 -1
- package/dist/internal/chart-frame.d.ts +88 -10
- package/dist/internal/chart-frame.js +1 -1
- package/dist/internal/chart-line.d.ts +11 -6
- package/dist/internal/chart-line.js +1 -1
- package/dist/internal/chart.d.ts +149 -1
- package/dist/internal/chart.js +1 -1
- package/dist/internal/defaults.d.ts +2 -2
- package/dist/internal/focusable.d.ts +10 -0
- package/dist/internal/focusable.js +1 -1
- package/dist/internal/form.d.ts +29 -0
- package/dist/internal/form.js +1 -1
- package/dist/internal/glow.d.ts +32 -1
- package/dist/internal/glow.js +1 -1
- package/dist/internal/icons.d.ts +24 -0
- package/dist/internal/icons.js +1 -1
- package/dist/internal/labels.d.ts +22 -0
- package/dist/internal/labels.js +1 -1
- package/dist/internal/loading.d.ts +13 -0
- package/dist/internal/loading.js +1 -0
- package/dist/internal/mockup.js +1 -1
- package/dist/internal/notch.d.ts +57 -3
- package/dist/internal/notch.js +1 -1
- package/dist/internal/picker.d.ts +8 -2
- package/dist/internal/picker.js +1 -1
- package/dist/internal/progress.d.ts +17 -6
- package/dist/internal/progress.js +1 -1
- package/dist/internal/sizer.d.ts +12 -11
- package/dist/internal/sizer.js +1 -1
- package/dist/internal/steps.d.ts +0 -15
- package/dist/internal/steps.js +1 -1
- package/dist/internal/styles.d.ts +114 -8
- package/dist/internal/styles.js +1 -1
- package/dist/internal/table-scroll.d.ts +42 -0
- package/dist/internal/table-scroll.js +1 -0
- package/dist/internal/table.js +1 -1
- package/dist/internal/text.d.ts +8 -5
- package/dist/internal/window.js +1 -1
- package/dist/locales/de.js +1 -1
- package/dist/locales/es.js +1 -1
- package/dist/locales/fr.js +1 -1
- package/dist/locales/ja.js +1 -1
- package/dist/locales/ko.js +1 -1
- package/dist/locales/zh-Hans.js +1 -1
- package/dist/styles.css +1 -1
- package/dist/tailwind.css +406 -42
- package/dist/tokens.css +406 -42
- package/dist/types.d.ts +217 -13
- package/package.json +1 -1
|
@@ -54,7 +54,10 @@ export interface PlSelectProps extends PlassStyleProps, Omit<React.ComponentProp
|
|
|
54
54
|
/** The name of what the select holds, wired to the trigger by Base UI's Field. */
|
|
55
55
|
label?: React.ReactNode;
|
|
56
56
|
/**
|
|
57
|
-
* Where the `label` goes — above the trigger,
|
|
57
|
+
* Where the `label` goes — above the trigger, in its top edge, or inside it
|
|
58
|
+
* where the choice would be written until the select is focused, open or
|
|
59
|
+
* holds a value. With a `startIcon` a `float` label stays in the edge,
|
|
60
|
+
* because the icon is where it would rest.
|
|
58
61
|
* Falls back to the nearest `PlassProvider`, then to `top`.
|
|
59
62
|
* @default 'top'
|
|
60
63
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as
|
|
1
|
+
"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as t from"react";import{useDisabled as l}from"../../internal/form.js";import{useDefaults as s}from"../../internal/defaults.js";import{Select as r}from"@base-ui/react/select";import{Field as n}from"@base-ui/react/field";import{CheckIcon as o,ChevronIcon as i}from"../../internal/icons.js";import{WidthSizer as c}from"../../internal/sizer.js";import{textOf as d}from"../../internal/text.js";import{glowPointerMove as m}from"../../internal/glow.js";import{FieldNotch as p,floatControlClassName as u,floatPlaceholderClassName as f,notchShellStyle as h,resolveNotch as g}from"../../internal/notch.js";import{hotKeyHandler as v}from"../../internal/keys.js";import{controlHeightClasses as b,controlTextLeadingClasses as x,cx as y,disabledClasses as j,fieldDescriptionClasses as N,fieldReadOnlyClasses as w,fieldRestClasses as P,fieldSlots as S,focusWithinRingClasses as z,forcedHighlightedClasses as I,gapClasses as O,glassClasses as V,hasContent as k,iconClasses as M,metaTextClasses as R,paddingXClasses as $,radiusClasses as _,stackGapClasses as C,surfaceSlots as D,transitionClasses as E}from"../../internal/styles.js";const T=/* @__PURE__ */["group relative flex w-full cursor-pointer items-center select-none","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",E,M].join(" "),q=z,B=/* @__PURE__ */[V,"max-h-[min(20rem,var(--available-height))] overflow-y-auto overscroll-contain","min-w-[var(--anchor-width)] border bg-(--plass-glass-press) p-1","[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)]","motion-reduce:[transition-duration:0ms]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),K=/* @__PURE__ */["relative flex cursor-pointer items-center gap-2 select-none","rounded-(--plass-radius-xs) py-1.5 pe-2 ps-7",E,"data-[highlighted]:bg-(--p-soft-hover) data-[highlighted]:text-(--p-accent)",I,"data-[selected]:font-semibold data-[selected]:text-(--p-accent)","data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50","[outline:none]"].join(" ");export const PlSelect=/* @__PURE__ */t.forwardRef(function PlSelect({variant:z="glass",size:I,color:V,density:M,elevation:E=0,items:W,value:L,defaultValue:A,onValueChange:F,placeholder:G,label:H,labelPlacement:J,description:Q,error:U,invalid:X,startIcon:Y,fullWidth:Z=!1,disabled:ee=!1,readOnly:ae=!1,required:te=!1,name:le,id:se,className:re,hotKeys:ne,classNames:oe,style:ie,...ce},de){const me=s(),pe=l(ee),ue=I??me.size??"md",fe=V??me.color??"primary",he=M??me.density??"default",ge=J??me.labelPlacement??"top",{notched:ve,float:be}=g(ge,H,k(Y)),xe=k(U),ye=X??xe,je=ye?"danger":fe,Ne=!pe&&!ae,we=t.useMemo(()=>W.map(e=>({label:e.label??String(e.value),value:e.value})),[W]),[Pe,Se]=t.useState(!1);t.useEffect(()=>{ae&&Se(!1)},[ae]);const ze=t.useRef(null),Ie=be?d(H):"",Oe=t.useMemo(()=>Z?[]:[...W.map(e=>e.label??String(e.value)),G].map(d).concat(Ie).filter(e=>""!==e),[Z,W,G,Ie]),Ve=e(n.Label,{className:y(R[ue],"font-semibold",pe?"text-(--plass-muted-fg)":"text-(--plass-fg)",oe?.label),children:H});return a(n.Root,{disabled:pe,invalid:ye,className:["flex-col align-top",C[ue],Z?"flex w-full":"inline-flex",re??""].filter(Boolean).join(" "),style:{...S(je,E),...ie},...ce,children:[k(H)&&!ve?Ve:null,a(r.Root,{id:se,name:le,items:we,value:L,defaultValue:A,onValueChange:e=>F?.(e),disabled:pe,readOnly:ae,required:te,open:Pe&&!ae,onOpenChange:(e,a)=>Se(e&&!ae&&a.event!==ze.current),children:[e(p,{notched:ve,size:ue,density:he,variant:z,disabled:pe,readOnly:ae,float:be,label:Ve,children:a(r.Trigger,{ref:de,onKeyDown:v(ne,void 0),onMouseDown:e=>{ze.current=ae?e.nativeEvent:null},onPointerMove:m(Ne),style:ve?h:void 0,className:[T,ve?"":q,b[ue],x[ue],_[ue],O[ue],$[he][ue],pe?j[z]:ae?`${w[z]} cursor-default`:P[z],Ne?"plass-glow":"",be?u:"",oe?.control].filter(Boolean).join(" "),children:[Y?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",children:Y}):null,a("span",{className:"flex min-w-0 flex-1 flex-col",children:[e(r.Value,{className:["w-full truncate text-start","data-[placeholder]:text-(--plass-muted-fg)",be?f:""].join(" "),placeholder:G}),e(c,{samples:Oe})]}),e(r.Icon,{className:["flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)","[transition:rotate_var(--plass-duration)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]","data-[popup-open]:rotate-180"].join(" "),children:e(i,{})})]})}),e(r.Portal,{children:e(r.Positioner,{className:"plass-portal z-(--plass-z-portal) [outline:none]",sideOffset:6,alignItemWithTrigger:!1,children:e(r.Popup,{className:`${B} ${_[ue]} ${x[ue]}`,style:D(je,3),children:W.map(t=>a(r.Item,{value:t.value,disabled:t.disabled,className:K,children:[e(r.ItemIndicator,{className:"absolute start-1.5 flex size-4 items-center justify-center",children:e(o,{})}),e(r.ItemText,{className:"truncate",children:t.label??String(t.value)})]},String(t.value)))})})})]}),Q?e(n.Description,{className:y(N(ue),oe?.description),children:Q}):null,e(n.Error,xe?{match:!0,className:y(R[ue],"text-(--p-accent)",oe?.error),children:U}:{className:y(R[ue],"text-(--p-accent)",oe?.error)})]})});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as r from"react";import{useDefaults as n}from"../../internal/defaults.js";import{useLabels as o}from"../../internal/labels.js";import{beginPointerDrag as i}from"../../internal/drag.js";import{PlDrawer as a}from"../drawer/PlDrawer.js";import{drawerSide as s,expandedOnlyClasses as l,PlPageLayoutContext as u,PlassSidebarSideContext as d,useCollapsed as c}from"../../internal/page-layout.js";import{cx as p,sheetPaddingXClasses as m,sheetPaddingYClasses as f,sheetRestClasses as b,surfaceSlots as h,toLength as v,transitionClasses as x}from"../../internal/styles.js";const y={xs:"11rem",sm:"13rem",md:"16rem",lg:"18rem",xl:"21rem"},g=b;function toPixels(e,t){if(null==e)return t;if("number"==typeof e)return e;const r=/^\s*(-?[\d.]+)\s*(px|rem|em|%)\s*$/.exec(e);if(!r)return t;const n=Number(r[1]);if(Number.isNaN(n))return t;switch(r[2]){case"px":return n;case"%":return"undefined"==typeof window?t:window.innerWidth*n/100;default:return n*parseFloat(("undefined"==typeof document?"":getComputedStyle(document.documentElement).fontSize)||"16")}}export const PlSidebar=/* @__PURE__ */r.forwardRef(function PlSidebar({side:b,width:w,minWidth:z=160,maxWidth:C=480,resizable:R=!1,onResize:j,onResizeEnd:N,collapseBelow:P,open:S,defaultOpen:k=!1,onOpenChange:M,sticky:A=!0,title:B,variant:D="glass",size:E,color:L,density:O,elevation:I=0,divider:W=!0,padded:T=!0,label:X,closeLabel:$,resizeLabel:_,className:F,style:K,children:q,...G},H){const J=n(),Q=o(),U=X??Q.sidebar,V=$??Q.sidebarClose,Y=_??Q.sidebarResize,Z=E??J.size??"md",ee=L??J.color??"primary",te=O??J.density??"default",re=r.useContext(u),ne=r.useContext(d),oe=b??ne??"start",ie=P??(re.present?re.collapseBelow:"none"),ae=c(ie),[se,le]=r.useState(k),ue=void 0!==S,de=ue?S:re.present?re.open[oe]:se,ce=v(w)??y[Z],pe=r.useRef(null),me=r.useCallback(e=>{pe.current=e,"function"==typeof H?H(e):H&&(H.current=e)},[H]),fe=r.useRef(null);r.useEffect(()=>()=>fe.current?.(),[]);const be=r.useRef(null),he=toPixels(z,160),ve=toPixels(C,480),xe=Math.min(ve,Math.max(he,Math.round(toPixels(ce,he)))),applyWidth=e=>{const t=pe.current;if(!t)return e;const r=Math.min(ve,Math.max(he,Math.round(e)));return t.style.setProperty("--p-sidebar-w",`${r}px`),be.current?.setAttribute("aria-valuenow",String(r)),r};return ae?e(a,{side:s(oe,J.direction),mode:"overlay",open:de,onOpenChange:e=>{ue||(re.present?re.setOpen(oe,e):le(e)),M?.(e)},title:B,size:Z,color:ee,density:te,closeLabel:V,extent:void 0===w?void 0:ce,"aria-label":B?void 0:U,className:F,style:K,children:q}):t("aside",{ref:me,"aria-label":U,className:p("relative flex min-w-0 shrink-0 flex-col","w-(--p-sidebar-w)",g[D],W?p("start"===oe?"border-e":"border-s","[border-color:var(--plass-divider)]"):"","content"===re.scroll?"h-full":A?p("self-start","sticky [top:var(--p-layout-header,0px)]","[height:calc(100dvh-var(--p-layout-header,0px)-var(--p-layout-footer,0px))]"):"",l[ie],x,F),style:{...h(ee,I),"--p-sidebar-w":ce,...K},...G,children:[e("div",{className:p("min-h-0 flex-1 overflow-y-auto overscroll-contain",T?p(m[te][Z],f[te][Z]):""),children:q}),R?e("div",{ref:be,role:"separator","aria-orientation":"vertical","aria-label":Y,"aria-valuenow":xe,"aria-valuemin":he,"aria-valuemax":ve,tabIndex:0,className:p("absolute inset-y-0 z-1 w-2 cursor-col-resize touch-none","start"===oe?"end-0 -me-1":"start-0 -ms-1","bg-transparent hover:bg-(--p-soft) data-[dragging]:bg-(--p-soft)",x,"[outline:none] focus-visible:[outline:2px_solid_var(--p-ring)]","focus-visible:[outline-offset:0px]"),onPointerDown:e=>{const t=pe.current;if(!t||0!==e.button)return;const r=e.clientX,n=t.getBoundingClientRect().width,o="rtl"===getComputedStyle(t).direction,a="start"===oe===o?-1:1;let s=n;fe.current=i({target:e.currentTarget,pointerId:e.pointerId,onMove:e=>{s=applyWidth(n+(e.clientX-r)*a),j?.(s)},onEnd:()=>{fe.current=null,N?.(s)}})},onKeyDown:e=>{if("ArrowLeft"!==e.key&&"ArrowRight"!==e.key)return;e.preventDefault();const t="rtl"===getComputedStyle(e.currentTarget).direction,r="start"===oe===t?-1:1;(e=>{const t=pe.current;if(!t)return;const r=
|
|
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{useLabels as o}from"../../internal/labels.js";import{beginPointerDrag as i}from"../../internal/drag.js";import{PlDrawer as a}from"../drawer/PlDrawer.js";import{drawerSide as s,expandedOnlyClasses as l,PlPageLayoutContext as u,PlassSidebarSideContext as d,useCollapsed as c}from"../../internal/page-layout.js";import{cx as p,sheetPaddingXClasses as m,sheetPaddingYClasses as f,sheetRestClasses as b,surfaceSlots as h,toLength as v,transitionClasses as x}from"../../internal/styles.js";const y={xs:"11rem",sm:"13rem",md:"16rem",lg:"18rem",xl:"21rem"},g=b;function toPixels(e,t){if(null==e)return t;if("number"==typeof e)return e;const r=/^\s*(-?[\d.]+)\s*(px|rem|em|%)\s*$/.exec(e);if(!r)return t;const n=Number(r[1]);if(Number.isNaN(n))return t;switch(r[2]){case"px":return n;case"%":return"undefined"==typeof window?t:window.innerWidth*n/100;default:return n*parseFloat(("undefined"==typeof document?"":getComputedStyle(document.documentElement).fontSize)||"16")}}export const PlSidebar=/* @__PURE__ */r.forwardRef(function PlSidebar({side:b,width:w,minWidth:z=160,maxWidth:C=480,resizable:R=!1,onResize:j,onResizeEnd:N,collapseBelow:P,open:S,defaultOpen:k=!1,onOpenChange:M,sticky:A=!0,title:B,variant:D="glass",size:E,color:L,density:O,elevation:I=0,divider:W=!0,padded:T=!0,label:X,closeLabel:$,resizeLabel:_,className:F,style:K,children:q,...G},H){const J=n(),Q=o(),U=X??Q.sidebar,V=$??Q.sidebarClose,Y=_??Q.sidebarResize,Z=E??J.size??"md",ee=L??J.color??"primary",te=O??J.density??"default",re=r.useContext(u),ne=r.useContext(d),oe=b??ne??"start",ie=P??(re.present?re.collapseBelow:"none"),ae=c(ie),[se,le]=r.useState(k),ue=void 0!==S,de=ue?S:re.present?re.open[oe]:se,ce=v(w)??y[Z],pe=r.useRef(null),me=r.useCallback(e=>{pe.current=e,"function"==typeof H?H(e):H&&(H.current=e)},[H]),fe=r.useRef(null);r.useEffect(()=>()=>fe.current?.(),[]);const be=r.useRef(null),he=toPixels(z,160),ve=toPixels(C,480),xe=Math.min(ve,Math.max(he,Math.round(toPixels(ce,he)))),applyWidth=e=>{const t=pe.current;if(!t)return e;const r=Math.min(ve,Math.max(he,Math.round(e)));return t.style.setProperty("--p-sidebar-w",`${r}px`),be.current?.setAttribute("aria-valuenow",String(r)),r};return ae?e(a,{side:s(oe,J.direction),mode:"overlay",open:de,onOpenChange:e=>{ue||(re.present?re.setOpen(oe,e):le(e)),M?.(e)},title:B,size:Z,color:ee,density:te,closeLabel:V,extent:void 0===w?void 0:ce,"aria-label":B?void 0:U,className:F,style:K,children:q}):t("aside",{ref:me,"aria-label":U,className:p("relative flex min-w-0 shrink-0 flex-col","w-(--p-sidebar-w)",g[D],W?p("start"===oe?"border-e":"border-s","[border-color:var(--plass-divider)]"):"","content"===re.scroll?"h-full":A?p("self-start","sticky [top:var(--p-layout-header,0px)]","[height:calc(100dvh-var(--p-layout-header,0px)-var(--p-layout-footer,0px))]"):"",l[ie],x,F),style:{...h(ee,I),"--p-sidebar-w":ce,...K},...G,children:[e("div",{className:p("min-h-0 flex-1 overflow-y-auto overscroll-contain",T?p(m[te][Z],f[te][Z]):""),children:q}),R?e("div",{ref:be,role:"separator","aria-orientation":"vertical","aria-label":Y,"aria-valuenow":xe,"aria-valuemin":he,"aria-valuemax":ve,tabIndex:0,className:p("absolute inset-y-0 z-1 w-2 cursor-col-resize touch-none","start"===oe?"end-0 -me-1":"start-0 -ms-1","bg-transparent hover:bg-(--p-soft) data-[dragging]:bg-(--p-soft)",x,"[outline:none] focus-visible:[outline:2px_solid_var(--p-ring)]","focus-visible:[outline-offset:0px]"),onPointerDown:e=>{const t=pe.current;if(!t||0!==e.button)return;const r=e.clientX,n=t.getBoundingClientRect().width,o="rtl"===getComputedStyle(t).direction,a="start"===oe===o?-1:1;let s=n;fe.current=i({target:e.currentTarget,pointerId:e.pointerId,onMove:e=>{s=applyWidth(n+(e.clientX-r)*a),j?.(s)},onEnd:()=>{fe.current=null,N?.(s)}})},onKeyDown:e=>{if("ArrowLeft"!==e.key&&"ArrowRight"!==e.key)return;e.preventDefault();const t="rtl"===getComputedStyle(e.currentTarget).direction,r="start"===oe===t?-1:1;(e=>{const t=pe.current;if(!t)return;const r=t.getBoundingClientRect().width,n=applyWidth(r+e);n!==r&&(j?.(n),N?.(n))})(("ArrowRight"===e.key?16:-16)*r)}}):null]})});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as
|
|
1
|
+
"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as a from"react";import{useDisabled as l}from"../../internal/form.js";import{useDefaults as o}from"../../internal/defaults.js";import{Slider as s}from"@base-ui/react/slider";import{controlSlots as t,focusRingClasses as i,forcedFieldEdgeClasses as n,forcedFillClasses as d,metaTextClasses as c}from"../../internal/styles.js";const u={xs:"h-1",sm:"h-1.5",md:"h-1.5",lg:"h-2",xl:"h-2.5"},m={xs:"w-1",sm:"w-1.5",md:"w-1.5",lg:"w-2",xl:"w-2.5"},f={xs:"size-3",sm:"size-3.5",md:"size-4.5",lg:"size-5",xl:"size-6"},p={xs:"h-4",sm:"h-4.5",md:"h-5",lg:"h-6",xl:"h-7"},g={xs:"w-4",sm:"w-4.5",md:"w-5",lg:"w-6",xl:"w-7"},h=`rounded-full bg-(--plass-track) ${n}`,x=/* @__PURE__ */["[transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]","data-[dragging]:[transition-duration:0ms]","motion-reduce:[transition-duration:0ms]"].join(" "),b=/* @__PURE__ */["rounded-full [background-image:var(--p-fill)]",d,"forced-colors:data-[disabled]:[background-color:GrayText]","[transition-property:width,height,inset-inline-start,bottom,filter,opacity]",x].join(" "),v=/* @__PURE__ */["rounded-full border-2 [background-image:var(--p-fill)]","[border-color:var(--plass-surface)]","forced-colors:[background-color:CanvasText] forced-colors:[border-color:Canvas]","forced-colors:data-[disabled]:[background-color:GrayText]","[box-shadow:var(--p-elev),var(--p-lift)]","cursor-grab select-none active:cursor-grabbing","[transition-property:box-shadow,inset-inline-start,bottom,filter,opacity]",x,"hover:[box-shadow:var(--p-elev-hover),var(--p-lift-hover),0_0_0_4px_var(--p-soft)]",i,"data-[dragging]:[box-shadow:var(--p-elev-press),var(--p-lift-press),0_0_0_6px_var(--p-soft-hover)]"].join(" ");export const PlSlider=/* @__PURE__ */a.forwardRef(function PlSlider({size:i,color:n,elevation:d=1,orientation:x="horizontal",label:w,description:y,getAriaLabel:j,getAriaValueText:N,showValue:$=!1,disabled:_=!1,className:z,style:k,...A},T){const V=a.useId(),C=o(),L=l(_),S=i??C.size??"md",G=n??C.color??"primary",I="vertical"===x,P=A.value??A.defaultValue,R=Array.isArray(P)?P.length:1;return r(s.Root,{ref:T,orientation:x,disabled:L,className:["flex",I?"w-fit flex-col items-center gap-2":"w-full flex-col gap-1.5",L?"opacity-50 saturate-[0.35] [&_*]:cursor-not-allowed":"",z??""].filter(Boolean).join(" "),style:{...t(G,d,"solid"),...k},...A,children:[w||$?r("div",{className:`flex w-full items-baseline gap-2 ${c[S]}`,children:[w?e(s.Label,{className:"font-semibold text-(--plass-fg)",children:w}):null,$?e(s.Value,{className:"ms-auto tabular-nums text-(--plass-muted-fg)",children:"function"==typeof $?$:null}):null]}):null,e(s.Control,{className:["flex touch-none items-center justify-center select-none",I?`${g[S]} h-40 flex-col`:`w-full ${p[S]}`].join(" "),children:r(s.Track,{className:[h,I?`${m[S]} h-full`:`${u[S]} w-full`].join(" "),children:[e(s.Indicator,{className:b}),Array.from({length:R},(r,a)=>e(s.Thumb,{index:a,getAriaLabel:j,getAriaValueText:N,"aria-describedby":y?V:void 0,className:`${v} ${f[S]}`},a))]})}),y?e("div",{id:V,className:`${c[S]} text-(--plass-muted-fg)`,children:y}):null]})});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as
|
|
1
|
+
"use client";import{jsx as l,jsxs as a}from"react/jsx-runtime";import*as e from"react";import{areaPath as r,barMaxThickness as t,barPath as i,barRadius as n,extentOf as s,linePath as o,lineWidths as h,markerRadii as m,markGap as u,resolveColor as c,sparklineHeights as d,toValue as p,writeChartValue as f}from"../../internal/chart.js";import{useMeasuredWidth as v}from"../../internal/chart-frame.js";import{useDefaults as x}from"../../internal/defaults.js";import{cx as b,srOnlyClasses as k}from"../../internal/styles.js";export const PlSparkline=/* @__PURE__ */e.forwardRef(function PlSparkline({data:M,shape:g="line",curve:j="linear",size:w,color:$,endDot:N=!1,baseline:P,min:W,max:z,width:C,label:L,className:R,style:S,...B},D){const G=x(),I=w??G.size??"md",q=e.useRef(null),A=v(q),E=e.useId().replace(/:/g,""),F=e.useMemo(()=>M.map(p),[M]),H=d[I],J=h[I],K=m[I],O=s([F],!1),Q=W??(O?Math.min(O.min,P??O.min):0),T=z??(O?Math.max(O.max,P??O.max):1),U=T-Q||1,V="number"==typeof C?C:A,X=c($??"var(--plass-chart-1)"),Y="bar"===g?0:J/2+(N?K:0),Z=Math.max(1,H-2*Y),y=l=>Y+(1-(l-Q)/U)*Z,_=F.length>1?V/(F.length-1):V,ll=F.map((l,a)=>null===l.value?null:{x:a*_,y:y(l.value)}),al=(()=>{for(let l=F.length-1;l>=0;l--)if(null!==F[l].value)return l;return-1})(),el=al>=0?F[al].value:null,rl=null!==el&&el>=Q&&el<=T,tl=V/Math.max(1,F.length),il=Math.min(t[I]/2,Math.max(1,tl-u)),nl=y(Math.min(Math.max(Q,0),T)),barTop=l=>{const a=Math.min(y(l),nl);return Math.abs(y(l)-nl)<1?Math.min(a,H-1):a};return a("div",{ref:D,className:b("relative block",R??void 0),style:{width:C??"100%",height:H,...S},...B,children:[l("div",{ref:q,className:"absolute inset-0",children:V>0&&F.length>0?a("svg",{width:V,height:H,viewBox:`0 0 ${V} ${H}`,role:L?"img":"presentation","aria-label":L,"aria-hidden":!L||void 0,className:"block overflow-visible",children:[a("defs",{children:[l("clipPath",{id:`${E}-strip`,children:l("rect",{x:-V,y:0,width:3*V,height:H})}),"area"===g?a("linearGradient",{id:`${E}-fill`,x1:"0",y1:"0",x2:"0",y2:"1",children:[l("stop",{offset:"0%",stopColor:`color-mix(in oklab, ${X} 32%, transparent)`}),l("stop",{offset:"100%",stopColor:`color-mix(in oklab, ${X} 2%, transparent)`})]}):null]}),a("g",{clipPath:`url(#${E}-strip)`,children:["area"===g?l("path",{d:r(ll,H,j),fill:`url(#${E}-fill)`}):null,void 0!==P?l("line",{x1:0,x2:V,y1:y(P),y2:y(P),stroke:"var(--plass-chart-baseline)",strokeWidth:1}):null,"bar"===g?F.map((a,e)=>null===a.value?null:l("path",{d:i(e*tl+(tl-il)/2,barTop(a.value),il,Math.max(1,Math.abs(y(a.value)-nl)),n/2,a.value>=0?"up":"down"),fill:a.color??X},e)):l("path",{d:o(ll,j),fill:"none",stroke:X,strokeWidth:J,strokeLinecap:"round",strokeLinejoin:"round"})]}),N&&rl&&"bar"!==g?l("circle",{cx:ll[al].x,cy:ll[al].y,r:K,fill:X,stroke:"var(--plass-chart-gap)",strokeWidth:u}):null]}):null}),L?l("span",{className:k,children:F.map(l=>null===l.value?"—":f(l.value,void 0,G.locale)).join(", ")}):null]})});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as t from"react";import{useDefaults as r}from"../../internal/defaults.js";import{bulletGapClasses as n,bulletSizeValues as s,bulletStatusClasses as a,connectorColorClasses as i,connectorStyleClasses as o,statusAt as c,titleStatusClasses as d}from"../../internal/steps.js";import{cx as p,focusRingClasses as m,hasContent as u,iconClasses as f,metaTextClasses as x,radiusClasses as h,sheetBodyClasses as v,sheetTitleClasses as b,surfaceSlots as N,transitionClasses as y}from"../../internal/styles.js";import{useLabels as w}from"../../internal/labels.js";import{useResponsiveValue as z}from"../../internal/responsive.js";const g=/* @__PURE__ */t.createContext(null),j=/* @__PURE__ */t.createContext({index:0,last:!1});function StepTick(){return e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",className:"size-[0.7em]",children:e("path",{d:"m3.5 8.5 3 3 6-7",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round"})})}export const PlStepper=/* @__PURE__ */t.forwardRef(function PlStepper({active:n,defaultActive:s=0,onActiveChange:a,linear:i=!0,orientation:o,connector:c="solid",size:d,color:m,density:f,className:x,style:h,children:b,...y},w){const k=z(o,"horizontal"),C=r(),S=d??C.size??"md",$=m??C.color??"primary",P=f??C.density??"default",[I,A]=t.useState(s),L=n??I,R=t.useId(),T=t.useCallback(e=>{void 0===n&&A(e),a?.(e)},[n,a]),B=t.Children.toArray(b),M=B.length,W=t.useMemo(()=>({size:S,density:P,orientation:k,color:$,active:L,linear:i,connector:c,baseId:R,onSelect:T}),[S,P,k,$,L,i,c,R,T]),q="horizontal"===k,D=q?B[L]?.props?.children:null;return e(g.Provider,{value:W,children:l("div",{ref:w,className:p("flex w-full flex-col",x),style:{...N($,0),...h},...y,children:[e("ol",{role:"list",className:p("m-0 flex w-full list-none p-0",q?"flex-row":"flex-col"),children:B.map((l,t)=>e(j.Provider,{value:{index:t,last:t===M-1},children:l},t))}),u(D)?e("div",{role:"group","aria-labelledby":`${R}-${L}`,className:p("mt-4",v[S]),children:D}):null]})})});export const PlStep=/* @__PURE__ */t.forwardRef(function PlStep({label:r,description:z,bullet:k,status:C,optional:S,disabled:$=!1,color:P,className:I,children:A,...L},R){const T=t.useContext(g),{index:B,last:M}=t.useContext(j),W=w(),q=T?.size??"md",D=T?.orientation??"horizontal",E=P??T?.color??"primary",F=T?.active??null,G=T?.connector??"solid",H=C??c(B,F),J="horizontal"===D,K=!$&&null!==T&&(!T.linear||B<=T.active),O="none"!==G&&!M,Q=e("span",{"aria-hidden":"true",className:p("relative z-10 flex shrink-0 items-center justify-center rounded-full","size-(--p-bullet) text-[calc(var(--p-bullet)*0.5)] leading-none font-semibold tabular-nums",a[H],y,f),children:k??("complete"===H?e(StepTick,{}):B+1)}),U=l("span",{className:p("flex min-w-0 flex-col",J?"items-center text-center":""),children:[e("span",{id:T?`${T.baseId}-${B}`:void 0,className:p("font-semibold",b[q],d[H]),children:r}),u(z)?e("span",{className:p("text-(--plass-muted-fg)",x[q]),children:z}):null,S?e("span",{className:p("text-(--plass-muted-fg) italic",x[q]),children:!0===S?W.optional:S}):null]}),V=l("span",{className:p("flex items-center",J?"flex-col":"flex-row",n[q]),children:[Q,J?U:null]}),X=K?l("button",{type:"button","aria-current":"current"===H?"step":void 0,onClick:()=>T?.onSelect(B),className:p("flex cursor-pointer items-center bg-transparent p-1",J?"flex-col":"flex-row",n[q],h[q],m,y,"hover:bg-(--p-soft)"),children:[J?V:Q,J?null:U]}):l("span",{"aria-current":"current"===H?"step":void 0,className:p("flex items-center p-1",J?"flex-col":"flex-row",n[q],$?"opacity-50":""),children:[J?V:Q,J?null:U]});return l("li",{ref:R,className:p("relative flex min-w-0",J?"flex-1 flex-col items-center":"flex-col",I),style:{"--p-bullet":s[q],...N(E,0),"--p-fill":`var(--plass-${E}-fill)`,"--p-on-solid":`var(--plass-${E}-on-solid)`},...L,children:[l("span",{className:p("flex w-full",J?"flex-row items-start":"flex-col"),children:[X,O?e("span",{"aria-hidden":"true",className:p(J?"mt-[calc(var(--p-bullet)/2+0.25rem)] h-0 flex-1 border-t":"ms-[calc(var(--p-bullet)/2+0.25rem)] w-0 flex-1 self-stretch border-s",o[G],i[H],y)}):null]}),!J&&B===F&&u(A)?e("div",{role:"group","aria-labelledby":T?`${T.baseId}-${B}`:void 0,className:p("ms-[calc(var(--p-bullet)+0.75rem)] pt-2 pb-4",v[q]),children:A}):null]})});
|
|
1
|
+
"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as t from"react";import{useDefaults as r}from"../../internal/defaults.js";import{bulletGapClasses as n,bulletSizeValues as s,bulletStatusClasses as a,connectorColorClasses as i,connectorStyleClasses as o,statusAt as c,titleStatusClasses as d}from"../../internal/steps.js";import{cx as p,focusRingClasses as m,hasContent as u,iconClasses as f,metaTextClasses as x,radiusClasses as h,sheetBodyClasses as v,sheetTitleClasses as b,surfaceSlots as N,transitionClasses as y}from"../../internal/styles.js";import{useLabels as w}from"../../internal/labels.js";import{useResponsiveValue as z}from"../../internal/responsive.js";const g=/* @__PURE__ */t.createContext(null),j=/* @__PURE__ */t.createContext({index:0,last:!1});function StepTick(){return e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",className:"size-[0.7em]",children:e("path",{d:"m3.5 8.5 3 3 6-7",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round"})})}export const PlStepper=/* @__PURE__ */t.forwardRef(function PlStepper({active:n,defaultActive:s=0,onActiveChange:a,linear:i=!0,orientation:o,connector:c="solid",size:d,color:m,density:f,className:x,style:h,children:b,...y},w){const k=z(o,"horizontal"),C=r(),S=d??C.size??"md",$=m??C.color??"primary",P=f??C.density??"default",[I,A]=t.useState(s),L=n??I,R=t.useId(),T=t.useCallback(e=>{void 0===n&&A(e),a?.(e)},[n,a]),B=t.Children.toArray(b),M=B.length,W=t.useMemo(()=>({size:S,density:P,orientation:k,color:$,active:L,linear:i,connector:c,baseId:R,onSelect:T}),[S,P,k,$,L,i,c,R,T]),q="horizontal"===k,D=q?B[L]?.props?.children:null;return e(g.Provider,{value:W,children:l("div",{ref:w,className:p("flex w-full flex-col",x),style:{...N($,0),...h},...y,children:[e("ol",{role:"list",className:p("m-0 flex w-full list-none p-0",q?"flex-row":"flex-col"),children:B.map((l,t)=>e(j.Provider,{value:{index:t,last:t===M-1},children:l},t))}),u(D)?e("div",{role:"group","aria-labelledby":`${R}-${L}`,className:p("mt-4",v[S]),children:D}):null]})})});export const PlStep=/* @__PURE__ */t.forwardRef(function PlStep({label:r,description:z,bullet:k,status:C,optional:S,disabled:$=!1,color:P,className:I,children:A,...L},R){const T=t.useContext(g),{index:B,last:M}=t.useContext(j),W=w(),q=T?.size??"md",D=T?.orientation??"horizontal",E=P??T?.color??"primary",F=T?.active??null,G=T?.connector??"solid",H=C??c(B,F),J="horizontal"===D,K=!$&&null!==T&&(!T.linear||B<=T.active),O="none"!==G&&!M,Q=e("span",{"aria-hidden":"true",className:p("relative z-10 flex shrink-0 items-center justify-center rounded-full","size-(--p-bullet) text-[calc(var(--p-bullet)*0.5)] leading-none font-semibold tabular-nums",a[H],y,f),children:k??("complete"===H?e(StepTick,{}):B+1)}),U=l("span",{className:p("flex min-w-0 flex-col",J?"items-center text-center":""),children:[e("span",{id:T?`${T.baseId}-${B}`:void 0,className:p("font-semibold",b[q],d[H],y),children:r}),u(z)?e("span",{className:p("text-(--plass-muted-fg)",x[q]),children:z}):null,S?e("span",{className:p("text-(--plass-muted-fg) italic",x[q]),children:!0===S?W.optional:S}):null]}),V=l("span",{className:p("flex items-center",J?"flex-col":"flex-row",n[q]),children:[Q,J?U:null]}),X=K?l("button",{type:"button","aria-current":"current"===H?"step":void 0,onClick:()=>T?.onSelect(B),className:p("flex cursor-pointer items-center bg-transparent p-1",J?"flex-col":"flex-row",n[q],h[q],m,y,"hover:bg-(--p-soft)"),children:[J?V:Q,J?null:U]}):l("span",{"aria-current":"current"===H?"step":void 0,className:p("flex items-center p-1",J?"flex-col":"flex-row",n[q],$?"opacity-50":""),children:[J?V:Q,J?null:U]});return l("li",{ref:R,className:p("relative flex min-w-0",J?"flex-1 flex-col items-center":"flex-col",I),style:{"--p-bullet":s[q],...N(E,0),"--p-fill":`var(--plass-${E}-fill)`,"--p-on-solid":`var(--plass-${E}-on-solid)`},...L,children:[l("span",{className:p("flex w-full",J?"flex-row items-start":"flex-col"),children:[X,O?e("span",{"aria-hidden":"true",className:p(J?"mt-[calc(var(--p-bullet)/2+0.25rem)] h-0 flex-1 border-t":"ms-[calc(var(--p-bullet)/2+0.25rem)] w-0 flex-1 self-stretch border-s",o[G],i[H],y)}):null]}),!J&&B===F&&u(A)?e("div",{role:"group","aria-labelledby":T?`${T.baseId}-${B}`:void 0,className:p("ms-[calc(var(--p-bullet)+0.75rem)] pt-2 pb-4",v[q]),children:A}):null]})});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as
|
|
1
|
+
"use client";import{jsx as e,jsxs as a,Fragment as r}from"react/jsx-runtime";import*as t from"react";import{useDisabled as o}from"../../internal/form.js";import{useDefaults as s}from"../../internal/defaults.js";import{Switch as l}from"@base-ui/react/switch";import{Field as c}from"@base-ui/react/field";import{controlSlots as i,cx as n,fieldDescriptionClasses as d,focusRingClasses as h,hasContent as m,metaTextClasses as p,tickRowTextClasses as f}from"../../internal/styles.js";const u={xs:"h-3.5 w-6",sm:"h-4 w-7",md:"h-5 w-9",lg:"h-6 w-11",xl:"h-7 w-13"},b={xs:"data-[checked]:start-[calc(100%-0.75rem)]",sm:"data-[checked]:start-[calc(100%-0.875rem)]",md:"data-[checked]:start-[calc(100%-1.125rem)]",lg:"data-[checked]:start-[calc(100%-1.375rem)]",xl:"data-[checked]:start-[calc(100%-1.625rem)]"},g=/* @__PURE__ */["relative inline-flex shrink-0 rounded-full","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]","plass-fill","[transition-property:background-color,box-shadow,filter]","[transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]","motion-reduce:[transition-duration:0ms]",h].join(" "),x=/* @__PURE__ */["forced-colors:border forced-colors:[border-color:CanvasText]","forced-colors:data-[checked]:[background-color:Highlight]"].join(" "),k=/* @__PURE__ */[x,"cursor-pointer bg-(--plass-track)","hover:brightness-[0.97] dark:hover:brightness-110","data-[checked]:[--p-fill-on:1]","data-[checked]:[box-shadow:var(--p-lift)] data-[checked]:hover:brightness-105"].join(" "),w=/* @__PURE__ */[x,"cursor-default bg-(--plass-track) saturate-[0.55]","data-[checked]:[--p-fill-on:1]","data-[checked]:shadow-none"].join(" "),j=/* @__PURE__ */["forced-colors:border forced-colors:[border-color:GrayText]","cursor-not-allowed bg-(--plass-track)","opacity-50 saturate-[0.35] shadow-none","data-[checked]:[--p-fill-on:1]"].join(" "),v=/* @__PURE__ */["absolute inset-y-0.5 start-0.5 aspect-square rounded-full bg-white","[box-shadow:0_1px_2px_rgb(20_40_90/0.25)]","forced-colors:[background-color:CanvasText] forced-colors:data-[checked]:[background-color:HighlightText]","[transition:inset-inline-start_var(--plass-duration)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]"].join(" ");export const PlSwitch=/* @__PURE__ */t.forwardRef(function PlSwitch({size:t,color:h,label:x,description:N,error:y,invalid:_,labelPlacement:T="end",disabled:P=!1,readOnly:R=!1,className:S,classNames:$,style:z,...B},C){const H=s(),O=o(P),q=t??H.size??"md",D=h??H.color??"primary",E=m(y),F=_??E,G=F?"danger":D,L=e("span",{className:"flex h-[1lh] shrink-0 items-center",children:e(l.Root,{ref:C,className:n(g,u[q],O?j:R?w:k,$?.control),disabled:O,readOnly:R,...B,children:e(l.Thumb,{className:`${v} ${b[q]}`})})}),A=x||N?a("span",{className:["flex min-w-0 flex-col gap-0.5","start"===T?"flex-1":""].filter(Boolean).join(" "),children:[x?e(c.Label,{className:n(O?"text-(--plass-muted-fg)":"cursor-pointer text-(--plass-fg)",$?.label),children:x}):null,N?e(c.Description,{className:n(d(q),$?.description),children:N}):null]}):null;return a(c.Root,{disabled:O,invalid:F,className:["inline-flex flex-col gap-1 align-top",S??""].filter(Boolean).join(" "),style:{...i(G,0,"solid"),...z},children:[e("div",{className:`flex items-start gap-2.5 ${f[q]}`,children:a(r,"start"===T?{children:[A,L]}:{children:[L,A]})}),e(c.Error,E?{match:!0,className:n(p[q],"text-(--p-accent)",$?.error),children:y}:{className:n(p[q],"text-(--p-accent)",$?.error)})]})});
|
|
@@ -55,6 +55,16 @@ export interface PlTableProps<Row> extends PlassStyleProps, Omit<React.Component
|
|
|
55
55
|
getRowKey?: (row: Row, index: number) => React.Key;
|
|
56
56
|
/** Shown above the grid, and read out as the table's accessible name. */
|
|
57
57
|
caption?: React.ReactNode;
|
|
58
|
+
/**
|
|
59
|
+
* The table's accessible name when there is no `caption` — "Invoices",
|
|
60
|
+
* "Exchange rates".
|
|
61
|
+
*
|
|
62
|
+
* It names the `<table>`, and the box the grid scrolls in too: a grid wider
|
|
63
|
+
* than its sheet, or taller than `maxHeight`, is a tab stop while it
|
|
64
|
+
* scrolls, and a stop is announced by its name. A caption is that name when
|
|
65
|
+
* there is one, and this is not read then.
|
|
66
|
+
*/
|
|
67
|
+
label?: string;
|
|
58
68
|
/**
|
|
59
69
|
* What to show instead of rows when `rows` is empty.
|
|
60
70
|
* @default 'No data'
|
|
@@ -109,4 +119,4 @@ export interface PlTableProps<Row> extends PlassStyleProps, Omit<React.Component
|
|
|
109
119
|
* the API. `ref` is not offered rather than being offered with `Row` widened to
|
|
110
120
|
* `any`.
|
|
111
121
|
*/
|
|
112
|
-
export declare function PlTable<Row>({ variant, size, color, density, elevation, columns, rows, getRowKey, caption, empty, striped, hoverable, stickyHeader, maxHeight, onRowClick, className, style, ...props }: PlTableProps<Row>): React.JSX.Element;
|
|
122
|
+
export declare function PlTable<Row>({ variant, size, color, density, elevation, columns, rows, getRowKey, caption, label, empty, striped, hoverable, stickyHeader, maxHeight, onRowClick, className, style, ...props }: PlTableProps<Row>): React.JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e,jsxs as t}from"react/jsx-runtime";import{controlTextLeadingClasses as
|
|
1
|
+
import{jsx as e,jsxs as t}from"react/jsx-runtime";import{controlTextLeadingClasses as a,metaTextClasses as r,paddingXValues as l,radiusClasses as o,sheetRestClasses as s,surfaceSlots as n}from"../../internal/styles.js";import{PlassTableScroll as i}from"../../internal/table-scroll.js";import{cellPaddingYValues as d,clickableRowClasses as c,headRule as p,rowClasses as m,rowRule as h,tableStyle as g}from"../../internal/table.js";export function PlTable({variant:y="glass",size:v="md",color:f="primary",density:b="default",elevation:u=0,columns:x,rows:w,getRowKey:k,caption:j,label:N,empty:B="No data",striped:$=!1,hoverable:A=!1,stickyHeader:C=!1,maxHeight:H,onRowClick:S,className:T,style:z,...D}){const K=l[b][v],R=d[b][v],E=Boolean(S),I=A||E,P=void 0!==H,q={padding:`${R} ${K}`,border:0,background:"none"},F={...q,...C?{boxShadow:"inset 0 -1px 0 var(--plass-border)"}:{borderBottom:p},...C?{background:"linear-gradient(var(--plass-glass-press), var(--plass-glass-press)), linear-gradient(var(--plass-surface), var(--plass-surface))"}:null},bodyCellStyle=e=>0===e?q:{...q,borderTop:h};return t("div",{className:["overflow-hidden",o[v],s[y],T??""].filter(Boolean).join(" "),style:{...n(f,u),...z},...D,children:[j?e("div",{"aria-hidden":"true",className:`${r[v]} font-semibold text-(--plass-muted-fg)`,style:{...q,borderBottom:h,textAlign:"start"},children:j}):null,t(i,{className:["overflow-x-auto",P?"overflow-y-auto overscroll-contain":""].filter(Boolean).join(" "),style:P?{maxHeight:H}:void 0,tableClassName:`text-start ${a[v]} text-(--plass-fg)`,tableStyle:g,caption:j,label:N,children:[e("colgroup",{children:x.map(t=>e("col",{style:void 0===t.width?void 0:{width:"number"==typeof t.width?`${t.width}px`:t.width}},t.key))}),e("thead",{children:e("tr",{children:x.map(t=>e("th",{scope:"col",className:["font-semibold whitespace-nowrap text-(--plass-muted-fg)",C?"sticky top-0 z-10":""].filter(Boolean).join(" "),style:{...F,textAlign:t.align??"start"},children:t.header??t.key},t.key))})}),e("tbody",{children:0===w.length?e("tr",{className:m,children:e("td",{colSpan:x.length,className:"text-(--plass-muted-fg)",style:{...q,padding:`2rem ${K}`,textAlign:"center"},children:B})}):w.map((t,a)=>e("tr",{className:[m,$&&a%2==1?"[--p-row:var(--plass-stripe)]":"",I?"hover:[--p-row:var(--p-soft)]":"",E?c:""].filter(Boolean).join(" "),style:{backgroundColor:"var(--p-row)"},tabIndex:E?0:void 0,onClick:S?()=>S(t,a):void 0,onKeyDown:S?e=>{e.target===e.currentTarget&&("Enter"!==e.key&&" "!==e.key||(e.preventDefault(),S(t,a)))}:void 0,children:x.map(r=>e("td",{style:{...bodyCellStyle(a),textAlign:r.align??"start"},children:r.render?r.render(t,a):t[r.key]},r.key))},k?k(t,a):a))})]})]})}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import type { PlassOrientation, PlassOverscroll, PlassResponsive, PlassStyleProps, PlassVariant } from '../../types.js';
|
|
2
|
+
import type { PlassAlign, PlassOrientation, PlassOverscroll, PlassResponsive, PlassStyleProps, PlassVariant } from '../../types.js';
|
|
3
3
|
/** A tab's value. The same restraint `PlSelect` puts on its own — an identifier. */
|
|
4
4
|
export type PlTabValue = string | number;
|
|
5
5
|
export interface PlTabsProps extends Omit<PlassStyleProps, 'variant'>, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'defaultValue' | 'onChange'> {
|
|
@@ -43,6 +43,23 @@ export interface PlTabsProps extends Omit<PlassStyleProps, 'variant'>, Omit<Reac
|
|
|
43
43
|
* @default true
|
|
44
44
|
*/
|
|
45
45
|
loopFocus?: boolean;
|
|
46
|
+
/**
|
|
47
|
+
* Where each tab's label sits inside the tab, once the tab is wider than the
|
|
48
|
+
* label is.
|
|
49
|
+
*
|
|
50
|
+
* Which is the part worth saying: this moves the words, never the tabs. A
|
|
51
|
+
* horizontal bar sizes every tab to its own label, so there is no room for a
|
|
52
|
+
* label to move in and nothing changes — it takes effect on a `vertical` bar,
|
|
53
|
+
* whose tabs are all as wide as the widest, and on a `fullWidth` one, whose
|
|
54
|
+
* tabs are all an equal share of the bar. `start` is what a bar down the side
|
|
55
|
+
* of a settings page usually wants, so the names line up as a list rather
|
|
56
|
+
* than drifting around a centre line.
|
|
57
|
+
*
|
|
58
|
+
* Logical, not physical: `start` is the left under `ltr` and the right under
|
|
59
|
+
* `rtl`, and an icon beside the label travels with it.
|
|
60
|
+
* @default 'center'
|
|
61
|
+
*/
|
|
62
|
+
align?: PlassAlign;
|
|
46
63
|
/** The tabs share the bar's full width, each taking an equal part of it. */
|
|
47
64
|
fullWidth?: boolean;
|
|
48
65
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{useDefaults as l}from"../../internal/defaults.js";import{Tabs as o}from"@base-ui/react/tabs";import{controlHeightClasses as s,controlTextClasses as r,focusRingClasses as i,focusRingInsetClasses as n,forcedFieldEdgeClasses as c,forcedFillClasses as d,gapClasses as f,glassClasses as
|
|
1
|
+
"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{useDefaults as l}from"../../internal/defaults.js";import{Tabs as o}from"@base-ui/react/tabs";import{controlHeightClasses as s,controlTextClasses as r,focusRingClasses as i,focusRingInsetClasses as n,forcedFieldEdgeClasses as c,forcedFillClasses as d,gapClasses as f,glassClasses as u,hasContent as h,iconClasses as p,paddingXClasses as v,radiusClasses as b,surfaceSlots as m,transitionClasses as g}from"../../internal/styles.js";import{useResponsiveValue as x}from"../../internal/responsive.js";import{overscrollClasses as w,useWheelScroll as y}from"../../internal/wheel.js";const z=/* @__PURE__ */a.createContext({variant:"glass",size:"md",density:"default",orientation:"horizontal",align:"center",fullWidth:!1}),j={solid:{horizontal:`${u} inline-flex bg-(--plass-glass) p-1 [box-shadow:var(--plass-well)] ${c}`,vertical:`${u} inline-flex flex-col bg-(--plass-glass) p-1 [box-shadow:var(--plass-well)] ${c}`},glass:{horizontal:"flex border-b [border-color:var(--plass-border)]",vertical:"flex flex-col border-e [border-color:var(--plass-border)]"},ghost:{horizontal:"flex",vertical:"flex flex-col"}},P={solid:{horizontal:"absolute top-(--active-tab-top) left-(--active-tab-left) h-(--active-tab-height) w-(--active-tab-width)",vertical:"absolute top-(--active-tab-top) left-(--active-tab-left) h-(--active-tab-height) w-(--active-tab-width)"},glass:{horizontal:"absolute bottom-0 left-(--active-tab-left) h-0.5 w-(--active-tab-width)",vertical:"absolute end-0 top-(--active-tab-top) h-(--active-tab-height) w-0.5"},ghost:{horizontal:"absolute bottom-0 left-(--active-tab-left) h-0.5 w-(--active-tab-width)",vertical:"absolute end-0 top-(--active-tab-top) h-(--active-tab-height) w-0.5"}},N={solid:`${u} bg-(--plass-glass-press) [box-shadow:var(--plass-shadow-1),var(--plass-gloss-glass)]`,glass:"bg-(--p-accent)",ghost:"bg-(--p-accent)"},T="text-(--plass-muted-fg) hover:text-(--plass-fg) data-[active]:text-(--p-accent)",k={start:"justify-start",center:"justify-center",end:"justify-end"};export const PlTab=/* @__PURE__ */a.forwardRef(function PlTab({value:l,startIcon:i,endIcon:c,disabled:d=!1,className:u,children:m,...x},w){const{variant:y,size:j,density:P,align:N,fullWidth:C}=a.useContext(z);return t(o.Tab,{ref:w,value:l,disabled:d,className:["relative z-10 inline-flex shrink-0 cursor-pointer items-center select-none",k[N],"font-semibold whitespace-nowrap","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",s[j],r[j],f[j],v[P][j],"solid"===y?b[j]:"",g,p,T,"solid"===y?"forced-colors:data-[active]:[color:HighlightText]":"",n,"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50",C?"flex-1":"",u??""].filter(Boolean).join(" "),...x,children:[h(i)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:i}):null,m,h(c)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:c}):null]})});export const PlTabPanel=/* @__PURE__ */a.forwardRef(function PlTabPanel({value:t,keepMounted:l=!1,className:s,children:r,...n},c){const{size:d}=a.useContext(z);return e(o.Panel,{ref:c,value:t,keepMounted:l,className:["min-w-0 flex-1 text-(--plass-fg)",i,b[d],s??""].filter(Boolean).join(" "),...n,children:r})});export const PlTabs=/* @__PURE__ */a.forwardRef(function PlTabs({variant:s="glass",size:r,color:i,density:n,value:c,defaultValue:f,onValueChange:u,orientation:h,align:p="center",activateOnFocus:v=!1,loopFocus:g=!0,fullWidth:T=!1,wheel:k=!0,overscroll:C="contain",className:R,style:S,children:V,...W},E){const F=x(h,"horizontal"),O=l(),$=r??O.size??"md",B=i??O.color??"primary",L=n??O.density??"default",M=a.useMemo(()=>({variant:s,size:$,density:L,orientation:F,align:p,fullWidth:T}),[s,$,L,F,p,T]),I=a.useRef(null),H="horizontal"===F,q=function useListOverflow(e,t){const[l,o]=a.useState({start:!1,end:!1,rtl:!1}),s=a.useCallback(()=>{const t=e.current;if(!t)return;const a=t.scrollWidth-t.clientWidth,l=Math.abs(t.scrollLeft),s={start:l>1,end:a-l>1,rtl:"rtl"===getComputedStyle(t).direction};o(e=>e.start===s.start&&e.end===s.end&&e.rtl===s.rtl?e:s)},[e]);return a.useLayoutEffect(()=>{t&&s()}),a.useEffect(()=>{const a=e.current;if(!a||!t||"undefined"==typeof ResizeObserver)return;const l=new ResizeObserver(s);return l.observe(a),()=>l.disconnect()},[t,s,e]),t?{style:{"--p-fade-left":(l.rtl?l.end:l.start)?"var(--p-fade)":void 0,"--p-fade-right":(l.rtl?l.start:l.end)?"var(--p-fade)":void 0},onScroll:s,state:l.start?l.end?"both":"start":l.end?"end":"none"}:{style:void 0,onScroll:void 0,state:void 0}}(I,H);y(I,{enabled:k&&H,overscroll:C});const A=[],D=[],sort=e=>{a.Children.forEach(e,e=>{a.isValidElement(e)&&e.type===a.Fragment?sort(e.props.children):a.isValidElement(e)&&e.type===PlTabPanel?D.push(e):null!=e&&!1!==e&&A.push(e)})};return sort(V),e(z.Provider,{value:M,children:t(o.Root,{ref:E,value:c,defaultValue:f,onValueChange:e=>u?.(e),orientation:F,className:["flex min-w-0","vertical"===F?"flex-row gap-4":"flex-col gap-4",R??""].filter(Boolean).join(" "),style:{...m(B,0),...S},...W,children:[t(o.List,{ref:I,activateOnFocus:v,loopFocus:g,className:["relative shrink-0",j[s][F],"solid"===s?b[$]:"",T&&H?"w-full":"",H?"plass-fade-x overflow-x-auto overflow-y-hidden":"",H?w(C,!0):""].filter(Boolean).join(" "),style:q.style,onScroll:q.onScroll,"data-overflow":q.state,children:[A,e(o.Indicator,{className:["pointer-events-none",P[s][F],N[s],d,"solid"===s?b[$]:"rounded-full","[transition-property:left,top,width,height]","[transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]","motion-reduce:[transition-duration:0ms]"].join(" ")})]}),D]})})});
|
|
@@ -44,17 +44,15 @@ export interface PlTextFieldProps extends PlassStyleProps, NativeControlProps {
|
|
|
44
44
|
resize?: PlTextFieldResize;
|
|
45
45
|
/**
|
|
46
46
|
* The name of what the field holds, wired to the control by Base UI's Field.
|
|
47
|
-
* `labelPlacement` decides whether it sits above the box
|
|
48
|
-
*
|
|
49
|
-
* There is no floating variant on purpose, and a notch is not one: a floating
|
|
50
|
-
* label is animated out of the control as the caret arrives, which needs a
|
|
51
|
-
* `transform` on the thing being typed into, and a label that moves under the
|
|
52
|
-
* caret is the one effect this library rules out on a control. The notch is
|
|
53
|
-
* where it always was.
|
|
47
|
+
* `labelPlacement` decides whether it sits above the box, in its top edge, or
|
|
48
|
+
* inside it until the field is focused or filled.
|
|
54
49
|
*/
|
|
55
50
|
label?: React.ReactNode;
|
|
56
51
|
/**
|
|
57
|
-
* Where the `label` goes — above the control,
|
|
52
|
+
* Where the `label` goes — above the control, in its top edge, or inside it
|
|
53
|
+
* where the value would be written until the field is focused or filled, and
|
|
54
|
+
* in its top edge from then on. With a `startIcon` a `float` label stays in
|
|
55
|
+
* the edge, because the icon is where it would rest.
|
|
58
56
|
* Falls back to the nearest `PlassProvider`, then to `top`.
|
|
59
57
|
* @default 'top'
|
|
60
58
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as
|
|
1
|
+
"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as t from"react";import{useDisabled as r}from"../../internal/form.js";import{useDefaults as n}from"../../internal/defaults.js";import{ownsPress as s}from"../../internal/focusable.js";import{Field as a}from"@base-ui/react/field";import{Input as i}from"@base-ui/react/input";import{Spinner as o}from"../../internal/icons.js";import{useFieldLight as c}from"../../internal/glow.js";import{FieldNotch as m,floatControlClassName as d,notchShellStyle as p,resolveNotch as f}from"../../internal/notch.js";import{hotKeyHandler as x}from"../../internal/keys.js";import{controlHeightClasses as u,controlTextLeadingClasses as h,cx as y,disabledClasses as b,fieldDescriptionClasses as g,fieldReadOnlyClasses as $,fieldRestClasses as j,fieldSlots as w,focusWithinRingClasses as v,gapClasses as N,hasContent as z,iconClasses as k,metaTextClasses as D,paddingXClasses as P,radiusClasses as K,stackGapClasses as O,transitionClasses as R}from"../../internal/styles.js";const T={xs:`${N.xs} ${K.xs} ${h.xs}`,sm:`${N.sm} ${K.sm} ${h.sm}`,md:`${N.md} ${K.md} ${h.md}`,lg:`${N.lg} ${K.lg} ${h.lg}`,xl:`${N.xl} ${K.xl} ${h.xl}`},B={xs:"min-h-6 py-[3px]",sm:"min-h-8 py-[6px]",md:"min-h-10 py-[9px]",lg:"min-h-12 py-[11px]",xl:"min-h-14 py-[13px]"},F={none:"resize-none",vertical:"resize-y",horizontal:"resize-x",both:"resize"},I=/* @__PURE__ */["relative flex w-full cursor-text","[-webkit-tap-highlight-color:transparent]",R,k].join(" "),C=v,E=j,L=$;export const PlTextField=/* @__PURE__ */t.forwardRef(function PlTextField({variant:h="glass",size:$,color:j,density:v,elevation:N=0,multiline:k=!1,rows:K=3,resize:R="vertical",label:W,labelPlacement:q,description:A,error:G,invalid:H,startIcon:J,endIcon:M,loading:Q=!1,fullWidth:S=!1,readOnly:U=!1,disabled:V=!1,type:X="text",placeholder:Y,hotKeys:Z,onKeyDown:_,className:ee,classNames:le,style:te,...re},ne){const se=n(),ae=r(V),ie=$??se.size??"md",oe=j??se.color??"primary",ce=v??se.density??"default",me=q??se.labelPlacement??"top",{notched:de,float:pe}=f(me,W,z(J)),fe=z(G),xe=H??fe,ue=xe?"danger":oe,he=t.useRef(null),ye=t.useCallback(e=>{he.current=e,"function"==typeof ne?ne(e):ne&&(ne.current=e)},[ne]),be=!ae&&!U,ge=c(be),$e=[I,de?"":C,T[ie],k?`${B[ie]} items-start`:`${u[ie]} items-center`,P[ce][ie],ae?b[h]:U?L[h]:E[h],be?"plass-glow":""].filter(Boolean).join(" "),je=["min-w-0 flex-1 bg-transparent [font:inherit] text-inherit","[outline:none]","placeholder:text-(--plass-muted-fg)","caret-(--p-accent) selection:bg-(--p-soft-press)","disabled:cursor-not-allowed",k?`block ${F[R]}`:"self-stretch",pe?d:""].join(" "),we="inline-flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",ve=e(a.Label,{className:y(D[ie],"font-semibold",ae?"text-(--plass-muted-fg)":"text-(--plass-fg)",le?.label),children:W});return l(a.Root,{disabled:ae,invalid:xe,className:["flex-col align-top",O[ie],S?"flex w-full":"inline-flex",ee??""].filter(Boolean).join(" "),style:{...w(ue,N),...te},children:[z(W)&&!de?ve:null,e(m,{notched:de,size:ie,density:ce,variant:h,disabled:ae,readOnly:U,float:pe,label:ve,children:l("span",{className:y($e,le?.control),style:de?p:void 0,...ge,onPointerDown:e=>{ae||s(e.target,e.currentTarget,he.current)||(e.preventDefault(),he.current?.focus())},children:[J?e("span",{className:we,children:J}):null,e(i,{ref:ye,className:je,disabled:ae,readOnly:U,"aria-busy":Q||void 0,"data-loading":Q||void 0,onKeyDown:x(Z,_),placeholder:pe?Y||" ":Y,...k?{render:e("textarea",{rows:K})}:{type:X},...re}),Q?e("span",{className:we,children:e(o,{})}):M?e("span",{className:we,children:M}):null]})}),A?e(a.Description,{className:y(g(ie),le?.description),children:A}):null,e(a.Error,fe?{match:!0,className:y(D[ie],"text-(--p-accent)",le?.error),children:G}:{className:y(D[ie],"text-(--p-accent)",le?.error)})]})});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as n,Fragment as e,jsxs as r}from"react/jsx-runtime";import*as s from"react";import{useLabels as
|
|
1
|
+
"use client";import{jsx as n,Fragment as e,jsxs as r}from"react/jsx-runtime";import*as s from"react";import{useLabels as i}from"../../internal/labels.js";import{useRender as l}from"@base-ui/react/use-render";import{ExternalLinkIcon as a,LinkIcon as o}from"../../internal/icons.js";import{controlTextLeadingClasses as t,focusRingClasses as c,srOnlyClasses as p}from"../../internal/styles.js";import{safeRel as m}from"../../internal/link.js";const d={always:"[&.plass-link]:underline",hover:"[&.plass-link]:no-underline [&.plass-link]:hover:underline",none:"[&.plass-link]:no-underline"},u=/* @__PURE__ */["plass-link","cursor-pointer","[&_svg]:pointer-events-none [&_svg]:inline [&_svg]:size-[0.95em] [&_svg]:shrink-0 [&_svg]:align-middle",/* @__PURE__ */["[transition-property:color,text-decoration-color]","[transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]","motion-reduce:[transition-duration:0ms]"].join(" "),c,"focus-visible:rounded-[0.25rem]"].join(" ");export const PlTextLink=/* @__PURE__ */s.forwardRef(function PlTextLink({href:c,underline:f="always",color:v,size:h,newTab:k=!1,icon:g,startIcon:b,newTabLabel:j,render:x,className:y,style:_,children:w,...N},T){const L=i(),z=j??L.newTab,C=g??k,P=!0===C?n(k?a:o,{}):C,$=[u,h?t[h]:"",d[f],v?"[&.plass-link]:text-(--p-accent)":"[&.plass-link]:text-inherit",y??""].filter(Boolean).join(" "),B={"--p-underline":"color-mix(in oklab, currentColor 45%, transparent)","--p-underline-hover":"currentColor","--p-ring":`var(--plass-${v??"primary"}-ring)`,...v?{"--p-accent":`var(--plass-${v}-accent)`}:null},E=s.isValidElement(x)&&void 0!==x.props.href,{rel:F,target:I,...R}=N,V=I??(k?"_blank":void 0),q=k||"_blank"===V,A=m(V,F);return l({render:x??n("a",{}),ref:T,props:{...E?null:{href:c},target:V,className:$,style:{...B,..._},children:r(e,{children:[b?n("span",{className:"me-[0.25em]",children:b}):null,w,P?n("span",{className:"ms-[0.25em]",children:P}):null,q?r(e,{children:[" ",n("span",{className:p,children:z})]}):null]}),...R,rel:A}})});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as t from"react";import{CartesianChart as a,markTransitionClasses as
|
|
1
|
+
"use client";import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as t from"react";import{CartesianChart as o,entryKeys as a,markTransitionClasses as r}from"../../internal/chart-frame.js";import{barBandRatio as s,barMaxThickness as i,barRadius as l,formatTimeTicks as c,formatTimeValue as m,markGap as d,resolveColor as u,seriesColor as h,timeNeedsDate as x,timeScale as p,toNumber as f}from"../../internal/chart.js";import{srOnlyClasses as M}from"../../internal/styles.js";import{textOf as b}from"../../internal/text.js";import{useDefaults as y}from"../../internal/defaults.js";import{useLabels as k}from"../../internal/labels.js";export function PlTimelineChart({series:n,min:r,max:l,barSize:u,rounded:M=!0,size:k,density:v,xAxis:w,yAxis:g,locale:j,...$}){const C=y(),T=k??C.size??"md",z=v??C.density??"default",A=j??C.locale,P=t.useMemo(()=>n.map(packRow),[n]),W=t.useMemo(()=>P.map(e=>e.spans),[P]),E=t.useMemo(()=>{let e=1/0,n=-1/0,t=!1;for(const o of W)for(const a of o)a&&(t=!0,e=Math.min(e,a.from),n=Math.max(n,a.to));return t?{min:e,max:n}:null},[W]),I=t.useMemo(()=>p(E,{min:f(r)??void 0,max:f(l)??void 0,tickCount:g?.tickCount}),[E,r,l,g?.tickCount]),R=t.useMemo(()=>c(I.ticks,I.unit,A),[I,A]),S=x(I.ticks,I.unit),B=t.useMemo(()=>n.map((e,n)=>h(e,n)),[n]),D=t.useMemo(()=>[{data:W.map(e=>e.some(Boolean)?1:null)}],[W]),N=t.useMemo(()=>n.map((e,n)=>e.name??`${n+1}`),[n]),F=t.useMemo(()=>a(n),[n]),q=u??i[T],G=t.useCallback(e=>{const n=[];return P.forEach((t,o)=>{const a=Math.min(q,Math.max(1,(e.band.band-d*(t.lanes-1))/t.lanes)),r=a*t.lanes+d*(t.lanes-1),s=e.plot.top+e.categoryPx(o)-r/2+a/2;t.spans.forEach((t,r)=>{if(!t||!inWindow(t,e.scale))return;const i=e.valuePx(Math.max(t.from,e.scale.min)),l=e.valuePx(Math.min(t.to,e.scale.max));n.push({series:o,index:r,key:F[o],x:(i+l)/2,y:s+t.lane*(a+d),r:a/2,rx:Math.max(0,(l-i)/2),ry:a/2})})}),n},[P,F,q]),H=t.useCallback(e=>{const n=W[e.series]?.[e.index];if(!n)return null;const t=n.span.label,o=null!=t,a={seriesIndex:e.series,color:n.color??B[e.series],value:n.to-n.from,formatted:`${m(n.from,I.unit,A,S)} – ${m(n.to,I.unit,A,S)}`};return{heading:o?t:N[e.series],items:[{...a,name:o?N[e.series]:void 0}],index:e.series,category:N[e.series],renderItems:[{...a,name:o&&b(t)||void 0}]}},[W,N,B,I.unit,A,S]);return e(o,{...$,series:D,categories:N,size:T,density:z,locale:A,horizontal:!0,scale:I,xAxis:w,yAxis:{tickFormat:(e,n)=>R[n]??"",...g},legend:!1,bandRatio:s[z],marks:G,markTooltip:H,table:t=>e(TimelineTable,{id:t,names:N,series:n,spans:W,scale:I,withDate:S,label:$.label,corner:w?.label,locale:A}),children:n=>e(Spans,{context:n,spans:W,colors:B,rounded:M})})}function packRow(e){const n=e.data.map(e=>{const n=f(e.start),t=f(e.end);return null===n||null===t?null:{from:Math.min(n,t),to:Math.max(n,t),lane:0,color:e.color?u(e.color):void 0,span:e}}),t=[];return n.map((e,n)=>({one:e,index:n})).filter(e=>Boolean(e.one)).sort((e,n)=>e.one.from-n.one.from).forEach(({one:e})=>{const n=t.findIndex(n=>n<=e.from),o=-1===n?t.length:n;t[o]=e.to,e.lane=o}),{spans:n,lanes:Math.max(1,t.length)}}function inWindow(e,n){return e.to>=n.min&&e.from<=n.max}function Spans({context:n,spans:t,colors:o,rounded:a}){const{marks:s,activeMark:i}=n,c=a?l:0;return e("g",{children:s.map(n=>{const a=t[n.series]?.[n.index];if(!a)return null;const s=i?.series===n.series&&i?.index===n.index,l=n.rx??n.r,m=2*(n.ry??n.r),d=Math.max(1,2*l);return e("rect",{x:n.x-l,y:n.y-m/2,width:d,height:m,rx:Math.min(c,d/2,m/2),fill:a.color??o[n.series],opacity:s?1:.92,className:r},`${n.series}-${n.index}`)})})}function TimelineTable({id:t,names:o,series:a,spans:r,scale:s,withDate:i,label:l,corner:c,locale:d}){const u=k(),h=r.some((e,n)=>e.some((e,t)=>null!==e&&inWindow(e,s)&&void 0!==a[n].data[t]?.label));return n("table",{id:t,className:M,children:[l?e("caption",{children:l}):null,e("thead",{children:n("tr",{children:[e("th",{scope:"col",children:c??""}),h?e("th",{scope:"col",children:"label"}):null,e("th",{scope:"col",children:u.start}),e("th",{scope:"col",children:u.end})]})}),e("tbody",{children:r.flatMap((t,r)=>t.map((t,l)=>t&&inWindow(t,s)?n("tr",{children:[e("th",{scope:"row",children:o[r]}),h?e("td",{children:a[r].data[l]?.label??""}):null,e("td",{children:m(t.from,s.unit,d,i)}),e("td",{children:m(t.to,s.unit,d,i)})]},`${r}-${l}`):null))})]})}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as t,jsxs as
|
|
1
|
+
"use client";import{jsx as t,jsxs as e}from"react/jsx-runtime";import*as s from"react";import{useDefaults as o}from"../../internal/defaults.js";import{useLabels as a}from"../../internal/labels.js";import{Toast as i}from"@base-ui/react/toast";import{CloseIcon as r,severityIcon as n}from"../../internal/icons.js";import{controlSlots as l,focusRingClasses as c,forcedFieldEdgeClasses as d,glassClasses as p,hasContent as m,iconClasses as f,metaTextClasses as u,radiusClasses as h,sheetBodyClasses as v,sheetHeaderGapClasses as g,sheetPaddingXClasses as x,sheetPaddingYClasses as b,sheetSectionGapClasses as y,sheetTitleClasses as w,targetClasses as j,transitionClasses as N}from"../../internal/styles.js";const T={"top-start":"top-0 items-start","top-center":"top-0 items-center","top-end":"top-0 items-end","bottom-start":"bottom-0 flex-col-reverse items-start","bottom-center":"bottom-0 flex-col-reverse items-center","bottom-end":"bottom-0 flex-col-reverse items-end"},M={solid:/* @__PURE__ */["text-(--p-on-solid) [background-image:var(--p-fill)]","[box-shadow:var(--plass-shadow-3),var(--p-lift)]",d].join(" "),glass:/* @__PURE__ */[p,"border text-(--plass-fg) bg-(--plass-glass-press)","[border-color:var(--p-line)]","[box-shadow:var(--plass-shadow-3),var(--plass-gloss-glass)]"].join(" "),ghost:/* @__PURE__ */[p,"text-(--plass-fg) bg-(--plass-glass-press)","[box-shadow:var(--plass-shadow-3),var(--plass-gloss-glass)]"].join(" ")},z={solid:"",glass:"text-(--p-accent)",ghost:"text-(--p-accent)"};function toManagerOptions(t){const{color:e,variant:s,icon:o,className:a,style:i,actionLabel:r,onAction:n,...l}=t;return{...l,data:{color:e,variant:s,icon:o,className:a,style:i},actionProps:void 0===r?void 0:{children:r,onClick:n}}}export function usePlToast(){const t=i.useToastManager();return s.useMemo(()=>({add:e=>t.add(toManagerOptions(e)),close:e=>t.close(e),update:(e,s)=>t.update(e,toManagerOptions(s)),promise:(e,s)=>t.promise(e,{loading:toManagerOptions(s.loading),success:t=>toManagerOptions("function"==typeof s.success?s.success(t):s.success),error:t=>toManagerOptions("function"==typeof s.error?s.error(t):s.error)}),toasts:t.toasts}),[t])}function ToastItem({toast:s,variant:o,color:a,size:d,density:p,closeLabel:T,swipeDirection:O}){const P=s.data?.variant??o??"glass",k=s.data?.color??a,$=void 0===s.data?.icon?n(k):s.data.icon,D=z[P],L=m(s.title);return e(i.Root,{toast:s,swipeDirection:O,className:["pointer-events-auto flex w-full items-start",x[p??"default"][d],b[p??"default"][d],h[d],y[d],v[d],M[P],f,N,"data-[starting-style]:opacity-0 data-[ending-style]:opacity-0","data-[ending-style]:data-[swipe-direction]:[transform:translate(var(--toast-swipe-movement-x),var(--toast-swipe-movement-y))]","data-[limited]:hidden",c,"[outline:none]",s.data?.className??""].filter(Boolean).join(" "),style:{...l(k,3,P),...s.data?.style},children:[m($)?t("span",{className:`flex h-[1lh] shrink-0 items-center ${D}`,children:$}):null,e("div",{className:`flex min-w-0 flex-1 flex-col ${g[d]}`,children:[t(i.Title,{className:`plass-title m-0 font-semibold ${w[d]} ${D}`}),t(i.Description,{className:L&&"solid"!==P?"m-0 text-(--plass-muted-fg)":"m-0"})]}),t(i.Action,{className:["flex h-[1lh] shrink-0 cursor-pointer items-center rounded-full px-2","font-medium underline-offset-2",D||"text-inherit","hover:underline",c,u[d]].join(" ")}),t("span",{className:"flex h-[1lh] shrink-0 items-center",children:t(i.Close,{"aria-label":T,className:[j,"inline-flex size-[1.15em] cursor-pointer items-center justify-center rounded-full","opacity-70 [transition:opacity_var(--plass-duration)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]","hover:opacity-100 focus-visible:opacity-100",c].join(" "),children:t(r,{})})})]})}function ToastViewport(e){const{toasts:s}=i.useToastManager(),o=a(),{position:r,width:n,...l}=e,c=[r.startsWith("top")?"up":"down","left","right"];return t(i.Portal,{children:t(i.Viewport,{"aria-label":o.notifications,className:["plass-portal pointer-events-none fixed inset-x-0 z-(--plass-z-portal) flex flex-col gap-2 p-4",T[r]].join(" "),children:s.map(e=>t("div",{className:"w-full",style:{maxWidth:"number"==typeof n?`${n}px`:n},children:t(ToastItem,{toast:e,swipeDirection:c,...l})},e.id))})})}export function PlToastProvider({variant:s="glass",size:r,color:n,density:l,position:c="bottom-end",timeout:d=5e3,limit:p=3,width:m=380,closeLabel:f,children:u}){const h=o(),v=a(),g=f??v.close,x=r??h.size??"md",b=n??h.color??"primary",y=l??h.density??"default";return e(i.Provider,{timeout:d,limit:p,children:[u,t(ToastViewport,{position:c,variant:s,size:x,color:b,density:y,width:m,closeLabel:g})]})}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsxs as
|
|
1
|
+
"use client";import{jsx as s,jsxs as e}from"react/jsx-runtime";import*as o from"react";import{glowPointerMove as l}from"../../internal/glow.js";import{useDefaults as a}from"../../internal/defaults.js";import{Toggle as r}from"@base-ui/react/toggle";import{ButtonGroupContext as t}from"../../internal/button-group.js";import{useDisabled as i}from"../../internal/form.js";import{controlHeightClasses as p,controlSlots as n,controlSquareClasses as g,controlTextClasses as v,disabledClasses as d,focusRingClasses as h,forcedEdgeClasses as m,forcedPressedClasses as x,gapClasses as c,glassClasses as f,hasContent as b,iconClasses as $,paddingXClasses as u,radiusClasses as j,transitionClasses as w}from"../../internal/styles.js";const y={xs:`${p.xs} ${c.xs} ${j.xs} ${v.xs}`,sm:`${p.sm} ${c.sm} ${j.sm} ${v.sm}`,md:`${p.md} ${c.md} ${j.md} ${v.md}`,lg:`${p.lg} ${c.lg} ${j.lg} ${v.lg}`,xl:`${p.xl} ${c.xl} ${j.xl} ${v.xl}`},P={xs:`${g.xs} px-0`,sm:`${g.sm} px-0`,md:`${g.md} px-0`,lg:`${g.lg} px-0`,xl:`${g.xl} px-0`},z=/* @__PURE__ */["relative inline-flex shrink-0 select-none items-center justify-center","whitespace-nowrap align-middle font-semibold leading-none","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",w,h,$].join(" "),C={solid:/* @__PURE__ */[f,"text-(--plass-muted-fg) bg-(--plass-glass-hover)","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]",m].join(" "),glass:/* @__PURE__ */[f,"border text-(--plass-muted-fg) bg-(--plass-glass)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]"].join(" "),ghost:"text-(--plass-muted-fg) bg-transparent"},N={solid:/* @__PURE__ */["hover:bg-(--plass-glass-press) hover:text-(--plass-fg)","hover:[box-shadow:var(--p-elev-hover),var(--plass-gloss-glass)]","active:[box-shadow:var(--p-elev-press),var(--plass-gloss-glass)]"].join(" "),glass:/* @__PURE__ */["hover:bg-(--plass-glass-hover) hover:text-(--plass-fg) hover:[border-color:var(--p-line)]","hover:[box-shadow:var(--p-elev-hover),var(--plass-gloss-glass)]","active:bg-(--plass-glass-press)","active:[box-shadow:var(--p-elev-press),var(--plass-gloss-glass)]"].join(" "),ghost:"hover:bg-(--plass-glass-hover) hover:text-(--plass-fg) active:bg-(--plass-glass-press)"},T={solid:/* @__PURE__ */["text-(--p-on-solid) [--p-fill-on:1]","[box-shadow:var(--p-elev),var(--p-lift)]",x].join(" "),glass:/* @__PURE__ */[f,"border text-(--p-accent) bg-(--p-soft)","[border-color:var(--p-line-hover)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]",x].join(" "),ghost:`text-(--p-accent) bg-(--p-soft) ${x}`},k={solid:/* @__PURE__ */["hover:brightness-105 hover:[box-shadow:var(--p-elev-hover),var(--p-lift-hover)]","active:brightness-95 active:[box-shadow:var(--p-elev-press),var(--p-lift-press)]"].join(" "),glass:"hover:bg-(--p-soft-hover) active:bg-(--p-soft-press)",ghost:"hover:bg-(--p-soft-hover) active:bg-(--p-soft-press)"};export const PlToggle=/* @__PURE__ */o.forwardRef(function PlToggle({variant:p,size:g,color:v,density:h,elevation:m,pressed:x,defaultPressed:c,onPressedChange:f,value:$,startIcon:j,endIcon:w,fullWidth:I=!1,disabled:M,className:B,style:R,children:W,onPointerMove:q,...A},D){const E=a(),F=o.useContext(t),G=p??F?.variant??"glass",H=g??F?.size??E.size??"md",J=v??F?.color??E.color??"primary",K=h??F?.density??E.density??"default",L=m??F?.elevation??0,O=i(M??F?.disabled),Q=!b(W);return e(r,{ref:D,value:$,pressed:x,defaultPressed:c,onPressedChange:s=>f?.(s),disabled:O,className:s=>[z,y[H],Q?P[H]:u[K][H],O?d[G]:s.pressed?`${T[G]} ${k[G]}`:`${C[G]} ${N[G]}`,O?"":"plass-glow cursor-pointer",I?"w-full":"",B??""].filter(Boolean).join(" "),style:{...n(J,L,G),...R},onPointerMove:l(!O,q),...A,children:["solid"===G?s("span",{"aria-hidden":"true",className:"plass-fill-layer"}):null,j,W,w]})});
|
|
@@ -55,6 +55,10 @@ export interface PlTooltipProps extends Pick<PlassStyleProps, 'size' | 'color' |
|
|
|
55
55
|
/**
|
|
56
56
|
* Stops the tooltip from opening at all, without disabling the trigger. For
|
|
57
57
|
* the tooltip that only exists while a label is truncated.
|
|
58
|
+
*
|
|
59
|
+
* One that is up when this turns on closes, and `onOpenChange` hears it
|
|
60
|
+
* close. A controlled `open` shows nothing while this is on, and is answered
|
|
61
|
+
* with `false`.
|
|
58
62
|
* @default false
|
|
59
63
|
*/
|
|
60
64
|
disabled?: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as s,jsxs as e}from"react/jsx-runtime";import*as o from"react";import{useDefaults as a}from"../../internal/defaults.js";import{Tooltip as t}from"@base-ui/react/tooltip";import{PopupArrow as
|
|
1
|
+
"use client";import{jsx as s,jsxs as e}from"react/jsx-runtime";import*as o from"react";import{useDefaults as a}from"../../internal/defaults.js";import{Tooltip as t}from"@base-ui/react/tooltip";import{PopupArrow as r}from"../../internal/picker.js";import{glassClasses as l,metaTextClasses as i,paddingXClasses as n,radiusClasses as d,surfaceSlots as p}from"../../internal/styles.js";export const PlTooltipProvider=t.Provider;const c=/* @__PURE__ */[l,"max-w-64 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","data-[instant]:[transition-duration:0ms]","motion-reduce:[transition-duration:0ms]"].join(" "),m={xs:"py-0.5",sm:"py-0.5",md:"py-1",lg:"py-1.5",xl:"py-2"},y={xs:6,sm:7,md:8,lg:9,xl:10};export function PlTooltip({content:l,children:u,size:f,color:g,density:x,side:b="top",align:h="center",sideOffset:j=6,delay:v,closeDelay:P,arrow:O=!0,open:w,defaultOpen:z,onOpenChange:T,disabled:N=!1,className:C,style:D,..._}){const k=a(),A=f??k.size??"sm",B=g??k.color??"secondary",I=x??k.density??"default",R=y[A],S=o.useId(),[q,E]=o.useState(z??!1),F=!N&&(w??q);return e(t.Root,{open:w,defaultOpen:z,disabled:N,onOpenChange:s=>{E(s),T?.(s)},children:[s(t.Trigger,{render:u,delay:v,closeDelay:P,disabled:N,"aria-describedby":F?S:void 0}),s(t.Portal,{children:s(t.Positioner,{className:"plass-portal z-(--plass-z-portal) [outline:none]",side:b,align:h,sideOffset:j,children:e(t.Popup,{id:S,role:"tooltip",className:[c,d[A],n[I][A],m[A],i[A],C??""].filter(Boolean).join(" "),style:{...p(B,3),...D},..._,children:[O?s(r,{as:t.Arrow,size:R}):null,l]})})})]})}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as
|
|
1
|
+
"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as s from"react";import{Popover as n}from"@base-ui/react/popover";import{PlButton as i}from"../button/index.js";import{useDefaults as o}from"../../internal/defaults.js";import{CloseIcon as a}from"../../internal/icons.js";import{useLabels as l}from"../../internal/labels.js";import{reducedMotionQuery as r}from"../../internal/media.js";import{inflate as c,spotlightPath as d}from"../../internal/tour.js";import{cx as m,focusRingClasses as p,glassClasses as u,hasContent as f,metaTextClasses as h,radiusClasses as g,sheetBodyClasses as v,sheetHeaderGapClasses as x,sheetPaddingXClasses as b,sheetPaddingYClasses as w,sheetSectionGapClasses as y,sheetTitleClasses as k,surfaceSlots as z,targetClasses as j}from"../../internal/styles.js";const N={xs:"max-w-56",sm:"max-w-64",md:"max-w-80",lg:"max-w-96",xl:"max-w-lg"},_={xs:"xs",sm:"xs",md:"sm",lg:"sm",xl:"md"},C={xs:6,sm:8,md:10,lg:12,xl:14},L=/* @__PURE__ */[u,"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)]","motion-reduce:[transition-duration:0ms]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),E=/* @__PURE__ */[j,"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)]","motion-reduce:[transition-duration:0ms]","hover:bg-(--p-soft) hover:text-(--plass-fg)",p].join(" "),O={getBoundingClientRect:()=>DOMRect.fromRect({x:window.innerWidth/2,y:window.innerHeight/2,width:0,height:0})},centreOnAnchor=({positioner:e})=>-e.height/2;function resolve(e){return void 0===e?null:"string"==typeof e?document.querySelector(e):"function"==typeof e?e()??null:e.current??null}export function PlTour({steps:p,open:u,defaultOpen:j=!1,onOpenChange:P,step:R,defaultStep:S=0,onStepChange:M,onFinish:F,mask:q=!0,skippable:A=!0,dismissible:B=!0,scrollIntoView:D=!0,previousLabel:I,nextLabel:T,doneLabel:V,skipLabel:H,size:W,color:G,density:J,className:K,classNames:Q}){const U=o(),X=l(),Y=W??U.size??"md",Z=G??U.color??"primary",$=J??U.density??"default",[ee,te]=s.useState(j),[se,ne]=s.useState(S),ie=u??ee,oe=Math.min(R??se,Math.max(0,p.length-1)),ae=p[oe],[le,re]=s.useState(null),setOpen=e=>{void 0===u&&te(e),P?.(e)},goTo=e=>{void 0===R&&ne(e),M?.(e)},ce=ae?.target,de=ae?.padding??6,[me,pe]=s.useState(null);if(s.useLayoutEffect(()=>{pe(ie?resolve(ce):null)},[ie,ce,oe]),s.useEffect(()=>{if(!ie)return;const e=resolve(ce);if(!(e instanceof Element))return;if(D){const t=window.matchMedia?.(r).matches;e.scrollIntoView({block:"center",inline:"nearest",behavior:t?"instant":"smooth"})}let t=0;const read=()=>{t=0;const s=e.getBoundingClientRect();re({at:oe,spot:c({top:s.top,left:s.left,width:s.width,height:s.height},de)})},schedule=()=>{0===t&&(t=requestAnimationFrame(read))};read();const s="undefined"==typeof ResizeObserver?null:new ResizeObserver(schedule);return s?.observe(e),window.addEventListener("scroll",schedule,{passive:!0,capture:!0}),window.addEventListener("resize",schedule,{passive:!0}),()=>{0!==t&&cancelAnimationFrame(t),s?.disconnect(),window.removeEventListener("scroll",schedule,!0),window.removeEventListener("resize",schedule)}},[ie,ce,de,oe,D]),0===p.length)return null;const ue=ie&&le?.at===oe?le.spot:null,fe=0===oe,he=oe===p.length-1,ge=b[$][Y],ve=w[$][Y],xe=_[Y],be=f(ae?.title)||f(ae?.content);return e(n.Root,{open:ie,onOpenChange:(e,t)=>{(e||B||"escape-key"!==t.reason)&&(e||"outside-press"!==t.reason&&"focus-out"!==t.reason)?setOpen(e):t.cancel()},children:t(n.Portal,{children:[ie&&q?e("div",{"aria-hidden":"true","data-testid":"plass-tour-mask",className:m("plass-portal fixed inset-0 z-(--plass-z-portal)","bg-(--plass-scrim) [backdrop-filter:blur(2px)] [-webkit-backdrop-filter:blur(2px)]","[transition:opacity_var(--plass-duration-slow)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]",Q?.mask),style:{clipPath:d(ue,ae?.radius??C[Y])}}):null,e(n.Positioner,{className:"plass-portal z-(--plass-z-portal) [outline:none]",side:me?ae?.side??"bottom":"bottom",align:me?ae?.align??"center":"center",sideOffset:me?10:centreOnAnchor,collisionPadding:12,anchor:me??O,children:t(n.Popup,{className:m(L,g[Y],v[Y],y[Y],N[Y],ge,ve,K),style:z(Z,3),children:[be?t("div",{className:"flex items-start gap-3",children:[t("div",{"aria-live":"polite","aria-atomic":"true",className:m("flex min-w-0 flex-1 flex-col",x[Y]),children:[f(ae?.title)?e(n.Title,{className:m("m-0 font-semibold",k[Y],Q?.title),children:ae?.title}):null,f(ae?.content)?e(n.Description,{className:m("m-0 min-w-0",Q?.content),children:ae?.content}):null]}),B?e("button",{type:"button","aria-label":X.close,onClick:()=>setOpen(!1),className:m(E,Q?.close),children:e(a,{})}):null]}):null,t("div",{className:m("flex items-center gap-2",Q?.footer),children:[t("span",{className:m("shrink-0 tabular-nums text-(--plass-muted-fg)",h[Y]),children:[oe+1," / ",p.length]}),t("div",{className:"ms-auto flex items-center gap-2",children:[A&&!he?e(i,{size:xe,variant:"ghost",color:"secondary",onClick:()=>setOpen(!1),children:H??X.skip}):null,fe?null:e(i,{size:xe,variant:"ghost",color:Z,onClick:()=>goTo(oe-1),children:I??X.previous}),e(i,{size:xe,color:Z,onClick:()=>he?(F?.(),void setOpen(!1)):goTo(oe+1),children:he?V??X.done:T??X.next})]})]})]})})]})})}
|
|
@@ -28,8 +28,11 @@ export interface PlTransferProps extends PlassStyleProps, Omit<React.ComponentPr
|
|
|
28
28
|
/** What a list with nothing in it says. @default 'Nothing here' */
|
|
29
29
|
emptyLabel?: string;
|
|
30
30
|
/**
|
|
31
|
-
* What the tick in a list's heading is announced as, before the
|
|
32
|
-
*
|
|
31
|
+
* What the tick in a list's heading is announced as, before the name of its
|
|
32
|
+
* list, so the two ticks are told apart by ear. Left out, the label pack's
|
|
33
|
+
* `transferSelectAll` says the whole sentence and puts the name where each
|
|
34
|
+
* language puts it.
|
|
35
|
+
* @default `Select all in {list}`, from the label pack
|
|
33
36
|
*/
|
|
34
37
|
selectAllLabel?: string;
|
|
35
38
|
/** What the two arrows are announced as. */
|