material-plus-ui 1.9.0 → 1.10.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/README.md +2 -2
- package/dist/a2ui/extended/api.d.ts +4 -4
- package/dist/components/accordion/MPAccordion.d.ts +13 -0
- package/dist/components/accordion/MPAccordion.js +1 -1
- package/dist/components/accordion/index.d.ts +1 -1
- package/dist/components/animate-counter/MPAnimateCounter.js +1 -1
- package/dist/components/animate-headline/MPAnimateHeadline.d.ts +8 -0
- package/dist/components/animate-headline/MPAnimateHeadline.js +1 -1
- package/dist/components/animate-lighting/MPAnimateLighting.js +1 -1
- package/dist/components/animate-marquee/MPAnimateMarquee.js +1 -1
- package/dist/components/animate-scramble/MPAnimateScramble.d.ts +8 -0
- package/dist/components/animate-scramble/MPAnimateScramble.js +1 -1
- package/dist/components/animate-split/MPAnimateSplit.d.ts +8 -0
- package/dist/components/animate-split/MPAnimateSplit.js +1 -1
- package/dist/components/animate-typing/MPAnimateTyping.d.ts +10 -2
- package/dist/components/animate-typing/MPAnimateTyping.js +1 -1
- package/dist/components/app-logo/MPAppLogo.d.ts +6 -1
- package/dist/components/area-chart/MPAreaChart.js +1 -1
- package/dist/components/avatar/MPAvatar.d.ts +16 -0
- package/dist/components/avatar/MPAvatar.js +1 -1
- package/dist/components/bar-chart/MPBarChart.js +1 -1
- package/dist/components/breadcrumb/MPBreadcrumb.d.ts +8 -0
- package/dist/components/breadcrumb/MPBreadcrumb.js +1 -1
- package/dist/components/carousel/MPCarousel.js +1 -1
- package/dist/components/checkbox/MPCheckbox.js +1 -1
- package/dist/components/code-block/MPCodeBlock.js +1 -1
- package/dist/components/combobox/MPCombobox.js +1 -1
- package/dist/components/command-palette/MPCommandPalette.js +1 -1
- package/dist/components/config/MPConfigProvider.d.ts +17 -1
- package/dist/components/config/MPConfigProvider.js +1 -1
- package/dist/components/confirm/MPConfirmProvider.js +1 -1
- package/dist/components/data-table/MPDataTable.d.ts +0 -34
- package/dist/components/data-table/MPDataTable.js +1 -1
- package/dist/components/date-range-picker/MPDateRangePicker.js +1 -1
- package/dist/components/drawer/MPDrawer.d.ts +13 -1
- package/dist/components/drawer/MPDrawer.js +1 -1
- package/dist/components/file-picker/MPFilePicker.js +1 -1
- package/dist/components/form/MPForm.d.ts +3 -0
- package/dist/components/form/MPForm.js +1 -1
- package/dist/components/gauge-chart/MPGaugeChart.js +1 -1
- package/dist/components/header/MPHeader.js +1 -1
- package/dist/components/heatmap-chart/MPHeatmapChart.js +1 -1
- package/dist/components/image/MPImage.d.ts +5 -0
- package/dist/components/image/MPImage.js +1 -1
- package/dist/components/line-chart/MPLineChart.js +1 -1
- package/dist/components/locale/MPLocaleProvider.d.ts +15 -30
- package/dist/components/locale/MPLocaleProvider.js +1 -1
- package/dist/components/menu/MPMenu.d.ts +9 -1
- package/dist/components/menu/MPMenu.js +1 -1
- package/dist/components/meter/MPMeter.d.ts +5 -0
- package/dist/components/meter/MPMeter.js +1 -1
- package/dist/components/mockup/MPMockup.js +1 -1
- package/dist/components/navigation-menu/MPNavigationMenu.d.ts +27 -1
- package/dist/components/navigation-menu/MPNavigationMenu.js +1 -1
- package/dist/components/number-field/MPNumberField.d.ts +2 -1
- package/dist/components/number-field/MPNumberField.js +1 -1
- package/dist/components/otp-field/MPOtpField.js +1 -1
- package/dist/components/page-layout/MPPageLayout.js +1 -1
- package/dist/components/pagination/MPPagination.d.ts +8 -0
- package/dist/components/pagination/MPPagination.js +1 -1
- package/dist/components/panes/MPPanes.js +1 -1
- package/dist/components/pie-chart/MPPieChart.js +1 -1
- package/dist/components/pill/MPPill.js +1 -1
- package/dist/components/progress-box/MPProgressBox.js +1 -1
- package/dist/components/progress-circular/MPProgressCircular.js +1 -1
- package/dist/components/progress-linear/MPProgressLinear.js +1 -1
- package/dist/components/radio-group/MPRadioGroup.js +1 -1
- package/dist/components/scatter-chart/MPScatterChart.js +1 -1
- package/dist/components/sidebar/MPSidebar.d.ts +11 -0
- package/dist/components/sidebar/MPSidebar.js +1 -1
- package/dist/components/slider/MPSlider.d.ts +5 -0
- package/dist/components/slider/MPSlider.js +1 -1
- package/dist/components/snackbar/MPSnackbar.js +1 -1
- package/dist/components/switch/MPSwitch.js +1 -1
- package/dist/components/tabs/MPTabs.js +1 -1
- package/dist/components/text-field/MPTextField.js +1 -1
- package/dist/components/timeline-chart/MPTimelineChart.js +1 -1
- package/dist/components/tour/MPTour.js +1 -1
- package/dist/components/transfer/MPTransfer.js +1 -1
- package/dist/components/tree-select/MPTreeSelect.js +1 -1
- package/dist/components/tree-view/MPTreeView.d.ts +8 -0
- package/dist/components/tree-view/MPTreeView.js +1 -1
- package/dist/hooks/index.d.ts +4 -2
- package/dist/hooks/index.js +1 -1
- package/dist/hooks/mpColorSchemeScript.d.ts +46 -0
- package/dist/hooks/mpColorSchemeScript.js +1 -0
- package/dist/hooks/useMPColorScheme.d.ts +2 -47
- package/dist/hooks/useMPColorScheme.js +1 -1
- package/dist/hooks/useMPMediaQuery.js +1 -1
- package/dist/hooks/useMPOnScreen.js +1 -1
- package/dist/internal/Calendar.js +1 -1
- package/dist/internal/ChartChrome.d.ts +11 -2
- package/dist/internal/ChartChrome.js +1 -1
- package/dist/internal/ChartFrame.js +1 -1
- package/dist/internal/FieldOutline.d.ts +9 -1
- package/dist/internal/FieldOutline.js +1 -1
- package/dist/internal/RenderedLink.d.ts +20 -0
- package/dist/internal/RenderedLink.js +2 -0
- package/dist/internal/SupportingText.js +1 -1
- package/dist/internal/animate.d.ts +4 -0
- package/dist/internal/animate.js +1 -1
- package/dist/internal/box-size.d.ts +22 -0
- package/dist/internal/box-size.js +2 -0
- package/dist/internal/chart.d.ts +21 -11
- package/dist/internal/chart.js +1 -1
- package/dist/internal/color-scheme-keys.d.ts +13 -0
- package/dist/internal/color-scheme-keys.js +1 -0
- package/dist/internal/color-scheme.d.ts +11 -2
- package/dist/internal/color-scheme.js +1 -1
- package/dist/internal/config.d.ts +2 -0
- package/dist/internal/date.d.ts +2 -8
- package/dist/internal/date.js +1 -1
- package/dist/internal/highlight.js +1 -1
- package/dist/internal/i18n.d.ts +0 -53
- package/dist/internal/i18n.js +1 -1
- package/dist/internal/intersection.d.ts +50 -0
- package/dist/internal/intersection.js +2 -0
- package/dist/internal/intl.d.ts +22 -21
- package/dist/internal/intl.js +1 -1
- package/dist/internal/keys.d.ts +0 -9
- package/dist/internal/keys.js +1 -1
- package/dist/internal/layout-effect.d.ts +7 -0
- package/dist/internal/layout-effect.js +2 -0
- package/dist/internal/locale.d.ts +10 -2
- package/dist/internal/media.d.ts +1 -0
- package/dist/internal/media.js +1 -0
- package/dist/internal/occurrence.d.ts +18 -0
- package/dist/internal/occurrence.js +1 -0
- package/dist/internal/page-layout.js +1 -1
- package/dist/internal/progress.d.ts +5 -0
- package/dist/internal/ref.d.ts +9 -0
- package/dist/internal/ref.js +1 -0
- package/dist/internal/remember.d.ts +36 -0
- package/dist/internal/remember.js +1 -0
- package/dist/internal/surface.d.ts +7 -1
- package/dist/internal/surface.js +1 -1
- package/dist/internal/text.d.ts +10 -4
- package/dist/internal/text.js +1 -1
- package/dist/internal/window-class.d.ts +8 -0
- package/dist/internal/window-class.js +1 -1
- package/dist/styles/accordion.css +1 -1
- package/dist/styles/alert.css +1 -1
- package/dist/styles/animate-appear.css +1 -1
- package/dist/styles/animate-blink.css +1 -1
- package/dist/styles/animate-counter.css +1 -1
- package/dist/styles/animate-fade.css +1 -1
- package/dist/styles/animate-float.css +1 -1
- package/dist/styles/animate-grow.css +1 -1
- package/dist/styles/animate-headline.css +1 -1
- package/dist/styles/animate-lighting.css +1 -1
- package/dist/styles/animate-marquee.css +1 -1
- package/dist/styles/animate-reveal.css +1 -1
- package/dist/styles/animate-rotate.css +1 -1
- package/dist/styles/animate-scramble.css +1 -1
- package/dist/styles/animate-shake.css +1 -1
- package/dist/styles/animate-slide.css +1 -1
- package/dist/styles/animate-split.css +1 -1
- package/dist/styles/animate-typing.css +1 -1
- package/dist/styles/animate-zoom.css +1 -1
- package/dist/styles/avatar.css +1 -1
- package/dist/styles/blockquote.css +1 -1
- package/dist/styles/box.css +1 -1
- package/dist/styles/breadcrumb.css +1 -1
- package/dist/styles/calendar.css +1 -1
- package/dist/styles/card.css +1 -1
- package/dist/styles/carousel.css +1 -1
- package/dist/styles/checkbox.css +1 -1
- package/dist/styles/chip.css +1 -1
- package/dist/styles/collapsible.css +1 -1
- package/dist/styles/color-picker.css +1 -1
- package/dist/styles/combobox.css +1 -1
- package/dist/styles/command-palette.css +1 -1
- package/dist/styles/confirm.css +1 -1
- package/dist/styles/data-table.css +1 -1
- package/dist/styles/date-picker.css +1 -1
- package/dist/styles/date-range-picker.css +1 -1
- package/dist/styles/date-time-picker.css +1 -1
- package/dist/styles/dialog.css +1 -1
- package/dist/styles/drawer.css +1 -1
- package/dist/styles/empty.css +1 -1
- package/dist/styles/floating-bottom-navigation.css +1 -1
- package/dist/styles/footer.css +1 -1
- package/dist/styles/gauge-chart.css +1 -1
- package/dist/styles/header.css +1 -1
- package/dist/styles/highlight.css +1 -1
- package/dist/styles/hover-card.css +1 -1
- package/dist/styles/image.css +1 -1
- package/dist/styles/list.css +1 -1
- package/dist/styles/menu.css +1 -1
- package/dist/styles/menubar.css +1 -1
- package/dist/styles/meter.css +1 -1
- package/dist/styles/navigation-menu.css +1 -1
- package/dist/styles/number-field.css +1 -1
- package/dist/styles/otp-field.css +1 -1
- package/dist/styles/overlay.css +1 -1
- package/dist/styles/page-layout.css +1 -1
- package/dist/styles/pill.css +1 -1
- package/dist/styles/popconfirm.css +1 -1
- package/dist/styles/popover.css +1 -1
- package/dist/styles/progress-box.css +1 -1
- package/dist/styles/progress-circular.css +1 -1
- package/dist/styles/progress-linear.css +1 -1
- package/dist/styles/radio-group.css +1 -1
- package/dist/styles/select.css +1 -1
- package/dist/styles/sidebar.css +1 -1
- package/dist/styles/slider.css +1 -1
- package/dist/styles/snackbar.css +1 -1
- package/dist/styles/spoiler.css +1 -1
- package/dist/styles/stack.css +1 -1
- package/dist/styles/switch.css +1 -1
- package/dist/styles/table.css +1 -1
- package/dist/styles/tabs.css +1 -1
- package/dist/styles/text-field.css +1 -1
- package/dist/styles/time-picker.css +1 -1
- package/dist/styles/tokens.css +1 -1
- package/dist/styles/toolbar.css +1 -1
- package/dist/styles/tour.css +1 -1
- package/dist/styles/transfer.css +1 -1
- package/dist/styles/tree-select.css +1 -1
- package/dist/styles/tree-view.css +1 -1
- package/dist/styles/typography.css +1 -1
- package/dist/styles.css +1 -1
- package/dist/tailwind.css +116 -4
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import*as o from"react";import{accentSlots as i}from"../../internal/accent.js";import{inertProps as r}from"../../internal/inert.js";import{MPStateLayer as s}from"../../internal/StateLayer.js";import{CONTROL_GAP as a,CONTROL_ICON as l,CONTROL_TEXT as c,hasContent as m,META_TEXT as d,PROSE_TEXT as p,SHEET_PAD_X as u}from"../../internal/scale.js";import{useMPSize as f}from"../../internal/config.js";const x={xs:"min-h-8",sm:"min-h-10",md:"min-h-14",lg:"min-h-16",xl:"min-h-18"},h={xs:"px-4",sm:"px-5",md:"px-6",lg:"px-8",xl:"px-10"},b={filled:"shadow-mp-2 bg-(--_mp-accent) text-(--_mp-on-accent)",tonal:"shadow-mp-2 bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",elevated:"shadow-mp-2 bg-mp-surface-container-low text-(--_mp-accent)",outlined:"border-mp-outline shadow-mp-1 border bg-mp-surface-container text-mp-on-surface",text:"shadow-mp-1 bg-mp-surface-container text-mp-on-surface"},w={static:{top:"",bottom:""},sticky:{top:"sticky top-3 z-20",bottom:"sticky bottom-3 z-20"},fixed:{top:"fixed inset-x-0 top-3 z-30 mx-auto w-fit",bottom:"fixed inset-x-0 bottom-3 z-30 mx-auto w-fit"}};export const MPPill=/*@__PURE__*/o.forwardRef(function({startIcon:g,endIcon:v,title:y,description:j,details:_,expanded:k=!1,position:N="static",side:z="top",onClick:B,variant:C="filled",size:I,color:R="secondary",className:$,style:H,children:P,...S},E){const F=f(I),L=o.useRef(null),M=o.useId(),[O,q]=o.useState(
|
|
2
|
+
import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import*as o from"react";import{accentSlots as i}from"../../internal/accent.js";import{inertProps as r}from"../../internal/inert.js";import{MPStateLayer as s}from"../../internal/StateLayer.js";import{CONTROL_GAP as a,CONTROL_ICON as l,CONTROL_TEXT as c,hasContent as m,META_TEXT as d,PROSE_TEXT as p,SHEET_PAD_X as u}from"../../internal/scale.js";import{useMPSize as f}from"../../internal/config.js";const x={xs:"min-h-8",sm:"min-h-10",md:"min-h-14",lg:"min-h-16",xl:"min-h-18"},h={xs:"px-4",sm:"px-5",md:"px-6",lg:"px-8",xl:"px-10"},b={filled:"shadow-mp-2 bg-(--_mp-accent) text-(--_mp-on-accent)",tonal:"shadow-mp-2 bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",elevated:"shadow-mp-2 bg-mp-surface-container-low text-(--_mp-accent)",outlined:"border-mp-outline shadow-mp-1 border bg-mp-surface-container text-mp-on-surface",text:"shadow-mp-1 bg-mp-surface-container text-mp-on-surface"},w={static:{top:"",bottom:""},sticky:{top:"sticky top-3 z-20",bottom:"sticky bottom-3 z-20"},fixed:{top:"fixed inset-x-0 top-3 z-30 mx-auto w-fit",bottom:"fixed inset-x-0 bottom-3 z-30 mx-auto w-fit"}};export const MPPill=/*@__PURE__*/o.forwardRef(function({startIcon:g,endIcon:v,title:y,description:j,details:_,expanded:k=!1,position:N="static",side:z="top",onClick:B,variant:C="filled",size:I,color:R="secondary",className:$,style:H,children:P,...S},E){const F=f(I),L=o.useRef(null),M=o.useId(),[O,q]=o.useState(null);o.useEffect(()=>{const e=L.current;if(!e)return;const t=new ResizeObserver(()=>q(e.scrollHeight));return t.observe(e),q(e.scrollHeight),()=>t.disconnect()},[_]);const A=Boolean(B),D=u[F],G=t(n,{children:[m(g)?e("span",{className:"flex shrink-0 items-center justify-center overflow-hidden rounded-mp-full [&_img]:size-full [&_img]:object-cover",style:{width:l[F],height:l[F]},children:g}):null,m(y)||m(j)||m(P)?t("span",{className:["flex min-w-0 flex-1 flex-col items-center justify-center text-center",h[F]].join(" "),children:[m(y)?e("span",{className:"max-w-full truncate",children:y}):null,m(j)?e("span",{className:`max-w-full truncate font-normal ${d} supports-[(not_(-webkit-appearance:-apple-pay-button))_or_(contain-intrinsic-size:1px)]:[color:color-mix(in_oklab,currentColor_72%,transparent)]`,children:j}):null,P]}):null]});return t("div",{ref:E,"data-mp-size":F,"data-mp-variant":C,"data-mp-expanded":k||void 0,className:["mp-pill inline-flex max-w-full flex-col overflow-hidden align-middle","box-border whitespace-nowrap select-none",k?"rounded-mp-xl":"rounded-mp-full","transition-[border-radius,background-color,box-shadow]","duration-(--mp-sys-motion-duration-short4) ease-mp-standard","motion-reduce:transition-none",c[F],b[C],w[N][z],$??""].filter(Boolean).join(" "),style:{...i(R),...H},...S,children:[t("div",{className:["flex shrink-0 items-center py-1",x[F],a[F],A?"ps-0":D,m(v)?"pe-1":A?"pe-0":""].filter(Boolean).join(" "),children:[A?t("button",{type:"button",className:["group relative flex min-w-0 flex-1 cursor-pointer items-center justify-center","self-stretch appearance-none border-0 bg-transparent text-inherit [font:inherit]","rounded-[inherit]",a[F],D,"outline-mp-secondary focus-visible:outline-2 focus-visible:-outline-offset-2","focus-visible:outline-solid outline-none"].join(" "),"aria-expanded":m(_)?k:void 0,"aria-controls":m(_)?M:void 0,onClick:B,children:[e(s,{}),G]}):G,m(v)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:v}):null]}),m(_)?e("div",{id:M,className:["overflow-hidden","transition-[height] duration-(--mp-sys-motion-duration-short4) ease-mp-standard","motion-reduce:transition-none"].join(" "),style:{height:k?O??"auto":0},...r(!k),children:e("div",{ref:L,className:`${D} pb-2 whitespace-normal ${p[F]}`,children:_})}):null]})});
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as l from"react";import{Progress as n}from"@base-ui/react/progress";import{accentSlots as r}from"../../internal/accent.js";import{VISUALLY_HIDDEN as s}from"../../internal/visually-hidden.js";import{META_TEXT as t,STACK_GAP as o}from"../../internal/scale.js";import{SEGMENT_GAP as i,SEGMENT_RADIUS as m,SEGMENT_SIZE as c,progressAriaText as u,progressFraction as f,progressText as p}from"../../internal/progress.js";import{useMPColor as d,useMPSize as h}from"../../internal/config.js";export const MPProgressBox=/*@__PURE__*/l.forwardRef(function({size:l,color:
|
|
2
|
+
import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as l from"react";import{Progress as n}from"@base-ui/react/progress";import{accentSlots as r}from"../../internal/accent.js";import{VISUALLY_HIDDEN as s}from"../../internal/visually-hidden.js";import{META_TEXT as t,STACK_GAP as o}from"../../internal/scale.js";import{SEGMENT_GAP as i,SEGMENT_RADIUS as m,SEGMENT_SIZE as c,progressAriaText as u,progressFraction as f,progressText as p}from"../../internal/progress.js";import{useMPColor as d,useMPSize as h}from"../../internal/config.js";import{useMPLocale as x}from"../../internal/locale.js";import{checkServerLocale as j,intlLocale as b}from"../../internal/intl.js";export const MPProgressBox=/*@__PURE__*/l.forwardRef(function({size:l,color:g,count:v=4,value:y=null,min:N=0,max:w=100,label:M,hideLabel:B=!1,showValue:L=!1,format:V,locale:_,className:k,style:z},A){const P=h(l),R=d(g),T=f(y,N,w),$=null===T,q=void 0!==V,C=x(_);q&&j(C);const D=B?null:M,E=Math.max(1,Math.floor(v));return a(n.Root,{ref:A,value:null===T?null:y??null,min:N,max:w,format:V,locale:b(C),getAriaValueText:u(T,q),"data-mp-size":P,className:["mp-progress-box inline-flex flex-col",o[P],k??""].filter(Boolean).join(" "),style:{...r(R),...z},children:[B&&M?e(n.Label,{className:s,children:M}):null,D||L?a("div",{className:["flex items-baseline gap-2",D?"justify-between":"justify-end",t].join(" "),children:[D?e(n.Label,{className:"text-mp-on-surface min-w-0 truncate",children:D}):null,L?e(n.Value,{className:"text-mp-on-surface-variant shrink-0 tabular-nums",children:e=>p(T,e,q)}):null]}):null,e(n.Track,{className:`flex ${i[P]}`,children:Array.from({length:E},(a,l)=>e("span",{className:["bg-mp-on-surface/12 relative overflow-hidden",c[P],m[P],$?"mp-progress-segment-wave bg-(--_mp-accent)":""].filter(Boolean).join(" "),style:$?{"--_mp-index":l}:void 0,children:$?null:e("span",{className:"absolute inset-y-0 start-0 bg-(--_mp-accent) transition-[width] duration-(--mp-sys-motion-duration-short4) ease-mp-standard",style:{width:`${Math.min(100,Math.max(0,100*(T*E-l)))}%`}})},l))})]})});
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import{jsx as r,jsxs as e}from"react/jsx-runtime";import*as a from"react";import{Progress as
|
|
2
|
+
import{jsx as r,jsxs as e}from"react/jsx-runtime";import*as a from"react";import{Progress as t}from"@base-ui/react/progress";import{accentSlots as s}from"../../internal/accent.js";import{VISUALLY_HIDDEN as o}from"../../internal/visually-hidden.js";import{CONTROL_GAP as n,META_TEXT as l}from"../../internal/scale.js";import{RING_DIAMETER as i,RING_STROKE as c,progressAriaText as m,progressFraction as u,progressText as f}from"../../internal/progress.js";import{useMPColor as p,useMPSize as h}from"../../internal/config.js";import{useMPLocale as d}from"../../internal/locale.js";import{useOffscreenPause as j}from"../../internal/intersection.js";import{useJoinedRef as x}from"../../internal/ref.js";import{checkServerLocale as k,intlLocale as g}from"../../internal/intl.js";export const MPProgressCircular=/*@__PURE__*/a.forwardRef(function({size:a,color:v,value:y=null,min:N=0,max:b=100,label:w,hideLabel:L=!1,showValue:$=!1,format:V,locale:z,className:B,style:D},P){const R=h(a),W=p(v),_=u(y,N,b),A=null===_,C=void 0!==V,M=d(z),O=j(A),T=x(P,O);C&&k(M);const q=i[R],E=c[R],F=q/2,G=F-E/2;return e(t.Root,{ref:T,value:null===_?null:y??null,min:N,max:b,format:V,locale:g(M),getAriaValueText:m(_,C),"data-mp-size":R,className:["mp-progress-circular inline-flex items-center",n[R],l,B??""].filter(Boolean).join(" "),style:{...s(W),...D},children:[e("svg",{className:A?"mp-progress-circular-turn shrink-0":"shrink-0",width:q,height:q,viewBox:`0 0 ${q} ${q}`,fill:"none","aria-hidden":"true",children:[r("circle",{cx:F,cy:F,r:G,stroke:"var(--_mp-color-on-surface)",strokeOpacity:.12,strokeWidth:E}),r("circle",{cx:F,cy:F,r:G,pathLength:100,stroke:"var(--_mp-accent)",strokeWidth:E,strokeLinecap:"round",className:A?"mp-progress-circular-arc":"transition-[stroke-dashoffset] duration-(--mp-sys-motion-duration-short4) ease-mp-standard",transform:`rotate(-90 ${F} ${F})`,...A?null:{strokeDasharray:100,strokeDashoffset:100*(1-_)}})]}),L?w?r(t.Label,{className:o,children:w}):null:w?r(t.Label,{className:"text-mp-on-surface min-w-0 truncate",children:w}):null,$?r(t.Value,{className:"text-mp-on-surface-variant shrink-0 tabular-nums",children:r=>f(_,r,C)}):null]})});
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import{jsx as e,jsxs as
|
|
2
|
+
import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as l from"react";import{Progress as a}from"@base-ui/react/progress";import{accentSlots as n}from"../../internal/accent.js";import{VISUALLY_HIDDEN as s}from"../../internal/visually-hidden.js";import{META_TEXT as t,STACK_GAP as i}from"../../internal/scale.js";import{BAR_THICKNESS as o,progressAriaText as m,progressFraction as c,progressText as u}from"../../internal/progress.js";import{useMPColor as f,useMPSize as p}from"../../internal/config.js";import{useMPLocale as d}from"../../internal/locale.js";import{useOffscreenPause as j}from"../../internal/intersection.js";import{useJoinedRef as h}from"../../internal/ref.js";import{checkServerLocale as g,intlLocale as x}from"../../internal/intl.js";export const MPProgressLinear=/*@__PURE__*/l.forwardRef(function({size:b,color:N,value:v=null,min:w=0,max:y=100,label:L,hideLabel:V=!1,showValue:$=!1,format:k,locale:z,className:P,style:R},T){const A=p(b),B=f(N),F=c(v,w,y),I=null===F,M=V?null:L,_=void 0!==k,q=d(z),C=j(I),D=h(T,C);_&&g(q);const E="absolute inset-y-0 rounded-mp-full bg-(--_mp-accent)";return r(a.Root,{ref:D,value:null===F?null:v??null,min:w,max:y,format:k,locale:x(q),getAriaValueText:m(F,_),"data-mp-size":A,className:["mp-progress-linear flex w-full flex-col",i[A],P??""].filter(Boolean).join(" "),style:{...n(B),...R},children:[V&&L?e(a.Label,{className:s,children:L}):null,M||$?r("div",{className:["flex items-baseline gap-2",M?"justify-between":"justify-end",t].join(" "),children:[M?e(a.Label,{className:"text-mp-on-surface min-w-0 truncate",children:M}):null,$?e(a.Value,{className:"text-mp-on-surface-variant shrink-0 tabular-nums",children:e=>u(F,e,_)}):null]}):null,e(a.Track,{className:["rounded-mp-full bg-mp-on-surface/12 relative w-full overflow-hidden",o[A]].join(" "),children:I?r(l.Fragment,{children:[e("span",{className:`${E} mp-progress-linear-lead`}),e("span",{className:`${E} mp-progress-linear-trail`})]}):e(a.Indicator,{className:`${E} start-0 transition-[width] duration-(--mp-sys-motion-duration-short4) ease-mp-standard`})})]})});
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as a from"react";import{Radio as i}from"@base-ui/react/radio";import{RadioGroup as l}from"@base-ui/react/radio-group";import{Field as n}from"@base-ui/react/field";import{accentSlots as o}from"../../internal/accent.js";import{DOT_MOTION as
|
|
2
|
+
import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as a from"react";import{Radio as i}from"@base-ui/react/radio";import{RadioGroup as l}from"@base-ui/react/radio-group";import{Field as n}from"@base-ui/react/field";import{accentSlots as o}from"../../internal/accent.js";import{DOT_MOTION as s}from"../../internal/mark.js";import{MPStateLayer as t}from"../../internal/StateLayer.js";import{MPSupportingText as d}from"../../internal/SupportingText.js";import{META_TEXT as c,PROSE_TEXT as m,hasContent as p}from"../../internal/scale.js";import{useMPColor as u,useMPSize as f}from"../../internal/config.js";const x={xs:{ring:"size-4",fill:"size-2",halo:"size-8"},sm:{ring:"size-[18px]",fill:"size-[10px]",halo:"size-9"},md:{ring:"size-5",fill:"size-2.5",halo:"size-10"},lg:{ring:"size-[22px]",fill:"size-3",halo:"size-11"},xl:{ring:"size-6",fill:"size-3",halo:"size-12"}},g=/*@__PURE__*/a.createContext({size:"md",readOnly:!1,invalid:!1});export const MPRadio=/*@__PURE__*/a.forwardRef(function({value:l,label:o,description:d,disabled:u=!1,id:f,className:h,style:b},z){const j=a.useContext(g),v=x[j.size],y=a.useId(),N=f??y;return e(n.Root,{className:["mp-radio inline-block max-w-full align-top",h??""].filter(Boolean).join(" "),style:b,disabled:u,"data-mp-value":l,children:r("div",{className:["flex items-start gap-3",m[j.size]].join(" "),children:[e("span",{className:"flex h-[1lh] shrink-0 items-center",children:r(i.Root,{ref:z,id:N,value:l,disabled:u,className:["mp-radio__dot group relative inline-flex shrink-0 items-center justify-center","box-border rounded-full border-2 p-0","appearance-none bg-transparent font-[inherit] outline-none","transition-[border-color] duration-(--mp-sys-motion-duration-short4)",v.ring,u?"border-mp-on-surface/38 cursor-default":[j.readOnly?"cursor-default":"cursor-pointer",j.invalid?"border-mp-error":"border-mp-on-surface-variant","data-checked:border-(--_mp-accent)"].join(" ")].join(" "),children:[u?null:e(t,{layer:["top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full",v.halo,"bg-mp-on-surface","group-data-checked:bg-(--_mp-accent)"].join(" ")}),e(i.Indicator,{className:["mp-radio__fill rounded-full",v.fill,s,u?"bg-mp-on-surface/38":"bg-(--_mp-accent)"].join(" ")})]})}),p(o)||p(d)?r("span",{className:"flex min-w-0 flex-col gap-0.5",children:[p(o)?e(n.Label,{className:["leading-[1.4]",u?"text-mp-on-surface/38 cursor-default":j.readOnly?"text-mp-on-surface":"text-mp-on-surface cursor-pointer"].join(" "),children:o}):null,p(d)?e(n.Description,{className:`${c} text-mp-on-surface-variant data-disabled:text-mp-on-surface/38 m-0`,children:d}):null]}):null]})})});export const MPRadioGroup=/*@__PURE__*/a.forwardRef(function({value:i,defaultValue:s,onValueChange:t,label:m,description:x,errorMessage:h,orientation:b="vertical",size:z,color:j,required:v=!1,disabled:y=!1,readOnly:N=!1,name:R,children:_,className:k,style:w},O){const M=f(z),C=u(j),V=p(h),I=V?"error":C,P=a.useId(),S=a.useMemo(()=>({size:M,readOnly:N,invalid:V}),[M,N,V]);return e(g.Provider,{value:S,children:r(n.Root,{className:["mp-radio-group flex flex-col gap-2",k??""].filter(Boolean).join(" "),disabled:y,invalid:V,"data-mp-size":M,"data-mp-orientation":b,style:{...o(I),...w},children:[p(m)?r("span",{id:P,className:[c,y?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:[m,v?e("span",{"aria-hidden":"true",children:" *"}):null]}):null,e(l,{ref:O,"aria-labelledby":p(m)?P:void 0,value:i,defaultValue:s,onValueChange:e=>t?.(String(e??"")),disabled:y,readOnly:N,required:v,name:R,className:["flex","horizontal"===b?"flex-row flex-wrap gap-x-6 gap-y-2":"flex-col gap-2"].join(" "),children:_}),e(d,{description:x,errorMessage:h})]})})});
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import{jsx as r}from"react/jsx-runtime";import{CartesianFrame as
|
|
2
|
+
import{jsx as r}from"react/jsx-runtime";import*as e from"react";import{CartesianFrame as s}from"../../internal/ChartFrame.js";import{MARKER_RADIUS as a,MARK_SHAPES as t,bubbleRadius as c,markPath as o,pointX as i}from"../../internal/chart.js";export function MPScatterChart({bubble:l=!1,maxRadius:n=22,shapes:u=!0,...m}){const h=e.useCallback((e,s)=>{const a=u?t[e%t.length]:"circle";return r("svg",{width:10,height:10,viewBox:"0 0 10 10","aria-hidden":"true",className:"block",children:r("path",{d:o(a,5,5,4),fill:"cross"===a?"none":s,stroke:s,strokeWidth:"cross"===a?1.5:0})})},[u]);return r(s,{...m,xScale:"value",includeZero:!1,markRadius:20,markInset:l?n+2:a.xl+2,marks:({values:r,visible:e,valuePx:s,categoryValuePx:t,categories:o,size:u})=>{const m=a[u],h=l?r.reduce((r,s,a)=>e[a]?s.reduce((r,e)=>Math.max(r,e.z??0),r):r,0):0;return r.flatMap((r,a)=>e[a]?r.flatMap((r,e)=>{const u=i(r,e,o);if(null===r.value||null===u)return[];const d=l?c(r.z??0,h,n,m):m+1;return[{series:a,index:e,x:t(u),y:s(r.value),r:d}]}):[])},swatch:h,children:({marks:e,colors:s,activeMark:a,hovered:c})=>r("g",{className:"mp-scatter-chart__marks",children:e.map((e,i)=>{const l=(n=e.series,u?t[n%t.length]:"circle");var n;const m=a===e,h=null!==c&&c!==e.series;return r("path",{d:o(l,e.x,e.y,m?e.r+1.5:e.r),fill:"cross"===l?"none":s[e.series],stroke:"cross"===l?s[e.series]:"var(--_mp-color-surface)",strokeWidth:"cross"===l?2:1.5,strokeLinecap:"round",opacity:h?.15:m?1:.85},i)})})})}
|
|
@@ -55,6 +55,17 @@ export interface MPSidebarProps extends Omit<React.ComponentPropsWithoutRef<'asi
|
|
|
55
55
|
* to bring it back would be a sidebar the reader has lost.
|
|
56
56
|
*/
|
|
57
57
|
collapseBelow?: MPPageCollapse;
|
|
58
|
+
/**
|
|
59
|
+
* Keeps the sidebar's contents in the document while it is a closed drawer,
|
|
60
|
+
* hidden, rather than taking them out.
|
|
61
|
+
*
|
|
62
|
+
* Collapsed, a sidebar is a modal drawer, and a closed one is not on the page
|
|
63
|
+
* at all — so below `collapseBelow` its links vanished from the page a
|
|
64
|
+
* crawler renders at a phone's width. Turn it on for a sidebar that is the
|
|
65
|
+
* site's navigation. See `MPDrawer`'s own `keepMounted`.
|
|
66
|
+
* @default false
|
|
67
|
+
*/
|
|
68
|
+
keepMounted?: boolean;
|
|
58
69
|
/**
|
|
59
70
|
* Whether the drawer is open. Only meaningful once the sidebar has collapsed;
|
|
60
71
|
* a column is not opened, it is there.
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as r from"react";import{MPDrawer as n}from"../drawer/MPDrawer.js";import{pixelsIn as o}from"../../internal/length.js";import{useMPLocale as i,useMPMessages as a}from"../../internal/locale.js";import{LAYOUT as s}from"../../internal/messages/layout.js";import{barSurface as l,drawerSide as d,EXPANDED_ONLY as u,MPPageLayoutContext as c,MPSidebarSideContext as m,useMPCollapsed as p}from"../../internal/page-layout.js";import{sheetPadX as f,sheetPadY as v}from"../../internal/density.js";import{useMPDensity as b,useMPSize as y}from"../../internal/config.js";const h={xs:"15rem",sm:"18rem",md:"22.5rem",lg:"26rem",xl:"30rem"};function g(e,t){return null==e?t:"number"==typeof e?e:o(e,"undefined"==typeof window?void 0:window.innerWidth)??t}export const MPSidebar=/*@__PURE__*/r.forwardRef(function({side:o,width:w,minWidth:x=160,maxWidth:j=480,resizable:_=!1,onResize:
|
|
2
|
+
import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as r from"react";import{MPDrawer as n}from"../drawer/MPDrawer.js";import{pixelsIn as o}from"../../internal/length.js";import{useMPLocale as i,useMPMessages as a}from"../../internal/locale.js";import{LAYOUT as s}from"../../internal/messages/layout.js";import{barSurface as l,drawerSide as d,EXPANDED_ONLY as u,MPPageLayoutContext as c,MPSidebarSideContext as m,useMPCollapsed as p}from"../../internal/page-layout.js";import{sheetPadX as f,sheetPadY as v}from"../../internal/density.js";import{useMPDensity as b,useMPSize as y}from"../../internal/config.js";const h={xs:"15rem",sm:"18rem",md:"22.5rem",lg:"26rem",xl:"30rem"};function g(e,t){return null==e?t:"number"==typeof e?e:o(e,"undefined"==typeof window?void 0:window.innerWidth)??t}export const MPSidebar=/*@__PURE__*/r.forwardRef(function({side:o,width:w,minWidth:x=160,maxWidth:j=480,resizable:_=!1,onResize:k,onResizeEnd:R,collapseBelow:C,keepMounted:M=!1,open:z,defaultOpen:P=!1,onOpenChange:E,sticky:L=!0,title:B,variant:S="outlined",elevation:N,size:A,density:D,padded:O=!0,label:$,locale:I,className:W,style:T,children:X,...K},V){const q=y(A),F=b(D),G=r.useContext(c),H=r.useContext(m),J=o??H??"start",Q=i(I??G.locale),U=a(s,Q),Y=C??(G.present?G.collapseBelow:"none"),Z=p(Y),[ee,te]=r.useState(P),re=void 0!==z,ne=re?z:G.present?G.open[J]:ee,oe=e=>{re||(G.present?G.setOpen(J,e):te(e)),E?.(e)},ie=void 0===w?h[q]:"number"==typeof w?`${w}px`:w,ae=r.useRef(null),se=r.useRef(ie),le=r.useRef(null),de=r.useId();se.current!==ie&&(se.current=ie,ae.current=null);const ue=ae.current??ie,ce=r.useRef(null),me=r.useCallback(e=>{ce.current=e,"function"==typeof V?V(e):V&&(V.current=e)},[V]),pe=r.useRef(null);r.useEffect(()=>()=>pe.current?.(),[]);const fe=e=>{const t=ce.current;if(!t)return e;const r=Math.min(g(j,480),Math.max(g(x,160),Math.round(e)));return ae.current=`${r}px`,t.style.setProperty("--_mp-sidebar-width",ae.current),le.current?.setAttribute("aria-valuenow",String(r)),r};return Z?e(n,{side:d(J),mode:"modal",open:ne,onOpenChange:oe,title:B??$??U.sidebar,keepMounted:M,size:q,locale:Q,extent:void 0===w?void 0:ue,className:W,style:T,children:X}):t("aside",{ref:me,"aria-label":$??U.sidebar,"data-mp-size":q,"data-mp-variant":S,"data-mp-side":J,className:["mp-sidebar text-mp-on-surface relative box-border flex min-w-0 shrink-0 flex-col","w-(--_mp-sidebar-width)",l(S,N),"outlined"===S?"border-mp-outline-variant "+("start"===J?"border-e":"border-s"):"","content"===G.scroll?"h-full":L?["self-start sticky [top:var(--_mp-layout-header,0px)]","[height:calc(100dvh_-_var(--_mp-layout-header,0px)_-_var(--_mp-layout-footer,0px))]"].join(" "):"",u[Y],W??""].filter(Boolean).join(" "),style:{"--_mp-sidebar-width":ue,...T},...K,children:[e("div",{id:de,className:["mp-sidebar__body min-h-0 flex-1 overflow-y-auto overscroll-contain",O?`${f(q,F)} ${v(q,F)}`:""].filter(Boolean).join(" "),children:X}),_?e("div",{ref:le,role:"separator","aria-orientation":"vertical","aria-label":U.resizeSidebar,"aria-valuemin":Math.round(g(x,160)),"aria-valuemax":Math.round(g(j,480)),"aria-valuenow":Math.round(g(ue,g(h[q],360))),"aria-controls":de,tabIndex:0,className:["mp-sidebar__handle absolute inset-y-0 z-1 w-2 cursor-col-resize bg-transparent","start"===J?"-me-1 end-0":"-ms-1 start-0","hover:bg-mp-outline-variant data-dragging:bg-mp-outline-variant","transition-colors duration-(--mp-sys-motion-duration-short4)","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-0","focus-visible:outline-solid outline-none"].join(" "),onPointerDown:e=>{const t=ce.current;if(!t||0!==e.button)return;const r=e.currentTarget;r.setPointerCapture(e.pointerId),r.dataset.dragging="true";const n=document.body.style.getPropertyValue("-webkit-user-select");document.body.style.setProperty("-webkit-user-select","none");const o=e.clientX,i=t.getBoundingClientRect().width,a="rtl"===getComputedStyle(t).direction,s="start"===J===a?-1:1;let l=i;const d=e=>{l=fe(i+(e.clientX-o)*s),k?.(l)},u=()=>{pe.current=null,r.removeEventListener("pointermove",d),r.removeEventListener("pointerup",c),r.removeEventListener("pointercancel",c),delete r.dataset.dragging,n?document.body.style.setProperty("-webkit-user-select",n):document.body.style.removeProperty("-webkit-user-select")},c=()=>{u(),R?.(l)};pe.current=u,r.addEventListener("pointermove",d),r.addEventListener("pointerup",c),r.addEventListener("pointercancel",c)},onKeyDown:e=>{if("ArrowLeft"!==e.key&&"ArrowRight"!==e.key)return;e.preventDefault();const t="rtl"===getComputedStyle(e.currentTarget).direction,r="start"===J===t?-1:1;(e=>{const t=ce.current;if(!t)return;const r=fe(t.getBoundingClientRect().width+e);k?.(r),R?.(r)})(("ArrowRight"===e.key?16:-16)*r)}}):null]})});
|
|
@@ -59,6 +59,11 @@ export interface MPSliderProps {
|
|
|
59
59
|
showValue?: boolean;
|
|
60
60
|
/** How the readout is written. Passed to `Intl.NumberFormat`. */
|
|
61
61
|
format?: Intl.NumberFormatOptions;
|
|
62
|
+
/**
|
|
63
|
+
* The locale the readout and the announced value are written in. Defaults to
|
|
64
|
+
* the nearest `MPLocaleProvider`, then to the runtime's own.
|
|
65
|
+
*/
|
|
66
|
+
locale?: string;
|
|
62
67
|
/**
|
|
63
68
|
* Which way the slider runs. A vertical slider has no length of its own, so
|
|
64
69
|
* give it a height — the default is a starting point, not a rule.
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as t from"react";import{Slider as r}from"@base-ui/react/slider";import{accentSlots as s}from"../../internal/accent.js";import{MPStateLayer as n}from"../../internal/StateLayer.js";import{META_TEXT as l,hasContent as i}from"../../internal/scale.js";import{useMPColor as o,useMPSize as m}from"../../internal/config.js";const
|
|
2
|
+
import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as t from"react";import{Slider as r}from"@base-ui/react/slider";import{accentSlots as s}from"../../internal/accent.js";import{MPStateLayer as n}from"../../internal/StateLayer.js";import{META_TEXT as l,hasContent as i}from"../../internal/scale.js";import{useMPColor as o,useMPSize as m}from"../../internal/config.js";import{useMPLocale as c}from"../../internal/locale.js";import{checkServerLocale as u,intlLocale as p}from"../../internal/intl.js";const d={xs:{thickness:"h-0.5",cross:"w-0.5",handle:"size-3.5",strip:"h-8",stripCross:"w-8"},sm:{thickness:"h-[3px]",cross:"w-[3px]",handle:"size-4",strip:"h-9",stripCross:"w-9"},md:{thickness:"h-1",cross:"w-1",handle:"size-5",strip:"h-10",stripCross:"w-10"},lg:{thickness:"h-1.5",cross:"w-1.5",handle:"size-6",strip:"h-11",stripCross:"w-11"},xl:{thickness:"h-2",cross:"w-2",handle:"size-7",strip:"h-12",stripCross:"w-12"}},f=/*@__PURE__*/["duration-(--mp-sys-motion-duration-short2) ease-mp-standard","motion-reduce:transition-none"].join(" "),h={xs:"size-[2px]",sm:"size-[2px]",md:"size-[3px]",lg:"size-1",xl:"size-1.5"},g={xs:"size-8",sm:"size-9",md:"size-10",lg:"size-11",xl:"size-12"};export const MPSlider=/*@__PURE__*/t.forwardRef(function({value:b,defaultValue:x,onValueChange:v,onValueCommitted:j,min:w=0,max:y=100,step:z=1,marks:N,label:_,description:k,showValue:C=!1,format:V,locale:A,orientation:M="horizontal",size:S,color:$,disabled:I=!1,name:B,"aria-label":L,className:R,style:T},F){const P=m(S),X=o($),Y=c(A),q="vertical"===M;u(Y);const D=d[P],E=t.useId(),G=b??x,H=Array.isArray(G)?G.length:1,J=t.useMemo(()=>{if(!N||y<=w)return[];if(!0!==N)return N.filter(e=>e.value>=w&&e.value<=y);const e=Math.floor((y-w)/z);return!Number.isFinite(e)||e<1||e>50?[]:Array.from({length:e+1},(e,a)=>({value:w+a*z}))},[N,w,y,z]),[K,O]=t.useState(x),Q=b??K,U=t.useMemo(()=>{const e=Array.isArray(Q)?Q:void 0===Q?[]:[Q];return 0===e.length?null:1===e.length?{from:w,to:e[0]}:{from:Math.min(...e),to:Math.max(...e)}},[Q,w]),W=e=>(e-w)/(y-w)*100+"%";return a(r.Root,{ref:F,value:b,defaultValue:x,onValueChange:e=>{void 0===b&&O(e),v?.(e)},onValueCommitted:e=>j?.(e),min:w,max:y,step:z,disabled:I,orientation:M,format:V,locale:p(Y),name:B,"data-mp-size":P,className:["mp-slider flex",q?"w-fit flex-col items-center gap-2":"w-full flex-col gap-1",I?"cursor-default":"",R??""].filter(Boolean).join(" "),style:{...s(X),...T},children:[i(_)||C?a("div",{className:["flex w-full items-baseline gap-2",l].join(" "),children:[i(_)?e(r.Label,{className:I?"text-mp-on-surface/38":"text-mp-on-surface-variant",children:_}):null,C?e(r.Value,{className:["ms-auto tabular-nums",I?"text-mp-on-surface/38":"text-mp-on-surface"].join(" ")}):null]}):null,e(r.Control,{className:["mp-slider__control group/rail flex touch-none items-center justify-center select-none",q?`${D.stripCross} h-40 flex-col`:`w-full ${D.strip}`,I?"":"cursor-pointer"].filter(Boolean).join(" "),children:a(r.Track,{className:["mp-slider__track rounded-mp-full relative",q?`${D.cross} h-full`:`${D.thickness} w-full`,I?"bg-mp-on-surface/12":"bg-mp-surface-container-highest"].join(" "),children:[e(r.Indicator,{className:["rounded-mp-full","[transition-property:inset-inline-start,width,bottom,height]",f,"group-data-dragging/rail:transition-none",I?"bg-mp-on-surface/38":"bg-(--_mp-accent)"].join(" ")}),J.map(a=>{const t=null!==U&&a.value>=U.from&&a.value<=U.to;return e("span",{"aria-hidden":"true",className:["mp-slider__tick pointer-events-none absolute rounded-full",h[P],I?"bg-mp-on-surface/38":t?"bg-(--_mp-on-accent)":"bg-mp-on-surface-variant"].join(" "),style:q?{bottom:W(a.value),insetInlineStart:"50%",transform:"translate(-50%, 50%)"}:{insetInlineStart:W(a.value),top:"50%",transform:"translate(-50%, -50%)"}},`tick:${a.value}`)}),Array.from({length:H},(a,t)=>e(r.Thumb,{index:t,"aria-label":i(_)?void 0:L,"aria-describedby":i(k)?E:void 0,className:["mp-slider__handle group rounded-mp-full relative outline-none","[transition-property:inset-inline-start,bottom]",f,"data-dragging:transition-none",D.handle,I?"bg-mp-on-surface/38 cursor-default":"bg-(--_mp-accent) cursor-grab active:cursor-grabbing"].join(" "),children:I?null:e(n,{layer:["top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full",g[P],"bg-(--_mp-accent)"].join(" "),className:"group-data-dragging:opacity-16"})},t))]})}),J.some(e=>i(e.label))?e("div",{"aria-hidden":"true",className:["mp-slider__marks relative",l,q?"h-full":"w-full",I?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),style:q?void 0:{height:"1lh"},children:J.map(a=>i(a.label)?e("span",{className:"absolute whitespace-nowrap",style:q?{bottom:W(a.value),transform:"translateY(50%)"}:{insetInlineStart:W(a.value),transform:"translateX(-50%)"},children:a.label},`label:${a.value}`):null)}):null,i(k)?e("div",{id:E,className:[l,I?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:k}):null]})});
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import{jsx as t,jsxs as e}from"react/jsx-runtime";import*as o from"react";import{Toast as s}from"@base-ui/react/toast";import{MPIcon as
|
|
2
|
+
import{jsx as t,jsxs as e}from"react/jsx-runtime";import*as o from"react";import{Toast as s}from"@base-ui/react/toast";import{MPIcon as n}from"../icon/MPIcon.js";import{CloseIcon as i}from"../../constants/icons.js";import{accentSlots as a}from"../../internal/accent.js";import{useMPLocale as r,useMPMessages as l}from"../../internal/locale.js";import{COMMON as c}from"../../internal/messages/common.js";import{MPStateLayer as m}from"../../internal/StateLayer.js";import{cssLength as p}from"../../internal/length.js";import{PORTAL_LAYER as d}from"../../internal/surface.js";import{useMPSize as u}from"../../internal/config.js";const f={"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"},b=/*@__PURE__*/["transition-[opacity,translate] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard","data-starting-style:opacity-0 data-ending-style:opacity-0"].join(" "),x={top:"motion-safe:data-starting-style:-translate-y-full motion-safe:data-ending-style:-translate-y-full",bottom:"motion-safe:data-starting-style:translate-y-full motion-safe:data-ending-style:translate-y-full"},h={xs:"text-mp-body-small",sm:"text-mp-body-small",md:"text-mp-body-medium",lg:"text-mp-body-medium",xl:"text-mp-body-large"},y={xs:"min-h-9 gap-1.5 py-1.5 ps-3 pe-1.5",sm:"min-h-10 gap-2 py-2 ps-3.5 pe-2",md:"min-h-12 gap-2 py-2.5 ps-4 pe-2",lg:"min-h-14 gap-3 py-3 ps-5 pe-2.5",xl:"min-h-16 gap-3 py-3.5 pe-3 ps-6"},g={xs:16,sm:18,md:20,lg:22,xl:24};function v(t){const{color:e,icon:o,position:s,className:n,message:i,actionLabel:a,onAction:r,...l}=t;return{...l,title:i,data:{color:e,icon:o,position:s,className:n},actionProps:void 0===a?void 0:{children:a,onClick:r}}}export function useMPSnackbar(){const t=s.useToastManager();return o.useMemo(()=>({add:e=>t.add(v(e)),close:e=>t.close(e),update:(e,o)=>t.update(e,v(o)),promise:(e,o)=>t.promise(e,{loading:v(o.loading),success:t=>v("function"==typeof o.success?o.success(t):o.success),error:t=>v("function"==typeof o.error?o.error(t):o.error)}),snackbars:t.toasts}),[t])}function j({toast:o,color:r,size:l,showClose:c,closeLabel:p,swipeDirection:d,edge:u}){const f=o.data?.color??r,v=o.data?.icon,j={"--_mp-plate":f?`var(--_mp-color-${f}-container)`:"var(--_mp-color-inverse-surface)","--_mp-on-plate":f?`var(--_mp-color-on-${f}-container)`:"var(--_mp-color-inverse-on-surface)","--_mp-plate-action":f?`var(--_mp-color-${f})`:"var(--_mp-color-inverse-primary)",...f?a(f):null};return e(s.Root,{toast:o,swipeDirection:d,"data-mp-size":l,className:["mp-snackbar rounded-mp-xs shadow-mp-3 pointer-events-auto flex w-full items-center","bg-(--_mp-plate) text-(--_mp-on-plate) outline-none",y[l],h[l],b,x[u],"data-limited:hidden",o.data?.className??""].filter(Boolean).join(" "),style:j,children:[v?t("span",{className:"flex shrink-0 items-center",children:v}):null,t(s.Title,{render:t("span",{}),className:"min-w-0 flex-1 py-0.5 ps-1 [min-inline-size:min(280px,100%)]"}),t(s.Action,{className:["text-mp-label-large flex shrink-0 cursor-pointer items-center","rounded-mp-full h-8 px-3 text-(--_mp-plate-action)","transition-colors duration-(--mp-sys-motion-duration-short4)","hover:bg-(--_mp-plate-action)/8 focus-visible:bg-(--_mp-plate-action)/10","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none"].join(" ")}),c?e(s.Close,{"aria-label":p,className:["group rounded-mp-full relative flex size-8 shrink-0 cursor-pointer","items-center justify-center text-(--_mp-on-plate)","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none"].join(" "),children:[t(m,{}),t(n,{icon:i,size:g[l]})]}):null]})}const _=["top-start","top-center","top-end","bottom-start","bottom-center","bottom-end"];function w({fallback:e,width:o,...n}){const{toasts:i}=s.useToastManager();return t(s.Portal,{children:t(s.Viewport,{className:`${d} pointer-events-none fixed inset-0`,children:_.map(s=>{const a=i.filter(t=>(t.data?.position??e)===s);if(0===a.length)return null;const r=s.startsWith("top")?"top":"bottom",l=["top"===r?"up":"down","left","right"];return t("div",{"data-mp-position":s,className:["mp-snackbar__stack pointer-events-none absolute inset-x-0 flex flex-col gap-2 p-4",f[s]].join(" "),children:a.map(e=>t("div",{className:"w-full",style:{maxWidth:p(o)},children:t(j,{toast:e,swipeDirection:l,edge:r,...n})},e.id))},s)})})})}export function MPSnackbarProvider({color:o,position:n="bottom-start",timeout:i=5e3,limit:a=3,width:m=600,size:p,showClose:d=!0,closeLabel:f,locale:b,children:x}){const h=u(p),y=r(b),g=l(c,y);return e(s.Provider,{timeout:i,limit:a,children:[x,t(w,{fallback:n,width:m,color:o,size:h,showClose:d,closeLabel:f??g.close})]})}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import{jsx as e,Fragment as t,jsxs as a}from"react/jsx-runtime";import*as r from"react";import{Switch as n}from"@base-ui/react/switch";import{Field as i}from"@base-ui/react/field";import{MPIcon as s}from"../icon/MPIcon.js";import{CheckIcon as o,CloseIcon as c}from"../../constants/icons.js";import{accentSlots as l}from"../../internal/accent.js";import{MPStateLayer as d}from"../../internal/StateLayer.js";import{MPSupportingText as h}from"../../internal/SupportingText.js";import{PROSE_TEXT as m,hasContent as p}from"../../internal/scale.js";import{useMPColor as u,useMPSize as f}from"../../internal/config.js";const g={xs:{track:"h-5 w-8",thumb:"start-[5px] size-2.5 data-checked:start-[15px] data-checked:size-3.5",halo:"size-8",glyph:8},sm:{track:"h-6 w-10",thumb:"start-1.5 size-3 data-checked:start-[19px] data-checked:size-[18px]",halo:"size-9",glyph:10},md:{track:"h-8 w-13",thumb:"start-2 size-4 data-checked:start-6 data-checked:size-6",halo:"size-10",glyph:14},lg:{track:"h-9 w-15",thumb:"start-[9px] size-[18px] data-checked:start-7 data-checked:size-7",halo:"size-11",glyph:16},xl:{track:"h-10 w-17",thumb:"start-2.5 size-5 data-checked:start-[33px] data-checked:size-[30px]",halo:"size-12",glyph:18}};export const MPSwitch=/*@__PURE__*/r.forwardRef(function({checked:k,defaultChecked:b,onCheckedChange:x,label:y,description:j,errorMessage:z,icons:w=!1,labelPlacement:N="end",size:_,color:C,required:M=!1,disabled:v=!1,readOnly:P=!1,name:R,id:S,fullWidth:W=!1,className:q,style:B},
|
|
2
|
+
import{jsx as e,Fragment as t,jsxs as a}from"react/jsx-runtime";import*as r from"react";import{Switch as n}from"@base-ui/react/switch";import{Field as i}from"@base-ui/react/field";import{MPIcon as s}from"../icon/MPIcon.js";import{CheckIcon as o,CloseIcon as c}from"../../constants/icons.js";import{accentSlots as l}from"../../internal/accent.js";import{MPStateLayer as d}from"../../internal/StateLayer.js";import{MPSupportingText as h}from"../../internal/SupportingText.js";import{PROSE_TEXT as m,hasContent as p}from"../../internal/scale.js";import{useMPColor as u,useMPSize as f}from"../../internal/config.js";const g={xs:{track:"h-5 w-8",thumb:"start-[5px] size-2.5 data-checked:start-[15px] data-checked:size-3.5",halo:"size-8",glyph:8},sm:{track:"h-6 w-10",thumb:"start-1.5 size-3 data-checked:start-[19px] data-checked:size-[18px]",halo:"size-9",glyph:10},md:{track:"h-8 w-13",thumb:"start-2 size-4 data-checked:start-6 data-checked:size-6",halo:"size-10",glyph:14},lg:{track:"h-9 w-15",thumb:"start-[9px] size-[18px] data-checked:start-7 data-checked:size-7",halo:"size-11",glyph:16},xl:{track:"h-10 w-17",thumb:"start-2.5 size-5 data-checked:start-[33px] data-checked:size-[30px]",halo:"size-12",glyph:18}};export const MPSwitch=/*@__PURE__*/r.forwardRef(function({checked:k,defaultChecked:b,onCheckedChange:x,label:y,description:j,errorMessage:z,icons:w=!1,labelPlacement:N="end",size:_,color:C,required:M=!1,disabled:v=!1,readOnly:P=!1,name:R,id:S,fullWidth:W=!1,className:q,style:B},I){const L=f(_),O=u(C),T=p(z),F=T?"error":O,A=g[L],D=r.useId(),E=S??D,G=e("span",{className:"flex h-[1lh] shrink-0 items-center",children:e(n.Root,{ref:I,id:E,name:R,checked:k,defaultChecked:b,required:M,disabled:v,readOnly:P,onCheckedChange:e=>x?.(e),className:["mp-switch__track group relative box-border inline-flex shrink-0 p-0","rounded-mp-full appearance-none font-[inherit] outline-none","transition-[background-color,box-shadow]","duration-(--mp-sys-motion-duration-short4) ease-mp-standard",A.track,v?["bg-mp-surface-container-highest inset-ring-2 inset-ring-mp-on-surface/12","cursor-default","data-checked:bg-mp-on-surface/12 data-checked:inset-ring-0"].join(" "):[P?"cursor-default":"cursor-pointer","bg-mp-surface-container-highest inset-ring-2",T?"inset-ring-mp-error":"inset-ring-mp-outline","data-checked:inset-ring-0 data-checked:bg-(--_mp-accent)"].join(" ")].join(" "),children:a(n.Thumb,{className:["mp-switch__thumb absolute top-1/2 flex -translate-y-1/2 items-center justify-center","rounded-full","transition-[inset-inline-start,width,height,background-color]","duration-(--mp-sys-motion-duration-short4) ease-mp-standard",A.thumb,v?"bg-mp-on-surface/38 data-checked:bg-mp-surface-container-highest":[T?"bg-mp-error":"bg-mp-outline","data-checked:bg-(--_mp-on-accent)"].join(" ")].join(" "),children:[v?null:e(d,{layer:["top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full",A.halo,"bg-mp-on-surface group-data-checked:bg-(--_mp-accent)"].join(" ")}),w?a(t,{children:[e("span",{className:["absolute inset-0 flex items-center justify-center","transition-opacity duration-(--mp-sys-motion-duration-short4)","ease-mp-standard opacity-0 group-data-checked:opacity-100",v?"text-mp-surface-container-highest":"text-(--_mp-accent)"].join(" "),children:e(s,{icon:o,size:A.glyph,strokeWidth:3})}),e("span",{className:["absolute inset-0 flex items-center justify-center","text-mp-surface-container-highest","transition-opacity duration-(--mp-sys-motion-duration-short4)","ease-mp-standard group-data-checked:opacity-0"].join(" "),children:e(s,{icon:c,size:A.glyph,strokeWidth:3})})]}):null]})})}),H=p(y)||p(j)||T?a("span",{className:["flex min-w-0 flex-col gap-0.5","start"===N?"flex-1":""].filter(Boolean).join(" "),children:[p(y)?a(i.Label,{className:["leading-[1.4]",v?"text-mp-on-surface/38 cursor-default":P?"text-mp-on-surface":"text-mp-on-surface cursor-pointer"].join(" "),children:[y,M?e("span",{"aria-hidden":"true",children:" *"}):null]}):null,e(h,{description:j,errorMessage:z})]}):null;return e(i.Root,{className:["mp-switch align-top",W?"flex w-full":"inline-flex",q??""].filter(Boolean).join(" "),disabled:v,invalid:T,"data-mp-size":L,style:{...l(F),...B},children:e("div",{className:["flex w-full items-start gap-3",m[L]].join(" "),children:a(t,"start"===N?{children:[H,G]}:{children:[G,H]})})})});
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as
|
|
2
|
+
import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{Tabs as a}from"@base-ui/react/tabs";import{accentSlots as r}from"../../internal/accent.js";import{MPStateLayer as i}from"../../internal/StateLayer.js";import{CONTROL_GAP as o,hasContent as l,SHEET_GAP as s}from"../../internal/scale.js";import{useMPColor as c,useMPSize as u}from"../../internal/config.js";const d=/*@__PURE__*/n.createContext({variant:"primary",size:"md",iconPosition:"top",fullWidth:!1}),m={xs:"h-8",sm:"h-10",md:"h-12",lg:"h-14",xl:"h-16"},f={xs:"h-11",sm:"h-13",md:"h-16",lg:"h-18",xl:"h-20"},p={xs:"text-mp-label-medium",sm:"text-mp-label-large",md:"text-mp-title-small",lg:"text-mp-title-small",xl:"text-mp-title-medium"},h={xs:"px-3",sm:"px-3.5",md:"px-4",lg:"px-5",xl:"px-6"},b={xs:12,sm:14,md:16,lg:20,xl:24},v={xs:18,sm:20,md:24,lg:24,xl:28};function x(e,t,a,r=""){n.Children.toArray(e).forEach(e=>{if(!n.isValidElement(e))return void(l(e)&&t.push(e));if(e.type===n.Fragment)return void x(e.props.children,t,a,`${r}${String(e.key)}/`);const i=r?n.cloneElement(e,{key:`${r}${String(e.key)}`}):e;e.type===MPTabPanel?a.push(i):t.push(i)})}export const MPTabs=/*@__PURE__*/n.forwardRef(function({variant:i="primary",color:o,size:l,value:m,defaultValue:f,onValueChange:p,iconPosition:h,activateOnFocus:v=!1,loopFocus:y=!0,divider:w=!0,fullWidth:g=!1,className:_,style:j,children:P,"aria-label":k,...M},N){const R=c(o),z=u(l),C=h??("primary"===i?"top":"start"),F=n.useMemo(()=>({variant:i,size:z,iconPosition:C,fullWidth:g}),[i,z,C,g]),$=n.useRef(null),[O,S]=n.useState(null),W=n.useCallback(()=>{const e=$.current;if(!e)return;const t=e.scrollWidth-e.clientWidth,n=Math.abs(e.scrollLeft),a=t-n,r="rtl"===getComputedStyle(e).direction,i=(r?a:n)>1,o=(r?n:a)>1;S(i&&o?"both":i?"left":o?"right":null)},[]);n.useEffect(()=>{const e=$.current;if(W(),!e)return;const t="undefined"==typeof ResizeObserver?null:new ResizeObserver(W),n=()=>{if(t){t.disconnect(),t.observe(e);for(const n of e.children)t.observe(n)}};n();const a="undefined"==typeof MutationObserver?null:new MutationObserver(()=>{n(),W()});return a?.observe(e,{childList:!0}),()=>{t?.disconnect(),a?.disconnect()}},[W]);const E=n.useRef(0);n.useEffect(()=>()=>cancelAnimationFrame(E.current),[]);const T=[],V=[];return x(P,T,V),e(d.Provider,{value:F,children:t(a.Root,{ref:N,value:m,defaultValue:f,onValueChange:e=>p?.(e),"data-mp-size":z,"data-mp-variant":i,className:["mp-tabs flex min-w-0 flex-col",s[z],_??""].filter(Boolean).join(" "),style:{...r(R),"--_mp-tab-inset":`${b[z]}px`,...j},...M,children:[t(a.List,{ref:$,"aria-label":k,activateOnFocus:v,loopFocus:y,"data-mp-overflow":O??void 0,onScroll:()=>{0===E.current&&(E.current=requestAnimationFrame(()=>{E.current=0,W()}))},className:["mp-tabs__list relative flex shrink-0",w?"border-mp-outline-variant border-b":"",g?"w-full":"","overflow-x-auto overflow-y-hidden","[scrollbar-width:none] [&::-webkit-scrollbar]:hidden"].filter(Boolean).join(" "),children:[T,e(a.Indicator,{className:["mp-tabs__indicator pointer-events-none absolute bottom-0","bg-(--_mp-accent)","primary"===i?["h-0.75 rounded-t-full","left-[calc(var(--active-tab-left)_+_var(--_mp-tab-inset))]","w-[calc(var(--active-tab-width)_-_2_*_var(--_mp-tab-inset))]"].join(" "):"left-(--active-tab-left) h-0.5 w-(--active-tab-width)","[transition-property:left,width]","duration-(--mp-sys-motion-duration-short4) ease-mp-standard"].join(" ")})]}),V]})})});export const MPTab=/*@__PURE__*/n.forwardRef(function({value:r,icon:s,disabled:c=!1,className:u,children:b,...x},y){const{variant:w,size:g,iconPosition:_,fullWidth:j}=n.useContext(d),P="top"===_&&l(s);return t(a.Tab,{ref:y,value:r,disabled:c,className:["mp-tabs__tab group relative flex shrink-0 items-center justify-center","box-border appearance-none border-0 bg-transparent font-[inherit] whitespace-nowrap select-none","overflow-hidden outline-none","transition-[color] duration-(--mp-sys-motion-duration-short4) ease-mp-standard",P?`flex-col gap-1 ${f[g]}`:`flex-row ${m[g]}`,P?"":o[g],p[g],h[g],c?"text-mp-on-surface/38 cursor-default":["text-mp-on-surface-variant cursor-pointer","primary"===w?"data-active:text-(--_mp-accent)":"data-active:text-mp-on-surface"].join(" "),"outline-mp-secondary focus-visible:outline-2 focus-visible:-outline-offset-2","focus-visible:outline-solid",j?"flex-1":"",u??""].filter(Boolean).join(" "),...x,children:[c?null:e(i,{}),l(s)?e("span",{className:"relative flex shrink-0 items-center justify-center",style:{width:v[g],height:v[g]},children:s}):null,l(b)?e("span",{className:"relative truncate",children:b}):null]})});export const MPTabPanel=/*@__PURE__*/n.forwardRef(function({value:t,keepMounted:n=!1,className:r,children:i,...o},l){return e(a.Panel,{ref:l,value:t,keepMounted:n,className:["mp-tabs__panel text-mp-on-surface min-w-0 flex-1","rounded-mp-xs outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none","transition-opacity duration-(--mp-sys-motion-duration-short4) ease-mp-standard","data-starting-style:opacity-0",r??""].filter(Boolean).join(" "),...o,children:i})});
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as o from"react";import{Field as n}from"@base-ui/react/field";import{MPIcon as r}from"../icon/MPIcon.js";import{MPFieldLabel as a,MPFieldOutline as i,useFloatingLabel as l}from"../../internal/FieldOutline.js";import{MPSupportingText as s}from"../../internal/SupportingText.js";import{VisibilityIcon as d,VisibilityOffIcon as p}from"../../constants/icons.js";import{useMPLocale as u,useMPMessages as c}from"../../internal/locale.js";import{TEXT_FIELD as m}from"../../internal/messages/text-field.js";import{useMPSize as f}from"../../internal/config.js";const x={xs:{padding:"px-2",control:"py-1.5",text:"text-mp-body-medium",icon:16},sm:{padding:"px-3",control:"py-2.5",text:"text-mp-body-medium",icon:18},md:{padding:"px-4",control:"py-4",text:"text-mp-body-large",icon:20},lg:{padding:"px-4",control:"py-5",text:"text-mp-body-large",icon:22},xl:{padding:"px-5",control:"py-6",text:"text-mp-body-large",icon:24}};export const MPTextField=/*@__PURE__*/o.forwardRef(function({value:b,name:g,type:y="text",placeholder:h,autoComplete:v,label:w,floatingLabel:C=!0,onChange:j,onFormReset:k,onSubmit:M,onKeyDown:z,onKeyUp:D,onFocus:
|
|
2
|
+
import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as o from"react";import{Field as n}from"@base-ui/react/field";import{MPIcon as r}from"../icon/MPIcon.js";import{MPFieldLabel as a,MPFieldOutline as i,useFloatingLabel as l}from"../../internal/FieldOutline.js";import{MPSupportingText as s}from"../../internal/SupportingText.js";import{VisibilityIcon as d,VisibilityOffIcon as p}from"../../constants/icons.js";import{useMPLocale as u,useMPMessages as c}from"../../internal/locale.js";import{TEXT_FIELD as m}from"../../internal/messages/text-field.js";import{useMPSize as f}from"../../internal/config.js";const x={xs:{padding:"px-2",control:"py-1.5",text:"text-mp-body-medium",icon:16},sm:{padding:"px-3",control:"py-2.5",text:"text-mp-body-medium",icon:18},md:{padding:"px-4",control:"py-4",text:"text-mp-body-large",icon:20},lg:{padding:"px-4",control:"py-5",text:"text-mp-body-large",icon:22},xl:{padding:"px-5",control:"py-6",text:"text-mp-body-large",icon:24}};export const MPTextField=/*@__PURE__*/o.forwardRef(function({value:b,name:g,type:y="text",placeholder:h,autoComplete:v,label:w,floatingLabel:C=!0,onChange:j,onFormReset:k,onSubmit:M,onKeyDown:z,onKeyUp:D,onFocus:N,onBlur:E,onClick:F,onDoubleClick:P,onContextMenu:S,errorMessage:B="",required:K=!1,fullWidth:q=!1,readOnly:L=!1,autoFocus:R=!1,size:U,disabled:I=!1,disableEnterKey:O=!1,rows:T,maxLength:$,startIcon:_,resizable:W=!1,id:A,locale:G,passwordLabels:H,className:J,style:Q},V){const X=f(U),Y=u(G),Z=c(m,Y,H),ee=o.useRef(null),[te,oe]=o.useState(!1),[ne,re]=o.useState(!1),[ae,ie]=o.useState(b),le=o.useId(),se=A??le,de=!!T,pe=B.length>0,ue=x[X],ce=ne?ae:b,{shrunk:me,focusProps:fe}=l({floating:C&&!!w,filled:ce.length>0,pinned:!!_}),xe=o.useCallback(e=>{ee.current=e,"function"==typeof V?V(e):V&&(V.current=e)},[V]),be=e=>{e.preventDefault()};return o.useEffect(()=>{ne||ie(b)},[b,ne]),o.useEffect(()=>{R&&!window.matchMedia("(max-width: 599.95px)").matches&&ee.current?.focus()},[]),t(n.Root,{className:["mp-text-field group relative",q?"w-full":"inline-block","align-top",J??""].filter(Boolean).join(" "),style:Q,disabled:I,invalid:pe,"data-mp-size":X,...fe,children:[t("div",{className:["relative flex w-full items-center gap-2",ue.padding,de?"py-2":""].filter(Boolean).join(" "),children:[e(i,{label:w,required:K,notched:me}),_?e("span",{className:"text-mp-on-surface-variant group-data-disabled:text-mp-on-surface/38 flex shrink-0 items-center",children:_}):null,e(n.Control,{render:de?e("textarea",{rows:T}):e("input",{}),id:se,name:g,type:de?void 0:te?"text":y,required:K,readOnly:L,disabled:I,autoComplete:v,placeholder:me?h:void 0,maxLength:$,value:ce,ref:xe,className:[`${ue.text} text-mp-on-surface w-full min-w-0 flex-1`,"font-[family-name:var(--mp-sys-typescale-body-large-font)]","appearance-none border-0 bg-transparent px-0 outline-none","caret-mp-primary",ue.control,de?"py-0":"",de&&W?"resize-y":"resize-none","search"===y?"[&::-webkit-search-cancel-button]:hidden":"","group-data-disabled:text-mp-on-surface/38","placeholder:text-mp-on-surface-variant group-data-disabled:placeholder:text-mp-on-surface/38"].filter(Boolean).join(" "),onChange:e=>{k?.();const t=e.target.value;ne&&ie(t),j?.(t)},onCompositionStart:()=>{re(!0),ie(b)},onCompositionUpdate:e=>{ie(e.target.value)},onCompositionEnd:e=>{re(!1);const t=e.target.value;k?.(),j?.(t),ie(t)},onKeyUp:D,onFocus:N,onBlur:E,onClick:F,onDoubleClick:P,onContextMenu:S,onKeyDown:e=>{if(z?.(e),!e.defaultPrevented&&"Enter"===e.key){if(function(e){const t=e.nativeEvent;return t.isComposing||229===t.keyCode}(e))return;M?.(),(O||M&&!de)&&e.preventDefault()}}}),"password"!==y||de?null:e("button",{type:"button","aria-label":te?Z.hidePassword:Z.showPassword,onClick:()=>oe(e=>!e),onMouseDown:be,onMouseUp:be,disabled:I,className:["text-mp-on-surface-variant -me-1 flex shrink-0 items-center justify-center","cursor-pointer appearance-none border-0 bg-transparent p-1 font-[inherit]","rounded-full","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-1","focus-visible:outline-solid outline-none","hover:text-mp-on-surface focus-visible:text-mp-primary","disabled:text-mp-on-surface/38 disabled:cursor-default"].join(" "),children:e(r,{icon:te?d:p,size:ue.icon})}),w?e(a,{size:X,label:w,required:K,shrunk:me,multiline:de}):null]}),e(s,{errorMessage:B,className:`mp-text-field__support mt-1 ${ue.padding}`})]})});
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import{jsx as a,jsxs as e}from"react/jsx-runtime";import*as t from"react";import{CartesianFrame as r}from"../../internal/ChartFrame.js";import{ChartTable as n}from"../../internal/ChartChrome.js";import{useMPLocale as o,useMPMessages as l}from"../../internal/locale.js";import{CHART as s}from"../../internal/messages/chart.js";import{TABLE as i}from"../../internal/messages/table.js";import{formatTimeTick as m,timeScale as p}from"../../internal/time-scale.js";import{BAR_RADIUS as c,CHART_FONT_SIZE as u,MARK_GAP as f,barPath as x,
|
|
2
|
+
import{jsx as a,jsxs as e}from"react/jsx-runtime";import*as t from"react";import{CartesianFrame as r}from"../../internal/ChartFrame.js";import{ChartTable as n}from"../../internal/ChartChrome.js";import{useMPLocale as o,useMPMessages as l}from"../../internal/locale.js";import{CHART as s}from"../../internal/messages/chart.js";import{TABLE as i}from"../../internal/messages/table.js";import{formatTimeTick as m,timeScale as p}from"../../internal/time-scale.js";import{BAR_RADIUS as c,CHART_FONT_SIZE as u,MARK_GAP as f,barPath as x,bounds as d,seriesColor as b,textWidth as h,toNumber as g}from"../../internal/chart.js";function y(a,e,t){return null!=a&&!1!==a&&""!==a&&("string"!=typeof a&&"number"!=typeof a||e>=h(String(a),t)+16)}export function MPTimelineChart({series:h,yAxis:j,xAxis:M,spanLabels:k=!0,...v}){const $=o(v.locale),C=l(s,$),P=l(i,$),S=t.useMemo(()=>h.map(a=>a.data.map(a=>{const e=g(a.start),t=g(a.end);return null===e||null===t?null:{from:Math.min(e,t),to:Math.max(e,t),span:a}}).filter(a=>null!==a)),[h]),A=S.flat(),_=d(A.map(a=>a.from)),z=d(A.map(a=>a.to)),F=_&&z?{min:_.min,max:z.max}:null,N=p(F,{min:M?.min,max:M?.max,tickCount:M?.tickCount}),T=t.useCallback(a=>m(a,N.unit,$),[N.unit,$]),B=t.useMemo(()=>[{data:h.map(()=>0)}],[h]),I=h.map((a,e)=>a.name??String(e+1)),L=h.map((a,e)=>b(e,a.color));return a(r,{...v,series:B,categories:I,horizontal:!0,inset:!1,bandRatio:.62,scale:N,includeZero:!1,legend:!1,xAxis:j,yAxis:{...M,tickFormat:M?.tickFormat??(a=>T(Number(a)))},marks:({plot:a,band:e,valuePx:t,categoryPx:r})=>S.flatMap((n,o)=>n.map((n,l)=>{const s=t(n.from),i=t(n.to),m=a.top+r(o);return{series:o,index:l,x:(s+i)/2,y:m,r:e.band/2,rx:Math.max(1,Math.abs(i-s)/2),ry:e.band/2}})),markTooltip:a=>{const e=S[a.series]?.[a.index];return e?{heading:void 0===e.span.label||null===e.span.label?I[a.series]:`${I[a.series]} · ${String(e.span.label)}`,items:[{seriesIndex:a.series,color:e.span.color?b(0,e.span.color):L[a.series],value:e.to-e.from,formatted:`${T(e.from)} – ${T(e.to)}`}]}:null},table:e=>a(n,{id:e,caption:v.label??C.table,corner:j?.label??C.category,categories:I,names:[C.table],values:[S.map(a=>({value:a.length,label:a.map(a=>`${T(a.from)} – ${T(a.to)}`).join("; ")}))],format:a=>String(a),locale:$,empty:P.empty}),children:({plot:t,band:r,valuePx:n,categoryPx:o,activeMark:l,size:s})=>{const i=u[s]-1;return a("g",{className:"mp-timeline-chart__spans",children:S.map((s,m)=>s.map((s,p)=>{const u=n(s.from),d=n(s.to),h=Math.max(2,r.band-f),g=t.top+o(m)-h/2,j=Math.max(1,d-u),M=l?.series===m&&l?.index===p,v=s.span.color?b(0,s.span.color):L[m];return e("g",{children:[a("path",{d:x(u,g,j,h,c,"both"),fill:v,opacity:M?1:.85,stroke:M?"var(--_mp-color-on-surface)":"none",strokeWidth:M?1.5:0}),k&&y(s.span.label,j,i)?a("text",{x:u+8,y:t.top+o(m),dominantBaseline:"central",fill:"var(--_mp-color-surface)",fontSize:i,children:s.span.label}):null]},`${m}-${p}`)}))})}})}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{Popover as o}from"@base-ui/react/popover";import{MPButton as i}from"../button/MPButton.js";import{MPIcon as r}from"../icon/MPIcon.js";import{CloseIcon as s}from"../../constants/icons.js";import{accentSlots as l}from"../../internal/accent.js";import{useMPColor as a,useMPSize as c}from"../../internal/config.js";import{fillMessage as m}from"../../internal/i18n.js";import{useMPLocale as
|
|
2
|
+
import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{Popover as o}from"@base-ui/react/popover";import{MPButton as i}from"../button/MPButton.js";import{MPIcon as r}from"../icon/MPIcon.js";import{CloseIcon as s}from"../../constants/icons.js";import{accentSlots as l}from"../../internal/accent.js";import{useMPColor as a,useMPSize as c}from"../../internal/config.js";import{fillMessage as m}from"../../internal/i18n.js";import{useMPLocale as p,useMPMessages as u}from"../../internal/locale.js";import{COMMON as d}from"../../internal/messages/common.js";import{TOUR as f}from"../../internal/messages/tour.js";import{CONTROL_ICON as h,META_TEXT as g,PROSE_TEXT as x,SHEET_GAP as v,SHEET_PAD as j,SHEET_TITLE as w,hasContent as b}from"../../internal/scale.js";import{MPStateLayer as y}from"../../internal/StateLayer.js";import{FADE as N,PORTAL_LAYER as S}from"../../internal/surface.js";import{VISUALLY_HIDDEN as k}from"../../internal/visually-hidden.js";const $={xs:"max-w-56",sm:"max-w-64",md:"max-w-80",lg:"max-w-96",xl:"max-w-md"},_={xs:"xs",sm:"xs",md:"sm",lg:"sm",xl:"md"};function B({spot:t,className:n,holeRef:o}){return e("div",null===t?{"aria-hidden":"true",className:["mp-tour__scrim bg-mp-scrim/32 pointer-events-none fixed inset-0 z-40",n??""].filter(Boolean).join(" ")}:{ref:o,"aria-hidden":"true",className:["mp-tour__scrim rounded-mp-xs pointer-events-none fixed z-40","shadow-[0_0_0_9999px_color-mix(in_oklab,var(--_mp-color-scrim)_32%,transparent)]","transition-[top,left,width,height] duration-(--mp-sys-motion-duration-medium1)","ease-mp-standard motion-reduce:transition-none",n??""].filter(Boolean).join(" "),style:{top:t.top,left:t.left,width:t.width,height:t.height}})}export function MPTour({steps:z,open:C,defaultOpen:R=!1,onOpenChange:M,step:P,defaultStep:O=0,onStepChange:q,onFinish:E,scrim:F=!0,skippable:I=!0,dismissible:T=!0,scrollIntoView:A=!0,locale:D,labels:H,size:L,color:V,className:W,style:G,classNames:J}){const K=c(L),Q=a(V),U=p(D),X=u(f,U,H),Y=u(d,U),[Z,ee]=n.useState(R),[te,ne]=n.useState(O),oe=C??Z,ie=Math.min(P??te,Math.max(0,z.length-1)),re=z[ie],[se,le]=n.useState(null),ae=n.useRef(null),[ce,me]=n.useState(""),pe=n.useRef(ie);n.useEffect(()=>{if(!oe)return pe.current=ie,void me("");if(pe.current===ie)return;pe.current=ie;const e=m(X.position,{index:String(ie+1),total:String(z.length)}),t=z[ie]?.title;me("string"==typeof t&&""!==t?`${e}. ${t}`:e)},[oe,ie,z,X.position]);const ue=e=>{void 0===C&&ee(e),M?.(e)},de=e=>{void 0===P&&ne(e),q?.(e)},fe=re?.target,he=re?.padding??6;if(n.useEffect(()=>{if(!oe||!fe)return;const e=document.querySelector(fe);if(!(e instanceof HTMLElement))return;A&&e.scrollIntoView({block:"center",inline:"nearest",behavior:"smooth"});let t=0,n="",o=!1;const i=()=>{const r=e.getBoundingClientRect(),s=`${r.top} ${r.left} ${r.width} ${r.height}`;if(s!==n){n=s;const e={top:r.top-he,left:r.left-he,width:r.width+2*he,height:r.height+2*he},t=ae.current;o&&t?(t.style.top=`${e.top}px`,t.style.left=`${e.left}px`,t.style.width=`${e.width}px`,t.style.height=`${e.height}px`):(o=!0,le({selector:fe,spot:e}))}t=requestAnimationFrame(i)};return i(),()=>cancelAnimationFrame(t)},[oe,fe,he,A]),0===z.length)return null;const ge=oe&&fe&&se?.selector===fe?se.spot:null,xe=0===ie,ve=ie===z.length-1,je=_[K],we=b(re?.title)||b(re?.content);return t(o.Root,{open:oe,onOpenChange:(e,t)=>{e?ue(!0):"outside-press"===t.reason||"focus-out"===t.reason||"escape-key"===t.reason&&!T?t.cancel():ue(!1)},children:[oe&&F?e(B,{spot:ge,className:J?.scrim,holeRef:ae}):null,e(o.Portal,{children:e(o.Positioner,{className:S,side:re?.side??"bottom",align:re?.align??"center",sideOffset:fe?10:0,collisionPadding:12,anchor:()=>fe?document.querySelector(fe):{getBoundingClientRect:()=>new DOMRect(window.innerWidth/2,window.innerHeight/2,0,0)},children:t(o.Popup,{"data-mp-size":K,className:["mp-tour rounded-mp-md relative box-border flex flex-col outline-none","bg-mp-surface-container text-mp-on-surface shadow-mp-3",j[K],v[K],x[K],$[K],N,W??""].filter(Boolean).join(" "),style:{...l(Q),...G},children:[we?t("div",{className:"flex items-start gap-3",children:[t("div",{className:"flex min-w-0 flex-1 flex-col gap-1",children:[b(re?.title)?e(o.Title,{className:["text-mp-on-surface m-0 font-medium",w[K],J?.title??""].filter(Boolean).join(" "),children:re?.title}):null,b(re?.content)?e(o.Description,{className:["text-mp-on-surface-variant m-0 min-w-0",J?.content??""].filter(Boolean).join(" "),children:re?.content}):null]}),T?t("button",{type:"button","aria-label":Y.close,onClick:()=>ue(!1),className:["group/close rounded-mp-full text-mp-on-surface-variant relative -me-1 -mt-1","flex size-8 shrink-0 cursor-pointer items-center justify-center","appearance-none border-0 bg-transparent font-[inherit]","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-1","focus-visible:outline-solid outline-none",J?.close??""].filter(Boolean).join(" "),children:[e(y,{className:"group-hover/close:opacity-8 group-focus-visible/close:opacity-10"}),e(r,{icon:s,size:h[K]})]}):null]}):null,e("span",{className:k,"aria-live":"polite",children:ce}),t("div",{className:["flex items-center gap-2",J?.footer??""].filter(Boolean).join(" "),children:[e("span",{className:`text-mp-on-surface-variant shrink-0 tabular-nums ${g}`,children:m(X.position,{index:String(ie+1),total:String(z.length)})}),t("div",{className:"ms-auto flex items-center gap-1",children:[I&&!ve?e(i,{size:je,variant:"text",color:"secondary",onClick:()=>ue(!1),children:X.skip}):null,xe?null:e(i,{size:je,variant:"outlined",color:Q,onClick:()=>de(ie-1),children:X.previous}),e(i,{size:je,color:Q,onClick:()=>ve?(E?.(),void ue(!1)):de(ie+1),children:ve?X.done:X.next})]})]})]})})})]})}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as t from"react";import{MPBox as l}from"../box/MPBox.js";import{MPCheckbox as r}from"../checkbox/MPCheckbox.js";import{MPIcon as s}from"../icon/MPIcon.js";import{MPIconButton as i}from"../icon-button/MPIconButton.js";import{MPTextField as n}from"../text-field/MPTextField.js";import{ArrowRightIcon as o}from"../../constants/icons.js";import{useMPLocale as c,useMPMessages as m}from"../../internal/locale.js";import{cssLength as d}from"../../internal/length.js";import{TRANSFER as u}from"../../internal/messages/transfer.js";import{fillMessage as h}from"../../internal/i18n.js";import{VISUALLY_HIDDEN as f}from"../../internal/visually-hidden.js";import{useMPColor as p,useMPSize as v}from"../../internal/config.js";import{hasContent as g,META_TEXT as b,SHEET_PAD_X as x}from"../../internal/scale.js";const
|
|
2
|
+
import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as t from"react";import{MPBox as l}from"../box/MPBox.js";import{MPCheckbox as r}from"../checkbox/MPCheckbox.js";import{MPIcon as s}from"../icon/MPIcon.js";import{MPIconButton as i}from"../icon-button/MPIconButton.js";import{MPTextField as n}from"../text-field/MPTextField.js";import{ArrowRightIcon as o}from"../../constants/icons.js";import{useMPLocale as c,useMPMessages as m}from"../../internal/locale.js";import{cssLength as d}from"../../internal/length.js";import{TRANSFER as u}from"../../internal/messages/transfer.js";import{fillMessage as h}from"../../internal/i18n.js";import{VISUALLY_HIDDEN as f}from"../../internal/visually-hidden.js";import{useMPColor as p,useMPSize as v}from"../../internal/config.js";import{hasContent as g,META_TEXT as b,SHEET_PAD_X as x}from"../../internal/scale.js";import{occurrenceKeys as w}from"../../internal/occurrence.js";const j={xs:"py-1",sm:"py-1.5",md:"py-2",lg:"py-2.5",xl:"py-3"},k={xs:"py-0.5",sm:"py-1",md:"py-1",lg:"py-1.5",xl:"py-2"},S=new Set;function y({title:s,rows:i,total:o,ticked:c,arrived:m,onTick:d,onTickAll:u,search:h,onSearch:f,searchable:p,disabled:v,height:g,messages:S,variant:y,size:N,color:T}){const z=i.filter(e=>!e.disabled),C=t.useMemo(()=>w(i,e=>e.value),[i]),M=z.filter(e=>c.has(e.value)),_=z.length>0&&M.length===z.length,$=M.length>0&&!_,P=x[N],B=t.useId();return a(l,{variant:y,size:N,padded:!1,className:"mp-transfer__panel flex min-w-0 flex-col overflow-hidden",children:[a("div",{className:["mp-transfer__heading border-mp-outline-variant flex items-center gap-2 border-b",P,j[N]].join(" "),children:[e("div",{className:"min-w-0 flex-1",children:e(r,{size:N,color:T,checked:_,indeterminate:$,disabled:v||0===z.length,label:e("span",{id:B,className:"block truncate font-medium",children:s}),onCheckedChange:e=>u(e)})}),a("span",{className:`text-mp-on-surface-variant shrink-0 tabular-nums ${b}`,children:[M.length,"/",o]})]}),p?e("div",{className:`${P} ${j[N]}`,children:e(n,{size:N,fullWidth:!0,disabled:v,placeholder:S.search,"aria-label":S.search,value:h,onChange:f})}):null,e("div",{role:"group","aria-labelledby":B,className:`mp-transfer__list flex flex-col overflow-y-auto overscroll-contain ${P} ${j[N]}`,style:{height:g},children:0===i.length?e("span",{className:`text-mp-on-surface-variant ${b} ${k[N]}`,children:S.empty}):i.map(a=>e("div",{className:[k[N],m.has(a.value)?"mp-row-arrive":""].filter(Boolean).join(" "),children:e(r,{size:N,color:T,label:a.label,checked:c.has(a.value),disabled:v||a.disabled,onCheckedChange:e=>d(a.value,e)})},C.get(a)))})]})}function N(e,a){if(""===a)return e;const t=a.toLowerCase();return e.filter(e=>"string"!=typeof e.label||e.label.toLowerCase().includes(t))}export const MPTransfer=/*@__PURE__*/t.forwardRef(function({items:l,value:r,defaultValue:n,onValueChange:b,sourceLabel:x,targetLabel:w,searchable:j=!1,height:k=220,disabled:T=!1,variant:z="outlined",size:C,color:M,locale:_,labels:$,className:P,...B},L){const A=v(C),I=p(M),V=c(_),E=m(u,V,$),[F,R]=t.useState(n??[]),W=r??F,[q,D]=t.useState(()=>new Set),[G,H]=t.useState(()=>({values:new Set,toTarget:!0})),[J,K]=t.useState(""),[O,Q]=t.useState(""),[U,X]=t.useState(null),Y=t.useMemo(()=>new Set(W),[W]),Z=l.filter(e=>!Y.has(e.value)),ee=l.filter(e=>Y.has(e.value));t.useEffect(()=>{const e=new Set(l.map(e=>e.value));D(a=>{const t=[...a].filter(a=>e.has(a));return t.length===a.size?a:new Set(t)})},[l]);const ae=(e,a)=>{D(t=>{const l=new Set(t);return a?l.add(e):l.delete(e),l})},te=(e,a)=>{D(t=>{const l=new Set(t);for(const t of e)t.disabled||(a?l.add(t.value):l.delete(t.value));return l})},le=(e,a)=>{const t=e.filter(e=>!e.disabled&&q.has(e.value));if(0===t.length)return;const s=new Set(t.map(e=>e.value)),i=a?l.filter(e=>Y.has(e.value)||s.has(e.value)).map(e=>e.value):W.filter(e=>!s.has(e));D(e=>new Set([...e].filter(e=>!s.has(e)))),H({values:s,toTarget:a}),X(e=>{return{tick:(e?.tick??0)+1,text:h(E.moved,{count:String(t.length),list:(l=a?w:x,r=a?E.target:E.source,"string"==typeof l&&""!==l?l:r)})};var l,r}),(e=>{void 0===r&&R(e),b?.(e)})(i)},re=N(Z,J),se=N(ee,O),ie=re.some(e=>!e.disabled&&q.has(e.value)),ne=se.some(e=>!e.disabled&&q.has(e.value)),oe=d(k),ce={ticked:q,disabled:T,height:oe,messages:E,variant:z,size:A,color:I,searchable:j};return a("div",{ref:L,"data-mp-size":A,className:["mp-transfer grid w-full items-center gap-3","[grid-template-columns:minmax(0,1fr)]","mp-medium:[grid-template-columns:minmax(0,1fr)_auto_minmax(0,1fr)]",P??""].filter(Boolean).join(" "),...B,children:[e(y,{...ce,title:g(x)?x:E.source,rows:re,total:Z.length,arrived:G.toTarget?S:G.values,onTick:ae,onTickAll:e=>te(re,e),search:J,onSearch:K}),a("div",{className:"flex flex-row justify-center gap-2 mp-medium:flex-col",children:[e(i,{size:A,color:I,variant:"text"===z?"text":"outlined",label:E.toTarget,disabled:T||!ie,onClick:()=>le(re,!0),icon:e(s,{icon:o,className:"rotate-90 mp-medium:rotate-0"})}),e(i,{size:A,color:I,variant:"text"===z?"text":"outlined",label:E.toSource,disabled:T||!ne,onClick:()=>le(se,!1),icon:e(s,{icon:o,className:"-rotate-90 mp-medium:rotate-180"})})]}),e("span",{className:f,"aria-live":"polite","aria-atomic":"true",children:U?e("span",{children:U.text},U.tick):null}),e(y,{...ce,title:g(w)?w:E.target,rows:se,total:ee.length,arrived:G.toTarget?G.values:S,onTick:ae,onTickAll:e=>te(se,e),search:O,onSearch:Q})]})});
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as a from"react";import{MPTreeItem as n,MPTreeView as r}from"../tree-view/MPTreeView.js";import{MPPickerShell as t}from"../../internal/Picker.js";import{useMPLocale as o,useMPMessages as
|
|
2
|
+
import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as a from"react";import{MPTreeItem as n,MPTreeView as r}from"../tree-view/MPTreeView.js";import{MPPickerShell as t}from"../../internal/Picker.js";import{useMPLocale as o,useMPMessages as s}from"../../internal/locale.js";import{COMBOBOX as i}from"../../internal/messages/combobox.js";import{TRANSFER as c}from"../../internal/messages/transfer.js";import{PICKER as d}from"../../internal/messages/picker.js";import{META_TEXT as p}from"../../internal/scale.js";import{useMPColor as u,useMPSize as m}from"../../internal/config.js";function h(e,l=new Map){for(const a of e)l.set(a.value,a),a.children&&h(a.children,l);return l}const f=e=>e.trim().toLocaleLowerCase(),v=new WeakMap;function g(e){let l=v.get(e);return void 0===l&&(l=f(e.searchLabel??("string"==typeof e.label?e.label:String(e.value))),v.set(e,l)),l}function b(e,l){if(""===l)return e;const a=[];for(const n of e){const e=n.children?b(n.children,l):void 0,r=g(n).includes(l);(r||e&&e.length>0)&&a.push({...n,children:r?n.children:e})}return a}function x(e,l=[]){for(const a of e)a.children&&a.children.length>0&&(l.push(a.value),x(a.children,l));return l}export const MPTreeSelect=/*@__PURE__*/a.forwardRef(function({items:v=[],value:g,defaultValue:j,onValueChange:y,multiple:C=!1,selectableBranches:w=!1,defaultExpanded:S,expanded:M,onExpandedChange:N,open:O,defaultOpen:_,onOpenChange:k,placeholder:V,clearable:P=!1,closeOnSelect:z,searchable:B=!1,searchPlaceholder:E,locale:L,format:T,labels:A,name:D,size:I,color:R,readOnly:W=!1,disabled:q=!1,classNames:F,...G},H){const J=m(I),K=u(R),Q=o(L),U=s(i,Q),X=s(d,Q,A),Y=s(c,Q),Z=e=>null==e?[]:Array.isArray(e)?e:[e],[$,ee]=a.useState(()=>Z(j)),le=void 0!==g?Z(g):$,[ae,ne]=a.useState(_??!1),re=O??ae,[te,oe]=a.useState(""),se=a.useMemo(()=>h(v),[v]),ie=f(a.useDeferredValue(te)),ce=a.useMemo(()=>b(v,ie),[v,ie]),de=a.useMemo(()=>""===ie?void 0:x(ce),[ie,ce]),[pe,ue]=a.useState(()=>S??[]),me=de??M??pe,he=e=>{de||(void 0===M&&ue(e),N?.(e))},fe=e=>{e&&(W||q)||(void 0===O&&ne(e),e||oe(""),k?.(e))},ve=e=>{void 0===g&&ee(e),y?.(e)},ge=e=>e.selectable??(!(e.children&&e.children.length>0)||w),be=e=>l=>{l.preventDefault(),e.children&&e.children.length>0&&he(me.includes(e.value)?me.filter(l=>l!==e.value):[...me,e.value])},xe=le.map(e=>se.get(e)).filter(e=>void 0!==e),je=0===xe.length?V??"":T?T(xe):xe.map(e=>e.label).reduce((e,l,a)=>0===a?[l]:[...e,", ",l],[]),ye=l=>l.map(l=>e(n,{value:l.value,label:l.label,startIcon:l.startIcon,disabled:l.disabled,onClick:ge(l)?void 0:be(l),className:F?.item,children:l.children?ye(l.children):null},l.value));return e(t,{...G,slug:"tree-select",size:J,color:K,readOnly:W,disabled:q,triggerRef:H,display:je,empty:0===xe.length,clearable:P,onClear:()=>ve([]),open:re,onOpenChange:fe,labels:X,hiddenValues:D?le.map(e=>({name:D,value:String(e)})):void 0,children:l("div",{className:["mp-tree-select__popup flex max-h-80 w-64 flex-col gap-2",F?.popup??""].filter(Boolean).join(" "),children:[B?e("input",{type:"text",value:te,placeholder:E??Y.search,"aria-label":E??Y.search,onChange:e=>oe(e.currentTarget.value),className:["mp-tree-select__search text-mp-on-surface w-full shrink-0 bg-transparent","placeholder:text-mp-on-surface-variant px-1 py-1 [font:inherit] outline-none"].join(" ")}):null,e("div",{className:"min-h-0 flex-1 overflow-auto",children:0===ce.length?e("p",{className:["mp-tree-select__empty text-mp-on-surface-variant m-0 px-1 py-2",p,F?.empty??""].filter(Boolean).join(" "),children:U.empty}):e(r,{size:J,variant:"text",multiple:C,selected:le,onSelectedChange:e=>{const l=e.filter(e=>se.has(e));ve(C?l:l.slice(-1)),(z??!C)&&fe(!1)},expanded:me,onExpandedChange:he,className:F?.tree,children:ye(ce)})})]})})});
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
+
import type { useRender } from '@base-ui/react/use-render';
|
|
2
3
|
import type { MPDensity, MPElevation, MPSize, MPVariant } from '../../types.js';
|
|
3
4
|
/**
|
|
4
5
|
* How the hierarchy is drawn between the rows.
|
|
@@ -86,6 +87,13 @@ export interface MPTreeItemProps extends Omit<React.ComponentPropsWithoutRef<'li
|
|
|
86
87
|
action?: React.ReactNode;
|
|
87
88
|
/** Renders the row as a link, for a tree that is navigation. */
|
|
88
89
|
href?: string;
|
|
90
|
+
/**
|
|
91
|
+
* Renders the row's `<a>` as something else — a router's `Link`, so a press is a
|
|
92
|
+
* client-side navigation and the page is prefetched. `href` and the classes
|
|
93
|
+
* still go through, so `render={<NextLink />}` needs the URL written once.
|
|
94
|
+
* Ignored where there is no link to replace.
|
|
95
|
+
*/
|
|
96
|
+
render?: useRender.RenderProp;
|
|
89
97
|
/** Fires when the row is pressed, before it opens or is chosen. */
|
|
90
98
|
onClick?: React.MouseEventHandler<HTMLElement>;
|
|
91
99
|
/**
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as r from"react";import{
|
|
2
|
+
import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as r from"react";import{useBrowserLayoutEffect as n}from"../../internal/layout-effect.js";import{RenderedLink as o}from"../../internal/RenderedLink.js";import{MPIcon as a}from"../icon/MPIcon.js";import{ChevronDownIcon as s}from"../../constants/icons.js";import{containerSurface as i}from"../../internal/elevation.js";import{MPStateLayer as l}from"../../internal/StateLayer.js";import{CONTROL_GAP as c,CONTROL_ICON as u,PROSE_TEXT as d,hasContent as m}from"../../internal/scale.js";import{useMPDensity as p,useMPSize as f}from"../../internal/config.js";function g(e){let t=e;const r=new Set;return{get:()=>t,set:e=>{if(e.expanded!==t.expanded||e.selected!==t.selected||e.active!==t.active){t=e;for(const e of r)e()}},subscribe:e=>(r.add(e),()=>{r.delete(e)})}}const x=/*@__PURE__*/r.createContext({size:"md",density:0,disabled:!1,store:g({expanded:new Set,selected:new Set,active:null}),toggle:()=>{},select:()=>{},activate:()=>{},register:()=>()=>{}}),v=/*@__PURE__*/r.createContext(!1),h={xs:28,sm:32,md:40,lg:48,xl:56},b={xs:14,sm:16,md:20,lg:24,xl:28},w={xs:"px-1.5",sm:"px-2",md:"px-2.5",lg:"px-3",xl:"px-3.5"},y="rounded-mp-full",k={none:"",simple:"mp-tree--simple",folder:"mp-tree--folder"};function j(e,t){return Math.max(24,h[e]+4*t)}function S(e){return Array.from(e.querySelectorAll('[role="treeitem"]')).filter(e=>null===e.closest("[data-mp-closing]"))}const C=e=>String(e);export const MPTreeView=/*@__PURE__*/r.forwardRef(function({variant:t="outlined",elevation:o,size:a,density:s,lines:l="simple",expanded:c,defaultExpanded:u,onExpandedChange:d,selected:m,defaultSelected:v,onSelectedChange:h,multiple:w=!1,disabled:y=!1,label:N,className:_,style:A,children:R,onKeyDown:D,...E},M){const P=f(a),I=p(s),[z,B]=r.useState(u??[]),[F,L]=r.useState(v??[]),[T,V]=r.useState(null),$=c??z,q=m??F,K=r.useRef(null),H=r.useCallback(e=>{K.current=e,"function"==typeof M?M(e):M&&(M.current=e)},[M]),O=r.useCallback(e=>{const t=C(e),r=c??z,n=r.some(e=>C(e)===t)?r.filter(e=>C(e)!==t):[...r,e];void 0===c&&B(n),d?.(n)},[c,z,d]),U=r.useCallback(e=>{const t=C(e),r=m??F,n=r.some(e=>C(e)===t),o=w?n?r.filter(e=>C(e)!==t):[...r,e]:[e];void 0===m&&L(o),h?.(o)},[w,m,F,h]),G=r.useRef(new Map),J=r.useCallback((e,t)=>(G.current.set(e,t),()=>{G.current.delete(e)}),[]),Q=r.useMemo(()=>$.map(C).join("\0"),[$]),W=r.useMemo(()=>q.map(C).join("\0"),[q]),X=r.useMemo(()=>new Set($.map(C)),[Q]),Y=r.useMemo(()=>new Set(q.map(C)),[W]),Z=r.useRef(null);Z.current??=g({expanded:X,selected:Y,active:T});const ee=Z.current;n(()=>{ee.set({expanded:X,selected:Y,active:T})},[ee,X,Y,T]);const te=r.useMemo(()=>({size:P,density:I,disabled:y,store:ee,toggle:O,select:U,activate:V,register:J}),[P,I,y,ee,O,U,J]);return r.useEffect(()=>{if(null!==T&&G.current.has(T))return;const e=K.current;if(!e)return;const t=S(e);t.length>0&&V(t[0].dataset.mpValue??null)}),e(x.Provider,{value:te,children:e("ul",{ref:H,role:"tree","aria-label":N,"aria-multiselectable":w||void 0,"data-mp-size":P,"data-mp-variant":t,className:["mp-tree rounded-mp-md m-0 box-border flex list-none flex-col p-1",i(t,o),"text-mp-on-surface",k[l],_??""].filter(Boolean).join(" "),style:{"--_mp-tree-indent":`${b[P]}px`,"--_mp-tree-row":`${j(P,I)}px`,...A},onKeyDown:function(e){if(D?.(e),e.defaultPrevented)return;const t=K.current,r=e.target?.closest?.('[role="treeitem"]');if(!t||!r||!t.contains(r))return;const n=S(t),o=n.indexOf(r);if(-1===o)return;const a=t=>{t&&(e.preventDefault(),V(t.dataset.mpValue??null),t.focus())},s=e=>{const t=e.dataset.mpValue;t&&G.current.get(t)?.toggle()},i="rtl"===getComputedStyle(t).direction,l=i?"ArrowLeft":"ArrowRight",c=i?"ArrowRight":"ArrowLeft",u=r.getAttribute("aria-expanded");switch(e.key){case"ArrowDown":a(n[o+1]);break;case"ArrowUp":a(n[o-1]);break;case"Home":a(n[0]);break;case"End":a(n[n.length-1]);break;case l:"false"===u?(e.preventDefault(),s(r)):"true"===u&&a(n[o+1]);break;case c:"true"===u?(e.preventDefault(),s(r)):a(r.parentElement?.closest('[role="treeitem"]'));break;case"Enter":case" ":e.preventDefault(),r.click()}},...E,children:R})})});export const MPTreeItem=/*@__PURE__*/r.forwardRef(function({value:n,label:i,startIcon:p,endIcon:f,action:g,href:h,render:b,expandable:k,disabled:j=!1,className:S,children:N,onClick:_,...A},R){const{size:D,disabled:E,store:M,toggle:P,select:I,activate:z,register:B}=r.useContext(x),F=r.useId(),L=n??F,T=C(L),V=r.useRef(null),$=r.useCallback(e=>{V.current=e,"function"==typeof R?R(e):R&&(R.current=e)},[R]),q=r.Children.toArray(N),K=k??q.length>0,H=()=>function(e,t){return(e.expanded.has(t)?1:0)|(e.selected.has(t)?2:0)|(e.active===t?4:0)}(M.get(),T),O=r.useSyncExternalStore(M.subscribe,H,H),U=K&&!!(1&O),G=!!(2&O),J=j||E,Q=r.useRef({toggle:()=>{}});Q.current.toggle=()=>{!J&&K&&P(L)};const W=r.useContext(v);r.useEffect(()=>W?void 0:B(T,Q.current),[W,T,B]);const[X,Y]=r.useState(U),[Z,ee]=r.useState(U),te=r.useRef(null);r.useEffect(()=>{if(U){Y(!0);const e=requestAnimationFrame(()=>ee(!0));return()=>cancelAnimationFrame(e)}ee(!1);const e=te.current;(null===e||getComputedStyle(e).transitionDuration.split(",").every(e=>0===Number.parseFloat(e)))&&Y(!1)},[U]);const re=["mp-tree__row group relative flex min-w-0 flex-1 items-center overflow-hidden text-start","h-(--_mp-tree-row) no-underline",w[D],y,c[D],d[D],"transition-[background-color,color] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard motion-reduce:transition-none","group-focus-visible/tree-item:outline-mp-secondary","group-focus-visible/tree-item:outline-2 group-focus-visible/tree-item:-outline-offset-2","group-focus-visible/tree-item:outline-solid",J?"text-mp-on-surface/38 cursor-default":G?"bg-mp-secondary-container text-mp-on-secondary-container cursor-pointer":"text-mp-on-surface cursor-pointer"].filter(Boolean).join(" "),ne=t(r.Fragment,{children:[J?null:e(l,{}),e("span",{"aria-hidden":"true",onClick:e=>{!J&&K&&(e.stopPropagation(),e.preventDefault(),V.current?.focus(),z(T),P(L))},className:["mp-tree__arrow relative flex h-[1lh] w-[1.15em] shrink-0 items-center justify-center","transition-[rotate] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard motion-reduce:transition-none",K?"text-mp-on-surface-variant":"",U?"rotate-0":"-rotate-90 rtl:rotate-90"].filter(Boolean).join(" "),children:K?e(a,{icon:s,size:u[D]-6}):null}),m(p)?e("span",{className:"text-mp-on-surface-variant relative flex h-[1lh] shrink-0 items-center",children:p}):null,e("span",{className:"relative min-w-0 flex-1 truncate",children:i}),m(f)?e("span",{className:"text-mp-on-surface-variant relative flex h-[1lh] shrink-0 items-center",children:f}):null]});return t("li",{ref:$,role:"treeitem","aria-expanded":K?U:void 0,"aria-selected":!!G||void 0,"aria-disabled":J||void 0,"data-mp-value":T,tabIndex:4&O?0:-1,className:["mp-tree__item group/tree-item relative block",S??""].filter(Boolean).join(" "),style:{outline:"none"},onClick:function(e){e.stopPropagation(),J?e.preventDefault():(V.current?.focus(),z(T),_?.(e),e.defaultPrevented||(K&&P(L),I(L)))},...A,children:[t("div",{className:"flex w-full items-center",children:[h&&!J?e(o,{render:b,props:{href:h,tabIndex:-1,className:re,"aria-current":G?"page":void 0,children:ne}}):e("div",{className:re,children:ne}),m(g)?e("span",{className:`mp-tree__action flex shrink-0 items-center ${w[D]}`,onClick:e=>e.stopPropagation(),children:g}):null]}),K&&X&&q.length>0?e("div",{ref:te,"data-mp-closing":U?void 0:"",className:["mp-tree__branch grid","transition-[grid-template-rows] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard motion-reduce:transition-none",Z?"grid-rows-[1fr]":"pointer-events-none grid-rows-[0fr]"].join(" "),onTransitionEnd:e=>{e.target!==e.currentTarget||"grid-template-rows"!==e.propertyName||U||Y(!1)},children:e("ul",{role:"group",className:"m-0 min-h-0 list-none overflow-hidden ps-(--_mp-tree-indent)",children:e(v.Provider,{value:W||!U,children:N})})}):null]})});
|