plass-ui 1.4.0 → 1.6.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 +432 -0
- package/README.md +45 -23
- package/dist/components/accordion/PlAccordion.d.ts +1 -1
- package/dist/components/alert/PlAlert.js +1 -1
- package/dist/components/anchor/PlAnchor.d.ts +14 -1
- package/dist/components/anchor/PlAnchor.js +1 -1
- package/dist/components/animate-appear/PlAnimateAppear.js +1 -1
- package/dist/components/animate-blink/PlAnimateBlink.js +1 -1
- package/dist/components/animate-counter/PlAnimateCounter.js +1 -1
- package/dist/components/animate-fade/PlAnimateFade.js +1 -1
- package/dist/components/animate-float/PlAnimateFloat.js +1 -1
- package/dist/components/animate-grow/PlAnimateGrow.js +1 -1
- package/dist/components/animate-headline/PlAnimateHeadline.js +1 -1
- package/dist/components/animate-lighting/PlAnimateLighting.js +1 -1
- package/dist/components/animate-marquee/PlAnimateMarquee.d.ts +16 -4
- package/dist/components/animate-marquee/PlAnimateMarquee.js +1 -1
- package/dist/components/animate-reveal/PlAnimateReveal.js +1 -1
- package/dist/components/animate-rotate/PlAnimateRotate.js +1 -1
- package/dist/components/animate-scramble/PlAnimateScramble.js +1 -1
- package/dist/components/animate-shake/PlAnimateShake.js +1 -1
- package/dist/components/animate-slide/PlAnimateSlide.js +1 -1
- package/dist/components/animate-split/PlAnimateSplit.d.ts +7 -4
- package/dist/components/animate-split/PlAnimateSplit.js +1 -1
- package/dist/components/animate-typing/PlAnimateTyping.d.ts +3 -2
- package/dist/components/animate-typing/PlAnimateTyping.js +1 -1
- package/dist/components/animate-zoom/PlAnimateZoom.js +1 -1
- package/dist/components/app-logo/PlAppLogo.js +1 -1
- package/dist/components/area-chart/PlAreaChart.d.ts +1 -1
- package/dist/components/area-chart/PlAreaChart.js +1 -1
- package/dist/components/aspect-ratio/PlAspectRatio.d.ts +2 -1
- package/dist/components/aspect-ratio/PlAspectRatio.js +1 -1
- package/dist/components/avatar/PlAvatar.js +1 -1
- package/dist/components/back-top/PlBackTop.d.ts +8 -1
- package/dist/components/back-top/PlBackTop.js +1 -1
- package/dist/components/badge/PlBadge.js +1 -1
- package/dist/components/bar-chart/PlBarChart.d.ts +1 -1
- package/dist/components/bar-chart/PlBarChart.js +1 -1
- package/dist/components/blockquote/PlBlockquote.js +1 -1
- package/dist/components/bottom-navigation/PlBottomNavigation.d.ts +3 -0
- package/dist/components/breadcrumb/PlBreadcrumb.js +1 -1
- package/dist/components/button/PlButton.d.ts +8 -0
- package/dist/components/button/PlButton.js +1 -1
- package/dist/components/calendar/PlCalendar.js +1 -1
- package/dist/components/card/PlCard.js +1 -1
- package/dist/components/carousel/PlCarousel.d.ts +1 -1
- package/dist/components/carousel/PlCarousel.js +1 -1
- package/dist/components/chat-bubble/PlChatBubble.d.ts +4 -1
- package/dist/components/chat-bubble/PlChatBubble.js +1 -1
- package/dist/components/checkbox/PlCheckbox.js +1 -1
- package/dist/components/chip/PlChip.d.ts +6 -2
- package/dist/components/chip/PlChip.js +1 -1
- package/dist/components/code-block/PlCodeBlock.d.ts +19 -2
- package/dist/components/code-block/PlCodeBlock.js +1 -1
- package/dist/components/color-picker/PlColorPicker.d.ts +19 -2
- package/dist/components/color-picker/PlColorPicker.js +1 -1
- package/dist/components/combobox/PlCombobox.d.ts +14 -7
- package/dist/components/combobox/PlCombobox.js +1 -1
- package/dist/components/command-palette/PlCommandPalette.d.ts +6 -2
- package/dist/components/command-palette/PlCommandPalette.js +1 -1
- package/dist/components/confirm/PlConfirmProvider.js +1 -1
- package/dist/components/container/PlContainer.js +1 -1
- package/dist/components/data-table/PlDataTable.d.ts +20 -6
- package/dist/components/data-table/PlDataTable.js +1 -1
- package/dist/components/date-picker/PlDatePicker.js +1 -1
- package/dist/components/date-range-picker/PlDateRangePicker.js +1 -1
- package/dist/components/date-time-picker/PlDateTimePicker.js +1 -1
- package/dist/components/drawer/PlDrawer.js +1 -1
- package/dist/components/empty/PlEmpty.js +1 -1
- package/dist/components/file-picker/PlFilePicker.d.ts +22 -3
- package/dist/components/file-picker/PlFilePicker.js +1 -1
- package/dist/components/floating-bottom-navigation/PlFloatingBottomNavigation.d.ts +3 -0
- package/dist/components/floating-bottom-navigation/PlFloatingBottomNavigation.js +1 -1
- package/dist/components/form/PlForm.js +1 -1
- package/dist/components/gallery/PlGallery.d.ts +40 -2
- package/dist/components/gallery/PlGallery.js +1 -1
- package/dist/components/gallery/PlGalleryViewer.js +1 -1
- package/dist/components/gauge-chart/PlGaugeChart.js +1 -1
- package/dist/components/heatmap-chart/PlHeatmapChart.js +1 -1
- package/dist/components/highlight/PlHighlight.d.ts +10 -3
- package/dist/components/highlight/PlHighlight.js +1 -1
- package/dist/components/hot-keys/PlHotKeys.js +1 -1
- package/dist/components/hover-card/PlHoverCard.d.ts +5 -3
- package/dist/components/hover-card/PlHoverCard.js +1 -1
- package/dist/components/how-to-steps/PlHowToSteps.js +1 -1
- package/dist/components/image/PlImage.d.ts +195 -8
- package/dist/components/image/PlImage.js +1 -1
- package/dist/components/image/PlImagePreview.d.ts +58 -0
- package/dist/components/image/PlImagePreview.js +1 -0
- package/dist/components/image/index.d.ts +1 -1
- package/dist/components/list/PlList.js +1 -1
- package/dist/components/menu/PlMenu.d.ts +14 -5
- package/dist/components/menu/PlMenu.js +1 -1
- package/dist/components/meter/PlMeter.js +1 -1
- package/dist/components/navigation-menu/PlNavigationMenu.d.ts +7 -1
- package/dist/components/navigation-menu/PlNavigationMenu.js +1 -1
- package/dist/components/number-field/PlNumberField.d.ts +12 -4
- package/dist/components/number-field/PlNumberField.js +1 -1
- package/dist/components/otp-field/PlOtpField.d.ts +15 -1
- package/dist/components/otp-field/PlOtpField.js +1 -1
- package/dist/components/page-layout/PlPageLayout.js +1 -1
- package/dist/components/pagination/PlPagination.d.ts +12 -9
- package/dist/components/pagination/PlPagination.js +1 -1
- package/dist/components/panes/PlPanes.d.ts +5 -0
- package/dist/components/panes/PlPanes.js +1 -1
- package/dist/components/pie-chart/PlPieChart.js +1 -1
- package/dist/components/pill/PlPill.js +1 -1
- package/dist/components/popover/PlPopover.d.ts +5 -5
- 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.d.ts +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/scroll-zone/PlScrollZone.d.ts +19 -6
- package/dist/components/scroll-zone/PlScrollZone.js +1 -1
- package/dist/components/segmented-button/PlSegmentedButton.js +1 -1
- package/dist/components/select/PlSelect.d.ts +8 -2
- package/dist/components/select/PlSelect.js +1 -1
- package/dist/components/show/PlShow.d.ts +16 -0
- package/dist/components/show/PlShow.js +1 -1
- package/dist/components/sidebar/PlSidebar.js +1 -1
- package/dist/components/sidebar/PlSidebarTrigger.js +1 -1
- package/dist/components/skeleton/PlSkeleton.js +1 -1
- package/dist/components/slider/PlSlider.d.ts +13 -1
- package/dist/components/slider/PlSlider.js +1 -1
- package/dist/components/sparkline/PlSparkline.js +1 -1
- package/dist/components/spoiler/PlSpoiler.d.ts +15 -8
- package/dist/components/spoiler/PlSpoiler.js +1 -1
- package/dist/components/stat/PlStat.d.ts +4 -0
- package/dist/components/stat/PlStat.js +1 -1
- package/dist/components/stepper/PlStepper.d.ts +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 +5 -5
- package/dist/components/tabs/PlTabs.d.ts +26 -1
- package/dist/components/tabs/PlTabs.js +1 -1
- package/dist/components/text-field/PlTextField.d.ts +15 -5
- package/dist/components/text-field/PlTextField.js +1 -1
- package/dist/components/text-link/PlTextLink.js +1 -1
- package/dist/components/time-picker/PlTimePicker.js +1 -1
- package/dist/components/timeline/PlTimeline.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.js +1 -1
- package/dist/components/tour/PlTour.js +1 -1
- package/dist/components/transfer/PlTransfer.d.ts +10 -1
- package/dist/components/transfer/PlTransfer.js +1 -1
- package/dist/components/tree/PlTree.js +1 -1
- package/dist/components/tree-select/PlTreeSelect.js +1 -1
- package/dist/components/typography/PlTypography.js +1 -1
- package/dist/components/window-pane/PlWindowPane.d.ts +3 -3
- package/dist/components/window-pane/PlWindowPane.js +1 -1
- package/dist/css/area-chart.css +1 -0
- package/dist/css/back-top.css +2 -0
- package/dist/css/bar-chart.css +1 -0
- package/dist/css/calendar.css +1 -0
- package/dist/css/carousel.css +2 -0
- package/dist/css/color-picker.css +1 -0
- package/dist/css/combobox.css +1 -0
- package/dist/css/command-palette.css +1 -0
- package/dist/css/confirm.css +2 -0
- package/dist/css/data-table.css +5 -0
- package/dist/css/date-picker.css +1 -0
- package/dist/css/date-range-picker.css +1 -0
- package/dist/css/date-time-picker.css +1 -0
- package/dist/css/floating-action-button.css +2 -0
- package/dist/css/gallery.css +5 -0
- package/dist/css/gauge-chart.css +1 -0
- package/dist/css/heatmap-chart.css +1 -0
- package/dist/css/icon-button.css +1 -0
- package/dist/css/image.css +2 -0
- package/dist/css/line-chart.css +1 -0
- package/dist/css/menubar.css +1 -0
- package/dist/css/pagination.css +1 -0
- package/dist/css/pie-chart.css +1 -0
- package/dist/css/popconfirm.css +2 -0
- package/dist/css/scatter-chart.css +1 -0
- package/dist/css/scroll-zone.css +2 -0
- package/dist/css/sidebar.css +3 -0
- package/dist/css/sparkline.css +1 -0
- package/dist/css/spoiler.css +1 -0
- package/dist/css/stat.css +1 -0
- package/dist/css/time-picker.css +1 -0
- package/dist/css/timeline-chart.css +1 -0
- package/dist/css/tour.css +1 -0
- package/dist/css/transfer.css +4 -0
- package/dist/css/tree-select.css +2 -0
- package/dist/hooks/usePlElementSize.d.ts +4 -1
- package/dist/hooks/usePlElementSize.js +1 -1
- package/dist/hooks/usePlHotKeys.d.ts +5 -1
- package/dist/hooks/usePlHotKeys.js +1 -1
- package/dist/hooks/usePlOnScreen.d.ts +4 -0
- package/dist/hooks/usePlOnScreen.js +1 -1
- package/dist/internal/animate.d.ts +24 -21
- package/dist/internal/animate.js +1 -1
- package/dist/internal/calendar.js +1 -1
- package/dist/internal/chart-frame.d.ts +3 -14
- package/dist/internal/chart-frame.js +1 -1
- package/dist/internal/chart-line.js +1 -1
- package/dist/internal/chart.d.ts +90 -3
- package/dist/internal/chart.js +1 -1
- package/dist/internal/color-scheme.js +1 -1
- package/dist/internal/data-table.d.ts +5 -4
- package/dist/internal/data-table.js +1 -1
- package/dist/internal/date.d.ts +10 -0
- package/dist/internal/date.js +1 -1
- package/dist/internal/defaults.d.ts +14 -1
- package/dist/internal/drag.d.ts +16 -0
- package/dist/internal/drag.js +1 -1
- package/dist/internal/focusable.d.ts +8 -0
- package/dist/internal/focusable.js +1 -0
- package/dist/internal/form.d.ts +61 -0
- package/dist/internal/form.js +1 -0
- package/dist/internal/gallery.d.ts +60 -14
- package/dist/internal/gallery.js +1 -1
- package/dist/internal/glow.d.ts +32 -0
- package/dist/internal/glow.js +1 -0
- package/dist/internal/highlight.js +1 -1
- package/dist/internal/image.d.ts +94 -0
- package/dist/internal/image.js +1 -0
- package/dist/internal/inert.d.ts +19 -0
- package/dist/internal/inert.js +1 -0
- package/dist/internal/keys.d.ts +19 -0
- package/dist/internal/keys.js +1 -1
- package/dist/internal/labels.d.ts +58 -1
- package/dist/internal/labels.js +1 -1
- package/dist/internal/link.d.ts +17 -0
- package/dist/internal/link.js +1 -1
- package/dist/internal/notch.d.ts +83 -0
- package/dist/internal/notch.js +1 -0
- package/dist/internal/page-layout.d.ts +14 -7
- package/dist/internal/page-layout.js +1 -1
- package/dist/internal/picker.d.ts +51 -8
- package/dist/internal/picker.js +1 -1
- package/dist/internal/progress.d.ts +16 -8
- package/dist/internal/progress.js +1 -1
- package/dist/internal/scramble.d.ts +4 -0
- package/dist/internal/scramble.js +1 -1
- package/dist/internal/scroll-target.d.ts +5 -0
- package/dist/internal/scroll-target.js +1 -0
- package/dist/internal/steps.js +1 -1
- package/dist/internal/styles.d.ts +87 -0
- package/dist/internal/styles.js +1 -1
- package/dist/internal/text.d.ts +39 -0
- package/dist/internal/text.js +1 -0
- package/dist/internal/watermark.d.ts +44 -0
- package/dist/internal/watermark.js +1 -0
- package/dist/internal/wheel.d.ts +52 -0
- package/dist/internal/wheel.js +1 -0
- package/dist/internal/window.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/provider/PlColorSchemeScript.js +1 -1
- package/dist/provider/PlassProvider.d.ts +4 -3
- package/dist/provider/PlassProvider.js +1 -1
- package/dist/styles.css +1 -1
- package/dist/tailwind.css +313 -15
- package/dist/tokens.css +313 -15
- package/dist/types.d.ts +71 -29
- package/package.json +15 -15
|
@@ -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 l}from"../../internal/labels.js";import{useRender as i}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",/* @__PURE__ */["[transition-property:color,text-decoration-color]","[transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]"].join(" "),c,"focus-visible:rounded-[0.25rem]"].join(" ");export const PlTextLink=/* @__PURE__ */s.forwardRef(function PlTextLink({href:c,underline:f="always",color:
|
|
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 l}from"../../internal/labels.js";import{useRender as i}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",/* @__PURE__ */["[transition-property:color,text-decoration-color]","[transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]"].join(" "),c,"focus-visible:rounded-[0.25rem]"].join(" ");export const PlTextLink=/* @__PURE__ */s.forwardRef(function PlTextLink({href:c,underline:f="always",color:h,size:v,newTab:k=!1,icon:b,startIcon:g,newTabLabel:j,render:x,className:y,style:w,children:_,...N},T){const L=l(),z=j??L.newTab,C=b??k,P=!0===C?n(k?a:o,{}):C,$=[u,v?t[v]:"",d[f],h?"[&.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-${h??"primary"}-ring)`,...h?{"--p-accent":`var(--plass-${h}-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 i({render:x??n("a",{}),ref:T,props:{...E?null:{href:c},target:V,className:$,style:{...B,...w},children:r(e,{children:[g?n("span",{className:"me-[0.25em]",children:g}):null,_,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
|
|
1
|
+
"use client";import{jsx as e,jsxs as o}from"react/jsx-runtime";import*as n from"react";import{useDefaults as l}from"../../internal/defaults.js";import{PlButton as t}from"../button/PlButton.js";import{TimeGrid as s,usePickerLabels as r}from"../../internal/calendar.js";import{ClockIcon as a}from"../../internal/icons.js";import{PickerFooter as i,PickerShell as c}from"../../internal/picker.js";import{displaySamples as d,formatDate as u,isHour12 as m,isValidDate as p,secondsOfDay as h,timeUnitSpan as f,toISOTime as g,withPlaceholder as y,withTime as S}from"../../internal/date.js";import{cx as b}from"../../internal/styles.js";export const PlTimePicker=/* @__PURE__ */n.forwardRef(function PlTimePicker({value:j,defaultValue:v,onValueChange:C,open:w,defaultOpen:z,onOpenChange:k,referenceDate:x,minTime:D,maxTime:O,shouldDisableTime:T,hour12:P,showSeconds:M=!1,hourStep:V=1,minuteStep:B=1,secondStep:I=1,locale:N,format:R,placeholder:F,clearable:H=!1,showNowButton:q=!0,closeOnSelect:A=!1,labels:E,name:G,size:J,color:K,density:L,readOnly:Q=!1,disabled:U=!1,startIcon:W,...X},Y){const Z=l(),$=N??Z.locale,_=J??Z.size??"md",ee=K??Z.color??"primary",oe=L??Z.density??"default",ne=r(E),le=P??m($),[te,se]=n.useState(v??null),re=void 0!==j?j:te,[ae,ie]=n.useState(z??!1),ce=w??ae,[de]=n.useState(()=>x??new Date),setOpen=e=>{e&&(Q||U)||(void 0===w&&ie(e),k?.(e))},commit=e=>{void 0===j&&se(e),C?.(e)},ue=n.useCallback((e,o)=>{const[n,l]=f(o,e);return!!(p(D)&&l<h(D))||!!(p(O)&&n>h(O))||(T?.(e,o)??!1)},[D,O,T]),me=n.useMemo(()=>R??{hour:"numeric",minute:"2-digit",...M?{second:"2-digit"}:{}},[R,M]),pe=new Date,he=S(x??de,{hours:pe.getHours(),minutes:pe.getMinutes(),seconds:M?pe.getSeconds():0}),fe=q||H||!A,ge=n.useMemo(()=>y(d($,me),F),[$,me,F]);return e(c,{...X,size:_,color:ee,density:oe,readOnly:Q,disabled:U,triggerRef:Y,startIcon:W??e(a,{}),display:p(re)?u(re,$,me):F??"",samples:ge,empty:!p(re),clearable:H,onClear:()=>commit(null),open:ce,onOpenChange:setOpen,labels:ne,name:G,formValue:p(re)?g(re,M):"",children:o("div",{className:b("flex flex-col",fe&&"gap-1.5"),children:[e(s,{size:_,density:oe,locale:$,value:p(re)?re:null,referenceDate:x??de,onChange:e=>{commit(e),A&&setOpen(!1)},hour12:le,showSeconds:M,hourStep:V,minuteStep:B,secondStep:I,shouldDisableTime:ue,labels:ne,autoFocus:!0}),fe?o(i,{size:_,children:[H?e(t,{variant:"ghost",size:_,color:ee,density:"compact",onClick:()=>{commit(null),setOpen(!1)},children:ne.clear}):null,q?e(t,{variant:"ghost",size:_,color:ee,density:"compact",disabled:ue(he,"second"),onClick:()=>{commit(he),setOpen(!1)},children:ne.now}):null,A?null:e(t,{variant:"solid",size:_,color:ee,density:"compact",onClick:()=>setOpen(!1),children:ne.done})]}):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{useRender as s}from"@base-ui/react/use-render";import{cx as
|
|
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{useRender as s}from"@base-ui/react/use-render";import{cx as n,hasContent as a,iconClasses as i,metaTextClasses as o,sheetBodyClasses as c,sheetTitleClasses as p,surfaceSlots as m,transitionClasses as d}from"../../internal/styles.js";import{bulletGapClasses as u,bulletSizeValues as f,bulletStatusClasses as x,connectorColorClasses as b,connectorStyleClasses as v,statusAt as h,titleStatusClasses as y}from"../../internal/steps.js";import{useResponsiveValue as N}from"../../internal/responsive.js";const g=/* @__PURE__ */t.createContext(null),j=/* @__PURE__ */t.createContext({index:0,last:!1}),z={default:{xs:"pb-5",sm:"pb-6",md:"pb-7",lg:"pb-8",xl:"pb-10"},compact:{xs:"pb-3",sm:"pb-3.5",md:"pb-4",lg:"pb-5",xl:"pb-6"}},w={default:{xs:"pe-5",sm:"pe-6",md:"pe-7",lg:"pe-8",xl:"pe-10"},compact:{xs:"pe-3",sm:"pe-3.5",md:"pe-4",lg:"pe-5",xl:"pe-6"}};export const PlTimelineItem=/* @__PURE__ */t.forwardRef(function PlTimelineItem({title:r,meta:s,bullet:N,status:P,color:C,connector:T="solid",className:_,children:k,...I},R){const $=t.useContext(g),{index:A,last:E}=t.useContext(j),M=$?.size??"md",V=$?.density??"default",q=$?.orientation??"vertical",B=C??$?.color??"primary",D=P??h(A,$?.active??null),F="horizontal"===q,G="none"!==T&&!E,H=e("span",{"aria-hidden":"true",className:n("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",x[D],d,i),children:N}),J=G?e("span",{"aria-hidden":"true",className:n("pointer-events-none absolute",F?"top-[calc(var(--p-bullet)/2_-_1px)] end-0 start-(--p-bullet) border-t-2":"top-(--p-bullet) bottom-0 start-[calc(var(--p-bullet)/2_-_1px)] border-s-2",v[T],b[D],d)}):null,K=l("div",{className:n("flex min-w-0 flex-col gap-0.5",F?"mt-2":""),children:[a(r)||a(s)?l("div",{className:"flex flex-wrap items-baseline gap-x-2",children:[a(r)?e("span",{className:n("font-semibold",p[M],y[D],d),children:r}):null,a(s)?e("span",{className:n("text-(--plass-muted-fg)",o[M]),children:s}):null]}):null,a(k)?e("div",{className:n("text-(--plass-muted-fg)",c[M]),children:k}):null]});return l("li",{ref:R,"aria-current":"current"===D?"step":void 0,"data-status":D,className:n("relative",F?n("flex min-w-0 flex-1 flex-col",E?"":w[V][M]):n("flex",u[M],E?"":z[V][M]),_),style:{"--p-bullet":f[M],...m(B,0),"--p-fill":`var(--plass-${B}-fill)`,"--p-on-solid":`var(--plass-${B}-on-solid)`},...I,children:[J,H,K]})});export const PlTimeline=/* @__PURE__ */t.forwardRef(function PlTimeline({active:l,size:a,color:i,density:o,orientation:c,render:p,className:d,style:u,children:f,...x},b){const v=N(c,"vertical"),h=r(),y=a??h.size??"md",z=i??h.color??"primary",w=o??h.density??"default",P=t.Children.toArray(f),C=P.length,T=t.useMemo(()=>({size:y,density:w,orientation:v,color:z,active:l??null}),[y,w,v,z,l]),_=s({render:p??e("ol",{}),ref:b,props:{role:"list",className:n("m-0 flex list-none p-0","horizontal"===v?"flex-row":"flex-col",d),style:{...m(z,0),...u},children:P.map((l,r)=>e(j.Provider,{value:{index:r,last:r===C-1},children:l},t.isValidElement(l)?l.key??r:r)),...x}});return e(g.Provider,{value:T,children:_})});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as t from"react";import{CartesianChart as
|
|
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 o}from"../../internal/chart-frame.js";import{barBandRatio as r,barMaxThickness as s,barRadius as l,formatTimeTicks as i,formatTimeValue as c,markGap as m,resolveColor as d,seriesColor as u,timeNeedsDate as h,timeScale as p,toNumber as x}from"../../internal/chart.js";import{srOnlyClasses as f}from"../../internal/styles.js";import{useDefaults as M}from"../../internal/defaults.js";import{useLabels as b}from"../../internal/labels.js";export function PlTimelineChart({series:n,min:o,max:l,barSize:d,rounded:f=!0,size:b,density:k,xAxis:y,yAxis:w,locale:g,...j}){const v=M(),$=b??v.size??"md",C=k??v.density??"default",T=g??v.locale,z=t.useMemo(()=>n.map(packRow),[n]),A=t.useMemo(()=>z.map(e=>e.spans),[z]),P=t.useMemo(()=>{let e=1/0,n=-1/0,t=!1;for(const a of A)for(const o of a)o&&(t=!0,e=Math.min(e,o.from),n=Math.max(n,o.to));return t?{min:e,max:n}:null},[A]),W=t.useMemo(()=>p(P,{min:x(o)??void 0,max:x(l)??void 0,tickCount:w?.tickCount}),[P,o,l,w?.tickCount]),E=t.useMemo(()=>i(W.ticks,W.unit,T),[W,T]),R=h(W.ticks,W.unit),S=t.useMemo(()=>n.map((e,n)=>u(e,n)),[n]),B=t.useMemo(()=>[{data:A.map(e=>e.some(Boolean)?1:null)}],[A]),D=t.useMemo(()=>n.map((e,n)=>e.name??`${n+1}`),[n]),I=d??s[$],N=t.useCallback(e=>{const n=[];return z.forEach((t,a)=>{const o=Math.min(I,Math.max(1,(e.band.band-m*(t.lanes-1))/t.lanes)),r=o*t.lanes+m*(t.lanes-1),s=e.plot.top+e.categoryPx(a)-r/2+o/2;t.spans.forEach((t,r)=>{if(!t||!inWindow(t,e.scale))return;const l=e.valuePx(Math.max(t.from,e.scale.min)),i=e.valuePx(Math.min(t.to,e.scale.max));n.push({series:a,index:r,x:(l+i)/2,y:s+t.lane*(o+m),r:o/2,rx:Math.max(0,(i-l)/2),ry:o/2})})}),n},[z,I]),F=t.useCallback(e=>{const n=A[e.series]?.[e.index];if(!n)return null;const t=[{seriesIndex:e.series,name:D[e.series],color:n.color??S[e.series],value:n.to-n.from,formatted:`${c(n.from,W.unit,T,R)} – ${c(n.to,W.unit,T,R)}`}];return{heading:n.span.label??D[e.series],items:t}},[A,D,S,W.unit,T,R]);return e(a,{...j,series:B,categories:D,size:$,density:C,locale:T,horizontal:!0,scale:W,xAxis:y,yAxis:{tickFormat:(e,n)=>E[n]??"",...w},legend:!1,bandRatio:r[C],marks:N,markTooltip:F,table:t=>e(TimelineTable,{id:t,names:D,series:n,spans:A,scale:W,withDate:R,label:j.label,corner:y?.label,locale:T}),children:n=>e(Spans,{context:n,spans:A,colors:S,rounded:f})})}function packRow(e){const n=e.data.map(e=>{const n=x(e.start),t=x(e.end);return null===n||null===t?null:{from:Math.min(n,t),to:Math.max(n,t),lane:0,color:e.color?d(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),a=-1===n?t.length:n;t[a]=e.to,e.lane=a}),{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:a,rounded:r}){const{marks:s,activeMark:i}=n,c=r?l:0;return e("g",{children:s.map(n=>{const r=t[n.series]?.[n.index];if(!r)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:r.color??a[n.series],opacity:s?1:.92,className:o},`${n.series}-${n.index}`)})})}function TimelineTable({id:t,names:a,series:o,spans:r,scale:s,withDate:l,label:i,corner:m,locale:d}){const u=b(),h=r.some((e,n)=>e.some((e,t)=>null!==e&&inWindow(e,s)&&void 0!==o[n].data[t]?.label));return n("table",{id:t,className:f,children:[i?e("caption",{children:i}):null,e("thead",{children:n("tr",{children:[e("th",{scope:"col",children:m??""}),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,i)=>t&&inWindow(t,s)?n("tr",{children:[e("th",{scope:"row",children:a[r]}),h?e("td",{children:o[r].data[i]?.label??""}):null,e("td",{children:c(t.from,s.unit,d,l)}),e("td",{children:c(t.to,s.unit,d,l)})]},`${r}-${i}`):null))})]})}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as t,jsxs as s}from"react/jsx-runtime";import*as e 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,
|
|
1
|
+
"use client";import{jsx as t,jsxs as s}from"react/jsx-runtime";import*as e 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 p,glassClasses as d,hasContent as m,iconClasses as f,metaTextClasses as u,radiusClasses as h,sheetBodyClasses as g,sheetHeaderGapClasses as v,sheetPaddingXClasses as x,sheetPaddingYClasses as b,sheetSectionGapClasses as y,sheetTitleClasses as w}from"../../internal/styles.js";const j={"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"},N={solid:/* @__PURE__ */["text-(--p-on-solid) [background-image:var(--p-fill)]","[box-shadow:var(--plass-shadow-3),var(--p-lift)]",p].join(" "),glass:/* @__PURE__ */[d,"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__ */[d,"text-(--plass-fg) bg-(--plass-glass-press)","[box-shadow:var(--plass-shadow-3),var(--plass-gloss-glass)]"].join(" ")},T={solid:"",glass:"text-(--p-accent)",ghost:"text-(--p-accent)"};function toManagerOptions(t){const{color:s,variant:e,icon:o,className:a,style:i,actionLabel:r,onAction:n,...l}=t;return{...l,data:{color:s,variant:e,icon:o,className:a,style:i},actionProps:void 0===r?void 0:{children:r,onClick:n}}}export function usePlToast(){const t=i.useToastManager();return e.useMemo(()=>({add:s=>t.add(toManagerOptions(s)),close:s=>t.close(s),update:(s,e)=>t.update(s,toManagerOptions(e)),promise:(s,e)=>t.promise(s,{loading:toManagerOptions(e.loading),success:t=>toManagerOptions("function"==typeof e.success?e.success(t):e.success),error:t=>toManagerOptions("function"==typeof e.error?e.error(t):e.error)}),toasts:t.toasts}),[t])}function ToastItem({toast:e,variant:o,color:a,size:p,density:d,closeLabel:j,swipeDirection:M}){const z=e.data?.variant??o??"glass",O=e.data?.color??a,P=void 0===e.data?.icon?n(O):e.data.icon,k=T[z],$=m(e.title);return s(i.Root,{toast:e,swipeDirection:M,className:["pointer-events-auto flex w-full items-start",x[d??"default"][p],b[d??"default"][p],h[p],y[p],g[p],N[z],f,"[transition:opacity_var(--plass-duration)_var(--plass-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0","data-[limited]:hidden",c,"[outline:none]",e.data?.className??""].filter(Boolean).join(" "),style:{...l(O,3,z),...e.data?.style},children:[m(P)?t("span",{className:`flex h-[1lh] shrink-0 items-center ${k}`,children:P}):null,s("div",{className:`flex min-w-0 flex-1 flex-col ${v[p]}`,children:[t(i.Title,{className:`plass-title m-0 font-semibold ${w[p]} ${k}`}),t(i.Description,{className:$&&"solid"!==z?"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",k||"text-(--p-on-solid)","hover:underline",c,u[p]].join(" ")}),t("span",{className:"flex h-[1lh] shrink-0 items-center",children:t(i.Close,{"aria-label":j,className:["inline-flex size-[1.15em] cursor-pointer items-center justify-center rounded-full","opacity-70 [transition:opacity_var(--plass-duration)_var(--plass-ease)]","hover:opacity-100 focus-visible:opacity-100",c].join(" "),children:t(r,{})})})]})}function ToastViewport(s){const{toasts:e}=i.useToastManager(),o=a(),{position:r,width:n,...l}=s,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",j[r]].join(" "),children:e.map(s=>t("div",{className:"w-full",style:{maxWidth:"number"==typeof n?`${n}px`:n},children:t(ToastItem,{toast:s,swipeDirection:c,...l})},s.id))})})}export function PlToastProvider({variant:e="glass",size:r,color:n,density:l,position:c="bottom-end",timeout:p=5e3,limit:d=3,width:m=380,closeLabel:f,children:u}){const h=o(),g=a(),v=f??g.close,x=r??h.size??"md",b=n??h.color??"primary",y=l??h.density??"default";return s(i.Provider,{timeout:p,limit:d,children:[u,t(ToastViewport,{position:c,variant:e,size:x,color:b,density:y,width:m,closeLabel:v})]})}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsxs as s}from"react/jsx-runtime";import*as e from"react";import{
|
|
1
|
+
"use client";import{jsxs as s}from"react/jsx-runtime";import*as e from"react";import{glowPointerMove as o}from"../../internal/glow.js";import{useDefaults as l}from"../../internal/defaults.js";import{Toggle as a}from"@base-ui/react/toggle";import{ButtonGroupContext as r}from"../../internal/button-group.js";import{controlHeightClasses as t,controlSlots as i,controlSquareClasses as p,controlTextClasses as g,disabledClasses as n,focusRingClasses as v,forcedEdgeClasses as d,forcedPressedClasses as h,gapClasses as x,glassClasses as c,hasContent as m,iconClasses as b,paddingXClasses as f,radiusClasses as $,transitionClasses as u}from"../../internal/styles.js";const w={xs:`${t.xs} ${x.xs} ${$.xs} ${g.xs}`,sm:`${t.sm} ${x.sm} ${$.sm} ${g.sm}`,md:`${t.md} ${x.md} ${$.md} ${g.md}`,lg:`${t.lg} ${x.lg} ${$.lg} ${g.lg}`,xl:`${t.xl} ${x.xl} ${$.xl} ${g.xl}`},j={xs:`${p.xs} px-0`,sm:`${p.sm} px-0`,md:`${p.md} px-0`,lg:`${p.lg} px-0`,xl:`${p.xl} px-0`},y=/* @__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]",u,v,b].join(" "),P={solid:/* @__PURE__ */[c,"text-(--plass-muted-fg) bg-(--plass-glass-hover)","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]",d].join(" "),glass:/* @__PURE__ */[c,"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"},k={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)"},z={solid:/* @__PURE__ */["text-(--p-on-solid) [background-image:var(--p-fill)]","[box-shadow:var(--p-elev),var(--p-lift)]",h].join(" "),glass:/* @__PURE__ */[c,"border text-(--p-accent) bg-(--p-soft)","[border-color:var(--p-line-hover)]","[box-shadow:var(--p-elev),var(--plass-gloss-glass)]",h].join(" "),ghost:`text-(--p-accent) bg-(--p-soft) ${h}`},C={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__ */e.forwardRef(function PlToggle({variant:t,size:p,color:g,density:v,elevation:d,pressed:h,defaultPressed:x,onPressedChange:c,value:b,startIcon:$,endIcon:u,fullWidth:T=!1,disabled:I,className:M,style:N,children:B,onPointerMove:R,...W},q){const A=l(),D=e.useContext(r),E=t??D?.variant??"glass",F=p??D?.size??A.size??"md",G=g??D?.color??A.color??"primary",H=v??D?.density??A.density??"default",J=d??D?.elevation??0,K=I??D?.disabled??!1,L=!m(B);return s(a,{ref:q,value:b,pressed:h,defaultPressed:x,onPressedChange:s=>c?.(s),disabled:K,className:s=>[y,w[F],L?j[F]:f[H][F],K?n[E]:s.pressed?`${z[E]} ${C[E]}`:`${P[E]} ${k[E]}`,K?"":"plass-glow cursor-pointer",T?"w-full":"",M??""].filter(Boolean).join(" "),style:{...i(G,J,E),...N},onPointerMove:o(!K,R),...W,children:[$,B,u]})});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as s,jsxs 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 l}from"../../internal/picker.js";import{glassClasses as r,metaTextClasses as i,paddingXClasses as n,radiusClasses as p,surfaceSlots as d}from"../../internal/styles.js";export const PlTooltipProvider=t.Provider;const c=/* @__PURE__ */[r,"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]"].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:r,children:f,size:u,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=u??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=w??q;return e(t.Root,{open:w,defaultOpen:z,onOpenChange:s=>{E(s),T?.(s)},children:[s(t.Trigger,{render:f,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,p[A],n[I][A],m[A],i[A],C??""].filter(Boolean).join(" "),style:{...d(B,3),...D},..._,children:[O?s(l,{as:t.Arrow,size:R}):null,r]})})})]})}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as s}from"react/jsx-runtime";import*as t from"react";import{Popover as
|
|
1
|
+
"use client";import{jsx as e,jsxs as s}from"react/jsx-runtime";import*as t from"react";import{Popover as n}from"@base-ui/react/popover";import{PlButton as l}from"../button/index.js";import{useDefaults as i}from"../../internal/defaults.js";import{CloseIcon as a}from"../../internal/icons.js";import{useLabels as o}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 p,focusRingClasses as m,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}from"../../internal/styles.js";const j={xs:"max-w-56",sm:"max-w-64",md:"max-w-80",lg:"max-w-96",xl:"max-w-lg"},N={xs:"xs",sm:"xs",md:"sm",lg:"sm",xl:"md"},_={xs:6,sm:8,md:10,lg:12,xl:14},C=/* @__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)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),L=/* @__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)",m].join(" "),E={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:m,open:u,defaultOpen:O=!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=i(),X=o(),Y=W??U.size??"md",Z=G??U.color??"primary",$=J??U.density??"default",[ee,se]=t.useState(O),[te,ne]=t.useState(S),le=u??ee,ie=Math.min(R??te,Math.max(0,m.length-1)),ae=m[ie],[oe,re]=t.useState(null),setOpen=e=>{void 0===u&&se(e),P?.(e)},goTo=e=>{void 0===R&&ne(e),M?.(e)},ce=ae?.target,de=ae?.padding??6,[pe,me]=t.useState(null);if(t.useLayoutEffect(()=>{me(le?resolve(ce):null)},[le,ce,ie]),t.useEffect(()=>{if(!le)return;const e=resolve(ce);if(!(e instanceof Element))return;if(D){const s=window.matchMedia?.(r).matches;e.scrollIntoView({block:"center",inline:"nearest",behavior:s?"instant":"smooth"})}let s=0;const read=()=>{s=0;const t=e.getBoundingClientRect();re({at:ie,spot:c({top:t.top,left:t.left,width:t.width,height:t.height},de)})},schedule=()=>{0===s&&(s=requestAnimationFrame(read))};read();const t="undefined"==typeof ResizeObserver?null:new ResizeObserver(schedule);return t?.observe(e),window.addEventListener("scroll",schedule,{passive:!0,capture:!0}),window.addEventListener("resize",schedule,{passive:!0}),()=>{0!==s&&cancelAnimationFrame(s),t?.disconnect(),window.removeEventListener("scroll",schedule,!0),window.removeEventListener("resize",schedule)}},[le,ce,de,ie,D]),0===m.length)return null;const ue=le&&oe?.at===ie?oe.spot:null,fe=0===ie,he=ie===m.length-1,ge=b[$][Y],ve=w[$][Y],xe=N[Y],be=f(ae?.title)||f(ae?.content);return e(n.Root,{open:le,onOpenChange:(e,s)=>{(e||B||"escape-key"!==s.reason)&&(e||"outside-press"!==s.reason&&"focus-out"!==s.reason)?setOpen(e):s.cancel()},children:s(n.Portal,{children:[le&&q?e("div",{"aria-hidden":"true","data-testid":"plass-tour-mask",className:p("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)]",Q?.mask),style:{clipPath:d(ue,ae?.radius??_[Y])}}):null,e(n.Positioner,{className:"plass-portal z-(--plass-z-portal) [outline:none]",side:pe?ae?.side??"bottom":"bottom",align:pe?ae?.align??"center":"center",sideOffset:pe?10:centreOnAnchor,collisionPadding:12,anchor:pe??E,children:s(n.Popup,{className:p(C,g[Y],v[Y],y[Y],j[Y],ge,ve,K),style:z(Z,3),children:[be?s("div",{className:"flex items-start gap-3",children:[s("div",{"aria-live":"polite","aria-atomic":"true",className:p("flex min-w-0 flex-1 flex-col",x[Y]),children:[f(ae?.title)?e(n.Title,{className:p("m-0 font-semibold",k[Y],Q?.title),children:ae?.title}):null,f(ae?.content)?e(n.Description,{className:p("m-0 min-w-0",Q?.content),children:ae?.content}):null]}),B?e("button",{type:"button","aria-label":X.close,onClick:()=>setOpen(!1),className:p(L,Q?.close),children:e(a,{})}):null]}):null,s("div",{className:p("flex items-center gap-2",Q?.footer),children:[s("span",{className:p("shrink-0 tabular-nums text-(--plass-muted-fg)",h[Y]),children:[ie+1," / ",m.length]}),s("div",{className:"ms-auto flex items-center gap-2",children:[A&&!he?e(l,{size:xe,variant:"ghost",color:"secondary",onClick:()=>setOpen(!1),children:H??X.skip}):null,fe?null:e(l,{size:xe,variant:"ghost",color:Z,onClick:()=>goTo(ie-1),children:I??X.previous}),e(l,{size:xe,color:Z,onClick:()=>he?(F?.(),void setOpen(!1)):goTo(ie+1),children:he?V??X.done:T??X.next})]})]})]})})]})})}
|
|
@@ -27,11 +27,20 @@ export interface PlTransferProps extends PlassStyleProps, Omit<React.ComponentPr
|
|
|
27
27
|
searchLabel?: string;
|
|
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 heading itself.
|
|
32
|
+
* @default 'Select all'
|
|
33
|
+
*/
|
|
31
34
|
selectAllLabel?: string;
|
|
32
35
|
/** What the two arrows are announced as. */
|
|
33
36
|
toTargetLabel?: string;
|
|
34
37
|
toSourceLabel?: string;
|
|
38
|
+
/**
|
|
39
|
+
* What is announced once rows have moved, given how many and the name of the
|
|
40
|
+
* list they went to.
|
|
41
|
+
* @default `{count} items moved to {list}`, from the label pack
|
|
42
|
+
*/
|
|
43
|
+
movedLabel?: (count: number, list: string) => string;
|
|
35
44
|
/** How tall each list is. A number of pixels or any CSS length. @default 220 */
|
|
36
45
|
height?: number | string;
|
|
37
46
|
/** Nothing can be ticked or moved. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as a from"react";import{useDefaults as
|
|
1
|
+
"use client";import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as a from"react";import{useDefaults as t}from"../../internal/defaults.js";import{useLabels as s}from"../../internal/labels.js";import{PlCheckbox as r}from"../checkbox/PlCheckbox.js";import{PlIconButton as n}from"../icon-button/PlIconButton.js";import{PlTextField as i}from"../text-field/PlTextField.js";import{ArrowRightIcon as o}from"../../internal/icons.js";import{searchText as c}from"../../internal/search.js";import{cx as d,fieldRestClasses as u,hasContent as f,metaTextClasses as h,paddingXClasses as m,radiusClasses as b,srOnlyClasses as p,surfaceSlots as v,toLength as g}from"../../internal/styles.js";const y={xs:"py-1",sm:"py-1.5",md:"py-2",lg:"py-2.5",xl:"py-3"},x={xs:"py-0.5",sm:"py-1",md:"py-1",lg:"py-1.5",xl:"py-2"};function Panel({title:a,rows:t,ticked:s,onTick:n,onTickAll:o,search:c,onSearch:f,searchable:p,disabled:g,height:w,emptyLabel:k,searchLabel:S,selectAllLabel:L,style:T,titleId:N,listRef:A,rowRef:j}){const{variant:R,size:z,color:C,density:P}=T,I=t.filter(e=>!e.disabled),M=I.filter(e=>s.has(e.value)),$=I.length>0&&M.length===I.length,_=M.length>0&&!$,V=m[P][z];return l("div",{className:d("flex min-w-0 flex-col overflow-hidden",u[R],b[z]),style:v(C,0),children:[l("div",{className:d("flex items-center gap-2 border-b [border-color:var(--plass-divider)]",V,y[z]),children:[e(r,{size:z,color:C,checked:$,indeterminate:_,disabled:g||0===I.length,"aria-labelledby":`${N}-all ${N}`,onCheckedChange:e=>o(!0===e)}),e("span",{id:`${N}-all`,hidden:!0,children:L}),e("span",{id:N,className:d("min-w-0 flex-1 truncate font-medium",h[z]),children:a}),l("span",{className:d("shrink-0 tabular-nums text-(--plass-muted-fg)",h[z]),children:[M.length,"/",t.length]})]}),p?e("div",{className:d(V,y[z]),children:e(i,{size:z,color:C,density:P,fullWidth:!0,variant:"ghost",disabled:g,placeholder:S,"aria-label":S,value:c,onChange:e=>f(e.target.value)})}):null,e("div",{ref:A,role:"group","aria-labelledby":N,tabIndex:-1,className:d("min-h-0 flex-1 overflow-y-auto overscroll-contain","focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:[outline-offset:-2px]"),style:void 0===w?void 0:{height:w},children:e("div",{className:d("flex flex-col",V,y[z]),children:0===t.length?e("span",{className:d("text-(--plass-muted-fg)",h[z],x[z]),children:k}):t.map(l=>e(r,{ref:e=>j(l.value,e),size:z,color:C,className:x[z],label:l.label,checked:s.has(l.value),disabled:g||l.disabled,onCheckedChange:e=>n(l.value,!0===e)},l.value))})})]})}function narrow(e,l){const a=c(l);return""===a?e:e.filter(e=>"string"!=typeof e.label||c(e.label).includes(a))}export const PlTransfer=/* @__PURE__ */a.forwardRef(function PlTransfer({items:r,value:i,defaultValue:c,onValueChange:u,sourceLabel:h,targetLabel:m,searchable:b=!1,searchLabel:v,emptyLabel:y,selectAllLabel:x,toTargetLabel:w,toSourceLabel:k,movedLabel:S,height:L=220,disabled:T=!1,variant:N="glass",size:A,color:j,density:R,className:z,...C},P){const I=t(),M=s(),$=h??M.transferAvailable,_=m??M.transferSelected,V=v??M.search,B=y??M.empty,E=x??M.selectAll,F=w??M.transferToSelected,W=k??M.transferToAvailable,q=S??M.transferMoved,D=A??I.size??"md",G=j??I.color??"primary",H=R??I.density??"default",[J,K]=a.useState(c??[]),O=i??J,[Q,U]=a.useState(()=>new Set),X=a.useMemo(()=>new Set(r.map(e=>e.value)),[r]);[...Q].some(e=>!X.has(e))&&U(new Set([...Q].filter(e=>X.has(e))));const[Y,Z]=a.useState(""),[ee,le]=a.useState(""),ae=a.useId(),te=a.useRef(new Map),se=a.useRef(null),re=a.useRef(null),ne=a.useRef(null),[ie,oe]=a.useState(null),rowRef=(e,l)=>{l?te.current.set(e,l):te.current.delete(e)},ce=a.useMemo(()=>new Set(O),[O]),de=a.useMemo(()=>r.filter(e=>!ce.has(e.value)),[r,ce]),ue=a.useMemo(()=>r.filter(e=>ce.has(e.value)),[r,ce]),tick=(e,l)=>{U(a=>{const t=new Set(a);return l?t.add(e):t.delete(e),t})},tickAll=(e,l)=>{U(a=>{const t=new Set(a);for(const a of e)a.disabled||(l?t.add(a.value):t.delete(a.value));return t})},move=(e,l)=>{const a=e.filter(e=>!e.disabled&&Q.has(e.value));if(0===a.length)return;const t=new Set(a.map(e=>e.value)),s=l?r.filter(e=>ce.has(e.value)||t.has(e.value)).map(e=>e.value):O.filter(e=>!t.has(e));ne.current={ids:a.map(e=>e.value),toTarget:l},U(e=>new Set([...e].filter(e=>!t.has(e)))),(e=>{void 0===i&&K(e),u?.(e)})(s)};a.useLayoutEffect(()=>{const e=ne.current;if(!e)return;ne.current=null;const l=e.ids.filter(l=>ce.has(l)===e.toTarget),a=e.toTarget?re.current:se.current;if(0===l.length)return void a?.focus();(te.current.get(l[0])??a)?.focus();const t=e.toTarget?_:$,s="string"==typeof t&&""!==t?t:e.toTarget?M.transferSelected:M.transferAvailable;oe(e=>({key:(e?.key??0)+1,text:q(l.length,s)}))},[ce,Q,M,q,$,_]);const fe=narrow(de,Y),he=narrow(ue,ee),me=fe.some(e=>!e.disabled&&Q.has(e.value)),be=he.some(e=>!e.disabled&&Q.has(e.value)),pe=g(L),ve={variant:N,size:D,color:G,density:H},ge="ghost"===N?"ghost":"glass";return l("div",{ref:P,className:d("grid w-full items-center gap-3","[grid-template-columns:minmax(0,1fr)_auto_minmax(0,1fr)]",z),...C,children:[e(Panel,{title:f($)?$:M.transferAvailable,titleId:`${ae}-source`,listRef:se,rowRef,rows:fe,ticked:Q,onTick:tick,onTickAll:e=>tickAll(fe,e),search:Y,onSearch:Z,searchable:b,disabled:T,height:pe,emptyLabel:B,searchLabel:V,selectAllLabel:E,style:ve}),l("div",{className:"flex flex-col gap-2",children:[e(n,{size:D,color:G,variant:ge,label:F,disabled:T||!me,onClick:()=>move(fe,!0),icon:e("span",{className:"flex rtl:rotate-180",children:e(o,{})})}),e(n,{size:D,color:G,variant:ge,label:W,disabled:T||!be,onClick:()=>move(he,!1),icon:e("span",{className:"flex rotate-180 rtl:rotate-0",children:e(o,{})})})]}),e(Panel,{title:f(_)?_:M.transferSelected,titleId:`${ae}-target`,listRef:re,rowRef,rows:he,ticked:Q,onTick:tick,onTickAll:e=>tickAll(he,e),search:ee,onSearch:le,searchable:b,disabled:T,height:pe,emptyLabel:B,searchLabel:V,selectAllLabel:E,style:ve}),e("div",{className:p,"aria-live":"polite",children:ie?e("span",{children:ie.text},ie.key):null})]})});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as
|
|
1
|
+
"use client";import{jsx as e,Fragment as t,jsxs as n}from"react/jsx-runtime";import*as s from"react";import{useDefaults as l}from"../../internal/defaults.js";import{Collapsible as i}from"@base-ui/react/collapsible";import{ChevronIcon as r}from"../../internal/icons.js";import{controlTextLeadingClasses as a,cx as d,focusRingClasses as o,gapClasses as c,iconClasses as p,radiusClasses as u,surfaceSlots as f,transitionClasses as m}from"../../internal/styles.js";const h=/* @__PURE__ */["h-(--collapsible-panel-height) overflow-hidden","[transition:height_var(--plass-duration-slow)_var(--plass-ease)]","data-[starting-style]:h-0 data-[ending-style]:h-0"].join(" "),v={xs:14,sm:16,md:20,lg:24,xl:28},x={default:{xs:"py-1",sm:"py-1",md:"py-1.5",lg:"py-2",xl:"py-2.5"},compact:{xs:"py-0.5",sm:"py-0.5",md:"py-1",lg:"py-1",xl:"py-1.5"}};function visibleRows(e,t,n=1,s=[]){for(const l of e)s.push({node:l,level:n}),l.children&&t.has(l.id)&&visibleRows(l.children,t,n+1,s);return s}function parentsOf(e,t=null,n=new Map){for(const s of e)n.set(s.id,t),s.children&&parentsOf(s.children,s.id,n);return n}const b=/* @__PURE__ */s.createContext(null);function TreeRows({items:n,level:l,parent:i,tabStop:r,expanded:a,selected:d}){const{parents:o}=s.useContext(b);let c=null;for(let e=r;null!==e&&o.has(e);e=o.get(e))if(o.get(e)===i){c=e;break}return e(t,{children:n.map(t=>{const n=void 0!==t.children&&t.children.length>0;return e(y,{node:t,level:l,isOpen:a.has(t.id),isSelected:d.has(t.id),tabStop:t.id===c?r:null,expanded:n?a:void 0,selected:n?d:void 0},t.id)})})}const y=/* @__PURE__ */s.memo(function TreeRow({node:l,level:f,isOpen:y,isSelected:g,tabStop:w,expanded:k,selected:S}){const{size:D,density:R,selection:C,idPrefix:j,focus:M,actions:N}=s.useContext(b),E=void 0!==l.children;return n(t,{children:[n("div",{id:`${j}-${l.id}`,role:"treeitem","aria-level":f,"aria-expanded":E?y:void 0,"aria-selected":"none"===C?void 0:g,"aria-disabled":l.disabled||void 0,tabIndex:l.disabled?void 0:w===l.id?0:-1,onFocus:()=>M(l.id),onKeyDown:e=>{l.disabled||N.current?.keyDown(e,l,f)},onClick:()=>{l.disabled||N.current?.press(l)},className:d("flex cursor-pointer items-center select-none",c[D],x[R][D],a[D],u[D],o,m,p,l.disabled?"cursor-not-allowed opacity-50":g?"bg-(--p-soft) text-(--p-accent) font-medium":"text-(--plass-fg) hover:bg-(--p-soft)"),style:{paddingInlineStart:(f-1)*v[D]+6+"px"},children:[e("span",{"aria-hidden":"true",className:d("flex shrink-0 items-center text-(--plass-muted-fg)","[transition:rotate_var(--plass-duration)_var(--plass-ease)]",E?"":"invisible",y?"rotate-0":"-rotate-90 rtl:rotate-90"),children:e(r,{})}),l.icon?e("span",{className:"flex shrink-0 items-center",children:l.icon}):null,e("span",{className:"truncate",children:l.label})]}),k&&S?e(i.Root,{open:y,children:e(i.Panel,{role:"group",className:h,children:e(TreeRows,{items:l.children,level:f+1,parent:l.id,tabStop:w,expanded:k,selected:S})})}):null]})});export const PlTree=/* @__PURE__ */s.forwardRef(function PlTree({items:t,expanded:n,defaultExpanded:i,onExpandedChange:r,selected:a,defaultSelected:o,onSelectedChange:c,selection:p="single",onItemClick:u,size:m,color:h,density:v,className:x,style:y,...g},w){const k=l(),S=m??k.size??"md",D=h??k.color??"primary",R=v??k.density??"default",[C,j]=s.useState(i??[]),M=n??C,N=s.useMemo(()=>new Set(M),[M]),[E,I]=s.useState(o??[]),P=a??E,T=s.useMemo(()=>new Set(P),[P]),O=s.useMemo(()=>visibleRows(t,N),[t,N]),z=s.useMemo(()=>parentsOf(t),[t]),[A,$]=s.useState(null),_=s.useMemo(()=>O.filter(e=>!e.node.disabled),[O]),F=A&&_.some(e=>e.node.id===A)?A:_[0]?.node.id??null,toggle=(e,t)=>{var s;s=t??!N.has(e)?[...M.filter(t=>t!==e),e]:M.filter(t=>t!==e),void 0===n&&j(s),r?.(s)},press=e=>{void 0!==e.children&&toggle(e.id),(e=>{if("none"===p)return;const t="multiple"===p?T.has(e.id)?P.filter(t=>t!==e.id):[...P,e.id]:[e.id];void 0===a&&I(t),c?.(t)})(e),u?.(e)},L=s.useId(),focusRow=e=>{$(e),document.getElementById(`${L}-${e}`)?.focus()},onKeyDown=(e,t,n)=>{const s=_.findIndex(e=>e.node.id===t.id),l=void 0!==t.children,i=N.has(t.id);switch(e.key){case"ArrowDown":e.preventDefault(),_[s+1]&&focusRow(_[s+1].node.id);break;case"ArrowUp":e.preventDefault(),_[s-1]&&focusRow(_[s-1].node.id);break;case"ArrowRight":e.preventDefault(),l&&!i?toggle(t.id,!0):l&&_[s+1]?.level===n+1&&focusRow(_[s+1].node.id);break;case"ArrowLeft":if(e.preventDefault(),l&&i){toggle(t.id,!1);break}for(let e=s-1;e>=0;e-=1)if(_[e].level<n){focusRow(_[e].node.id);break}break;case"Home":e.preventDefault(),_[0]&&focusRow(_[0].node.id);break;case"End":e.preventDefault(),_.length&&focusRow(_[_.length-1].node.id);break;case"Enter":case" ":e.preventDefault(),press(t)}},B=s.useRef(null);s.useLayoutEffect(()=>{B.current={press,keyDown:onKeyDown}});const H=s.useMemo(()=>({size:S,density:R,selection:p,idPrefix:L,parents:z,focus:$,actions:B}),[S,R,p,L,z]);return e("div",{ref:w,role:"tree","aria-multiselectable":"multiple"===p||void 0,className:d("flex flex-col",x),style:{...f(D,0),...y},...g,children:e(b.Provider,{value:H,children:e(TreeRows,{items:t,level:1,parent:null,tabStop:F,expanded:N,selected:T})})})});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsxs as e,jsx as l}from"react/jsx-runtime";import*as t from"react";import{useDefaults as n}from"../../internal/defaults.js";import{useLabels as r}from"../../internal/labels.js";import{PickerShell as a}from"../../internal/picker.js";import{searchHaystack as i,searchText as o}from"../../internal/search.js";import{cx as s,metaTextClasses as d}from"../../internal/styles.js";import{PlTextField as c}from"../text-field/PlTextField.js";import{PlTree as
|
|
1
|
+
"use client";import{jsxs as e,jsx as l}from"react/jsx-runtime";import*as t from"react";import{useDefaults as n}from"../../internal/defaults.js";import{useLabels as r}from"../../internal/labels.js";import{PickerShell as a}from"../../internal/picker.js";import{searchHaystack as i,searchText as o}from"../../internal/search.js";import{cx as s,metaTextClasses as d}from"../../internal/styles.js";import{PlTextField as c}from"../text-field/PlTextField.js";import{PlTree as f}from"../tree/PlTree.js";function flatten(e,l=new Map){for(const t of e)l.set(t.id,t),t.children&&flatten(t.children,l);return l}function haystackOf(e){return i([e.searchLabel??("string"==typeof e.label?e.label:e.id)])}function filterTree(e,l){const t=[];for(const n of e){const e=n.children?filterTree(n.children,l):void 0,r=haystackOf(n).includes(l);(r||e&&e.length>0)&&t.push(r?n:{...n,children:e})}return t}function branchIds(e,l=[]){for(const t of e)t.children&&t.children.length>0&&(l.push(t.id),branchIds(t.children,l));return l}export const PlTreeSelect=/* @__PURE__ */t.forwardRef(function PlTreeSelect({items:i,value:h,defaultValue:m,onValueChange:u,multiple:p=!1,selectableBranches:g=!1,expanded:b,defaultExpanded:v,onExpandedChange:y,open:x,defaultOpen:j,onOpenChange:C,placeholder:O,clearable:S=!1,closeOnSelect:T,searchable:w=!1,searchLabel:z,emptyLabel:M,format:P,name:k,size:E,color:I,density:L,readOnly:N=!1,disabled:V=!1,...F},R){const B=n(),W=E??B.size??"md",q=I??B.color??"primary",A=L??B.density??"default",D=r(),G=z??D.search,H=M??D.empty,[J,K]=t.useState(m??[]),Q=h??J,[U,X]=t.useState(j??!1),Y=x??U,[Z,$]=t.useState(""),_=o(Z),ee=t.useMemo(()=>flatten(i),[i]),le=t.useMemo(()=>""===_?i:filterTree(i,_),[i,_]),te=""!==_,[ne,re]=t.useState(v??[]),ae=t.useMemo(()=>te?branchIds(le):void 0,[te,le])??b??ne,setOpen=e=>{e&&(V||N)||(void 0===x&&X(e),e||$(""),C?.(e))},commit=e=>{void 0===h&&K(e),u?.(e)},isSelectable=e=>!e.disabled&&(e.selectable??(!(e.children&&e.children.length>0)||g)),ie=Q.map(e=>ee.get(e)).filter(e=>void 0!==e),oe=0===ie.length?O??"":P?P(ie):ie.map((l,n)=>e(t.Fragment,{children:[0===n?null:", ",l.label]},l.id));return l(a,{...F,size:W,color:q,density:A,readOnly:N,disabled:V,triggerRef:R,display:oe,empty:0===ie.length,clearable:S,onClear:()=>commit([]),open:Y,onOpenChange:setOpen,labels:D,name:k,formValue:p?Q:Q[0]??"",children:e("div",{className:"flex max-h-80 w-64 flex-col gap-1.5 overflow-hidden",children:[w?l(c,{size:W,color:q,density:A,variant:"ghost",fullWidth:!0,placeholder:G,"aria-label":G,value:Z,onChange:e=>$(e.target.value)}):null,l("div",{className:"min-h-0 flex-1 overflow-y-auto overscroll-contain",children:0===le.length?l("p",{className:s("m-0 px-1.5 py-1 text-(--plass-muted-fg)",d[W]),children:H}):l(f,{items:le,size:W,color:q,density:A,selection:p?"multiple":"single",selected:Q,onSelectedChange:e=>{if(!p){const l=1===e.length?ee.get(e[0]):void 0;if(!l||!isSelectable(l))return;return commit([l.id]),void((T??!0)&&setOpen(!1))}const l=e.filter(e=>{const l=ee.get(e);return void 0!==l&&isSelectable(l)});(l.length!==Q.length||l.some((e,l)=>e!==Q[l]))&&(commit(l),T&&setOpen(!1))},expanded:ae,onExpandedChange:e=>{te||(void 0===b&&re(e),y?.(e))}})})]})})});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import*as e from"react";import{useRender as t}from"@base-ui/react/use-render";const r={h1:"text-[1.875rem]/[2.25rem] tracking-[-0.02em]",h2:"text-[1.5rem]/[1.875rem] tracking-[-0.015em]",h3:"text-[1.25rem]/[1.625rem] tracking-[-0.01em]",h4:"text-[1.0625rem]/[1.5rem]",h5:"text-[0.9375rem]/[1.375rem]",h6:"text-[0.8125rem]/[1.25rem]",lead:"text-[1.0625rem]/[1.75rem]",body:"text-[0.8125rem]/[1.375rem]",caption:"text-[0.75rem]/[1.125rem]",overline:"text-[0.6875rem]/[1rem] tracking-[0.08em] uppercase"},m={h1:"semibold",h2:"semibold",h3:"semibold",h4:"semibold",h5:"semibold",h6:"semibold",lead:"regular",body:"regular",caption:"regular",overline:"medium"},l={h1:"h1",h2:"h2",h3:"h3",h4:"h4",h5:"h5",h6:"h6",lead:"p",body:"p",caption:"span",overline:"span"},n=new Set(["caption","overline"]),
|
|
1
|
+
"use client";import*as e from"react";import{useRender as t}from"@base-ui/react/use-render";const r={h1:"text-[1.875rem]/[2.25rem] tracking-[-0.02em]",h2:"text-[1.5rem]/[1.875rem] tracking-[-0.015em]",h3:"text-[1.25rem]/[1.625rem] tracking-[-0.01em]",h4:"text-[1.0625rem]/[1.5rem]",h5:"text-[0.9375rem]/[1.375rem]",h6:"text-[0.8125rem]/[1.25rem]",lead:"text-[1.0625rem]/[1.75rem]",body:"text-[0.8125rem]/[1.375rem]",caption:"text-[0.75rem]/[1.125rem]",overline:"text-[0.6875rem]/[1rem] tracking-[0.08em] uppercase"},m={h1:"semibold",h2:"semibold",h3:"semibold",h4:"semibold",h5:"semibold",h6:"semibold",lead:"regular",body:"regular",caption:"regular",overline:"medium"},l={h1:"h1",h2:"h2",h3:"h3",h4:"h4",h5:"h5",h6:"h6",lead:"p",body:"p",caption:"span",overline:"span"},n=new Set(["caption","overline"]),o={h1:"mb-4",h2:"mb-3.5",h3:"mb-3",h4:"mb-2.5",h5:"mb-2",h6:"mb-2",lead:"mb-4",body:"mb-3",caption:"mb-2",overline:"mb-2"},a={regular:"font-normal",medium:"font-medium",semibold:"font-semibold",bold:"font-bold"},s={start:"text-start",center:"text-center",end:"text-end",justify:"text-justify"};function clampClasses(e){return 1===e?"block truncate":"line-clamp-(--p-lines)"}export const PlTypography=/* @__PURE__ */e.forwardRef(function PlTypography({level:i="body",color:c,weight:h,align:d,lines:p,gutter:b=!1,render:u,className:x,style:f,children:g,...y},v){const k=p&&p>=1?Math.floor(p):void 0,j=["m-0",r[i],a[h??m[i]],d?s[d]:"",k?clampClasses(k):"",b?o[i]:"",c?"text-(--p-accent)":n.has(i)?"text-(--plass-muted-fg)":"text-(--plass-fg)",x??""].filter(Boolean).join(" ");return t({render:u??e.createElement(l[i]),ref:v,props:{className:j,style:c||k&&k>1?{...c?{"--p-accent":`var(--plass-${c}-accent)`}:null,...k&&k>1?{"--p-lines":k}:null,...f}:f,children:g,...y}})});
|
|
@@ -74,8 +74,8 @@ export interface PlWindowPaneProps extends Omit<React.ComponentPropsWithoutRef<'
|
|
|
74
74
|
*
|
|
75
75
|
* What being in front looks like is the system's: coloured traffic lights on
|
|
76
76
|
* macOS against grey ones, an accent title bar and an accent border on
|
|
77
|
-
* Windows 10, a tinted header bar on GNOME — and, on
|
|
78
|
-
* step further off the page than the ones behind it.
|
|
77
|
+
* Windows 10, a tinted header bar on GNOME — and, on every one of them, a
|
|
78
|
+
* window one step further off the page than the ones behind it.
|
|
79
79
|
*/
|
|
80
80
|
active?: boolean;
|
|
81
81
|
/**
|
|
@@ -156,7 +156,7 @@ export interface PlWindowPaneProps extends Omit<React.ComponentPropsWithoutRef<'
|
|
|
156
156
|
children?: React.ReactNode;
|
|
157
157
|
}
|
|
158
158
|
/**
|
|
159
|
-
* A window, drawn the way one of
|
|
159
|
+
* A window, drawn the way one of eight systems draws it, with anything at all
|
|
160
160
|
* inside it.
|
|
161
161
|
*
|
|
162
162
|
* It is not a real window and does not pretend to be one: there is no desktop,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import*as i from"react";import{useRender as o}from"@base-ui/react/use-render";import{beginPointerDrag as r}from"../../internal/drag.js";import{useLabels as s}from"../../internal/labels.js";import{cx as a,glassClasses as l,hasContent as
|
|
1
|
+
"use client";import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import*as i from"react";import{useRender as o}from"@base-ui/react/use-render";import{beginPointerDrag as r}from"../../internal/drag.js";import{useLabels as s}from"../../internal/labels.js";import{cx as a,glassClasses as l,hasContent as c,iconClasses as d}from"../../internal/styles.js";import{PlWindowControls as u,orderControls as m,windowChrome as h,windowMetrics as f,windowSlots as g}from"../../internal/window.js";import{useDefaults as w}from"../../internal/defaults.js";import{inertProps as p}from"../../internal/inert.js";import{focusablesIn as b}from"../../internal/focusable.js";function useLatched(e,t,n){const[o,r]=i.useState(t),s=void 0!==e;return[s?e:o,i.useCallback(e=>{s||r(e),n?.(e)},[s,n])]}const v=[{edge:"n",className:"inset-x-3 top-0 h-1.5 cursor-ns-resize"},{edge:"s",className:"inset-x-3 bottom-0 h-1.5 cursor-ns-resize"},{edge:"w",className:"inset-y-3 left-0 w-1.5 cursor-ew-resize"},{edge:"e",className:"inset-y-3 right-0 w-1.5 cursor-ew-resize"},{edge:"nw",className:"top-0 left-0 size-3 cursor-nwse-resize"},{edge:"ne",className:"top-0 right-0 size-3 cursor-nesw-resize"},{edge:"sw",className:"bottom-0 left-0 size-3 cursor-nesw-resize"},{edge:"se",className:"right-0 bottom-0 size-3 cursor-nwse-resize"}];export const PlWindowPane=/* @__PURE__ */i.forwardRef(function PlWindowPane(x,z){const{os:y="macos",title:N,icon:E,actions:L,controls:M=!0,size:S,color:C,accent:k=!1,transparency:T=0,active:I,elevation:j=2,position:R="static",draggable:D=!1,resizable:P=!1,width:O,height:W,minWidth:B=180,minHeight:H,offset:A,defaultOffset:G,onOffsetChange:X,onResize:$,open:_,defaultOpen:F=!0,onOpenChange:U,minimized:Y,defaultMinimized:q=!1,onMinimizedChange:K,maximized:J,defaultMaximized:Q=!1,onMaximizedChange:V,scroll:Z=!0,minimizeLabel:ee,maximizeLabel:te,restoreLabel:ne,closeLabel:ie,resizeLabel:oe,render:re,className:se,style:ae,children:le,...ce}=x,de=w(),ue=S??de.size??"md",me=C??de.color??"primary",he=s(),fe=h(y),ge=f(y,ue),we=i.useId(),[pe,be]=useLatched(_,F,U),[ve,xe]=useLatched(Y,q,K),[ze,ye]=useLatched(J,Q,V),[Ne,Ee]=useLatched(A,G??{x:0,y:0},X),[Le,Me]=i.useState(null),[Se,Ce]=i.useState(!0),ke=I??Se,[Te,Ie]=i.useState(null),[je,Re]=i.useState(null),[De,Pe]=i.useState(!1),[Oe,We]=i.useState(!1),[Be,He]=i.useState(pe);Be!==pe&&(He(pe),We(!pe)),i.useEffect(()=>{if(!Oe)return;const e=window.setTimeout(()=>We(!1),260);return()=>window.clearTimeout(e)},[Oe]);const Ae=i.useRef(null),Ge=i.useCallback(e=>{Ae.current=e,"function"==typeof z?z(e):z&&(z.current=e)},[z]),Xe=i.useRef(null),$e=pe||Oe;i.useEffect(()=>{const e=Ae.current;if(!$e||!e)return;const arrive=t=>{const n=t.relatedTarget;n instanceof Node&&e.contains(n)||(Xe.current=n instanceof HTMLElement?n:null)};return e.addEventListener("focusin",arrive),()=>e.removeEventListener("focusin",arrive)},[$e]),i.useLayoutEffect(()=>{const e=Ae.current,t=document.activeElement;if(pe||!e||!(t instanceof HTMLElement)||!e.contains(t))return;const n=Xe.current;if(n?.isConnected&&!e.contains(n)&&!n.closest("[inert]")&&(n.focus({preventScroll:!0}),document.activeElement===n))return;const i=b(document).filter(t=>!e.contains(t)),o=i.find(t=>e.compareDocumentPosition(t)&Node.DOCUMENT_POSITION_FOLLOWING)??i.at(-1);o?o.focus({preventScroll:!0}):t.blur()},[pe]),i.useEffect(()=>{if(void 0!==I)return;const e=Ae.current;if(!e)return;const notice=t=>{const n=t.target;if(!(n instanceof Node))return;if(e.contains(n))return void Ce(!0);const i=n instanceof Element?n:n.parentElement;i?.closest(".plass-window")&&Ce(!1)};return document.addEventListener("pointerdown",notice,!0),document.addEventListener("focusin",notice,!0),()=>{document.removeEventListener("pointerdown",notice,!0),document.removeEventListener("focusin",notice,!0)}},[I]);const _e=i.useRef(null);function beginGesture(e,t){if(0!==e.button)return;_e.current?.();const n=e.currentTarget,i=e.clientX,o=e.clientY;Pe(!0);const finish=()=>{_e.current=null,Pe(!1)},s=r({target:n,pointerId:e.pointerId,onMove:e=>t(e.clientX-i,e.clientY-o),onEnd:finish});_e.current=()=>{s(),finish()}}i.useEffect(()=>()=>_e.current?.(),[]);const Fe={width:Math.max(0,B),height:Math.max(ge.bar,H??ge.bar)};function resizeTo(e){Me(e),$?.(e)}const Ue=m(y,!0===M?["minimize","maximize","close"]:!1===M?[]:M),Ye=Ue.includes("maximize");i.useEffect(()=>{if(ve||null===je)return;const e=window.setTimeout(()=>Re(null),400);return()=>window.clearTimeout(e)},[ve,je]);const qe={minimize:ee??he.minimize,maximize:te??he.maximize,restore:ne??he.restore,close:ie??he.close},Ke=e(u,{os:y,metrics:ge,controls:Ue,maximized:ze,active:ke,labels:qe,onCommand:function command(e){"close"===e?be(!1):"minimize"===e?function rollUp(e){const t=Ae.current,n=t?.firstElementChild;if(t&&n instanceof HTMLElement&&Ie(n.offsetHeight+(t.offsetHeight-t.clientHeight)),e&&void 0===(Le?.height??W)&&t)return Re(t.getBoundingClientRect().height),void requestAnimationFrame(()=>xe(!0));xe(e)}(!ve):ye(!ze)}}),Je=c(N)?e("span",{id:we,className:"min-w-0 truncate",children:N}):null,Qe=c(E)?e("span",{className:"flex shrink-0 items-center",children:E}):null,Ve=t("div",{className:a("relative flex shrink-0 items-center select-none",d,D&&!ze?"cursor-grab touch-none active:cursor-grabbing":""),style:{height:ge.bar,textShadow:"var(--p-window-bar-shadow)",fontWeight:ge.weight,paddingInlineStart:ge.padX,paddingInlineEnd:ge.padEnd,gap:Math.round(.7*ge.title),fontSize:ge.title,backgroundColor:"var(--p-window-bar)",backgroundImage:"var(--p-window-bar-image)",color:"var(--p-window-bar-fg)",borderBlockEnd:fe.rule?"1px solid var(--p-window-line)":void 0},onPointerDown:function beginDrag(e){if(!D||ze)return;const t={...Ne};beginGesture(e,(e,n)=>Ee({x:t.x+e,y:t.y+n}))},onDoubleClick:Ye?()=>ye(!ze):void 0,children:["start"===fe.controlsSide?Ke:null,"center"===fe.titleAlign?e("span",{"aria-hidden":"true",className:"pointer-events-none absolute inset-x-0 flex items-center justify-center",style:{paddingInline:ge.controlsWidth(Ue.length)+2*ge.padX},children:t("span",{className:"flex min-w-0 items-center",style:{gap:Math.round(.5*ge.title)},children:[Qe,Je]})}):t(n,{children:[Qe,Je]}),e("span",{className:"flex-1"}),c(L)?e("span",{className:"flex shrink-0 items-center",style:{gap:Math.round(.5*ge.title)},onPointerDown:e=>e.stopPropagation(),children:L}):null,"end"===fe.controlsSide?Ke:null]}),Ze=ze?{left:0,top:0,width:"100%",height:"100%"}:{left:Ne.x,top:Ne.y,width:Le?.width??O,height:ve?Te??ge.bar:Le?.height??W??je??void 0},et=o({render:re,ref:Ge,props:{role:"group","aria-labelledby":Je?we:void 0,className:a("plass-window relative flex min-w-0 flex-col overflow-hidden",T>0?l:"",fe.glass&&0===T?"[backdrop-filter:var(--plass-blur)]":"","[transition-property:left,top,width,height,opacity,box-shadow,background-color,border-color,border-radius]","[transition-duration:var(--plass-duration-slow)]","[transition-timing-function:var(--plass-ease)]","motion-reduce:[transition-duration:0ms]","data-[gesture]:[transition-property:none]",se),"data-gesture":De?"":void 0,...p(!pe),style:{opacity:pe?void 0:0,...g({os:y,color:me,accent:k,transparency:T,active:ke,elevation:j}),position:"static"===R?"relative":R,...Ze,borderRadius:ze?0:`${ge.radius}px ${ge.radius}px ${ge.radiusBottom}px ${ge.radiusBottom}px`,borderStyle:"solid",borderWidth:ge.frame,borderColor:"var(--p-window-line)",backgroundColor:"var(--p-window-band)",boxShadow:"var(--p-window-shadow), var(--plass-gloss-glass)",...ae},children:t(n,{children:[Ve,e("div",{className:a("min-h-0 flex-1",Z?"overflow-auto":"overflow-hidden"),style:{backgroundColor:"var(--p-window-body)",marginInline:ge.band.side,marginBottom:ge.band.bottom,boxShadow:ge.band.side>0?"inset 0 0 0 1px rgb(0 0 0 / 0.12)":void 0},...p(ve),children:le}),!P||ze||ve?null:v.map(t=>{const n="se"===t.edge;return e("div",{role:n?"button":void 0,tabIndex:n?0:void 0,"aria-label":n?oe??he.resizeWindow:void 0,"aria-hidden":n?void 0:"true",className:a("absolute z-10 touch-none",t.className,n?"focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:[outline-offset:-2px]":""),onPointerDown:e=>function beginResize(e,t){const n=Ae.current;if(!n||ze)return;const i=n.getBoundingClientRect(),o={width:i.width,height:i.height,x:Ne.x,y:Ne.y},r=e.includes("e"),s=e.includes("w"),a=e.includes("n"),l=e.includes("s");beginGesture(t,(e,t)=>{let{width:n,height:i}=o,{x:c,y:d}=o;r&&(n=Math.max(Fe.width,o.width+e)),l&&(i=Math.max(Fe.height,o.height+t)),s&&(n=Math.max(Fe.width,o.width-e),c=o.x+(o.width-n)),a&&(i=Math.max(Fe.height,o.height-t),d=o.y+(o.height-i)),resizeTo({width:n,height:i}),(s||a)&&Ee({x:c,y:d})})}(t.edge,e),onKeyDown:n?e=>{const t={ArrowRight:[16,0],ArrowLeft:[-16,0],ArrowDown:[0,16],ArrowUp:[0,-16]}[e.key];t&&(e.preventDefault(),function nudge(e,t){const n=Ae.current;if(!n)return;const i=n.getBoundingClientRect();resizeTo({width:Math.max(Fe.width,i.width+e),height:Math.max(Fe.height,i.height+t)})}(t[0],t[1]))}:void 0},t.edge)})]}),...ce}});return pe||Oe?et:null});
|
package/dist/css/area-chart.css
CHANGED
package/dist/css/back-top.css
CHANGED
package/dist/css/bar-chart.css
CHANGED
package/dist/css/calendar.css
CHANGED
package/dist/css/carousel.css
CHANGED
package/dist/css/combobox.css
CHANGED
package/dist/css/confirm.css
CHANGED
package/dist/css/data-table.css
CHANGED
|
@@ -1,2 +1,7 @@
|
|
|
1
1
|
/* Scan manifest for <data-table>. Needs `plass-ui/css/base.css` first. */
|
|
2
2
|
@source '../components/data-table';
|
|
3
|
+
@source '../components/button';
|
|
4
|
+
@source '../components/checkbox';
|
|
5
|
+
@source '../components/pagination';
|
|
6
|
+
@source '../components/skeleton';
|
|
7
|
+
@source '../components/text-field';
|
package/dist/css/date-picker.css
CHANGED
package/dist/css/gallery.css
CHANGED
|
@@ -1,2 +1,7 @@
|
|
|
1
1
|
/* Scan manifest for <gallery>. Needs `plass-ui/css/base.css` first. */
|
|
2
2
|
@source '../components/gallery';
|
|
3
|
+
@source '../components/button';
|
|
4
|
+
@source '../components/icon-button';
|
|
5
|
+
@source '../components/image';
|
|
6
|
+
@source '../components/overlay';
|
|
7
|
+
@source '../components/skeleton';
|
package/dist/css/gauge-chart.css
CHANGED
package/dist/css/icon-button.css
CHANGED
package/dist/css/image.css
CHANGED
package/dist/css/line-chart.css
CHANGED
package/dist/css/menubar.css
CHANGED
package/dist/css/pagination.css
CHANGED
package/dist/css/pie-chart.css
CHANGED
package/dist/css/popconfirm.css
CHANGED