material-plus-ui 1.1.0 → 1.2.0

package/dist/components/badge/MPBadge.js

@@ -1 +1 @@
-import{jsx as e,Fragment as t,jsxs as m}from"react/jsx-runtime";import*as n from"react";import{accentSlots as a}from"../../internal/accent";import{hasContent as l}from"../../internal/scale";import{VISUALLY_HIDDEN as s}from"../../internal/visually-hidden";const i={xs:"h-3 min-w-3",sm:"h-3.5 min-w-3.5",md:"h-4 min-w-4",lg:"h-5 min-w-5",xl:"h-6 min-w-6"},o={xs:"size-1",sm:"size-1.5",md:"size-1.5",lg:"size-2",xl:"size-2.5"},r={xs:"text-mp-label-small",sm:"text-mp-label-small",md:"text-mp-label-small",lg:"text-mp-label-medium",xl:"text-mp-label-medium"},d={xs:"px-1",sm:"px-1",md:"px-1.5",lg:"px-1.5",xl:"px-2"},p={xs:{badge:"-mt-1.5 -mb-1.5 -ms-1.5 -me-1.5",dot:"-mt-0.5 -mb-0.5 -ms-0.5 -me-0.5"},sm:{badge:"-mt-1.5 -mb-1.5 -ms-1.5 -me-1.5",dot:"-mt-0.5 -mb-0.5 -ms-0.5 -me-0.5"},md:{badge:"-mt-2 -mb-2 -ms-2 -me-2",dot:"-mt-1 -mb-1 -ms-1 -me-1"},lg:{badge:"-mt-2.5 -mb-2.5 -ms-2.5 -me-2.5",dot:"-mt-1 -mb-1 -ms-1 -me-1"},xl:{badge:"-mt-3 -mb-3 -ms-3 -me-3",dot:"-mt-1.5 -mb-1.5 -ms-1.5 -me-1.5"}},c={"top-start":"top-0 start-0","top-end":"top-0 end-0","bottom-start":"bottom-0 start-0","bottom-end":"bottom-0 end-0"},b={"top-start":"mt-[7%] ms-[7%]","top-end":"mt-[7%] me-[7%]","bottom-start":"mb-[7%] ms-[7%]","bottom-end":"mb-[7%] me-[7%]"},x={filled:"bg-(--_mp-accent) text-(--_mp-on-accent)",tonal:"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",elevated:"shadow-mp-1 bg-mp-surface-container-low text-(--_mp-accent)",outlined:"border-mp-outline border bg-mp-surface-container text-(--_mp-accent)",text:"text-(--_mp-accent) bg-transparent"};export const MPBadge=n.forwardRef(function({variant:n="filled",size:u="md",color:g="error",content:f,max:h=99,dot:v=!1,showZero:w=!1,invisible:z=!1,placement:_="top-end",overlap:j="square",label:y,className:N,style:k,children:B,...$},q){const F=l(B),M=!l(f)||0===f&&!w,P=v||M,R=z||M&&!v,Z=["mp-badge pointer-events-none z-10 inline-flex shrink-0 items-center justify-center","rounded-mp-full tabular-nums whitespace-nowrap",x[n],P?o[u]:[i[u],r[u],d[u]].join(" "),F?`absolute ${c[_]}`:"relative align-middle",F?P?p[u].dot:p[u].badge:"",F&&"circle"===j?b[_]:"",R?"invisible":"",N??""].filter(Boolean).join(" "),A=function(e,t){return"number"==typeof e&&e>t?`${t}+`:e}(f,h),C=e("span",{ref:q,"data-mp-size":u,"data-mp-variant":n,className:Z,style:{...a(g),...k},"aria-hidden":!!R||void 0,...$,children:R?null:m(t,{children:[P||y?e("span",{className:s,children:y??A}):null,P?null:e("span",{"aria-hidden":!!y||void 0,children:A})]})});return F?m("span",{className:"relative inline-flex shrink-0 align-middle",children:[B,C]}):C});
+import{jsx as e,Fragment as t,jsxs as m}from"react/jsx-runtime";import*as a from"react";import{accentSlots as n}from"../../internal/accent";import{hasContent as s}from"../../internal/scale";import{VISUALLY_HIDDEN as i}from"../../internal/visually-hidden";const l={xs:"h-3 min-w-3",sm:"h-3.5 min-w-3.5",md:"h-4 min-w-4",lg:"h-5 min-w-5",xl:"h-6 min-w-6"},o={xs:"size-1",sm:"size-1.5",md:"size-1.5",lg:"size-2",xl:"size-2.5"},r={xs:"text-mp-label-small",sm:"text-mp-label-small",md:"text-mp-label-small",lg:"text-mp-label-medium",xl:"text-mp-label-medium"},d={xs:"px-1",sm:"px-1",md:"px-1.5",lg:"px-1.5",xl:"px-2"},p={xs:{badge:"-mt-1.5 -mb-1.5 -ms-1.5 -me-1.5",dot:"-mt-0.5 -mb-0.5 -ms-0.5 -me-0.5"},sm:{badge:"-mt-1.5 -mb-1.5 -ms-1.5 -me-1.5",dot:"-mt-0.5 -mb-0.5 -ms-0.5 -me-0.5"},md:{badge:"-mt-2 -mb-2 -ms-2 -me-2",dot:"-mt-1 -mb-1 -ms-1 -me-1"},lg:{badge:"-mt-2.5 -mb-2.5 -ms-2.5 -me-2.5",dot:"-mt-1 -mb-1 -ms-1 -me-1"},xl:{badge:"-mt-3 -mb-3 -ms-3 -me-3",dot:"-mt-1.5 -mb-1.5 -ms-1.5 -me-1.5"}},c={"top-start":"top-0 start-0","top-end":"top-0 end-0","bottom-start":"bottom-0 start-0","bottom-end":"bottom-0 end-0"},b={"top-start":"mt-[7%] ms-[7%]","top-end":"mt-[7%] me-[7%]","bottom-start":"mb-[7%] ms-[7%]","bottom-end":"mb-[7%] me-[7%]"},x={filled:"bg-(--_mp-accent) text-(--_mp-on-accent)",tonal:"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",elevated:"shadow-mp-1 bg-mp-surface-container-low text-(--_mp-accent)",outlined:"border-mp-outline border bg-mp-surface-container text-(--_mp-accent)",text:"text-(--_mp-accent) bg-transparent"};export const MPBadge=a.forwardRef(function({variant:a="filled",size:u="md",color:g="error",content:f,max:h=99,dot:v=!1,showZero:w=!1,invisible:y=!1,placement:z="top-end",overlap:_="square",label:j,className:N,style:k,children:B,...$},q){const F=s(B),M=!s(f)||0===f&&!w,P=v||M,R=y||M&&!v,Z=["mp-badge pointer-events-none z-10 inline-flex shrink-0 items-center justify-center","rounded-mp-full tabular-nums whitespace-nowrap",x[a],P?o[u]:[l[u],r[u],d[u]].join(" "),F?`absolute ${c[z]}`:"relative align-middle",F?P?p[u].dot:p[u].badge:"",F&&"circle"===_?b[z]:"","transition-[opacity,scale,visibility] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard",R?"invisible scale-0 opacity-0":"",N??""].filter(Boolean).join(" "),A=function(e,t){return"number"==typeof e&&e>t?`${t}+`:e}(f,h),C=e("span",{ref:q,"data-mp-size":u,"data-mp-variant":a,className:Z,style:{...n(g),...k},"aria-hidden":!!R||void 0,...$,children:M&&!v?null:m(t,{children:[P||j?e("span",{className:i,children:j??A}):null,P?null:e("span",{"aria-hidden":!!j||void 0,children:A})]})});return F?m("span",{className:"relative inline-flex shrink-0 align-middle",children:[B,C]}):C});

package/dist/components/bottom-navigation/MPBottomNavigation.js

@@ -1 +1 @@
-import{jsx as e,jsxs as a,Fragment as l}from"react/jsx-runtime";import*as t from"react";import{useRender as n}from"@base-ui/react/use-render";import{MPStateLayer as i}from"../../internal/StateLayer";import{hasContent as o}from"../../internal/scale";import{VISUALLY_HIDDEN as r}from"../../internal/visually-hidden";const s=t.createContext({value:null,change:()=>{},size:"md",labels:"all",disabled:!1}),c={xs:"h-14",sm:"h-16",md:"h-20",lg:"h-22",xl:"h-24"},m={xs:"h-6 w-12",sm:"h-7 w-14",md:"h-8 w-16",lg:"h-9 w-18",xl:"h-10 w-20"},d={xs:20,sm:22,md:24,lg:26,xl:28},u={xs:"text-mp-label-small",sm:"text-mp-label-small",md:"text-mp-label-medium",lg:"text-mp-label-medium",xl:"text-mp-label-large"},f={xs:"gap-0.5",sm:"gap-0.5",md:"gap-1",lg:"gap-1",xl:"gap-1.5"},p={static:"",absolute:"absolute inset-x-0 bottom-0 z-30",sticky:"sticky bottom-0 z-30",fixed:"fixed inset-x-0 bottom-0 z-40"};export const MPBottomNavigation=t.forwardRef(function({value:a,defaultValue:l=null,onValueChange:i,position:o="fixed",labels:r="all",size:m="md",divider:d=!1,safeArea:u=!0,disabled:f=!1,label:b,render:x,className:h,children:v,...g},w){const[y,z]=t.useState(l),N=void 0!==a,j=N?a:y,k=t.useCallback(e=>{N||z(e),i?.(e)},[N,i]),C=t.useMemo(()=>({value:j??null,change:k,size:m,labels:r,disabled:f}),[j,k,m,r,f]);return n({render:x??e("nav",{}),ref:w,props:{"aria-label":b,"data-mp-size":m,className:["mp-bottom-navigation bg-mp-surface-container text-mp-on-surface box-border w-full",d?"border-mp-outline-variant border-t":"",p[o],u?"pb-[env(safe-area-inset-bottom)]":"",h??""].filter(Boolean).join(" "),children:e(s.Provider,{value:C,children:e("div",{className:`flex w-full items-stretch ${c[m]}`,children:v})}),...g}})});export const MPBottomNavigationItem=t.forwardRef(function({value:n,icon:c,activeIcon:p,href:b,disabled:x=!1,className:h,children:v,onClick:g,...w},y){const z=t.useContext(s),N=x||z.disabled,j=null!==z.value&&z.value===n,k="all"===z.labels||"selected"===z.labels&&j,C=["mp-bottom-navigation__item group flex min-w-0 flex-1 flex-col items-center justify-center","box-border appearance-none bg-transparent px-1 font-[inherit] no-underline select-none",f[z.size],"outline-mp-secondary focus-visible:outline-2 focus-visible:-outline-offset-2","focus-visible:outline-solid outline-none",N?"text-mp-on-surface/38 cursor-default":j?"text-mp-on-surface cursor-pointer":"text-mp-on-surface-variant cursor-pointer",h??""].filter(Boolean).join(" "),B=a(l,{children:[o(c)||o(p)?a("span",{className:["relative flex shrink-0 items-center justify-center overflow-hidden","rounded-mp-full","transition-[background-color,color] duration-(--mp-sys-motion-duration-short4)",m[z.size],j&&!N?"bg-mp-secondary-container text-mp-on-secondary-container":""].filter(Boolean).join(" "),children:[N?null:e(i,{}),e("span",{className:"relative flex items-center justify-center",style:{width:d[z.size],height:d[z.size]},children:j?p??c:c})]}):null,o(v)?e("span",{className:k?`max-w-full truncate ${u[z.size]}`:r,children:v}):null]}),M=e=>{N?e.preventDefault():(z.change(n),g?.(e))};return b?e("a",{ref:y,href:N?void 0:b,"aria-current":j?"page":void 0,"aria-disabled":N||void 0,className:C,onClick:M,...w,children:B}):e("button",{ref:y,type:"button",disabled:N,"aria-current":j?"page":void 0,className:C,onClick:M,...w,children:B})});
+import{jsx as e,jsxs as t,Fragment as a}from"react/jsx-runtime";import*as l from"react";import{useRender as n}from"@base-ui/react/use-render";import{MPStateLayer as o}from"../../internal/StateLayer";import{hasContent as i}from"../../internal/scale";import{VISUALLY_HIDDEN as s}from"../../internal/visually-hidden";const r=l.createContext({value:null,change:()=>{},size:"md",labels:"all",disabled:!1}),m={xs:"h-14",sm:"h-16",md:"h-20",lg:"h-22",xl:"h-24"},d={xs:{box:"h-6 w-12",open:"w-12",shut:"w-6"},sm:{box:"h-7 w-14",open:"w-14",shut:"w-7"},md:{box:"h-8 w-16",open:"w-16",shut:"w-8"},lg:{box:"h-9 w-18",open:"w-18",shut:"w-9"},xl:{box:"h-10 w-20",open:"w-20",shut:"w-10"}},u={xs:20,sm:22,md:24,lg:26,xl:28},c={xs:"text-mp-label-small",sm:"text-mp-label-small",md:"text-mp-label-medium",lg:"text-mp-label-medium",xl:"text-mp-label-large"},p={xs:"gap-0.5",sm:"gap-0.5",md:"gap-1",lg:"gap-1",xl:"gap-1.5"},f={static:"",absolute:"absolute inset-x-0 bottom-0 z-30",sticky:"sticky bottom-0 z-30",fixed:"fixed inset-x-0 bottom-0 z-40"};export const MPBottomNavigation=l.forwardRef(function({value:t,defaultValue:a=null,onValueChange:o,position:i="fixed",labels:s="all",size:d="md",divider:u=!1,safeArea:c=!0,disabled:p=!1,label:b,render:x,className:h,children:v,...g},w){const[y,z]=l.useState(a),N=void 0!==t,j=N?t:y,k=l.useCallback(e=>{N||z(e),o?.(e)},[N,o]),C=l.useMemo(()=>({value:j??null,change:k,size:d,labels:s,disabled:p}),[j,k,d,s,p]);return n({render:x??e("nav",{}),ref:w,props:{"aria-label":b,"data-mp-size":d,className:["mp-bottom-navigation bg-mp-surface-container text-mp-on-surface box-border w-full",u?"border-mp-outline-variant border-t":"",f[i],c?"pb-[env(safe-area-inset-bottom)]":"",h??""].filter(Boolean).join(" "),children:e(r.Provider,{value:C,children:e("div",{className:`flex w-full items-stretch ${m[d]}`,children:v})}),...g}})});export const MPBottomNavigationItem=l.forwardRef(function({value:n,icon:m,activeIcon:f,href:b,disabled:x=!1,className:h,children:v,onClick:g,...w},y){const z=l.useContext(r),N=x||z.disabled,j=null!==z.value&&z.value===n,k="all"===z.labels||"selected"===z.labels&&j,C=["mp-bottom-navigation__item group flex min-w-0 flex-1 flex-col items-center justify-center","box-border appearance-none bg-transparent px-1 font-[inherit] no-underline select-none",p[z.size],"outline-mp-secondary focus-visible:outline-2 focus-visible:-outline-offset-2","focus-visible:outline-solid outline-none",N?"text-mp-on-surface/38 cursor-default":j?"text-mp-on-surface cursor-pointer":"text-mp-on-surface-variant cursor-pointer",h??""].filter(Boolean).join(" "),B=t(a,{children:[i(m)||i(f)?t("span",{className:["relative flex shrink-0 items-center justify-center overflow-hidden","rounded-mp-full","transition-[color] duration-(--mp-sys-motion-duration-short4)",d[z.size].box,j&&!N?"text-mp-on-secondary-container":""].filter(Boolean).join(" "),children:[N?null:e("span",{"aria-hidden":"true",className:["pointer-events-none absolute inset-y-0 left-1/2 -translate-x-1/2","rounded-mp-full bg-mp-secondary-container","transition-[width,opacity] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard",j?`${d[z.size].open} opacity-100`:`${d[z.size].shut} opacity-0`].join(" ")}),N?null:e(o,{}),e("span",{className:"relative flex items-center justify-center",style:{width:u[z.size],height:u[z.size]},children:j?f??m:m})]}):null,i(v)?e("span",{className:k?`max-w-full truncate ${c[z.size]}`:s,children:v}):null]}),$=e=>{N?e.preventDefault():(z.change(n),g?.(e))};return b?e("a",{ref:y,href:N?void 0:b,"aria-current":j?"page":void 0,"aria-disabled":N||void 0,className:C,onClick:$,...w,children:B}):e("button",{ref:y,type:"button",disabled:N,"aria-current":j?"page":void 0,className:C,onClick:$,...w,children:B})});

package/dist/components/checkbox/MPCheckbox.js

@@ -1 +1 @@
-import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as a from"react";import{Checkbox as t}from"@base-ui/react/checkbox";import{Field as n}from"@base-ui/react/field";import{MPIcon as o}from"../icon/MPIcon";import{CheckIcon as i,RemoveIcon as c}from"../../constants/icons";import{accentSlots as s}from"../../internal/accent";import{MPStateLayer as d}from"../../internal/StateLayer";import{MPSupportingText as l}from"../../internal/SupportingText";import{PROSE_TEXT as m,hasContent as p}from"../../internal/scale";const h={xs:{box:"size-3.5",halo:"size-8",glyph:12},sm:{box:"size-4",halo:"size-9",glyph:14},md:{box:"size-[18px]",halo:"size-10",glyph:16},lg:{box:"size-5",halo:"size-11",glyph:18},xl:{box:"size-[22px]",halo:"size-12",glyph:20}};export const MPCheckbox=a.forwardRef(function({checked:u,defaultChecked:f,onCheckedChange:b,indeterminate:x=!1,label:g,description:k,errorMessage:y,size:z="md",color:j="primary",required:_=!1,disabled:v=!1,readOnly:C=!1,name:N,value:M,id:I},R){const q=p(y),w=q?"error":j,L=h[z],O=a.useId(),P=I??O;return e(n.Root,{className:"mp-checkbox inline-block align-top",disabled:v,invalid:q,"data-mp-size":z,style:s(w),children:r("div",{className:["flex items-start gap-3",m[z]].join(" "),children:[e("span",{className:"flex h-[1lh] shrink-0 items-center",children:r(t.Root,{ref:R,id:P,name:N,value:M,checked:u,defaultChecked:f,indeterminate:x,required:_,disabled:v,readOnly:C,onCheckedChange:e=>b?.(e),className:["mp-checkbox__tick group relative inline-flex shrink-0 items-center","box-border justify-center border-2 p-0","rounded-[calc(var(--mp-sys-shape-corner-extra-small)/2)]","appearance-none bg-transparent font-[inherit] outline-none","transition-[background-color,border-color]","duration-(--mp-sys-motion-duration-short4)",L.box,v?["border-mp-on-surface/38 cursor-default","data-checked:bg-mp-on-surface/38 data-checked:border-transparent","data-indeterminate:bg-mp-on-surface/38 data-indeterminate:border-transparent"].join(" "):[C?"cursor-default":"cursor-pointer",q?"border-mp-error":"border-mp-on-surface-variant","data-checked:border-transparent data-checked:bg-(--_mp-accent)","data-checked:text-(--_mp-on-accent)","data-indeterminate:border-transparent data-indeterminate:bg-(--_mp-accent)","data-indeterminate:text-(--_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",L.halo,"bg-mp-on-surface","group-data-checked:bg-(--_mp-accent)","group-data-indeterminate:bg-(--_mp-accent)"].join(" ")}),e(t.Indicator,{className:"flex items-center justify-center",children:e(o,{icon:x?c:i,size:L.glyph,strokeWidth:3})})]})}),p(g)||p(k)||q?r("span",{className:"flex min-w-0 flex-col gap-0.5",children:[p(g)?r(n.Label,{htmlFor:P,className:["leading-[1.4]",v?"text-mp-on-surface/38 cursor-default":C?"text-mp-on-surface":"text-mp-on-surface cursor-pointer"].join(" "),children:[g,_?e("span",{"aria-hidden":"true",children:" *"}):null]}):null,e(l,{description:k,errorMessage:y})]}):null]})})});
+import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as r from"react";import{Checkbox as t}from"@base-ui/react/checkbox";import{Field as n}from"@base-ui/react/field";import{MPIcon as o}from"../icon/MPIcon";import{CheckIcon as i,RemoveIcon as s}from"../../constants/icons";import{accentSlots as c}from"../../internal/accent";import{MPStateLayer as d}from"../../internal/StateLayer";import{MPSupportingText as l}from"../../internal/SupportingText";import{PROSE_TEXT as m,hasContent as p}from"../../internal/scale";const h={xs:{box:"size-3.5",halo:"size-8",glyph:12},sm:{box:"size-4",halo:"size-9",glyph:14},md:{box:"size-[18px]",halo:"size-10",glyph:16},lg:{box:"size-5",halo:"size-11",glyph:18},xl:{box:"size-[22px]",halo:"size-12",glyph:20}};export const MPCheckbox=r.forwardRef(function({checked:u,defaultChecked:f,onCheckedChange:b,indeterminate:x=!1,label:g,description:y,errorMessage:k,size:z="md",color:j="primary",required:_=!1,disabled:v=!1,readOnly:C=!1,name:N,value:M,id:I},R){const q=p(k),w=q?"error":j,L=h[z],O=r.useId(),P=I??O;return e(n.Root,{className:"mp-checkbox inline-block align-top",disabled:v,invalid:q,"data-mp-size":z,style:c(w),children:a("div",{className:["flex items-start gap-3",m[z]].join(" "),children:[e("span",{className:"flex h-[1lh] shrink-0 items-center",children:a(t.Root,{ref:R,id:P,name:N,value:M,checked:u,defaultChecked:f,indeterminate:x,required:_,disabled:v,readOnly:C,onCheckedChange:e=>b?.(e),className:["mp-checkbox__tick group relative inline-flex shrink-0 items-center","box-border justify-center border-2 p-0","rounded-[calc(var(--mp-sys-shape-corner-extra-small)/2)]","appearance-none bg-transparent font-[inherit] outline-none","transition-[background-color,border-color]","duration-(--mp-sys-motion-duration-short4)",L.box,v?["border-mp-on-surface/38 cursor-default","data-checked:bg-mp-on-surface/38 data-checked:border-transparent","data-indeterminate:bg-mp-on-surface/38 data-indeterminate:border-transparent"].join(" "):[C?"cursor-default":"cursor-pointer",q?"border-mp-error":"border-mp-on-surface-variant","data-checked:border-transparent data-checked:bg-(--_mp-accent)","data-checked:text-(--_mp-on-accent)","data-indeterminate:border-transparent data-indeterminate:bg-(--_mp-accent)","data-indeterminate:text-(--_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",L.halo,"bg-mp-on-surface","group-data-checked:bg-(--_mp-accent)","group-data-indeterminate:bg-(--_mp-accent)"].join(" ")}),e(t.Indicator,{className:["flex items-center justify-center","transition-[opacity,scale] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard","data-starting-style:scale-60 data-starting-style:opacity-0","data-ending-style:scale-60 data-ending-style:opacity-0"].join(" "),children:e(o,{icon:x?s:i,size:L.glyph,strokeWidth:3})})]})}),p(g)||p(y)||q?a("span",{className:"flex min-w-0 flex-col gap-0.5",children:[p(g)?a(n.Label,{htmlFor:P,className:["leading-[1.4]",v?"text-mp-on-surface/38 cursor-default":C?"text-mp-on-surface":"text-mp-on-surface cursor-pointer"].join(" "),children:[g,_?e("span",{"aria-hidden":"true",children:" *"}):null]}):null,e(l,{description:y,errorMessage:k})]}):null]})})});

package/dist/components/color-picker/MPColorPicker.js

@@ -1 +1 @@
-import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as r from"react";import{Field as n}from"@base-ui/react/field";import{Popover as l}from"@base-ui/react/popover";import{MPIcon as t}from"../icon/MPIcon";import{CheckIcon as o,CloseIcon as i}from"../../constants/icons";import{MPFieldLabel as s,MPFieldOutline as u,useFloatingLabel as c}from"../../internal/FieldOutline";import{MPStateLayer as d}from"../../internal/StateLayer";import{MPSupportingText as h}from"../../internal/SupportingText";import{CONTROL_ICON as p,META_TEXT as f,PROSE_TEXT as m,STACK_GAP as g,hasContent as v}from"../../internal/scale";import{FADE as b,PORTAL_LAYER as x}from"../../internal/surface";import{CHECKER_BACKGROUND as y,DEFAULT_SWATCHES as w,clamp as N,cssColor as k,formatColor as C,parseColor as j,readableInk as _}from"../../internal/color";const z={area:"Saturation and brightness",hue:"Hue",alpha:"Opacity",value:"Colour value",swatches:"Swatches",clear:"Clear",empty:"No colour"},P={xs:"w-40",sm:"w-44",md:"w-52",lg:"w-60",xl:"w-72"},$={xs:"h-24",sm:"h-28",md:"h-32",lg:"h-40",xl:"h-48"},M={xs:"h-2.5",sm:"h-3",md:"h-3.5",lg:"h-4",xl:"h-5"},T={xs:"gap-2",sm:"gap-2.5",md:"gap-3",lg:"gap-3.5",xl:"gap-4"},I={xs:12,sm:14,md:16,lg:18,xl:20},O={xs:{padding:"px-2",height:"h-8"},sm:{padding:"px-3",height:"h-10"},md:{padding:"px-4",height:"h-14"},lg:{padding:"px-4",height:"h-16"},xl:{padding:"px-5",height:"h-18"}},S="border-mp-outline-variant relative overflow-hidden border",A=["pointer-events-none absolute rounded-full border-2 border-white","[box-shadow:0_0_0_1px_rgb(0_0_0/0.35),0_1px_3px_rgb(0_0_0/0.4)]"].join(" ");function B(e,a,r){return{x:0===e.width?0:N((a-e.left)/e.width,0,1),y:0===e.height?0:N((r-e.top)/e.height,0,1)}}function D(e){const a=e.shiftKey?10:1;switch(e.key){case"ArrowLeft":return{x:-a,y:0};case"ArrowRight":return{x:a,y:0};case"ArrowUp":return{x:0,y:a};case"ArrowDown":return{x:0,y:-a};default:return null}}function L({hsv:n,alphaValue:l,onChange:i,text:s,onTextChange:u,withAlpha:c,swatches:d,editable:h,size:p,inert:m,labels:g}){const v=I[p],b=-v/2,x=k({h:n.h,s:100,v:100}),w=k(n),z=r.useRef(null),O=e=>({onPointerDown:a=>{if(m)return;const r=a.currentTarget.getBoundingClientRect();z.current=r,a.currentTarget.setPointerCapture(a.pointerId),e(B(r,a.clientX,a.clientY))},onPointerMove:a=>{const r=z.current;!m&&r&&a.currentTarget.hasPointerCapture(a.pointerId)&&e(B(r,a.clientX,a.clientY))},onPointerUp:()=>{z.current=null},onPointerCancel:()=>{z.current=null}}),L=(e,a,r,n)=>({role:"slider",tabIndex:m?-1:0,"aria-label":e,"aria-valuemin":0,"aria-valuemax":r,"aria-valuenow":Math.round(a),"aria-orientation":"horizontal","aria-disabled":m||void 0,onKeyDown:e=>{const a=D(e);!m&&a&&0!==a.x&&(e.preventDefault(),n(a.x))}}),R=["outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none"].join(" "),q=r.useMemo(()=>d?d.map(e=>{const a=j(e);return{swatch:e,parsed:a,hex:null===a?null:C(a.hsv,a.alpha,"hex")}}):[],[d]),V=C(n,l,"hex");return a("div",{className:`mp-color-picker__panel flex flex-col ${P[p]} ${T[p]}`,children:[e("div",{...O(({x:e,y:a})=>i({hsv:{h:n.h,s:100*e,v:100*(1-a)},alpha:l})),role:"slider",tabIndex:m?-1:0,"aria-label":g.area,"aria-valuemin":0,"aria-valuemax":100,"aria-valuenow":Math.round(n.s),"aria-valuetext":`${Math.round(n.s)}%, ${Math.round(n.v)}%`,"aria-disabled":m||void 0,onKeyDown:e=>{const a=D(e);!m&&a&&(e.preventDefault(),i({hsv:{h:n.h,s:N(n.s+a.x,0,100),v:N(n.v+a.y,0,100)},alpha:l}))},className:[S,"rounded-mp-sm",$[p],R,m?"cursor-default":"cursor-crosshair touch-none"].join(" "),style:{backgroundColor:x,backgroundImage:"linear-gradient(to top, #000000, rgb(0 0 0 / 0)), linear-gradient(to right, #ffffff, rgb(255 255 255 / 0))"},children:e("span",{className:A,style:{width:v,height:v,left:`${n.s}%`,top:100-n.v+"%",marginLeft:b,marginTop:b,backgroundColor:w}})}),e("div",{...O(({x:e})=>i({hsv:{...n,h:360*e},alpha:l})),...L(g.hue,n.h,360,e=>i({hsv:{...n,h:(n.h+2*e+360)%360},alpha:l})),className:[S,"rounded-mp-full",M[p],R,m?"cursor-default":"cursor-pointer touch-none"].join(" "),style:{backgroundImage:"linear-gradient(to right, #ff0000 0%, #ffff00 16.66%, #00ff00 33.33%, #00ffff 50%, #0000ff 66.66%, #ff00ff 83.33%, #ff0000 100%)"},children:e("span",{className:A,style:{width:v,height:v,left:n.h/360*100+"%",top:"50%",marginLeft:b,marginTop:b,backgroundColor:x}})}),c?a("div",{...O(({x:e})=>i({hsv:n,alpha:e})),...L(g.alpha,100*l,100,e=>i({hsv:n,alpha:N(l+e/100,0,1)})),className:[S,"rounded-mp-full",M[p],R,m?"cursor-default":"cursor-pointer touch-none"].join(" "),style:y,children:[e("span",{"aria-hidden":"true",className:"absolute inset-0",style:{backgroundImage:`linear-gradient(to right, ${k(n,0)}, ${w})`}}),e("span",{className:A,style:{width:v,height:v,left:100*l+"%",top:"50%",marginLeft:b,marginTop:b,backgroundColor:k(n,l)}})]}):null,h?a("div",{className:`flex items-center ${T[p]}`,children:[e("span",{"aria-hidden":"true",className:"border-mp-outline-variant shrink-0 rounded-full border",style:{width:v+8,height:v+8,...y},children:e("span",{className:"block size-full rounded-full",style:{backgroundColor:k(n,l)}})}),e("input",{type:"text",value:s,readOnly:m,spellCheck:!1,autoComplete:"off","aria-label":g.value,onChange:e=>u(e.target.value),className:["rounded-mp-xs border-mp-outline text-mp-on-surface min-w-0 flex-1 border","bg-transparent px-2 py-1 font-mono lowercase",f,"focus-visible:border-mp-primary outline-none"].join(" ")})]}):null,q.length>0?e("div",{role:"group","aria-label":g.swatches,className:"grid grid-cols-8 gap-1",children:q.map(({swatch:a,parsed:r,hex:n},l)=>{const s=null!==r&&n===V;return e("button",{type:"button",disabled:m,"aria-label":a,"aria-pressed":s,onClick:()=>{r&&i({hsv:r.hsv,alpha:r.alpha})},className:["border-mp-outline-variant flex aspect-square items-center justify-center","rounded-full border",R,m?"cursor-default":"hover:shadow-mp-1 cursor-pointer"].join(" "),style:{backgroundColor:a},children:s&&r?e("span",{style:{color:_(r.hsv)},children:e(t,{icon:o,size:12})}):null},`${l}:${a}`)})}):null]})}const R={h:202,s:100,v:61};export const MPColorPicker=r.forwardRef(function({value:o,defaultValue:N="#00639b",onValueChange:_,format:P="hex",alpha:$=!1,swatches:M=w,inline:T=!1,editable:I=!0,label:S,floatingLabel:A=!0,description:B,errorMessage:D,required:q=!1,disabled:V=!1,readOnly:K=!1,clearable:F=!1,name:U,open:X,defaultOpen:Y=!1,onOpenChange:E,labels:H,size:W="md",fullWidth:G=!1,id:J,className:Q,style:Z},ee){const ae=r.useMemo(()=>({...z,...H}),[H]),re=v(D),ne=O[W],le=r.useId(),te=J??le,[oe,ie]=r.useState(N),se=o??oe,[ue,ce]=r.useState(Y),de=X??ue,[he,pe]=r.useState(()=>j(se)??{hsv:R,alpha:1}),[fe,me]=r.useState(()=>se),ge=C(he.hsv,$?he.alpha:1,P),ve=""===se;r.useEffect(()=>{const e=j(se);e?C(e.hsv,$?e.alpha:1,P)!==ge&&(me(se),pe(e)):me(se)},[se,ge,$,P]);const be=V||K,xe=F&&!be&&!ve,{shrunk:ye,focusProps:we}=c({floating:A&&v(S),filled:!ve,pinned:de}),Ne=(e,a)=>{pe(e);const r=C(e.hsv,$?e.alpha:1,P);me(a??r),void 0===o&&ie(r),_?.(r)},ke=e(L,{hsv:he.hsv,alphaValue:he.alpha,onChange:Ne,text:fe,onTextChange:e=>{me(e);const a=j(e);a&&Ne(a,e)},withAlpha:$,swatches:M,editable:I,size:W,inert:be,labels:ae}),Ce=e("span",{"aria-hidden":"true",className:"border-mp-outline-variant block size-5 shrink-0 rounded-full border",style:y,children:e("span",{className:"block size-full rounded-full",style:{backgroundColor:ve?"transparent":k(he.hsv,$?he.alpha:1)}})}),je=U?e("input",{type:"hidden",name:U,value:ve?"":ge}):null;return T?a("div",{ref:ee,"data-mp-size":W,className:["mp-color-picker flex flex-col",g[W],Q??""].filter(Boolean).join(" "),style:Z,children:[v(S)?a("span",{className:[f,V?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:[S,q?e("span",{"aria-hidden":"true",children:" *"}):null]}):null,ke,v(D)?e("span",{className:`${f} text-mp-error`,children:D}):v(B)?e("span",{className:`${f} text-mp-on-surface-variant`,children:B}):null,je]}):a(n.Root,{ref:ee,disabled:V,invalid:re,"data-mp-size":W,className:["mp-color-picker group flex-col align-top",G?"flex w-full":"inline-flex w-fit",Q??""].filter(Boolean).join(" "),style:Z,...we,children:[a(l.Root,{open:de,onOpenChange:e=>{void 0===X&&ce(e),E?.(e)},children:[a("div",{className:"relative w-full",children:[a(l.Trigger,{id:te,disabled:V,nativeButton:!0,className:["relative flex w-full items-center gap-2 select-none","appearance-none bg-transparent font-[inherit] outline-none",ne.padding,xe?"pe-10":"",ne.height,m[W],V?"text-mp-on-surface/38 cursor-default":"text-mp-on-surface "+(K?"cursor-default":"cursor-pointer")].filter(Boolean).join(" "),children:[ve&&!ye?null:Ce,e("span",{className:["min-w-0 flex-1 truncate text-start",ve?"text-mp-on-surface-variant":""].filter(Boolean).join(" "),children:ve?ye?ae.empty:null:ge})]}),xe?a("button",{type:"button","aria-label":ae.clear,onClick:()=>{void 0===o&&ie(""),me(""),_?.("")},className:["group/clear rounded-mp-full text-mp-on-surface-variant absolute inset-y-0","end-1 my-auto flex size-8 cursor-pointer items-center justify-center","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-1","focus-visible:outline-solid outline-none"].join(" "),children:[e(d,{className:"group-hover/clear:opacity-8 group-focus-visible/clear:opacity-10"}),e(t,{icon:i,size:p[W]})]}):null,e(u,{label:S,required:q,notched:ye}),v(S)?e(s,{size:W,label:S,required:q,htmlFor:te,shrunk:ye}):null]}),e(l.Portal,{children:e(l.Positioner,{className:x,sideOffset:4,align:"start",children:e(l.Popup,{className:["mp-color-picker__popup rounded-mp-md shadow-mp-2 bg-mp-surface-container","text-mp-on-surface p-3 outline-none",m[W],b].join(" "),children:ke})})})]}),e(h,{description:B,errorMessage:D,className:ne.padding}),je]})});
+import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as r from"react";import{Field as n}from"@base-ui/react/field";import{Popover as t}from"@base-ui/react/popover";import{MPIcon as l}from"../icon/MPIcon";import{CheckIcon as o,CloseIcon as i}from"../../constants/icons";import{MPFieldLabel as s,MPFieldOutline as u,useFloatingLabel as c}from"../../internal/FieldOutline";import{MPStateLayer as d}from"../../internal/StateLayer";import{MPSupportingText as p}from"../../internal/SupportingText";import{CONTROL_ICON as h,META_TEXT as m,PROSE_TEXT as f,STACK_GAP as g,hasContent as v}from"../../internal/scale";import{FADE as b,PORTAL_LAYER as x}from"../../internal/surface";import{CHECKER_BACKGROUND as y,DEFAULT_SWATCHES as w,clamp as N,cssColor as k,formatColor as C,parseColor as j,readableInk as _}from"../../internal/color";const z={area:"Saturation and brightness",hue:"Hue",alpha:"Opacity",value:"Colour value",swatches:"Swatches",clear:"Clear",empty:"No colour"},P={xs:"w-40",sm:"w-44",md:"w-52",lg:"w-60",xl:"w-72"},$={xs:"h-24",sm:"h-28",md:"h-32",lg:"h-40",xl:"h-48"},M={xs:"h-2.5",sm:"h-3",md:"h-3.5",lg:"h-4",xl:"h-5"},T={xs:"gap-2",sm:"gap-2.5",md:"gap-3",lg:"gap-3.5",xl:"gap-4"},I={xs:12,sm:14,md:16,lg:18,xl:20},O={xs:{padding:"px-2",height:"h-8"},sm:{padding:"px-3",height:"h-10"},md:{padding:"px-4",height:"h-14"},lg:{padding:"px-4",height:"h-16"},xl:{padding:"px-5",height:"h-18"}},S="border-mp-outline-variant relative overflow-hidden border",A=["pointer-events-none absolute rounded-full border-2 border-white","[box-shadow:0_0_0_1px_rgb(0_0_0/0.35),0_1px_3px_rgb(0_0_0/0.4)]"].join(" ");function B(e,a,r){return{x:0===e.width?0:N((a-e.left)/e.width,0,1),y:0===e.height?0:N((r-e.top)/e.height,0,1)}}function D(e){const a=e.shiftKey?10:1;switch(e.key){case"ArrowLeft":return{x:-a,y:0};case"ArrowRight":return{x:a,y:0};case"ArrowUp":return{x:0,y:a};case"ArrowDown":return{x:0,y:-a};default:return null}}function L({hsv:n,alphaValue:t,onChange:i,text:s,onTextChange:u,withAlpha:c,swatches:d,editable:p,size:h,inert:f,labels:g}){const v=I[h],b=-v/2,x=k({h:n.h,s:100,v:100}),w=k(n),z=r.useRef(null),O=e=>({onPointerDown:a=>{if(f)return;const r=a.currentTarget.getBoundingClientRect();z.current=r,a.currentTarget.setPointerCapture(a.pointerId),e(B(r,a.clientX,a.clientY))},onPointerMove:a=>{const r=z.current;!f&&r&&a.currentTarget.hasPointerCapture(a.pointerId)&&e(B(r,a.clientX,a.clientY))},onPointerUp:()=>{z.current=null},onPointerCancel:()=>{z.current=null}}),L=(e,a,r,n)=>({role:"slider",tabIndex:f?-1:0,"aria-label":e,"aria-valuemin":0,"aria-valuemax":r,"aria-valuenow":Math.round(a),"aria-orientation":"horizontal","aria-disabled":f||void 0,onKeyDown:e=>{const a=D(e);!f&&a&&0!==a.x&&(e.preventDefault(),n(a.x))}}),R=["outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none"].join(" "),q=r.useMemo(()=>d?d.map(e=>{const a=j(e);return{swatch:e,parsed:a,hex:null===a?null:C(a.hsv,a.alpha,"hex")}}):[],[d]),V=C(n,t,"hex");return a("div",{className:`mp-color-picker__panel flex flex-col ${P[h]} ${T[h]}`,children:[e("div",{...O(({x:e,y:a})=>i({hsv:{h:n.h,s:100*e,v:100*(1-a)},alpha:t})),role:"slider",tabIndex:f?-1:0,"aria-label":g.area,"aria-valuemin":0,"aria-valuemax":100,"aria-valuenow":Math.round(n.s),"aria-valuetext":`${Math.round(n.s)}%, ${Math.round(n.v)}%`,"aria-disabled":f||void 0,onKeyDown:e=>{const a=D(e);!f&&a&&(e.preventDefault(),i({hsv:{h:n.h,s:N(n.s+a.x,0,100),v:N(n.v+a.y,0,100)},alpha:t}))},className:[S,"rounded-mp-sm",$[h],R,f?"cursor-default":"cursor-crosshair touch-none"].join(" "),style:{backgroundColor:x,backgroundImage:"linear-gradient(to top, #000000, rgb(0 0 0 / 0)), linear-gradient(to right, #ffffff, rgb(255 255 255 / 0))"},children:e("span",{className:A,style:{width:v,height:v,left:`${n.s}%`,top:100-n.v+"%",marginLeft:b,marginTop:b,backgroundColor:w}})}),e("div",{...O(({x:e})=>i({hsv:{...n,h:360*e},alpha:t})),...L(g.hue,n.h,360,e=>i({hsv:{...n,h:(n.h+2*e+360)%360},alpha:t})),className:[S,"rounded-mp-full",M[h],R,f?"cursor-default":"cursor-pointer touch-none"].join(" "),style:{backgroundImage:"linear-gradient(to right, #ff0000 0%, #ffff00 16.66%, #00ff00 33.33%, #00ffff 50%, #0000ff 66.66%, #ff00ff 83.33%, #ff0000 100%)"},children:e("span",{className:A,style:{width:v,height:v,left:n.h/360*100+"%",top:"50%",marginLeft:b,marginTop:b,backgroundColor:x}})}),c?a("div",{...O(({x:e})=>i({hsv:n,alpha:e})),...L(g.alpha,100*t,100,e=>i({hsv:n,alpha:N(t+e/100,0,1)})),className:[S,"rounded-mp-full",M[h],R,f?"cursor-default":"cursor-pointer touch-none"].join(" "),style:y,children:[e("span",{"aria-hidden":"true",className:"absolute inset-0",style:{backgroundImage:`linear-gradient(to right, ${k(n,0)}, ${w})`}}),e("span",{className:A,style:{width:v,height:v,left:100*t+"%",top:"50%",marginLeft:b,marginTop:b,backgroundColor:k(n,t)}})]}):null,p?a("div",{className:`flex items-center ${T[h]}`,children:[e("span",{"aria-hidden":"true",className:"border-mp-outline-variant shrink-0 rounded-full border",style:{width:v+8,height:v+8,...y},children:e("span",{className:"block size-full rounded-full",style:{backgroundColor:k(n,t)}})}),e("input",{type:"text",value:s,readOnly:f,spellCheck:!1,autoComplete:"off","aria-label":g.value,onChange:e=>u(e.target.value),className:["rounded-mp-xs border-mp-outline text-mp-on-surface min-w-0 flex-1 border","bg-transparent px-2 py-1 font-mono lowercase",m,"focus-visible:border-mp-primary outline-none"].join(" ")})]}):null,q.length>0?e("div",{role:"group","aria-label":g.swatches,className:"grid grid-cols-8 gap-1",children:q.map(({swatch:a,parsed:r,hex:n},t)=>{const s=null!==r&&n===V;return e("button",{type:"button",disabled:f,"aria-label":a,"aria-pressed":s,onClick:()=>{r&&i({hsv:r.hsv,alpha:r.alpha})},className:["border-mp-outline-variant flex aspect-square items-center justify-center","rounded-full border","transition-[box-shadow] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard",R,f?"cursor-default":"hover:shadow-mp-1 cursor-pointer"].join(" "),style:{backgroundColor:a},children:e("span",{"aria-hidden":"true",className:["transition-opacity duration-(--mp-sys-motion-duration-short4)","ease-mp-standard",s?"opacity-100":"opacity-0"].join(" "),style:r?{color:_(r.hsv)}:void 0,children:e(l,{icon:o,size:12})})},`${t}:${a}`)})}):null]})}const R={h:202,s:100,v:61};export const MPColorPicker=r.forwardRef(function({value:o,defaultValue:N="#00639b",onValueChange:_,format:P="hex",alpha:$=!1,swatches:M=w,inline:T=!1,editable:I=!0,label:S,floatingLabel:A=!0,description:B,errorMessage:D,required:q=!1,disabled:V=!1,readOnly:K=!1,clearable:F=!1,name:U,open:X,defaultOpen:Y=!1,onOpenChange:E,labels:H,size:W="md",fullWidth:G=!1,id:J,className:Q,style:Z},ee){const ae=r.useMemo(()=>({...z,...H}),[H]),re=v(D),ne=O[W],te=r.useId(),le=J??te,[oe,ie]=r.useState(N),se=o??oe,[ue,ce]=r.useState(Y),de=X??ue,[pe,he]=r.useState(()=>j(se)??{hsv:R,alpha:1}),[me,fe]=r.useState(()=>se),ge=C(pe.hsv,$?pe.alpha:1,P),ve=""===se;r.useEffect(()=>{const e=j(se);e?C(e.hsv,$?e.alpha:1,P)!==ge&&(fe(se),he(e)):fe(se)},[se,ge,$,P]);const be=V||K,xe=F&&!be&&!ve,{shrunk:ye,focusProps:we}=c({floating:A&&v(S),filled:!ve,pinned:de}),Ne=(e,a)=>{he(e);const r=C(e.hsv,$?e.alpha:1,P);fe(a??r),void 0===o&&ie(r),_?.(r)},ke=e(L,{hsv:pe.hsv,alphaValue:pe.alpha,onChange:Ne,text:me,onTextChange:e=>{fe(e);const a=j(e);a&&Ne(a,e)},withAlpha:$,swatches:M,editable:I,size:W,inert:be,labels:ae}),Ce=e("span",{"aria-hidden":"true",className:"border-mp-outline-variant block size-5 shrink-0 rounded-full border",style:y,children:e("span",{className:"block size-full rounded-full",style:{backgroundColor:ve?"transparent":k(pe.hsv,$?pe.alpha:1)}})}),je=U?e("input",{type:"hidden",name:U,value:ve?"":ge}):null;return T?a("div",{ref:ee,"data-mp-size":W,className:["mp-color-picker flex flex-col",g[W],Q??""].filter(Boolean).join(" "),style:Z,children:[v(S)?a("span",{className:[m,V?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:[S,q?e("span",{"aria-hidden":"true",children:" *"}):null]}):null,ke,v(D)?e("span",{className:`${m} text-mp-error`,children:D}):v(B)?e("span",{className:`${m} text-mp-on-surface-variant`,children:B}):null,je]}):a(n.Root,{ref:ee,disabled:V,invalid:re,"data-mp-size":W,className:["mp-color-picker group flex-col align-top",G?"flex w-full":"inline-flex w-fit",Q??""].filter(Boolean).join(" "),style:Z,...we,children:[a(t.Root,{open:de,onOpenChange:e=>{void 0===X&&ce(e),E?.(e)},children:[a("div",{className:"relative w-full",children:[a(t.Trigger,{id:le,disabled:V,nativeButton:!0,className:["relative flex w-full items-center gap-2 select-none","appearance-none bg-transparent font-[inherit] outline-none",ne.padding,xe?"pe-10":"",ne.height,f[W],V?"text-mp-on-surface/38 cursor-default":"text-mp-on-surface "+(K?"cursor-default":"cursor-pointer")].filter(Boolean).join(" "),children:[ve&&!ye?null:Ce,e("span",{className:["min-w-0 flex-1 truncate text-start",ve?"text-mp-on-surface-variant":""].filter(Boolean).join(" "),children:ve?ye?ae.empty:null:ge})]}),xe?a("button",{type:"button","aria-label":ae.clear,onClick:()=>{void 0===o&&ie(""),fe(""),_?.("")},className:["group/clear rounded-mp-full text-mp-on-surface-variant absolute inset-y-0","end-1 my-auto flex size-8 cursor-pointer items-center justify-center","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-1","focus-visible:outline-solid outline-none"].join(" "),children:[e(d,{className:"group-hover/clear:opacity-8 group-focus-visible/clear:opacity-10"}),e(l,{icon:i,size:h[W]})]}):null,e(u,{label:S,required:q,notched:ye}),v(S)?e(s,{size:W,label:S,required:q,htmlFor:le,shrunk:ye}):null]}),e(t.Portal,{children:e(t.Positioner,{className:x,sideOffset:4,align:"start",children:e(t.Popup,{className:["mp-color-picker__popup rounded-mp-md shadow-mp-2 bg-mp-surface-container","text-mp-on-surface p-3 outline-none",f[W],b].join(" "),children:ke})})})]}),e(p,{description:B,errorMessage:D,className:ne.padding}),je]})});

package/dist/components/combobox/MPCombobox.js

@@ -1 +1 @@
-import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as l from"react";import{Combobox as i}from"@base-ui/react/combobox";import{Field as n}from"@base-ui/react/field";import{MPChip as t}from"../chip/MPChip";import{MPIcon as r}from"../icon/MPIcon";import{AddIcon as o,CheckIcon as s,ChevronDownIcon as m,CloseIcon as c}from"../../constants/icons";import{MPFieldLabel as u,MPFieldOutline as d,useFloatingLabel as p}from"../../internal/FieldOutline";import{fillMessage as h}from"../../internal/i18n";import{useMPLocale as f,useMPMessages as b}from"../../internal/locale";import{MPStateLayer as g}from"../../internal/StateLayer";import{MPSupportingText as x}from"../../internal/SupportingText";import{CONTROL_ICON as v,PROSE_TEXT as y,hasContent as N}from"../../internal/scale";import{FADE as w,PORTAL_LAYER as C}from"../../internal/surface";const L={xs:{padding:"ps-2 pe-1",height:"h-8"},sm:{padding:"ps-3 pe-1.5",height:"h-10"},md:{padding:"ps-4 pe-2",height:"h-14"},lg:{padding:"ps-4 pe-2",height:"h-16"},xl:{padding:"ps-5 pe-2.5",height:"h-18"}},j={xs:"min-h-8 py-1",sm:"min-h-10 py-1.5",md:"min-h-14 py-3",lg:"min-h-16 py-3",xl:"min-h-18 py-3"},I={xs:"xs",sm:"xs",md:"sm",lg:"md",xl:"md"};function S(e){return null==e?[]:Array.isArray(e)?e.slice():[e]}export function MPCombobox({items:z,multiple:M,value:O,defaultValue:V,onValueChange:P,onInputValueChange:k,allowCustom:q=!0,customLabel:A,clearable:T=!1,emptyMessage:$="No matches",limit:R,placeholder:_,label:F,floatingLabel:E=!0,description:B,errorMessage:G,startIcon:H,size:W="md",fullWidth:D=!1,required:J=!1,disabled:K=!1,readOnly:Q=!1,name:U,open:X,defaultOpen:Y,onOpenChange:Z,clearLabel:ee,openLabel:ae,locale:le,removeLabel:ie,inputRef:ne,id:te,className:re,style:oe}){const se=f(le),me=b("common",se),ce=N(G),ue=!0===M,de=L[W],pe=l.useId(),he=te??pe,fe=l.useMemo(()=>z.map(e=>({value:e.value,label:e.label??String(e.value),disabled:e.disabled})),[z]),[be,ge]=l.useState(()=>S(V)),xe=void 0===O?be:S(O),[ve,ye]=l.useState(""),{shrunk:Ne,focusProps:we}=p({floating:E&&N(F),filled:xe.length>0||""!==ve,pinned:!!H}),Ce=l.useCallback(e=>fe.find(a=>a.value===e)??{value:e,label:String(e),custom:!0},[fe]),Le=ve.trim(),je=Le.toLocaleLowerCase(),Ie=""===Le||fe.some(e=>e.label.toLocaleLowerCase()===je||String(e.value).toLocaleLowerCase()===je)||xe.some(e=>String(e).toLocaleLowerCase()===je),Se=!q||Q||K||Ie?null:Le,ze=l.useMemo(()=>null===Se?fe:[...fe,{value:Se,label:Se,custom:!0}],[fe,Se]),Me=ue?xe.map(Ce):xe.length>0?Ce(xe[0]):null;const Oe=["min-w-0 flex-1 self-stretch bg-transparent font-[inherit] text-inherit outline-none","placeholder:text-mp-on-surface-variant",K?"text-mp-on-surface/38 cursor-default":"text-mp-on-surface caret-mp-primary"].join(" "),Ve=["group rounded-mp-full relative flex size-8 shrink-0 cursor-pointer items-center justify-center","text-mp-on-surface-variant","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-1","focus-visible:outline-solid outline-none","disabled:text-mp-on-surface/38 disabled:cursor-default"].join(" "),Pe=a=>e(i.Input,{ref:ne,id:he,placeholder:Ne?_:void 0,className:ue?`${Oe} min-w-16 ${a?"ms-1.5":""}`:Oe});return a(n.Root,{disabled:K,invalid:ce,"data-mp-size":W,className:["mp-combobox group flex-col align-top",D?"flex w-full":"inline-flex w-fit",re??""].filter(Boolean).join(" "),style:oe,...we,children:[a(i.Root,{name:U,items:ze,multiple:ue,value:Me,onValueChange:e=>{!function(e){void 0===O&&ge(e),P?.(ue?e:e[0]??null)}((null===e?[]:Array.isArray(e)?e:[e]).map(e=>e.value))},onInputValueChange:e=>{ye(e),k?.(e)},open:X,defaultOpen:Y,onOpenChange:e=>Z?.(e),autoHighlight:!0,itemToStringLabel:e=>e.label,itemToStringValue:e=>String(e.value),isItemEqualToValue:(e,a)=>e.value===a.value,limit:R,disabled:K,readOnly:Q,required:J,children:[a("div",{className:"relative w-full",children:[a(i.InputGroup,{className:["relative flex w-full items-center gap-2",de.padding,ue?j[W]:de.height,y[W],K?"cursor-default":"cursor-text"].join(" "),children:[H?e("span",{className:["flex shrink-0 items-center",K?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:H}):null,ue?e(i.Chips,{className:"flex min-w-0 flex-1 flex-wrap items-center gap-1",children:e(i.Value,{children:n=>a(l.Fragment,{children:[n.map(a=>e(i.Chip,{render:e(t,{variant:ce?"outlined":"tonal",color:ce?"error":"primary",size:I[W],disabled:K,endIcon:Q||K?null:e(i.ChipRemove,{"aria-label":ie?ie(a.label):h(me.removeNamed,{label:a.label}),className:"flex cursor-pointer items-center opacity-70 hover:opacity-100",children:e(r,{icon:c,size:16})})}),children:a.label},String(a.value))),Pe(n.length>0)]})})}):Pe(!1),T&&!Q?a(i.Clear,{"aria-label":ee??me.clear,className:Ve,children:[e(g,{}),e(r,{icon:c,size:v[W]})]}):null,a(i.Trigger,{"aria-label":ae??me.open,className:Ve,children:[e(g,{}),e(i.Icon,{className:["relative flex items-center","transition-transform duration-(--mp-sys-motion-duration-short4)","data-popup-open:rotate-180"].join(" "),children:e(r,{icon:m,size:v[W]})})]})]}),e(d,{label:F,required:J,notched:Ne}),N(F)?e(u,{size:W,label:F,required:J,htmlFor:he,shrunk:Ne}):null]}),e(i.Portal,{children:e(i.Positioner,{className:C,sideOffset:4,children:a(i.Popup,{className:["mp-combobox__popup rounded-mp-xs shadow-mp-2 bg-mp-surface-container p-2","text-mp-on-surface w-[var(--anchor-width)] outline-none","max-h-[min(20rem,var(--available-height))] overflow-y-auto overscroll-contain",y[W],w].join(" "),children:[e(i.Empty,{className:"text-mp-on-surface-variant px-3 py-2 empty:hidden",children:$}),e(i.List,{children:l=>a(i.Item,{value:l,disabled:l.disabled,className:["mp-combobox__item rounded-mp-xs relative flex cursor-pointer items-center","gap-3 py-2 ps-2 pe-3 select-none outline-none","data-highlighted:bg-mp-on-surface/8","data-selected:bg-mp-secondary-container","data-selected:text-mp-on-secondary-container","data-disabled:text-mp-on-surface/38 data-disabled:cursor-default"].join(" "),children:[e("span",{className:"flex size-5 shrink-0 items-center justify-center",children:l.custom?e(r,{icon:o,size:18}):e(i.ItemIndicator,{children:e(r,{icon:s,size:18})})}),e("span",{className:"min-w-0 flex-1 truncate",children:l.custom?A?A(l.label):`Add “${l.label}”`:l.label})]},`${l.custom?"custom:":""}${String(l.value)}`)})]})})})]}),e(x,{description:B,errorMessage:G,className:de.padding})]})}
+import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as l from"react";import{Combobox as i}from"@base-ui/react/combobox";import{Field as n}from"@base-ui/react/field";import{MPChip as t}from"../chip/MPChip";import{MPIcon as o}from"../icon/MPIcon";import{AddIcon as r,CheckIcon as s,ChevronDownIcon as m,CloseIcon as c}from"../../constants/icons";import{MPFieldLabel as d,MPFieldOutline as u,useFloatingLabel as p}from"../../internal/FieldOutline";import{fillMessage as h}from"../../internal/i18n";import{useMPLocale as f,useMPMessages as g}from"../../internal/locale";import{MPStateLayer as b}from"../../internal/StateLayer";import{MPSupportingText as x}from"../../internal/SupportingText";import{CONTROL_ICON as v,PROSE_TEXT as y,hasContent as N}from"../../internal/scale";import{FADE as w,PORTAL_LAYER as C}from"../../internal/surface";const L={xs:{padding:"ps-2 pe-1",height:"h-8"},sm:{padding:"ps-3 pe-1.5",height:"h-10"},md:{padding:"ps-4 pe-2",height:"h-14"},lg:{padding:"ps-4 pe-2",height:"h-16"},xl:{padding:"ps-5 pe-2.5",height:"h-18"}},j={xs:"min-h-8 py-1",sm:"min-h-10 py-1.5",md:"min-h-14 py-3",lg:"min-h-16 py-3",xl:"min-h-18 py-3"},I={xs:"xs",sm:"xs",md:"sm",lg:"md",xl:"md"};function S(e){return null==e?[]:Array.isArray(e)?e.slice():[e]}export function MPCombobox({items:z,multiple:M,value:O,defaultValue:V,onValueChange:k,onInputValueChange:P,allowCustom:q=!0,customLabel:A,clearable:T=!1,emptyMessage:$="No matches",limit:R,placeholder:_,label:F,floatingLabel:E=!0,description:B,errorMessage:G,startIcon:H,size:W="md",fullWidth:D=!1,required:J=!1,disabled:K=!1,readOnly:Q=!1,name:U,open:X,defaultOpen:Y,onOpenChange:Z,clearLabel:ee,openLabel:ae,locale:le,removeLabel:ie,inputRef:ne,id:te,className:oe,style:re}){const se=f(le),me=g("common",se),ce=N(G),de=!0===M,ue=L[W],pe=l.useId(),he=te??pe,fe=l.useMemo(()=>z.map(e=>({value:e.value,label:e.label??String(e.value),disabled:e.disabled})),[z]),[ge,be]=l.useState(()=>S(V)),xe=void 0===O?ge:S(O),[ve,ye]=l.useState(""),{shrunk:Ne,focusProps:we}=p({floating:E&&N(F),filled:xe.length>0||""!==ve,pinned:!!H}),Ce=l.useCallback(e=>fe.find(a=>a.value===e)??{value:e,label:String(e),custom:!0},[fe]),Le=ve.trim(),je=Le.toLocaleLowerCase(),Ie=""===Le||fe.some(e=>e.label.toLocaleLowerCase()===je||String(e.value).toLocaleLowerCase()===je)||xe.some(e=>String(e).toLocaleLowerCase()===je),Se=!q||Q||K||Ie?null:Le,ze=l.useMemo(()=>null===Se?fe:[...fe,{value:Se,label:Se,custom:!0}],[fe,Se]),Me=de?xe.map(Ce):xe.length>0?Ce(xe[0]):null;const Oe=["min-w-0 flex-1 self-stretch bg-transparent font-[inherit] text-inherit outline-none","placeholder:text-mp-on-surface-variant",K?"text-mp-on-surface/38 cursor-default":"text-mp-on-surface caret-mp-primary"].join(" "),Ve=["group rounded-mp-full relative flex size-8 shrink-0 cursor-pointer items-center justify-center","text-mp-on-surface-variant","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-1","focus-visible:outline-solid outline-none","disabled:text-mp-on-surface/38 disabled:cursor-default"].join(" "),ke=a=>e(i.Input,{ref:ne,id:he,placeholder:Ne?_:void 0,className:de?`${Oe} min-w-16 ${a?"ms-1.5":""}`:Oe});return a(n.Root,{disabled:K,invalid:ce,"data-mp-size":W,className:["mp-combobox group flex-col align-top",D?"flex w-full":"inline-flex w-fit",oe??""].filter(Boolean).join(" "),style:re,...we,children:[a(i.Root,{name:U,items:ze,multiple:de,value:Me,onValueChange:e=>{!function(e){void 0===O&&be(e),k?.(de?e:e[0]??null)}((null===e?[]:Array.isArray(e)?e:[e]).map(e=>e.value))},onInputValueChange:e=>{ye(e),P?.(e)},open:X,defaultOpen:Y,onOpenChange:e=>Z?.(e),autoHighlight:!0,itemToStringLabel:e=>e.label,itemToStringValue:e=>String(e.value),isItemEqualToValue:(e,a)=>e.value===a.value,limit:R,disabled:K,readOnly:Q,required:J,children:[a("div",{className:"relative w-full",children:[a(i.InputGroup,{className:["relative flex w-full items-center gap-2",ue.padding,de?j[W]:ue.height,y[W],K?"cursor-default":"cursor-text"].join(" "),children:[H?e("span",{className:["flex shrink-0 items-center",K?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:H}):null,de?e(i.Chips,{className:"flex min-w-0 flex-1 flex-wrap items-center gap-1",children:e(i.Value,{children:n=>a(l.Fragment,{children:[n.map(a=>e(i.Chip,{render:e(t,{variant:ce?"outlined":"tonal",color:ce?"error":"primary",size:I[W],disabled:K,endIcon:Q||K?null:e(i.ChipRemove,{"aria-label":ie?ie(a.label):h(me.removeNamed,{label:a.label}),className:"flex cursor-pointer items-center opacity-70 hover:opacity-100",children:e(o,{icon:c,size:16})})}),children:a.label},String(a.value))),ke(n.length>0)]})})}):ke(!1),T&&!Q?a(i.Clear,{"aria-label":ee??me.clear,className:Ve,children:[e(b,{}),e(o,{icon:c,size:v[W]})]}):null,a(i.Trigger,{"aria-label":ae??me.open,className:Ve,children:[e(b,{}),e(i.Icon,{className:["relative flex items-center","transition-transform duration-(--mp-sys-motion-duration-short4)","data-popup-open:rotate-180"].join(" "),children:e(o,{icon:m,size:v[W]})})]})]}),e(u,{label:F,required:J,notched:Ne}),N(F)?e(d,{size:W,label:F,required:J,htmlFor:he,shrunk:Ne}):null]}),e(i.Portal,{children:e(i.Positioner,{className:C,sideOffset:4,children:a(i.Popup,{className:["mp-combobox__popup rounded-mp-xs shadow-mp-2 bg-mp-surface-container p-2","text-mp-on-surface w-[var(--anchor-width)] outline-none","max-h-[min(20rem,var(--available-height))] overflow-y-auto overscroll-contain",y[W],w].join(" "),children:[e(i.Empty,{className:"text-mp-on-surface-variant px-3 py-2 empty:hidden",children:$}),e(i.List,{children:l=>a(i.Item,{value:l,disabled:l.disabled,className:["mp-combobox__item group rounded-mp-xs relative flex cursor-pointer","items-center gap-3 py-2 ps-2 pe-3 select-none outline-none","transition-[background-color,color]","duration-(--mp-sys-motion-duration-short4)","data-selected:bg-mp-secondary-container","data-selected:text-mp-on-secondary-container","data-disabled:text-mp-on-surface/38 data-disabled:cursor-default"].join(" "),children:[e(b,{className:"group-data-highlighted:opacity-8 group-data-disabled:opacity-0"}),e("span",{className:"flex size-5 shrink-0 items-center justify-center",children:l.custom?e(o,{icon:r,size:18}):e(i.ItemIndicator,{children:e(o,{icon:s,size:18})})}),e("span",{className:"min-w-0 flex-1 truncate",children:l.custom?A?A(l.label):`Add “${l.label}”`:l.label})]},`${l.custom?"custom:":""}${String(l.value)}`)})]})})})]}),e(x,{description:B,errorMessage:G,className:ue.padding})]})}

package/dist/components/dialog/MPDialog.js

@@ -1 +1 @@
-import{jsx as e,jsxs as l}from"react/jsx-runtime";import{Dialog as i}from"@base-ui/react/dialog";import{MPIcon as t}from"../icon/MPIcon";import{CloseIcon as n}from"../../constants/icons";import{accentSlots as o}from"../../internal/accent";import{useMPLocale as s,useMPMessages as r}from"../../internal/locale";import{MPStateLayer as a}from"../../internal/StateLayer";import{SHEET_GAP as m,hasContent as c}from"../../internal/scale";import{FADE as p,PORTAL_LAYER as d,SCRIM as x}from"../../internal/surface";const f={xs:"max-w-[320px]",sm:"max-w-[400px]",md:"max-w-[560px]",lg:"max-w-[720px]",xl:"max-w-[960px]"},u={xs:"p-3",sm:"p-4",md:"p-6",lg:"p-7",xl:"p-8"},h={xs:"px-3",sm:"px-4",md:"px-6",lg:"px-7",xl:"px-8"},g={xs:"py-3",sm:"py-4",md:"py-6",lg:"py-7",xl:"py-8"},y={xs:"text-mp-title-medium",sm:"text-mp-title-large",md:"text-mp-headline-small",lg:"text-mp-headline-medium",xl:"text-mp-headline-large"},v={xs:"text-mp-body-small",sm:"text-mp-body-small",md:"text-mp-body-medium",lg:"text-mp-body-large",xl:"text-mp-body-large"},b={xs:20,sm:22,md:24,lg:28,xl:32};export const MPDialogClose=i.Close;export function MPDialog({open:w,defaultOpen:j,onOpenChange:N,trigger:$,icon:k,title:C,description:P,actions:B,dividers:z=!1,showClose:D,closeLabel:O,locale:M,width:L,fullWidth:S=!0,fullScreen:T=!1,modal:W=!0,dismissible:I=!0,size:R="md",color:V="secondary",className:_,style:q,children:A}){const E=s(M),F=r("common",E),G=D??T,H=c(k),J=c(C)||c(P)||H,K=c(B),Q=z?u[R]:h[R],U="border-mp-outline-variant border-t";return l(i.Root,{open:w,defaultOpen:j,modal:W,disablePointerDismissal:!I,onOpenChange:(e,l)=>{I||e||"escape-key"!==l.reason?N?.(e):l.cancel()},children:[$?e(i.Trigger,{render:$}):null,l(i.Portal,{children:[e(i.Backdrop,{className:`${d} fixed inset-0 ${p} ${x}`}),e(i.Viewport,{className:[d,"fixed inset-0 flex justify-center",T?"items-stretch":"items-center p-4"].join(" "),children:l(i.Popup,{"data-mp-size":R,className:["mp-dialog relative flex w-full flex-col overflow-hidden","bg-mp-surface-container-high text-mp-on-surface shadow-mp-3 outline-none",T?"h-full max-w-none rounded-none":`rounded-mp-xl max-h-full ${void 0===L?f[R]:""}`,T||S?"":"w-auto",z?"":`${g[R]} ${m[R]}`,p,_??""].filter(Boolean).join(" "),style:{...o(V),...void 0===L||T?null:{maxWidth:"number"==typeof L?`${L}px`:L},...q},children:[J||G?l("div",{className:["flex shrink-0 items-start gap-3",Q,H&&!G?"flex-col items-center text-center":""].filter(Boolean).join(" "),children:[H?e("span",{className:"flex shrink-0 items-center justify-center text-(--_mp-accent)",children:k}):null,l("div",{className:`flex min-w-0 flex-1 flex-col ${m[R]}`,children:[c(C)?e(i.Title,{className:`m-0 ${y[R]}`,children:C}):null,c(P)?e(i.Description,{className:`text-mp-on-surface-variant m-0 ${v[R]}`,children:P}):null]}),G?l(i.Close,{"aria-label":O??F.close,className:["group text-mp-on-surface-variant relative flex size-10 shrink-0","rounded-mp-full cursor-pointer items-center justify-center","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none"].join(" "),children:[e(a,{}),e(t,{icon:n,size:b[R]})]}):null]}):null,c(A)?e("div",{className:["min-h-0 flex-1 overflow-y-auto overscroll-contain",v[R],Q,z&&(J||G)?U:""].filter(Boolean).join(" "),children:A}):null,K?e("div",{className:["flex shrink-0 flex-wrap items-center justify-end gap-2",Q,z?U:""].filter(Boolean).join(" "),children:B}):null]})})]})]})}
+import{jsx as e,jsxs as l}from"react/jsx-runtime";import{Dialog as t}from"@base-ui/react/dialog";import{MPIcon as i}from"../icon/MPIcon";import{CloseIcon as n}from"../../constants/icons";import{accentSlots as o}from"../../internal/accent";import{useMPLocale as s,useMPMessages as a}from"../../internal/locale";import{MPStateLayer as r}from"../../internal/StateLayer";import{SHEET_GAP as m,hasContent as c}from"../../internal/scale";import{FADE as p,PORTAL_LAYER as d,SCRIM as x,SHEET_MOTION as f}from"../../internal/surface";const u={xs:"max-w-[320px]",sm:"max-w-[400px]",md:"max-w-[560px]",lg:"max-w-[720px]",xl:"max-w-[960px]"},h=`transition-[opacity,scale] ${f}`,g=["motion-safe:data-starting-style:scale-95","motion-safe:data-ending-style:scale-95"].join(" "),y={xs:"p-3",sm:"p-4",md:"p-6",lg:"p-7",xl:"p-8"},v={xs:"px-3",sm:"px-4",md:"px-6",lg:"px-7",xl:"px-8"},b={xs:"py-3",sm:"py-4",md:"py-6",lg:"py-7",xl:"py-8"},w={xs:"text-mp-title-medium",sm:"text-mp-title-large",md:"text-mp-headline-small",lg:"text-mp-headline-medium",xl:"text-mp-headline-large"},j={xs:"text-mp-body-small",sm:"text-mp-body-small",md:"text-mp-body-medium",lg:"text-mp-body-large",xl:"text-mp-body-large"},N={xs:20,sm:22,md:24,lg:28,xl:32};export const MPDialogClose=t.Close;export function MPDialog({open:f,defaultOpen:$,onOpenChange:k,trigger:C,icon:P,title:B,description:z,actions:D,dividers:O=!1,showClose:M,closeLabel:L,locale:S,width:T,fullWidth:W=!0,fullScreen:I=!1,modal:R=!0,dismissible:V=!0,size:_="md",color:q="secondary",className:A,style:E,children:F}){const G=s(S),H=a("common",G),J=M??I,K=c(P),Q=c(B)||c(z)||K,U=c(D),X=O?y[_]:v[_],Y="border-mp-outline-variant border-t";return l(t.Root,{open:f,defaultOpen:$,modal:R,disablePointerDismissal:!V,onOpenChange:(e,l)=>{V||e||"escape-key"!==l.reason?k?.(e):l.cancel()},children:[C?e(t.Trigger,{render:C}):null,l(t.Portal,{children:[e(t.Backdrop,{className:`${d} fixed inset-0 ${p} ${x}`}),e(t.Viewport,{className:[d,"fixed inset-0 flex justify-center",I?"items-stretch":"items-center p-4"].join(" "),children:l(t.Popup,{"data-mp-size":_,className:["mp-dialog relative flex w-full flex-col overflow-hidden","bg-mp-surface-container-high text-mp-on-surface shadow-mp-3 outline-none",I?"h-full max-w-none rounded-none":`rounded-mp-xl max-h-full ${void 0===T?u[_]:""}`,I||W?"":"w-auto",O?"":`${b[_]} ${m[_]}`,h,I?"":g,A??""].filter(Boolean).join(" "),style:{...o(q),...void 0===T||I?null:{maxWidth:"number"==typeof T?`${T}px`:T},...E},children:[Q||J?l("div",{className:["flex shrink-0 items-start gap-3",X,K&&!J?"flex-col items-center text-center":""].filter(Boolean).join(" "),children:[K?e("span",{className:"flex shrink-0 items-center justify-center text-(--_mp-accent)",children:P}):null,l("div",{className:`flex min-w-0 flex-1 flex-col ${m[_]}`,children:[c(B)?e(t.Title,{className:`m-0 ${w[_]}`,children:B}):null,c(z)?e(t.Description,{className:`text-mp-on-surface-variant m-0 ${j[_]}`,children:z}):null]}),J?l(t.Close,{"aria-label":L??H.close,className:["group text-mp-on-surface-variant relative flex size-10 shrink-0","rounded-mp-full cursor-pointer items-center justify-center","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none"].join(" "),children:[e(r,{}),e(i,{icon:n,size:N[_]})]}):null]}):null,c(F)?e("div",{className:["min-h-0 flex-1 overflow-y-auto overscroll-contain",j[_],X,O&&(Q||J)?Y:""].filter(Boolean).join(" "),children:F}):null,U?e("div",{className:["flex shrink-0 flex-wrap items-center justify-end gap-2",X,O?Y:""].filter(Boolean).join(" "),children:D}):null]})})]})]})}

package/dist/components/drawer/MPDrawer.d.ts

@@ -156,13 +156,32 @@ export declare const MPDrawerClose: React.ForwardRefExoticComponent<Omit<import(
  * scroll lock, the `aria-labelledby` / `aria-describedby` wiring, restoring
  * focus to the trigger, and the inert page behind.
  *
- * ## The surface, and why it does not slide
+ * ## The surface, and why this one does slide
  *
  * `surface-container-low` at elevation 1 for the modal panel and `surface` flat
- * for the standard one — MD3's own two answers. The transition is opacity only,
- * exactly as on the dialog: a drawer is nothing but text and controls, and a
- * panel that slid would drag its own sentences across the screen for the length
- * of the animation. What says the panel came from an edge is that it is
- * *attached* to one: square against the window, cut on the free side.
+ * for the standard one — MD3's own two answers.
+ *
+ * A modal panel comes in from the edge it is attached to. That is the one place
+ * this library parts company with the rule `internal/surface.ts` states for
+ * every other floating surface — that a box full of text should not travel,
+ * because a sentence dragged across the screen is a sentence the reader is
+ * already trying to read.
+ *
+ * The rule holds where it was written. A menu opens next to the row the pointer
+ * is on; a dialog lands in the middle of the page, over the paragraph the
+ * reader was in the middle of. Both arrive *where the reader is looking*, and
+ * both are read the instant they appear.
+ *
+ * A drawer is neither. It arrives at an edge, which is the one part of the
+ * window nobody is reading, and it arrives because somebody pressed a
+ * hamburger and is waiting for it. Nothing is being dragged past anything.
+ * What a fade costs instead is the only thing the panel had left to say while
+ * it was arriving: a fade has no direction, so a left drawer and a right one
+ * are the same event until they have both finished. The shape says which edge
+ * afterwards — square against the window, cut on the free side. The travel is
+ * what says it *during*.
+ *
+ * `SLIDE` gives a reader who asked for less motion the old behaviour exactly:
+ * the fade, with nowhere to travel from.
  */
 export declare function MPDrawer({ side, mode, open, defaultOpen, onOpenChange, trigger, title, description, actions, dividers, showClose, closeLabel, locale: localeProp, extent, rounded, dismissible, size, className, style, children }: MPDrawerProps): React.JSX.Element | null;

package/dist/components/drawer/MPDrawer.js

@@ -1 +1 @@
-import{jsx as e,jsxs as l,Fragment as o}from"react/jsx-runtime";import*as r from"react";import{Dialog as t}from"@base-ui/react/dialog";import{MPIcon as i}from"../icon/MPIcon";import{CloseIcon as n}from"../../constants/icons";import{useMPLocale as a,useMPMessages as s}from"../../internal/locale";import{MPStateLayer as d}from"../../internal/StateLayer";import{hasContent as m,META_TEXT as c,PROSE_TEXT as f,SHEET_GAP as p,SHEET_PAD_X as u,SHEET_PAD_Y as h,SHEET_TITLE as x}from"../../internal/scale";import{FADE as b,PORTAL_LAYER as g,SCRIM as v}from"../../internal/surface";const w={xs:"w-60",sm:"w-72",md:"w-90",lg:"w-104",xl:"w-120"},y={left:"rounded-r-mp-lg",right:"rounded-l-mp-lg",top:"rounded-b-mp-xl",bottom:"rounded-t-mp-xl"},$={left:"border-r",right:"border-l",top:"border-b",bottom:"border-t"},j={left:"flex-row justify-start",right:"flex-row justify-end",top:"flex-col justify-start",bottom:"flex-col justify-end"},N="border-mp-outline-variant border-t";export const MPDrawerClose=t.Close;export function MPDrawer({side:C="left",mode:k="modal",open:z,defaultOpen:P,onOpenChange:B,trigger:D,title:O,description:M,actions:L,dividers:S=!1,showClose:T,closeLabel:F,locale:I,extent:R,rounded:V=!0,dismissible:q=!0,size:A="md",className:E,style:G,children:H}){const J=a(I),K=s("common",J),Q="modal"===k,U="left"===C||"right"===C,W=T??Q,X=F??K.close,[Y,Z]=r.useState(P??!0),_=z??Y,ee=u[A],le=h[A],oe=S?`${ee} ${le}`:ee,re=m(O)||m(M),te=m(L),ie=void 0===R?null:{[U?"width":"height"]:"number"==typeof R?`${R}px`:R},ne=["mp-drawer relative flex flex-col overflow-hidden box-border","border-mp-outline-variant outline-none",Q?"bg-mp-surface-container-low shadow-mp-1":"bg-mp-surface","text-mp-on-surface",f[A],$[C],V?y[C]:"",Q?b:"",U?`h-full max-w-full ${void 0===R?w[A]:""}`:"w-full "+(void 0===R?"max-h-[85%]":""),S?"":`${le} ${p[A]}`,E??""].filter(Boolean).join(" "),ae=Q?t.Title:"h2",se=Q?t.Description:"p",de=["group text-mp-on-surface-variant relative flex size-10 shrink-0","rounded-mp-full cursor-pointer items-center justify-center","appearance-none border-0 bg-transparent","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none"].join(" "),me=l(o,{children:[re||W?l("div",{className:`flex shrink-0 items-start gap-3 ${oe}`,children:[l("div",{className:"flex min-w-0 flex-1 flex-col",children:[m(O)?e(ae,{className:`m-0 ${x[A]}`,children:O}):null,m(M)?e(se,{className:`text-mp-on-surface-variant m-0 ${c}`,children:M}):null]}),W?Q?l(t.Close,{"aria-label":X,className:de,children:[e(d,{}),e(i,{icon:n,size:20})]}):l("button",{type:"button","aria-label":X,className:de,onClick:()=>{void 0===z&&Z(!1),B?.(!1)},children:[e(d,{}),e(i,{icon:n,size:20})]}):null]}):null,m(H)?e("div",{className:["min-h-0 flex-1 overflow-y-auto overscroll-contain",oe,S&&(re||W)?N:"",S?"":"-my-1 py-1"].filter(Boolean).join(" "),children:H}):null,te?e("div",{className:["flex shrink-0 flex-wrap items-center justify-end gap-2",oe,S?N:""].filter(Boolean).join(" "),children:L}):null]});return Q?l(t.Root,{open:z,defaultOpen:P,disablePointerDismissal:!q,onOpenChange:(e,l)=>{q||e||"escape-key"!==l.reason?B?.(e):l.cancel()},children:[D?e(t.Trigger,{render:D}):null,l(t.Portal,{children:[e(t.Backdrop,{className:`${g} fixed inset-0 ${b} ${v}`}),e(t.Viewport,{className:`${g} fixed inset-0 flex ${j[C]}`,children:e(t.Popup,{"data-mp-size":A,"data-mp-side":C,"data-mp-mode":k,className:ne,style:{...ie,...G},children:me})})]})]}):_?e("div",{"data-mp-size":A,"data-mp-side":C,"data-mp-mode":k,className:ne,style:{...ie,...G},children:me}):null}
+import{jsx as e,jsxs as t,Fragment as l}from"react/jsx-runtime";import*as a from"react";import{Dialog as o}from"@base-ui/react/dialog";import{MPIcon as n}from"../icon/MPIcon";import{CloseIcon as r}from"../../constants/icons";import{useMPLocale as i,useMPMessages as s}from"../../internal/locale";import{MPStateLayer as d}from"../../internal/StateLayer";import{hasContent as m,META_TEXT as c,PROSE_TEXT as f,SHEET_GAP as u,SHEET_PAD_X as p,SHEET_PAD_Y as x,SHEET_TITLE as h}from"../../internal/scale";import{FADE as b,PORTAL_LAYER as g,SCRIM as y,SHEET_MOTION as v}from"../../internal/surface";const w={xs:"w-60",sm:"w-72",md:"w-90",lg:"w-104",xl:"w-120"},$={left:"rounded-r-mp-lg",right:"rounded-l-mp-lg",top:"rounded-b-mp-xl",bottom:"rounded-t-mp-xl"},j={left:"border-r",right:"border-l",top:"border-b",bottom:"border-t"},N={left:"flex-row justify-start",right:"flex-row justify-end",top:"flex-col justify-start",bottom:"flex-col justify-end"},C={left:"motion-safe:data-starting-style:-translate-x-full motion-safe:data-ending-style:-translate-x-full",right:"motion-safe:data-starting-style:translate-x-full motion-safe:data-ending-style:translate-x-full",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"},k=`transition-[opacity,translate] ${v}`,z="border-mp-outline-variant border-t";export const MPDrawerClose=o.Close;export function MPDrawer({side:v="left",mode:P="modal",open:B,defaultOpen:D,onOpenChange:O,trigger:M,title:L,description:S,actions:T,dividers:F=!1,showClose:I,closeLabel:R,locale:V,extent:q,rounded:A=!0,dismissible:E=!0,size:G="md",className:H,style:J,children:K}){const Q=i(V),U=s("common",Q),W="modal"===P,X="left"===v||"right"===v,Y=I??W,Z=R??U.close,[_,ee]=a.useState(D??!0),te=B??_,le=p[G],ae=x[G],oe=F?`${le} ${ae}`:le,ne=m(L)||m(S),re=m(T),ie=void 0===q?null:{[X?"width":"height"]:"number"==typeof q?`${q}px`:q},se=["mp-drawer relative flex flex-col overflow-hidden box-border","border-mp-outline-variant outline-none",W?"bg-mp-surface-container-low shadow-mp-1":"bg-mp-surface","text-mp-on-surface",f[G],j[v],A?$[v]:"",W?`${k} ${C[v]}`:"",X?`h-full max-w-full ${void 0===q?w[G]:""}`:"w-full "+(void 0===q?"max-h-[85%]":""),F?"":`${ae} ${u[G]}`,H??""].filter(Boolean).join(" "),de=W?o.Title:"h2",me=W?o.Description:"p",ce=["group text-mp-on-surface-variant relative flex size-10 shrink-0","rounded-mp-full cursor-pointer items-center justify-center","appearance-none border-0 bg-transparent","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none"].join(" "),fe=t(l,{children:[ne||Y?t("div",{className:`flex shrink-0 items-start gap-3 ${oe}`,children:[t("div",{className:"flex min-w-0 flex-1 flex-col",children:[m(L)?e(de,{className:`m-0 ${h[G]}`,children:L}):null,m(S)?e(me,{className:`text-mp-on-surface-variant m-0 ${c}`,children:S}):null]}),Y?W?t(o.Close,{"aria-label":Z,className:ce,children:[e(d,{}),e(n,{icon:r,size:20})]}):t("button",{type:"button","aria-label":Z,className:ce,onClick:()=>{void 0===B&&ee(!1),O?.(!1)},children:[e(d,{}),e(n,{icon:r,size:20})]}):null]}):null,m(K)?e("div",{className:["min-h-0 flex-1 overflow-y-auto overscroll-contain",oe,F&&(ne||Y)?z:"",F?"":"-my-1 py-1"].filter(Boolean).join(" "),children:K}):null,re?e("div",{className:["flex shrink-0 flex-wrap items-center justify-end gap-2",oe,F?z:""].filter(Boolean).join(" "),children:T}):null]});return W?t(o.Root,{open:B,defaultOpen:D,disablePointerDismissal:!E,onOpenChange:(e,t)=>{E||e||"escape-key"!==t.reason?O?.(e):t.cancel()},children:[M?e(o.Trigger,{render:M}):null,t(o.Portal,{children:[e(o.Backdrop,{className:`${g} fixed inset-0 ${b} ${y}`}),e(o.Viewport,{className:`${g} fixed inset-0 flex ${N[v]}`,children:e(o.Popup,{"data-mp-size":G,"data-mp-side":v,"data-mp-mode":P,className:se,style:{...ie,...J},children:fe})})]})]}):te?e("div",{"data-mp-size":G,"data-mp-side":v,"data-mp-mode":P,className:se,style:{...ie,...J},children:fe}):null}

package/dist/components/floating-action-button/MPFloatingActionButton.js

@@ -1 +1 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as o from"react";import{Button as a}from"@base-ui/react/button";import{accentSlots as n}from"../../internal/accent";import{MPStateLayer as s}from"../../internal/StateLayer";import{hasContent as i}from"../../internal/scale";const r={filled:"bg-(--_mp-accent) text-(--_mp-on-accent)",tonal:"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",elevated:"bg-mp-surface-container-high text-(--_mp-accent)"},l={xs:"size-10",sm:"size-12",md:"size-14",lg:"size-18",xl:"size-24"},m={xs:"h-10",sm:"h-12",md:"h-14",lg:"h-18",xl:"h-24"},p={xs:"rounded-mp-md",sm:"rounded-mp-lg",md:"rounded-mp-lg",lg:"rounded-mp-xl",xl:"rounded-mp-xl"},f={xs:24,sm:24,md:24,lg:30,xl:36},d={xs:"text-mp-label-large",sm:"text-mp-label-large",md:"text-mp-label-large",lg:"text-mp-title-medium",xl:"text-mp-title-medium"},c={xs:"min-w-16 gap-1.5 px-3",sm:"min-w-18 gap-2 px-4",md:"min-w-20 gap-2 px-4",lg:"min-w-24 gap-2.5 px-5",xl:"min-w-28 gap-3 px-6"},u={absolute:"absolute z-30",sticky:"sticky z-30",fixed:"fixed z-40"},x={"top-start":"top-(--_mp-fab-offset) start-(--_mp-fab-offset)","top-end":"top-(--_mp-fab-offset) end-(--_mp-fab-offset)","bottom-start":"bottom-(--_mp-fab-offset) start-(--_mp-fab-offset)","bottom-end":"bottom-(--_mp-fab-offset) end-(--_mp-fab-offset)"};export const MPFloatingActionButton=o.forwardRef(function({icon:o,label:b,extended:g=!1,variant:h="tonal",color:y="primary",size:_="md",position:w="fixed",corner:v="bottom-end",offset:z=16,disabled:$=!1,type:j="button",className:k,style:N,...B},A){return t(a,{ref:A,type:j,disabled:$,"aria-label":b,"data-mp-size":_,"data-mp-variant":h,className:["mp-fab group inline-flex shrink-0 items-center justify-center","box-border overflow-hidden align-middle whitespace-nowrap select-none","cursor-pointer appearance-none font-[inherit]","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none","transition-[background-color,box-shadow,color]","duration-(--mp-sys-motion-duration-short4)",p[_],g?`${m[_]} ${c[_]} ${d[_]}`:l[_],$?"bg-mp-on-surface/12 text-mp-on-surface/38 cursor-default shadow-none":`${r[h]} shadow-mp-3`,"static"===w?"relative":`${u[w]} ${x[v]}`,k??""].filter(Boolean).join(" "),style:{...n(y),"--_mp-fab-offset":"number"==typeof z?`${z}px`:z,...N},...B,children:[$?null:e(s,{}),i(o)?e("span",{className:"relative flex shrink-0 items-center justify-center",style:{width:f[_],height:f[_]},children:o}):null,g?e("span",{className:"relative truncate",children:b}):null]})});
+import{jsx as t,jsxs as e}from"react/jsx-runtime";import*as a from"react";import{Button as o}from"@base-ui/react/button";import{accentSlots as n}from"../../internal/accent";import{MPStateLayer as i}from"../../internal/StateLayer";import{hasContent as s}from"../../internal/scale";const r={filled:"bg-(--_mp-accent) text-(--_mp-on-accent)",tonal:"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",elevated:"bg-mp-surface-container-high text-(--_mp-accent)"},m={xs:"h-10",sm:"h-12",md:"h-14",lg:"h-18",xl:"h-24"},l={xs:"min-w-10 gap-0 px-0",sm:"min-w-12 gap-0 px-0",md:"min-w-14 gap-0 px-0",lg:"min-w-18 gap-0 px-0",xl:"min-w-24 gap-0 px-0"},p={xs:"rounded-mp-md",sm:"rounded-mp-lg",md:"rounded-mp-lg",lg:"rounded-mp-xl",xl:"rounded-mp-xl"},d={xs:24,sm:24,md:24,lg:30,xl:36},f={xs:"text-mp-label-large",sm:"text-mp-label-large",md:"text-mp-label-large",lg:"text-mp-title-medium",xl:"text-mp-title-medium"},c={xs:"min-w-16 gap-1.5 px-3",sm:"min-w-18 gap-2 px-4",md:"min-w-20 gap-2 px-4",lg:"min-w-24 gap-2.5 px-5",xl:"min-w-28 gap-3 px-6"},x={absolute:"absolute z-30",sticky:"sticky z-30",fixed:"fixed z-40"},u={"top-start":"top-(--_mp-fab-offset) start-(--_mp-fab-offset)","top-end":"top-(--_mp-fab-offset) end-(--_mp-fab-offset)","bottom-start":"bottom-(--_mp-fab-offset) start-(--_mp-fab-offset)","bottom-end":"bottom-(--_mp-fab-offset) end-(--_mp-fab-offset)"};export const MPFloatingActionButton=a.forwardRef(function({icon:a,label:b,extended:g=!1,variant:h="tonal",color:w="primary",size:y="md",position:_="fixed",corner:v="bottom-end",offset:j=16,disabled:k=!1,type:z="button",className:N,style:$,...B},A){return e(o,{ref:A,type:z,disabled:k,"aria-label":b,"data-mp-size":y,"data-mp-variant":h,className:["mp-fab group inline-flex shrink-0 items-center justify-center","box-border overflow-hidden align-middle whitespace-nowrap select-none","cursor-pointer appearance-none font-[inherit]","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none","transition-[background-color,box-shadow,color,min-width,padding,gap]","duration-(--mp-sys-motion-duration-short4) ease-mp-standard",p[y],m[y],f[y],g?c[y]:l[y],k?"bg-mp-on-surface/12 text-mp-on-surface/38 cursor-default shadow-none":`${r[h]} shadow-mp-3`,"static"===_?"relative":`${x[_]} ${u[v]}`,N??""].filter(Boolean).join(" "),style:{...n(w),"--_mp-fab-offset":"number"==typeof j?`${j}px`:j,...$},...B,children:[k?null:t(i,{}),s(a)?t("span",{className:"relative flex shrink-0 items-center justify-center",style:{width:d[y],height:d[y]},children:a}):null,t("span",{className:["relative grid transition-[grid-template-columns]","duration-(--mp-sys-motion-duration-short4) ease-mp-standard",g?"grid-cols-[1fr]":"grid-cols-[0fr]"].join(" "),children:t("span",{className:"min-w-0 truncate",children:b})})]})});

package/dist/components/radio-group/MPRadioGroup.js

@@ -1 +1 @@
-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";import{MPStateLayer as t}from"../../internal/StateLayer";import{MPSupportingText as s}from"../../internal/SupportingText";import{META_TEXT as d,PROSE_TEXT as c,hasContent as p}from"../../internal/scale";const u={xs:{ring:"size-4",fill:"size-2",halo:"size-8"},sm:{ring:"size-[18px]",fill:"size-[9px]",halo:"size-9"},md:{ring:"size-5",fill:"size-2.5",halo:"size-10"},lg:{ring:"size-[22px]",fill:"size-[11px]",halo:"size-11"},xl:{ring:"size-6",fill:"size-3",halo:"size-12"}},m=a.createContext({size:"md",readOnly:!1,invalid:!1});export const MPRadio=a.forwardRef(function({value:l,label:o,description:s,disabled:f=!1,id:x},h){const g=a.useContext(m),b=u[g.size],z=a.useId(),v=x??`mp-radio-${z}`;return e(n.Root,{className:"mp-radio inline-block align-top",disabled:f,"data-mp-value":l,children:r("div",{className:["flex items-start gap-3",c[g.size]].join(" "),children:[e("span",{className:"flex h-[1lh] shrink-0 items-center",children:r(i.Root,{ref:h,id:v,value:l,disabled:f,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)",b.ring,f?"border-mp-on-surface/38 cursor-default":[g.readOnly?"cursor-default":"cursor-pointer",g.invalid?"border-mp-error":"border-mp-on-surface-variant","data-checked:border-(--_mp-accent)"].join(" ")].join(" "),children:[f?null:e(t,{layer:["top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full",b.halo,"bg-mp-on-surface","group-data-checked:bg-(--_mp-accent)"].join(" ")}),e(i.Indicator,{className:["rounded-full",b.fill,f?"bg-mp-on-surface/38":"bg-(--_mp-accent)"].join(" ")})]})}),p(o)||p(s)?r("span",{className:"flex min-w-0 flex-col gap-0.5",children:[p(o)?e(n.Label,{htmlFor:v,className:["leading-[1.4]",f?"text-mp-on-surface/38 cursor-default":g.readOnly?"text-mp-on-surface":"text-mp-on-surface cursor-pointer"].join(" "),children:o}):null,p(s)?e(n.Description,{className:`${d} text-mp-on-surface-variant data-disabled:text-mp-on-surface/38`,children:s}):null]}):null]})})});export const MPRadioGroup=a.forwardRef(function({value:i,defaultValue:t,onValueChange:c,label:u,description:f,errorMessage:x,orientation:h="vertical",size:g="md",color:b="primary",required:z=!1,disabled:v=!1,readOnly:y=!1,name:j,children:N},R){const O=p(x),k=O?"error":b,w=a.useId(),M=a.useMemo(()=>({size:g,readOnly:y,invalid:O}),[g,y,O]);return e(m.Provider,{value:M,children:r(n.Root,{className:"mp-radio-group flex flex-col gap-2",disabled:v,invalid:O,"data-mp-size":g,"data-mp-orientation":h,style:o(k),children:[p(u)?r("span",{id:w,className:[d,v?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:[u,z?e("span",{"aria-hidden":"true",children:" *"}):null]}):null,e(l,{ref:R,"aria-labelledby":p(u)?w:void 0,value:i,defaultValue:t,onValueChange:e=>c?.(String(e??"")),disabled:v,readOnly:y,required:z,name:j,className:["flex","horizontal"===h?"flex-row flex-wrap gap-x-6 gap-y-2":"flex-col gap-2"].join(" "),children:N}),e(s,{description:f,errorMessage:x})]})})});
+import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as r from"react";import{Radio as i}from"@base-ui/react/radio";import{RadioGroup as n}from"@base-ui/react/radio-group";import{Field as l}from"@base-ui/react/field";import{accentSlots as o}from"../../internal/accent";import{MPStateLayer as t}from"../../internal/StateLayer";import{MPSupportingText as s}from"../../internal/SupportingText";import{META_TEXT as d,PROSE_TEXT as c,hasContent as p}from"../../internal/scale";const m={xs:{ring:"size-4",fill:"size-2",halo:"size-8"},sm:{ring:"size-[18px]",fill:"size-[9px]",halo:"size-9"},md:{ring:"size-5",fill:"size-2.5",halo:"size-10"},lg:{ring:"size-[22px]",fill:"size-[11px]",halo:"size-11"},xl:{ring:"size-6",fill:"size-3",halo:"size-12"}},u=r.createContext({size:"md",readOnly:!1,invalid:!1});export const MPRadio=r.forwardRef(function({value:n,label:o,description:s,disabled:f=!1,id:x},g){const h=r.useContext(u),b=m[h.size],y=r.useId(),z=x??`mp-radio-${y}`;return e(l.Root,{className:"mp-radio inline-block align-top",disabled:f,"data-mp-value":n,children:a("div",{className:["flex items-start gap-3",c[h.size]].join(" "),children:[e("span",{className:"flex h-[1lh] shrink-0 items-center",children:a(i.Root,{ref:g,id:z,value:n,disabled:f,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)",b.ring,f?"border-mp-on-surface/38 cursor-default":[h.readOnly?"cursor-default":"cursor-pointer",h.invalid?"border-mp-error":"border-mp-on-surface-variant","data-checked:border-(--_mp-accent)"].join(" ")].join(" "),children:[f?null:e(t,{layer:["top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full",b.halo,"bg-mp-on-surface","group-data-checked:bg-(--_mp-accent)"].join(" ")}),e(i.Indicator,{className:["rounded-full",b.fill,"transition-[opacity,scale] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard","data-starting-style:scale-0 data-starting-style:opacity-0","data-ending-style:scale-0 data-ending-style:opacity-0",f?"bg-mp-on-surface/38":"bg-(--_mp-accent)"].join(" ")})]})}),p(o)||p(s)?a("span",{className:"flex min-w-0 flex-col gap-0.5",children:[p(o)?e(l.Label,{htmlFor:z,className:["leading-[1.4]",f?"text-mp-on-surface/38 cursor-default":h.readOnly?"text-mp-on-surface":"text-mp-on-surface cursor-pointer"].join(" "),children:o}):null,p(s)?e(l.Description,{className:`${d} text-mp-on-surface-variant data-disabled:text-mp-on-surface/38`,children:s}):null]}):null]})})});export const MPRadioGroup=r.forwardRef(function({value:i,defaultValue:t,onValueChange:c,label:m,description:f,errorMessage:x,orientation:g="vertical",size:h="md",color:b="primary",required:y=!1,disabled:z=!1,readOnly:v=!1,name:j,children:N},R){const O=p(x),k=O?"error":b,w=r.useId(),M=r.useMemo(()=>({size:h,readOnly:v,invalid:O}),[h,v,O]);return e(u.Provider,{value:M,children:a(l.Root,{className:"mp-radio-group flex flex-col gap-2",disabled:z,invalid:O,"data-mp-size":h,"data-mp-orientation":g,style:o(k),children:[p(m)?a("span",{id:w,className:[d,z?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:[m,y?e("span",{"aria-hidden":"true",children:" *"}):null]}):null,e(n,{ref:R,"aria-labelledby":p(m)?w:void 0,value:i,defaultValue:t,onValueChange:e=>c?.(String(e??"")),disabled:z,readOnly:v,required:y,name:j,className:["flex","horizontal"===g?"flex-row flex-wrap gap-x-6 gap-y-2":"flex-col gap-2"].join(" "),children:N}),e(s,{description:f,errorMessage:x})]})})});

package/dist/components/segmented-button/MPSegmentedButton.js

@@ -1 +1 @@
-import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as n from"react";import{Toggle as t}from"@base-ui/react/toggle";import{ToggleGroup as o}from"@base-ui/react/toggle-group";import{MPIcon as a}from"../icon/MPIcon";import{CheckIcon as l}from"../../constants/icons";import{MPStateLayer as i}from"../../internal/StateLayer";import{CONTROL_GAP as s,CONTROL_HEIGHT as d,CONTROL_ICON as c,CONTROL_PAD_X as m,CONTROL_TEXT as u}from"../../internal/scale";export const MPSegmentedButton=n.forwardRef(function({items:n,value:p,defaultValue:f,onValueChange:b,multiple:h=!1,showCheck:g=!0,size:x="md",fullWidth:j=!1,disabled:v=!1,"aria-label":w},y){return e(o,{ref:y,"aria-label":w,value:p,defaultValue:f,onValueChange:e=>b?.(e),multiple:h,disabled:v,"data-mp-size":x,className:["mp-segmented-button rounded-mp-full box-border items-center align-middle","overflow-hidden border",v?"border-mp-on-surface/12":"border-mp-outline",j?"flex w-full":"inline-flex w-fit",d[x]].join(" "),children:n.map((n,o)=>{const d=v||n.disabled;return r(t,{value:n.value,disabled:n.disabled,className:["mp-segmented-button__segment group relative flex h-full items-center","box-border justify-center bg-transparent font-[inherit] whitespace-nowrap","select-none","appearance-none overflow-hidden outline-none","transition-[background-color,color] duration-(--mp-sys-motion-duration-short4)",u[x],s[x],m[x],0===o?"":"border-s",d?"border-mp-on-surface/12 text-mp-on-surface/38 cursor-default":["border-mp-outline cursor-pointer","text-mp-on-surface","data-pressed:bg-mp-secondary-container","data-pressed:text-mp-on-secondary-container"].join(" "),j?"flex-1":""].filter(Boolean).join(" "),children:[d?null:e(i,{}),g||n.icon?r("span",{className:"relative flex shrink-0 items-center justify-center",style:{width:c[x],height:c[x]},children:[g?e("span",{className:"hidden items-center group-data-pressed:flex",children:e(a,{icon:l,size:c[x]})}):null,n.icon?e("span",{className:["flex items-center",g?"group-data-pressed:hidden":""].filter(Boolean).join(" "),children:n.icon}):null]}):null,e("span",{className:"truncate",children:n.label})]},n.value)})})});
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as r from"react";import{Toggle as n}from"@base-ui/react/toggle";import{ToggleGroup as o}from"@base-ui/react/toggle-group";import{MPIcon as a}from"../icon/MPIcon";import{CheckIcon as i}from"../../constants/icons";import{MPStateLayer as s}from"../../internal/StateLayer";import{CONTROL_GAP as l,CONTROL_HEIGHT as d,CONTROL_ICON as c,CONTROL_PAD_X as u,CONTROL_TEXT as m}from"../../internal/scale";export const MPSegmentedButton=r.forwardRef(function({items:r,value:p,defaultValue:f,onValueChange:b,multiple:h=!1,showCheck:g=!0,size:x="md",fullWidth:y=!1,disabled:j=!1,"aria-label":v},w){return e(o,{ref:w,"aria-label":v,value:p,defaultValue:f,onValueChange:e=>b?.(e),multiple:h,disabled:j,"data-mp-size":x,className:["mp-segmented-button rounded-mp-full box-border items-center align-middle","overflow-hidden border",j?"border-mp-on-surface/12":"border-mp-outline",y?"flex w-full":"inline-flex w-fit",d[x]].join(" "),children:r.map((r,o)=>{const d=j||r.disabled;return t(n,{value:r.value,disabled:r.disabled,className:["mp-segmented-button__segment group relative flex h-full items-center","box-border justify-center bg-transparent font-[inherit] whitespace-nowrap","select-none","appearance-none overflow-hidden outline-none","transition-[background-color,color] duration-(--mp-sys-motion-duration-short4)",m[x],l[x],u[x],0===o?"":"border-s",d?"border-mp-on-surface/12 text-mp-on-surface/38 cursor-default":["border-mp-outline cursor-pointer","text-mp-on-surface","data-pressed:bg-mp-secondary-container","data-pressed:text-mp-on-secondary-container"].join(" "),y?"flex-1":""].filter(Boolean).join(" "),children:[d?null:e(s,{}),g||r.icon?t("span",{className:"relative flex shrink-0 items-center justify-center",style:{width:c[x],height:c[x]},children:[g?e("span",{className:["absolute inset-0 flex items-center justify-center opacity-0","transition-opacity duration-(--mp-sys-motion-duration-short4)","ease-mp-standard group-data-pressed:opacity-100"].join(" "),children:e(a,{icon:i,size:c[x]})}):null,r.icon?e("span",{className:["absolute inset-0 flex items-center justify-center","transition-opacity duration-(--mp-sys-motion-duration-short4)","ease-mp-standard",g?"group-data-pressed:opacity-0":""].filter(Boolean).join(" "),children:r.icon}):null]}):null,e("span",{className:"truncate",children:r.label})]},r.value)})})});

package/dist/components/select/MPSelect.js

@@ -1 +1 @@
-import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as t from"react";import{Select as n}from"@base-ui/react/select";import{Field as r}from"@base-ui/react/field";import{MPIcon as i}from"../icon/MPIcon";import{CheckIcon as l,ChevronDownIcon as o}from"../../constants/icons";import{MPFieldLabel as s,MPFieldOutline as d,useFloatingLabel as c}from"../../internal/FieldOutline";import{MPSupportingText as m}from"../../internal/SupportingText";import{CONTROL_ICON as p,PROSE_TEXT as u,hasContent as h}from"../../internal/scale";const f={xs:{padding:"px-2",height:"h-8"},sm:{padding:"px-3",height:"h-10"},md:{padding:"px-4",height:"h-14"},lg:{padding:"px-4",height:"h-16"},xl:{padding:"px-5",height:"h-18"}};export const MPSelect=t.forwardRef(function({items:g,value:x,defaultValue:v,onValueChange:b,placeholder:N,label:j,floatingLabel:w=!0,description:I,errorMessage:y,startIcon:z,size:S="md",fullWidth:P=!1,required:k=!1,disabled:M=!1,readOnly:O=!1,name:V,id:q},T){const _=h(y),C=f[S],R=t.useId(),F=q??R,[L,W]=t.useState(v??null),[B,A]=t.useState(!1),D=void 0===x?L:x,{shrunk:E,focusProps:G}=c({floating:w&&h(j),filled:null!==D&&""!==D,pinned:B||!!z}),H=t.useMemo(()=>g.map(e=>({label:e.label??String(e.value),value:e.value})),[g]);return a(r.Root,{className:["mp-select group flex-col align-top",P?"flex w-full":"inline-flex w-fit"].join(" "),disabled:M,invalid:_,"data-mp-size":S,...G,children:[a(n.Root,{id:F,name:V,items:H,value:x,defaultValue:v,onValueChange:e=>{W(e??null),b?.(e??null)},onOpenChange:A,disabled:M,readOnly:O,required:k,children:[a("div",{className:"relative w-full",children:[a(n.Trigger,{ref:T,className:["relative flex w-full items-center gap-2 select-none","appearance-none bg-transparent font-[inherit] outline-none",C.padding,C.height,u[S],M?"text-mp-on-surface/38 cursor-default":"text-mp-on-surface "+(O?"cursor-default":"cursor-pointer")].join(" "),children:[z?e("span",{className:["flex shrink-0 items-center",M?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:z}):null,e(n.Value,{className:["min-w-0 flex-1 truncate text-start","data-placeholder:text-mp-on-surface-variant",M?"data-placeholder:text-mp-on-surface/38":""].filter(Boolean).join(" "),placeholder:E?N:void 0}),e(n.Icon,{className:["flex shrink-0 items-center","transition-transform duration-(--mp-sys-motion-duration-short4)","data-popup-open:rotate-180",M?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:e(i,{icon:o,size:p[S]})})]}),e(d,{label:j,required:k,notched:E}),h(j)?e(s,{size:S,label:j,required:k,htmlFor:F,shrunk:E}):null]}),e(n.Portal,{children:e(n.Positioner,{className:"z-50 outline-none",sideOffset:4,alignItemWithTrigger:!1,children:e(n.Popup,{className:["mp-select__popup rounded-mp-xs shadow-mp-2 bg-mp-surface-container p-2","text-mp-on-surface min-w-[var(--anchor-width)] outline-none",u[S]].join(" "),children:e(n.List,{className:"max-h-[min(20rem,var(--available-height))] overflow-y-auto overscroll-contain",children:g.map(t=>a(n.Item,{value:t.value,disabled:t.disabled,className:["mp-select__item group rounded-mp-xs relative flex cursor-pointer items-center","gap-3 py-2 pe-3 ps-2 select-none outline-none","data-highlighted:bg-mp-on-surface/8","data-selected:text-mp-on-secondary-container","data-selected:bg-mp-secondary-container","data-disabled:text-mp-on-surface/38 data-disabled:cursor-default"].join(" "),children:[e("span",{className:"flex size-5 shrink-0 items-center justify-center",children:e(n.ItemIndicator,{children:e(i,{icon:l,size:18})})}),e(n.ItemText,{className:"min-w-0 flex-1 truncate",children:t.label??String(t.value)})]},String(t.value)))})})})})]}),e(m,{description:I,errorMessage:y,className:C.padding})]})});
+import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as t from"react";import{Select as n}from"@base-ui/react/select";import{Field as r}from"@base-ui/react/field";import{MPIcon as i}from"../icon/MPIcon";import{CheckIcon as l,ChevronDownIcon as o}from"../../constants/icons";import{MPFieldLabel as s,MPFieldOutline as d,useFloatingLabel as c}from"../../internal/FieldOutline";import{MPStateLayer as m}from"../../internal/StateLayer";import{MPSupportingText as p}from"../../internal/SupportingText";import{CONTROL_ICON as u,PROSE_TEXT as f,hasContent as h}from"../../internal/scale";import{FADE as g,PORTAL_LAYER as x}from"../../internal/surface";const v={xs:{padding:"px-2",height:"h-8"},sm:{padding:"px-3",height:"h-10"},md:{padding:"px-4",height:"h-14"},lg:{padding:"px-4",height:"h-16"},xl:{padding:"px-5",height:"h-18"}};export const MPSelect=t.forwardRef(function({items:b,value:N,defaultValue:y,onValueChange:j,placeholder:w,label:I,floatingLabel:S=!0,description:k,errorMessage:z,startIcon:P,size:M="md",fullWidth:O=!1,required:V=!1,disabled:q=!1,readOnly:T=!1,name:_,id:C},L){const R=h(z),F=v[M],W=t.useId(),B=C??W,[A,D]=t.useState(y??null),[E,G]=t.useState(!1),H=void 0===N?A:N,{shrunk:J,focusProps:K}=c({floating:S&&h(I),filled:null!==H&&""!==H,pinned:E||!!P}),Q=t.useMemo(()=>b.map(e=>({label:e.label??String(e.value),value:e.value})),[b]);return a(r.Root,{className:["mp-select group flex-col align-top",O?"flex w-full":"inline-flex w-fit"].join(" "),disabled:q,invalid:R,"data-mp-size":M,...K,children:[a(n.Root,{id:B,name:_,items:Q,value:N,defaultValue:y,onValueChange:e=>{D(e??null),j?.(e??null)},onOpenChange:G,disabled:q,readOnly:T,required:V,children:[a("div",{className:"relative w-full",children:[a(n.Trigger,{ref:L,className:["relative flex w-full items-center gap-2 select-none","appearance-none bg-transparent font-[inherit] outline-none",F.padding,F.height,f[M],q?"text-mp-on-surface/38 cursor-default":"text-mp-on-surface "+(T?"cursor-default":"cursor-pointer")].join(" "),children:[P?e("span",{className:["flex shrink-0 items-center",q?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:P}):null,e(n.Value,{className:["min-w-0 flex-1 truncate text-start","data-placeholder:text-mp-on-surface-variant",q?"data-placeholder:text-mp-on-surface/38":""].filter(Boolean).join(" "),placeholder:J?w:void 0}),e(n.Icon,{className:["flex shrink-0 items-center","transition-transform duration-(--mp-sys-motion-duration-short4)","data-popup-open:rotate-180",q?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:e(i,{icon:o,size:u[M]})})]}),e(d,{label:I,required:V,notched:J}),h(I)?e(s,{size:M,label:I,required:V,htmlFor:B,shrunk:J}):null]}),e(n.Portal,{children:e(n.Positioner,{className:x,sideOffset:4,alignItemWithTrigger:!1,children:e(n.Popup,{className:["mp-select__popup rounded-mp-xs shadow-mp-2 bg-mp-surface-container p-2","text-mp-on-surface min-w-[var(--anchor-width)] outline-none",f[M],g].join(" "),children:e(n.List,{className:"max-h-[min(20rem,var(--available-height))] overflow-y-auto overscroll-contain",children:b.map(t=>a(n.Item,{value:t.value,disabled:t.disabled,className:["mp-select__item group rounded-mp-xs relative flex cursor-pointer items-center","gap-3 py-2 pe-3 ps-2 select-none outline-none","transition-[background-color,color]","duration-(--mp-sys-motion-duration-short4)","data-selected:text-mp-on-secondary-container","data-selected:bg-mp-secondary-container","data-disabled:text-mp-on-surface/38 data-disabled:cursor-default"].join(" "),children:[e(m,{className:"group-data-highlighted:opacity-8 group-data-disabled:opacity-0"}),e("span",{className:"flex size-5 shrink-0 items-center justify-center",children:e(n.ItemIndicator,{children:e(i,{icon:l,size:18})})}),e(n.ItemText,{className:"min-w-0 flex-1 truncate",children:t.label??String(t.value)})]},String(t.value)))})})})})]}),e(p,{description:k,errorMessage:z,className:F.padding})]})});

package/dist/components/slider/MPSlider.js

@@ -1 +1 @@
-import{jsx as e,jsxs as s}from"react/jsx-runtime";import*as r from"react";import{Slider as a}from"@base-ui/react/slider";import{accentSlots as l}from"../../internal/accent";import{MPStateLayer as t}from"../../internal/StateLayer";import{META_TEXT as n,hasContent as i}from"../../internal/scale";const o={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"}},c={xs:"size-8",sm:"size-9",md:"size-10",lg:"size-11",xl:"size-12"};export const MPSlider=r.forwardRef(function({value:r,defaultValue:m,onValueChange:u,onValueCommitted:p,min:d=0,max:f=100,step:h=1,label:x,description:g,showValue:b=!1,format:w,orientation:j="horizontal",size:z="md",color:v="primary",disabled:C=!1,name:y,"aria-label":N},_){const k="vertical"===j,V=o[z],$=r??m,A=Array.isArray($)?$.length:1;return s(a.Root,{ref:_,value:r,defaultValue:m,onValueChange:e=>u?.(e),onValueCommitted:e=>p?.(e),min:d,max:f,step:h,disabled:C,orientation:j,format:w,name:y,"data-mp-size":z,className:["mp-slider flex",k?"w-fit flex-col items-center gap-2":"w-full flex-col gap-1",C?"cursor-default":""].filter(Boolean).join(" "),style:l(v),children:[i(x)||b?s("div",{className:["flex w-full items-baseline gap-2",n].join(" "),children:[i(x)?e(a.Label,{className:C?"text-mp-on-surface/38":"text-mp-on-surface-variant",children:x}):null,b?e(a.Value,{className:["ms-auto tabular-nums",C?"text-mp-on-surface/38":"text-mp-on-surface"].join(" ")}):null]}):null,e(a.Control,{className:["mp-slider__control flex touch-none items-center justify-center select-none",k?`${V.stripCross} h-40 flex-col`:`w-full ${V.strip}`,C?"":"cursor-pointer"].filter(Boolean).join(" "),children:s(a.Track,{className:["mp-slider__track rounded-mp-full relative",k?`${V.cross} h-full`:`${V.thickness} w-full`,C?"bg-mp-on-surface/12":"bg-mp-surface-container-highest"].join(" "),children:[e(a.Indicator,{className:["rounded-mp-full",C?"bg-mp-on-surface/38":"bg-(--_mp-accent)"].join(" ")}),Array.from({length:A},(s,r)=>e(a.Thumb,{index:r,"aria-label":i(x)?void 0:N,className:["mp-slider__handle group rounded-mp-full relative outline-none",V.handle,C?"bg-mp-on-surface/38 cursor-default":"bg-(--_mp-accent) cursor-grab active:cursor-grabbing"].join(" "),children:C?null:e(t,{layer:["top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full",c[z],"bg-(--_mp-accent)"].join(" "),className:"group-data-dragging:opacity-16"})},r))]})}),i(g)?e("div",{className:[n,C?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:g}):null]})});
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as s from"react";import{Slider as a}from"@base-ui/react/slider";import{accentSlots as t}from"../../internal/accent";import{MPStateLayer as n}from"../../internal/StateLayer";import{META_TEXT as i,hasContent as o}from"../../internal/scale";const l={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"}},c=["duration-(--mp-sys-motion-duration-short2) ease-mp-standard","motion-reduce:transition-none"].join(" "),m={xs:"size-8",sm:"size-9",md:"size-10",lg:"size-11",xl:"size-12"};export const MPSlider=s.forwardRef(function({value:s,defaultValue:u,onValueChange:p,onValueCommitted:d,min:f=0,max:h=100,step:g=1,label:x,description:b,showValue:w=!1,format:j,orientation:y="horizontal",size:z="md",color:v="primary",disabled:C=!1,name:N,"aria-label":_},k){const V="vertical"===y,$=l[z],A=s??u,B=Array.isArray(A)?A.length:1;return r(a.Root,{ref:k,value:s,defaultValue:u,onValueChange:e=>p?.(e),onValueCommitted:e=>d?.(e),min:f,max:h,step:g,disabled:C,orientation:y,format:j,name:N,"data-mp-size":z,className:["mp-slider flex",V?"w-fit flex-col items-center gap-2":"w-full flex-col gap-1",C?"cursor-default":""].filter(Boolean).join(" "),style:t(v),children:[o(x)||w?r("div",{className:["flex w-full items-baseline gap-2",i].join(" "),children:[o(x)?e(a.Label,{className:C?"text-mp-on-surface/38":"text-mp-on-surface-variant",children:x}):null,w?e(a.Value,{className:["ms-auto tabular-nums",C?"text-mp-on-surface/38":"text-mp-on-surface"].join(" ")}):null]}):null,e(a.Control,{className:["mp-slider__control group/rail flex touch-none items-center justify-center select-none",V?`${$.stripCross} h-40 flex-col`:`w-full ${$.strip}`,C?"":"cursor-pointer"].filter(Boolean).join(" "),children:r(a.Track,{className:["mp-slider__track rounded-mp-full relative",V?`${$.cross} h-full`:`${$.thickness} w-full`,C?"bg-mp-on-surface/12":"bg-mp-surface-container-highest"].join(" "),children:[e(a.Indicator,{className:["rounded-mp-full","[transition-property:inset-inline-start,width,bottom,height]",c,"group-data-dragging/rail:transition-none",C?"bg-mp-on-surface/38":"bg-(--_mp-accent)"].join(" ")}),Array.from({length:B},(r,s)=>e(a.Thumb,{index:s,"aria-label":o(x)?void 0:_,className:["mp-slider__handle group rounded-mp-full relative outline-none","[transition-property:inset-inline-start,bottom]",c,"data-dragging:transition-none",$.handle,C?"bg-mp-on-surface/38 cursor-default":"bg-(--_mp-accent) cursor-grab active:cursor-grabbing"].join(" "),children:C?null:e(n,{layer:["top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full",m[z],"bg-(--_mp-accent)"].join(" "),className:"group-data-dragging:opacity-16"})},s))]})}),o(b)?e("div",{className:[i,C?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:b}):null]})});

package/dist/components/snackbar/MPSnackbar.js

@@ -1 +1 @@
-import{jsx as e,jsxs as o}from"react/jsx-runtime";import*as t from"react";import{Toast as i}from"@base-ui/react/toast";import{MPIcon as s}from"../icon/MPIcon";import{CloseIcon as n}from"../../constants/icons";import{accentSlots as r}from"../../internal/accent";import{useMPLocale as l,useMPMessages as a}from"../../internal/locale";import{MPStateLayer as c}from"../../internal/StateLayer";import{FADE as m,PORTAL_LAYER as p}from"../../internal/surface";const u={"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"},d={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"},f={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"},x={xs:16,sm:18,md:20,lg:22,xl:24};function b(e){const{color:o,icon:t,message:i,actionLabel:s,onAction:n,...r}=e;return{...r,title:i,data:{color:o,icon:t},actionProps:void 0===s?void 0:{children:s,onClick:n}}}export function useMPSnackbar(){const e=i.useToastManager();return t.useMemo(()=>({add:o=>e.add(b(o)),close:o=>e.close(o),update:(o,t)=>e.update(o,b(t)),promise:(o,t)=>e.promise(o,{loading:b(t.loading),success:e=>b("function"==typeof t.success?t.success(e):t.success),error:e=>b("function"==typeof t.error?t.error(e):t.error)}),snackbars:e.toasts}),[e])}function h({toast:t,color:l,size:a,showClose:p,closeLabel:u,swipeDirection:b}){const h=t.data?.color??l,v=t.data?.icon,y={"--_mp-plate":h?`var(--_mp-color-${h}-container)`:"var(--_mp-color-inverse-surface)","--_mp-on-plate":h?`var(--_mp-color-on-${h}-container)`:"var(--_mp-color-inverse-on-surface)","--_mp-plate-action":h?`var(--_mp-color-${h})`:"var(--_mp-color-inverse-primary)",...h?r(h):null};return o(i.Root,{toast:t,swipeDirection:b,"data-mp-size":a,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",f[a],d[a],m,"data-limited:hidden"].join(" "),style:y,children:[v?e("span",{className:"flex shrink-0 items-center",children:v}):null,e(i.Title,{render:e("span",{}),className:"min-w-0 flex-1 py-0.5 ps-1 [min-inline-size:min(280px,100%)]"}),e(i.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(" ")}),p?o(i.Close,{"aria-label":u,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:[e(c,{}),e(s,{icon:n,size:x[a]})]}):null]})}function v({position:o,width:t,...s}){const{toasts:n}=i.useToastManager(),r=[o.startsWith("top")?"up":"down","left","right"];return e(i.Portal,{children:e(i.Viewport,{className:[p,"pointer-events-none fixed inset-x-0 flex flex-col gap-2 p-4",u[o]].join(" "),children:n.map(o=>e("div",{className:"w-full",style:{maxWidth:"number"==typeof t?`${t}px`:t},children:e(h,{toast:o,swipeDirection:r,...s})},o.id))})})}export function MPSnackbarProvider({color:t,position:s="bottom-start",timeout:n=5e3,limit:r=3,width:c=600,size:m="md",showClose:p=!0,closeLabel:u,locale:d,children:f}){const x=l(d),b=a("common",x);return o(i.Provider,{timeout:n,limit:r,children:[f,e(v,{position:s,width:c,color:t,size:m,showClose:p,closeLabel:u??b.close})]})}
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as o from"react";import{Toast as s}from"@base-ui/react/toast";import{MPIcon as i}from"../icon/MPIcon";import{CloseIcon as n}from"../../constants/icons";import{accentSlots as r}from"../../internal/accent";import{useMPLocale as a,useMPMessages as l}from"../../internal/locale";import{MPStateLayer as c}from"../../internal/StateLayer";import{PORTAL_LAYER as m}from"../../internal/surface";const p={"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"},d=["transition-[opacity,translate] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard","data-starting-style:opacity-0 data-ending-style:opacity-0"].join(" "),u={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"},f={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"},x={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"},b={xs:16,sm:18,md:20,lg:22,xl:24};function y(e){const{color:t,icon:o,message:s,actionLabel:i,onAction:n,...r}=e;return{...r,title:s,data:{color:t,icon:o},actionProps:void 0===i?void 0:{children:i,onClick:n}}}export function useMPSnackbar(){const e=s.useToastManager();return o.useMemo(()=>({add:t=>e.add(y(t)),close:t=>e.close(t),update:(t,o)=>e.update(t,y(o)),promise:(t,o)=>e.promise(t,{loading:y(o.loading),success:e=>y("function"==typeof o.success?o.success(e):o.success),error:e=>y("function"==typeof o.error?o.error(e):o.error)}),snackbars:e.toasts}),[e])}function h({toast:o,color:a,size:l,showClose:m,closeLabel:p,swipeDirection:y,edge:h}){const g=o.data?.color??a,v=o.data?.icon,w={"--_mp-plate":g?`var(--_mp-color-${g}-container)`:"var(--_mp-color-inverse-surface)","--_mp-on-plate":g?`var(--_mp-color-on-${g}-container)`:"var(--_mp-color-inverse-on-surface)","--_mp-plate-action":g?`var(--_mp-color-${g})`:"var(--_mp-color-inverse-primary)",...g?r(g):null};return t(s.Root,{toast:o,swipeDirection:y,"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",x[l],f[l],d,u[h],"data-limited:hidden"].join(" "),style:w,children:[v?e("span",{className:"flex shrink-0 items-center",children:v}):null,e(s.Title,{render:e("span",{}),className:"min-w-0 flex-1 py-0.5 ps-1 [min-inline-size:min(280px,100%)]"}),e(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(" ")}),m?t(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:[e(c,{}),e(i,{icon:n,size:b[l]})]}):null]})}function g({position:t,width:o,...i}){const{toasts:n}=s.useToastManager(),r=t.startsWith("top")?"top":"bottom",a=["top"===r?"up":"down","left","right"];return e(s.Portal,{children:e(s.Viewport,{className:[m,"pointer-events-none fixed inset-x-0 flex flex-col gap-2 p-4",p[t]].join(" "),children:n.map(t=>e("div",{className:"w-full",style:{maxWidth:"number"==typeof o?`${o}px`:o},children:e(h,{toast:t,swipeDirection:a,edge:r,...i})},t.id))})})}export function MPSnackbarProvider({color:o,position:i="bottom-start",timeout:n=5e3,limit:r=3,width:c=600,size:m="md",showClose:p=!0,closeLabel:d,locale:u,children:f}){const x=a(u),b=l("common",x);return t(s.Provider,{timeout:n,limit:r,children:[f,e(g,{position:i,width:c,color:o,size:m,showClose:p,closeLabel:d??b.close})]})}

package/dist/components/switch/MPSwitch.js

@@ -1 +1 @@
-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 c}from"../icon/MPIcon";import{CheckIcon as s,CloseIcon as o}from"../../constants/icons";import{accentSlots as l}from"../../internal/accent";import{MPStateLayer as d}from"../../internal/StateLayer";import{MPSupportingText as h}from"../../internal/SupportingText";import{PROSE_TEXT as m,hasContent as p}from"../../internal/scale";const u={xs:{track:"h-5 w-8",thumb:"left-[5px] size-2.5 data-checked:left-[15px] data-checked:size-3.5",halo:"size-8",glyph:8},sm:{track:"h-6 w-10",thumb:"left-1.5 size-3 data-checked:left-[19px] data-checked:size-[18px]",halo:"size-9",glyph:10},md:{track:"h-8 w-13",thumb:"left-2 size-4 data-checked:left-6 data-checked:size-6",halo:"size-10",glyph:14},lg:{track:"h-9 w-15",thumb:"left-[9px] size-[18px] data-checked:left-7 data-checked:size-7",halo:"size-11",glyph:16},xl:{track:"h-10 w-17",thumb:"left-2.5 size-5 data-checked:left-[33px] data-checked:size-[30px]",halo:"size-12",glyph:18}};export const MPSwitch=r.forwardRef(function({checked:f,defaultChecked:g,onCheckedChange:k,label:x,description:b,errorMessage:z,icons:y=!1,labelPlacement:w="end",size:j="md",color:N="primary",required:_=!1,disabled:C=!1,readOnly:M=!1,name:v,id:P,fullWidth:R=!1},S){const W=p(z),q=W?"error":N,F=u[j],I=r.useId(),L=P??I,O=e("span",{className:"flex h-[1lh] shrink-0 items-center",children:e(n.Root,{ref:S,id:L,name:v,checked:f,defaultChecked:g,required:_,disabled:C,readOnly:M,onCheckedChange:e=>k?.(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",F.track,C?["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(" "):[M?"cursor-default":"cursor-pointer","bg-mp-surface-container-highest inset-ring-2",W?"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-[left,width,height,background-color]","duration-(--mp-sys-motion-duration-short4) ease-mp-standard",F.thumb,C?"bg-mp-on-surface/38 data-checked:bg-mp-surface-container-highest":[W?"bg-mp-error":"bg-mp-outline","data-checked:bg-(--_mp-on-accent)"].join(" ")].join(" "),children:[C?null:e(d,{layer:["top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full",F.halo,"bg-mp-on-surface group-data-checked:bg-(--_mp-accent)"].join(" ")}),y?a(t,{children:[e("span",{className:["hidden items-center group-data-checked:flex",C?"text-mp-surface-container-highest":"text-(--_mp-accent)"].join(" "),children:e(c,{icon:s,size:F.glyph,strokeWidth:3})}),e("span",{className:"text-mp-surface-container-highest flex items-center group-data-checked:hidden",children:e(c,{icon:o,size:F.glyph,strokeWidth:3})})]}):null]})})}),T=p(x)||p(b)||W?a("span",{className:["flex min-w-0 flex-col gap-0.5","start"===w?"flex-1":""].filter(Boolean).join(" "),children:[p(x)?a(i.Label,{htmlFor:L,className:["leading-[1.4]",C?"text-mp-on-surface/38 cursor-default":M?"text-mp-on-surface":"text-mp-on-surface cursor-pointer"].join(" "),children:[x,_?e("span",{"aria-hidden":"true",children:" *"}):null]}):null,e(h,{description:b,errorMessage:z})]}):null;return e(i.Root,{className:["mp-switch align-top",R?"flex w-full":"inline-flex"].join(" "),disabled:C,invalid:W,"data-mp-size":j,style:l(q),children:e("div",{className:["flex w-full items-start gap-3",m[j]].join(" "),children:a(t,"start"===w?{children:[T,O]}:{children:[O,T]})})})});
+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";import{CheckIcon as o,CloseIcon as c}from"../../constants/icons";import{accentSlots as l}from"../../internal/accent";import{MPStateLayer as d}from"../../internal/StateLayer";import{MPSupportingText as h}from"../../internal/SupportingText";import{PROSE_TEXT as m,hasContent as p}from"../../internal/scale";const u={xs:{track:"h-5 w-8",thumb:"left-[5px] size-2.5 data-checked:left-[15px] data-checked:size-3.5",halo:"size-8",glyph:8},sm:{track:"h-6 w-10",thumb:"left-1.5 size-3 data-checked:left-[19px] data-checked:size-[18px]",halo:"size-9",glyph:10},md:{track:"h-8 w-13",thumb:"left-2 size-4 data-checked:left-6 data-checked:size-6",halo:"size-10",glyph:14},lg:{track:"h-9 w-15",thumb:"left-[9px] size-[18px] data-checked:left-7 data-checked:size-7",halo:"size-11",glyph:16},xl:{track:"h-10 w-17",thumb:"left-2.5 size-5 data-checked:left-[33px] data-checked:size-[30px]",halo:"size-12",glyph:18}};export const MPSwitch=r.forwardRef(function({checked:f,defaultChecked:g,onCheckedChange:k,label:b,description:x,errorMessage:y,icons:z=!1,labelPlacement:j="end",size:w="md",color:N="primary",required:_=!1,disabled:C=!1,readOnly:M=!1,name:v,id:P,fullWidth:R=!1},S){const W=p(y),q=W?"error":N,F=u[w],I=r.useId(),L=P??I,O=e("span",{className:"flex h-[1lh] shrink-0 items-center",children:e(n.Root,{ref:S,id:L,name:v,checked:f,defaultChecked:g,required:_,disabled:C,readOnly:M,onCheckedChange:e=>k?.(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",F.track,C?["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(" "):[M?"cursor-default":"cursor-pointer","bg-mp-surface-container-highest inset-ring-2",W?"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-[left,width,height,background-color]","duration-(--mp-sys-motion-duration-short4) ease-mp-standard",F.thumb,C?"bg-mp-on-surface/38 data-checked:bg-mp-surface-container-highest":[W?"bg-mp-error":"bg-mp-outline","data-checked:bg-(--_mp-on-accent)"].join(" ")].join(" "),children:[C?null:e(d,{layer:["top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full",F.halo,"bg-mp-on-surface group-data-checked:bg-(--_mp-accent)"].join(" ")}),z?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",C?"text-mp-surface-container-highest":"text-(--_mp-accent)"].join(" "),children:e(s,{icon:o,size:F.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:F.glyph,strokeWidth:3})})]}):null]})})}),T=p(b)||p(x)||W?a("span",{className:["flex min-w-0 flex-col gap-0.5","start"===j?"flex-1":""].filter(Boolean).join(" "),children:[p(b)?a(i.Label,{htmlFor:L,className:["leading-[1.4]",C?"text-mp-on-surface/38 cursor-default":M?"text-mp-on-surface":"text-mp-on-surface cursor-pointer"].join(" "),children:[b,_?e("span",{"aria-hidden":"true",children:" *"}):null]}):null,e(h,{description:x,errorMessage:y})]}):null;return e(i.Root,{className:["mp-switch align-top",R?"flex w-full":"inline-flex"].join(" "),disabled:C,invalid:W,"data-mp-size":w,style:l(q),children:e("div",{className:["flex w-full items-start gap-3",m[w]].join(" "),children:a(t,"start"===j?{children:[T,O]}:{children:[O,T]})})})});

package/dist/components/tabs/MPTabs.js

@@ -1 +1 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{Tabs as i}from"@base-ui/react/tabs";import{accentSlots as n}from"../../internal/accent";import{MPStateLayer as o}from"../../internal/StateLayer";import{CONTROL_GAP as l,hasContent as r,SHEET_GAP as s}from"../../internal/scale";const c=a.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"},u={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"},d={xs:"px-3",sm:"px-3.5",md:"px-4",lg:"px-5",xl:"px-6"},f={xs:12,sm:14,md:16,lg:20,xl:24},h={xs:18,sm:20,md:24,lg:24,xl:28};function x(e,t,i,n=""){a.Children.toArray(e).forEach(e=>{if(!a.isValidElement(e))return void(r(e)&&t.push(e));if(e.type===a.Fragment)return void x(e.props.children,t,i,`${n}${String(e.key)}/`);const o=n?a.cloneElement(e,{key:`${n}${String(e.key)}`}):e;e.type===MPTabPanel?i.push(o):t.push(o)})}export const MPTabs=a.forwardRef(function({variant:o="primary",color:l="primary",size:r="md",value:m,defaultValue:u,onValueChange:p,iconPosition:d,activateOnFocus:h=!1,loopFocus:v=!0,divider:b=!0,fullWidth:y=!1,className:_,style:w,children:g,"aria-label":j,...P},N){const k=d??("primary"===o?"top":"start"),M=a.useMemo(()=>({variant:o,size:r,iconPosition:k,fullWidth:y}),[o,r,k,y]),$=[],z=[];return x(g,$,z),e(c.Provider,{value:M,children:t(i.Root,{ref:N,value:m,defaultValue:u,onValueChange:e=>p?.(e),"data-mp-size":r,"data-mp-variant":o,className:["mp-tabs flex min-w-0 flex-col",s[r],_??""].filter(Boolean).join(" "),style:{...n(l),"--_mp-tab-inset":`${f[r]}px`,...w},...P,children:[t(i.List,{"aria-label":j,activateOnFocus:h,loopFocus:v,className:["mp-tabs__list relative flex shrink-0",b?"border-mp-outline-variant border-b":"",y?"w-full":"","overflow-x-auto overflow-y-hidden"].filter(Boolean).join(" "),children:[$,e(i.Indicator,{className:["mp-tabs__indicator pointer-events-none absolute bottom-0","bg-(--_mp-accent)","primary"===o?["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(" ")})]}),z]})})});export const MPTab=a.forwardRef(function({value:n,icon:s,disabled:f=!1,className:x,children:v,...b},y){const{variant:_,size:w,iconPosition:g,fullWidth:j}=a.useContext(c),P="top"===g&&r(s);return t(i.Tab,{ref:y,value:n,disabled:f,className:["mp-tabs__tab group relative flex shrink-0 items-center justify-center","box-border appearance-none 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 ${u[w]}`:`flex-row ${m[w]}`,P?"":l[w],p[w],d[w],f?"text-mp-on-surface/38 cursor-default":["text-mp-on-surface-variant cursor-pointer","primary"===_?"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":"",x??""].filter(Boolean).join(" "),...b,children:[f?null:e(o,{}),r(s)?e("span",{className:"relative flex shrink-0 items-center justify-center",style:{width:h[w],height:h[w]},children:s}):null,r(v)?e("span",{className:"relative truncate",children:v}):null]})});export const MPTabPanel=a.forwardRef(function({value:t,keepMounted:a=!1,className:n,children:o,...l},r){return e(i.Panel,{ref:r,value:t,keepMounted:a,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",n??""].filter(Boolean).join(" "),...l,children:o})});
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{Tabs as i}from"@base-ui/react/tabs";import{accentSlots as o}from"../../internal/accent";import{MPStateLayer as n}from"../../internal/StateLayer";import{CONTROL_GAP as r,hasContent as l,SHEET_GAP as s}from"../../internal/scale";const c=a.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"},u={xs:"h-11",sm:"h-13",md:"h-16",lg:"h-18",xl:"h-20"},d={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"},p={xs:"px-3",sm:"px-3.5",md:"px-4",lg:"px-5",xl:"px-6"},f={xs:12,sm:14,md:16,lg:20,xl:24},h={xs:18,sm:20,md:24,lg:24,xl:28};function x(e,t,i,o=""){a.Children.toArray(e).forEach(e=>{if(!a.isValidElement(e))return void(l(e)&&t.push(e));if(e.type===a.Fragment)return void x(e.props.children,t,i,`${o}${String(e.key)}/`);const n=o?a.cloneElement(e,{key:`${o}${String(e.key)}`}):e;e.type===MPTabPanel?i.push(n):t.push(n)})}export const MPTabs=a.forwardRef(function({variant:n="primary",color:r="primary",size:l="md",value:m,defaultValue:u,onValueChange:d,iconPosition:p,activateOnFocus:h=!1,loopFocus:v=!0,divider:b=!0,fullWidth:y=!1,className:_,style:g,children:w,"aria-label":j,...P},N){const k=p??("primary"===n?"top":"start"),M=a.useMemo(()=>({variant:n,size:l,iconPosition:k,fullWidth:y}),[n,l,k,y]),$=[],z=[];return x(w,$,z),e(c.Provider,{value:M,children:t(i.Root,{ref:N,value:m,defaultValue:u,onValueChange:e=>d?.(e),"data-mp-size":l,"data-mp-variant":n,className:["mp-tabs flex min-w-0 flex-col",s[l],_??""].filter(Boolean).join(" "),style:{...o(r),"--_mp-tab-inset":`${f[l]}px`,...g},...P,children:[t(i.List,{"aria-label":j,activateOnFocus:h,loopFocus:v,className:["mp-tabs__list relative flex shrink-0",b?"border-mp-outline-variant border-b":"",y?"w-full":"","overflow-x-auto overflow-y-hidden"].filter(Boolean).join(" "),children:[$,e(i.Indicator,{className:["mp-tabs__indicator pointer-events-none absolute bottom-0","bg-(--_mp-accent)","primary"===n?["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(" ")})]}),z]})})});export const MPTab=a.forwardRef(function({value:o,icon:s,disabled:f=!1,className:x,children:v,...b},y){const{variant:_,size:g,iconPosition:w,fullWidth:j}=a.useContext(c),P="top"===w&&l(s);return t(i.Tab,{ref:y,value:o,disabled:f,className:["mp-tabs__tab group relative flex shrink-0 items-center justify-center","box-border appearance-none 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 ${u[g]}`:`flex-row ${m[g]}`,P?"":r[g],d[g],p[g],f?"text-mp-on-surface/38 cursor-default":["text-mp-on-surface-variant cursor-pointer","primary"===_?"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":"",x??""].filter(Boolean).join(" "),...b,children:[f?null:e(n,{}),l(s)?e("span",{className:"relative flex shrink-0 items-center justify-center",style:{width:h[g],height:h[g]},children:s}):null,l(v)?e("span",{className:"relative truncate",children:v}):null]})});export const MPTabPanel=a.forwardRef(function({value:t,keepMounted:a=!1,className:o,children:n,...r},l){return e(i.Panel,{ref:l,value:t,keepMounted:a,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",o??""].filter(Boolean).join(" "),...r,children:n})});

package/dist/internal/Calendar.js

@@ -1 +1 @@
-import{jsx as e,jsxs as o,Fragment as t}from"react/jsx-runtime";import*as n from"react";import{MPButton as r}from"../components/button/MPButton";import{MPIcon as l}from"../components/icon/MPIcon";import{MPIconButton as a}from"../components/icon-button/MPIconButton";import{ChevronDownIcon as s,ChevronLeftIcon as c,ChevronRightIcon as i}from"../constants/icons";import{MPStateLayer as u}from"./StateLayer";import{CONTROL_ICON as m,META_TEXT as d,PROSE_TEXT as h}from"./scale";import{VISUALLY_HIDDEN as p}from"./visually-hidden";import{addDays as f,addMonths as g,addYears as v,calendarWeeks as w,compareDay as x,dateFormatter as b,daysInMonth as y,isDayOutside as D,isMonthBeforeYear as S,isSameDay as M,isSameMonth as N,isValidDate as P,makeDate as C,meridiemLabels as _,monthLabels as k,startOfDay as z,startOfMonth as F,today as Y,weekdayLabels as A,withTime as j,YEAR_PAGE_SIZE as E,yearPageStart as B}from"./date";const R={xs:"1.75rem",sm:"2rem",md:"2.5rem",lg:"2.75rem",xl:"3rem"},T={xs:"xs",sm:"xs",md:"sm",lg:"sm",xl:"md"},$=["group relative flex cursor-pointer items-center justify-center overflow-hidden","box-border appearance-none bg-transparent font-[inherit] tabular-nums select-none","transition-[background-color,border-color,color]","duration-(--mp-sys-motion-duration-short4)","outline-mp-secondary focus-visible:z-10 focus-visible:outline-2","focus-visible:outline-offset-[-2px] focus-visible:outline-solid outline-none"].join(" ");function H({children:t,label:n,selected:r,inRange:l=!1,rangeEdge:a=null,current:s=!1,muted:c=!1,disabled:i=!1,focused:m=!1,className:d,onClick:h,onPointerEnter:p,onKeyDown:f}){return o("button",{type:"button",role:"gridcell","aria-label":n,"aria-selected":r,"aria-current":s?"date":void 0,"aria-disabled":i||void 0,tabIndex:m?0:-1,"data-focus-target":m?"true":void 0,className:[$,"start"===a?"rounded-s-mp-full":"end"===a?"rounded-e-mp-full":"middle"===a?"rounded-none":"rounded-mp-full",i?"cursor-default text-mp-on-surface/38":r?"bg-(--_mp-accent) text-(--_mp-on-accent)":l?"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)":s?"border border-(--_mp-accent) text-(--_mp-accent)":c?"text-mp-on-surface-variant":"text-mp-on-surface",d??""].filter(Boolean).join(" "),onClick:()=>{i||h()},onPointerEnter:p,onKeyDown:f,children:[i?null:e(u,{}),t]})}function K({size:n,color:u,view:d,month:p,locale:f,labels:g,showPreviousButton:v,showNextButton:w,onStep:x,onViewChange:b}){const y=k(f,"long")[p.getMonth()],D=String(p.getFullYear()),M=S(f),N=T[n],P="day"===d?[g.previousMonth,g.nextMonth]:"month"===d?[g.previousYear,g.nextYear]:[g.previousYears,g.nextYears],C=(o,t)=>t?e(a,{size:N,color:u,label:P[-1===o?0:1],icon:e(l,{icon:-1===o?c:i,size:m[N],className:"rtl:rotate-180"}),onClick:()=>x(o)}):e("span",{"aria-hidden":"true",className:"size-(--_mp-cell)"}),_=o=>e(l,{icon:s,size:m[N],className:["transition-transform duration-(--mp-sys-motion-duration-short4)",o?"rotate-180":""].filter(Boolean).join(" ")}),z=e(r,{variant:"text",size:N,color:u,"aria-label":g.chooseMonth,"aria-expanded":"month"===d,endIcon:_("month"===d),onClick:()=>b("month"===d?"day":"month"),children:y},"month"),F=e(r,{variant:"text",size:N,color:u,className:"tabular-nums","aria-label":g.chooseYear,"aria-expanded":"year"===d,endIcon:_("year"===d),onClick:()=>b("year"===d?"day":"year"),children:D},"year"),Y=B(p.getFullYear());return o("div",{className:"flex items-center justify-between gap-1",children:[C(-1,v),e("div",{className:"flex min-w-0 flex-1 items-center justify-center gap-1",children:"year"===d?e("span",{className:`text-mp-on-surface flex h-(--_mp-cell) items-center tabular-nums ${h[n]}`,children:`${Y}–${Y+E-1}`}):"month"===d?F:o(t,M?{children:[z,F]}:{children:[F,z]})}),C(1,w)]})}export function MPCalendar({size:t,color:r,locale:l,weekStartsOn:a,month:s,onMonthChange:c,selected:i,rangeStart:u=null,rangeEnd:m=null,onSelect:d,onPreviewChange:h,minDate:p,maxDate:f,shouldDisableDate:w,showOutsideDays:x=!0,autoFocus:b=!1,showPreviousButton:y=!0,showNextButton:S=!0,labels:M}){const[_,k]=n.useState("day"),A=n.useMemo(()=>i.filter(P),[i]),[j,B]=n.useState(()=>{const e=A.find(e=>N(e,s));return e?z(e):N(Y(),s)?Y():F(s)}),T=n.useRef(b),$=n.useRef(null);n.useEffect(()=>{B(e=>N(e,s)?e:F(s))},[s]),n.useLayoutEffect(()=>{T.current&&(T.current=!1,$.current?.querySelector('[data-focus-target="true"]')?.focus({preventScroll:!0}))});const H=n.useCallback(e=>D(e,p,f)||(w?.(e)??!1),[p,f,w]),q=e=>{T.current=!0,k(e)},I=e=>{T.current=!0,c(e)};return o("div",{ref:$,className:"mp-calendar flex flex-col gap-1",style:{"--_mp-cell":R[t]},onPointerLeave:()=>h?.(null),children:[e(K,{size:t,color:r,view:_,month:s,locale:l,labels:M,showPreviousButton:y,showNextButton:S,onStep:e=>{c("day"===_?g(s,e):v(s,"month"===_?e:e*E))},onViewChange:q}),e("div",{className:"h-[calc(var(--_mp-cell)*7)] w-[calc(var(--_mp-cell)*7)]",children:"day"===_?e(L,{size:t,locale:l,weekStartsOn:a,month:s,chosen:A,rangeStart:u,rangeEnd:m,focusedDate:j,showOutsideDays:x,isDisabled:H,onSelect:e=>{B(e),d(e)},onPreviewChange:h,onMoveFocus:e=>{T.current=!0,B(e),N(e,s)||c(F(e))}}):"month"===_?e(O,{size:t,locale:l,month:s,chosen:A,minDate:p,maxDate:f,onMoveCursor:I,onPick:e=>{c(C(s.getFullYear(),e,1)),q("day")}}):e(U,{size:t,month:s,chosen:A,minDate:p,maxDate:f,onMoveCursor:I,onPick:e=>{c(C(e,s.getMonth(),1)),q("month")}})})]})}function L({size:t,locale:r,weekStartsOn:l,month:a,chosen:s,rangeStart:c,rangeEnd:i,focusedDate:u,showOutsideDays:m,isDisabled:p,onSelect:v,onPreviewChange:y,onMoveFocus:D}){const S=A(r,l,"narrow"),C=A(r,l,"long"),_=(z=i,P(k=c)&&P(z)?x(k,z)<=0?[k,z]:[z,k]:null);var k,z;const F=Y(),j=n.useMemo(()=>{const e=b(r,{dateStyle:"full"});return w(a,l).map(o=>o.map(o=>({date:o,label:e.format(o)})))},[a,l,r]);return o("div",{role:"grid","aria-label":b(r,{year:"numeric",month:"long"}).format(a),className:"flex h-full flex-col",children:[e("div",{role:"row",className:"grid grid-cols-7",children:S.map((o,t)=>e("span",{role:"columnheader","aria-label":C[t],className:`text-mp-on-surface-variant flex h-(--_mp-cell) items-center justify-center select-none ${d}`,children:o},t))}),j.map((o,n)=>e("div",{role:"row",className:"grid grid-cols-7",children:o.map(({date:o,label:n})=>{const r=!N(o,a);if(r&&!m)return e("span",{role:"gridcell","aria-hidden":"true",className:"size-(--_mp-cell)"},o.getTime());const c=s.some(e=>M(e,o)),i=null!==_&&x(o,_[0])>=0&&x(o,_[1])<=0,d=null!==_&&i&&M(o,_[0]),w=null!==_&&i&&M(o,_[1]);return e(H,{label:n,selected:c,inRange:i&&!c,rangeEdge:i?d&&w?"both":d?"start":w?"end":"middle":null,current:M(o,F)&&!c,muted:r,disabled:p(o),focused:M(o,u),className:`size-(--_mp-cell) ${h[t]}`,onClick:()=>v(o),onPointerEnter:()=>y?.(o),onKeyDown:e=>((e,o)=>{const t=(o.getDay()-l+7)%7,n={ArrowLeft:()=>f(o,-1),ArrowRight:()=>f(o,1),ArrowUp:()=>f(o,-7),ArrowDown:()=>f(o,7),Home:()=>f(o,-t),End:()=>f(o,6-t),PageUp:()=>g(o,e.shiftKey?-12:-1),PageDown:()=>g(o,e.shiftKey?12:1)}[e.key];n&&(e.preventDefault(),D(n()))})(e,o),children:o.getDate()},o.getTime())})},n))]})}function O({size:o,locale:t,month:n,chosen:r,minDate:l,maxDate:a,onMoveCursor:s,onPick:c}){const i=k(t,"short"),u=k(t,"long"),m=n.getFullYear(),d=new Date,p=e=>{const o={ArrowLeft:-1,ArrowRight:1,ArrowUp:-3,ArrowDown:3,PageUp:-12,PageDown:12}[e.key];void 0!==o&&(e.preventDefault(),s(g(F(n),o)))};return e("div",{role:"grid",className:"flex h-full flex-col justify-evenly",children:[0,1,2,3].map(t=>e("div",{role:"row",className:"grid grid-cols-3 gap-1",children:[0,1,2].map(s=>{const f=3*t+s,g=C(m,f,1),v=C(m,f,y(m,f));return e(H,{label:`${u[f]} ${m}`,selected:r.some(e=>e.getFullYear()===m&&e.getMonth()===f),current:d.getFullYear()===m&&d.getMonth()===f,disabled:P(l)&&x(v,l)<0||P(a)&&x(g,a)>0,focused:f===n.getMonth(),className:`h-(--_mp-cell) w-full ${h[o]}`,onClick:()=>c(f),onKeyDown:p,children:i[f]},f)})},t))})}function U({size:o,month:t,chosen:n,minDate:r,maxDate:l,onMoveCursor:a,onPick:s}){const c=B(t.getFullYear()),i=(new Date).getFullYear(),u=e=>{const o={ArrowLeft:-1,ArrowRight:1,ArrowUp:-4,ArrowDown:4,PageUp:-E,PageDown:E}[e.key];void 0!==o&&(e.preventDefault(),a(v(F(t),o)))};return e("div",{role:"grid",className:"flex h-full flex-col justify-evenly",children:[0,1,2].map(a=>e("div",{role:"row",className:"grid grid-cols-4 gap-1",children:[0,1,2,3].map(m=>{const d=c+4*a+m;return e(H,{label:String(d),selected:n.some(e=>e.getFullYear()===d),current:d===i,disabled:P(r)&&d<r.getFullYear()||P(l)&&d>l.getFullYear(),focused:d===t.getFullYear(),className:`h-(--_mp-cell) w-full ${h[o]}`,onClick:()=>s(d),onKeyDown:u,children:d},d)})},a))})}function q(e){const o=e.parentElement;if(!o)return;const t=e.getBoundingClientRect(),n=o.getBoundingClientRect(),r=t.top-n.top-o.clientTop+o.scrollTop,l=r+t.height;r<o.scrollTop?o.scrollTop=r:l>o.scrollTop+o.clientHeight&&(o.scrollTop=l-o.clientHeight)}export function MPTimeGrid({size:t,locale:r,value:l,referenceDate:a,onChange:s,hour12:c,showSeconds:i,hourStep:m,minuteStep:d,secondStep:f,shouldDisableTime:g,autoFocus:v=!1,labels:w}){const x=l??a,y=n.useRef(null),[D,S]=n.useMemo(()=>_(r),[r]);n.useEffect(()=>{const e=y.current;if(e?.querySelectorAll('[data-chosen="true"]').forEach(q),v){const o=e?.querySelector('[role="listbox"]');(o?.querySelector('[data-chosen="true"]')??o?.querySelector('[role="option"]'))?.focus({preventScroll:!0})}},[v]);const M=n.useMemo(()=>{const e=Math.ceil((c?12:24)/m),o=Array.from({length:e},(e,o)=>o*m);return c?o.map(e=>0===e?12:e):o},[c,m]),N=n.useMemo(()=>Array.from({length:Math.ceil(60/d)},(e,o)=>o*d),[d]),P=n.useMemo(()=>Array.from({length:Math.ceil(60/f)},(e,o)=>o*f),[f]),C=e=>String(e).padStart(2,"0"),k=c?x.getHours()%12||12:x.getHours(),z=(n,r,a,i,m)=>e("div",{role:"listbox","aria-label":r,className:["mp-time-grid__column flex flex-col gap-0.5 overflow-y-auto overscroll-contain","h-[calc(var(--_mp-cell)*7)] w-[calc(var(--_mp-cell)*1.75)]","scroll-py-0.5 [scrollbar-width:thin]"].join(" "),children:a.map(r=>{const a=((e,o)=>j(x,"hour"===e?{hours:c?o%12+(x.getHours()>=12?12:0):o}:"minute"===e?{minutes:o}:"second"===e?{seconds:o}:{hours:x.getHours()%12+12*o}))(n,r),d=null!==l&&i(r),p=g?.(a,n)??!1;return o("button",{type:"button",role:"option","aria-selected":d,"aria-disabled":p||void 0,"data-chosen":d?"true":void 0,className:[$,"rounded-mp-full h-(--_mp-cell) w-full shrink-0",h[t],p?"cursor-default text-mp-on-surface/38":d?"bg-(--_mp-accent) text-(--_mp-on-accent)":"text-mp-on-surface"].join(" "),onClick:()=>{p||s(a)},children:[p?null:e(u,{}),m(r)]},r)})},n);return o("div",{ref:y,className:"mp-time-grid flex gap-1",style:{"--_mp-cell":R[t]},children:[z("hour",w.hour,M,e=>e===k,e=>c?String(e):C(e)),z("minute",w.minute,N,e=>e===x.getMinutes(),C),i?z("second",w.second,P,e=>e===x.getSeconds(),C):null,c?z("meridiem",w.meridiem,[0,1],e=>(x.getHours()>=12?1:0)===e,e=>0===e?D:S):null,e("span",{className:p,"aria-live":"polite",children:null===l?"":b(r,{hour:"numeric",minute:"2-digit",...i?{second:"2-digit"}:{}}).format(l)})]})}
+import{jsx as e,jsxs as o,Fragment as t}from"react/jsx-runtime";import*as n from"react";import{MPButton as r}from"../components/button/MPButton";import{MPIcon as l}from"../components/icon/MPIcon";import{MPIconButton as a}from"../components/icon-button/MPIconButton";import{ChevronDownIcon as s,ChevronLeftIcon as c,ChevronRightIcon as i}from"../constants/icons";import{MPStateLayer as u}from"./StateLayer";import{CONTROL_ICON as m,META_TEXT as d,PROSE_TEXT as h}from"./scale";import{VISUALLY_HIDDEN as p}from"./visually-hidden";import{addDays as f,addMonths as g,addYears as v,calendarWeeks as y,compareDay as w,dateFormatter as x,daysInMonth as b,isDayOutside as D,isMonthBeforeYear as S,isSameDay as N,isSameMonth as M,isValidDate as P,makeDate as _,meridiemLabels as C,monthLabels as k,startOfDay as z,startOfMonth as F,today as Y,weekdayLabels as A,withTime as E,YEAR_PAGE_SIZE as j,yearPageStart as B}from"./date";const R={xs:"1.75rem",sm:"2rem",md:"2.5rem",lg:"2.75rem",xl:"3rem"},T={xs:"xs",sm:"xs",md:"sm",lg:"sm",xl:"md"},$=["group relative flex cursor-pointer items-center justify-center overflow-hidden","box-border appearance-none bg-transparent font-[inherit] tabular-nums select-none","transition-[background-color,border-color,color]","duration-(--mp-sys-motion-duration-short4)","outline-mp-secondary focus-visible:z-10 focus-visible:outline-2","focus-visible:outline-offset-[-2px] focus-visible:outline-solid outline-none"].join(" ");function H({children:t,label:n,selected:r,inRange:l=!1,rangeEdge:a=null,current:s=!1,muted:c=!1,disabled:i=!1,focused:m=!1,className:d,onClick:h,onPointerEnter:p,onKeyDown:f}){return o("button",{type:"button",role:"gridcell","aria-label":n,"aria-selected":r,"aria-current":s?"date":void 0,"aria-disabled":i||void 0,tabIndex:m?0:-1,"data-focus-target":m?"true":void 0,className:[$,"start"===a?"rounded-s-mp-full":"end"===a?"rounded-e-mp-full":"middle"===a?"rounded-none":"rounded-mp-full",i?"cursor-default text-mp-on-surface/38":r?"bg-(--_mp-accent) text-(--_mp-on-accent)":l?"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)":s?"border border-(--_mp-accent) text-(--_mp-accent)":c?"text-mp-on-surface-variant":"text-mp-on-surface",d??""].filter(Boolean).join(" "),onClick:()=>{i||h()},onPointerEnter:p,onKeyDown:f,children:[i?null:e(u,{}),t]})}function K({size:n,color:u,view:d,month:p,locale:f,labels:g,showPreviousButton:v,showNextButton:y,onStep:w,onViewChange:x}){const b=k(f,"long")[p.getMonth()],D=String(p.getFullYear()),N=S(f),M=T[n],P="day"===d?[g.previousMonth,g.nextMonth]:"month"===d?[g.previousYear,g.nextYear]:[g.previousYears,g.nextYears],_=(o,t)=>t?e(a,{size:M,color:u,label:P[-1===o?0:1],icon:e(l,{icon:-1===o?c:i,size:m[M],className:"rtl:rotate-180"}),onClick:()=>w(o)}):e("span",{"aria-hidden":"true",className:"size-(--_mp-cell)"}),C=o=>e(l,{icon:s,size:m[M],className:["transition-transform duration-(--mp-sys-motion-duration-short4)",o?"rotate-180":""].filter(Boolean).join(" ")}),z=e(r,{variant:"text",size:M,color:u,"aria-label":g.chooseMonth,"aria-expanded":"month"===d,endIcon:C("month"===d),onClick:()=>x("month"===d?"day":"month"),children:b},"month"),F=e(r,{variant:"text",size:M,color:u,className:"tabular-nums","aria-label":g.chooseYear,"aria-expanded":"year"===d,endIcon:C("year"===d),onClick:()=>x("year"===d?"day":"year"),children:D},"year"),Y=B(p.getFullYear());return o("div",{className:"flex items-center justify-between gap-1",children:[_(-1,v),e("div",{className:"flex min-w-0 flex-1 items-center justify-center gap-1",children:"year"===d?e("span",{className:`text-mp-on-surface flex h-(--_mp-cell) items-center tabular-nums ${h[n]}`,children:`${Y}–${Y+j-1}`}):"month"===d?F:o(t,N?{children:[z,F]}:{children:[F,z]})}),_(1,y)]})}export function MPCalendar({size:t,color:r,locale:l,weekStartsOn:a,month:s,onMonthChange:c,selected:i,rangeStart:u=null,rangeEnd:m=null,onSelect:d,onPreviewChange:h,minDate:p,maxDate:f,shouldDisableDate:y,showOutsideDays:w=!0,autoFocus:x=!1,showPreviousButton:b=!0,showNextButton:S=!0,labels:N}){const[C,k]=n.useState("day"),A=n.useMemo(()=>i.filter(P),[i]),[E,B]=n.useState(()=>{const e=A.find(e=>M(e,s));return e?z(e):M(Y(),s)?Y():F(s)}),T=n.useRef(x),$=n.useRef(null);n.useEffect(()=>{B(e=>M(e,s)?e:F(s))},[s]),n.useLayoutEffect(()=>{T.current&&(T.current=!1,$.current?.querySelector('[data-focus-target="true"]')?.focus({preventScroll:!0}))});const H=n.useCallback(e=>D(e,p,f)||(y?.(e)??!1),[p,f,y]),q=e=>{T.current=!0,k(e)},I=e=>{T.current=!0,c(e)};return o("div",{ref:$,className:"mp-calendar flex flex-col gap-1",style:{"--_mp-cell":R[t]},onPointerLeave:()=>h?.(null),children:[e(K,{size:t,color:r,view:C,month:s,locale:l,labels:N,showPreviousButton:b,showNextButton:S,onStep:e=>{c("day"===C?g(s,e):v(s,"month"===C?e:e*j))},onViewChange:q}),e("div",{className:"h-[calc(var(--_mp-cell)*7)] w-[calc(var(--_mp-cell)*7)]",children:"day"===C?e(L,{size:t,locale:l,weekStartsOn:a,month:s,chosen:A,rangeStart:u,rangeEnd:m,focusedDate:E,showOutsideDays:w,isDisabled:H,onSelect:e=>{B(e),d(e)},onPreviewChange:h,onMoveFocus:e=>{T.current=!0,B(e),M(e,s)||c(F(e))}}):"month"===C?e(O,{size:t,locale:l,month:s,chosen:A,minDate:p,maxDate:f,onMoveCursor:I,onPick:e=>{c(_(s.getFullYear(),e,1)),q("day")}}):e(U,{size:t,month:s,chosen:A,minDate:p,maxDate:f,onMoveCursor:I,onPick:e=>{c(_(e,s.getMonth(),1)),q("month")}})})]})}function L({size:t,locale:r,weekStartsOn:l,month:a,chosen:s,rangeStart:c,rangeEnd:i,focusedDate:u,showOutsideDays:m,isDisabled:p,onSelect:v,onPreviewChange:b,onMoveFocus:D}){const S=A(r,l,"narrow"),_=A(r,l,"long"),C=(z=i,P(k=c)&&P(z)?w(k,z)<=0?[k,z]:[z,k]:null);var k,z;const F=Y(),E=n.useMemo(()=>{const e=x(r,{dateStyle:"full"});return y(a,l).map(o=>o.map(o=>({date:o,label:e.format(o)})))},[a,l,r]),j=n.useRef(null),B=n.useRef(a);n.useLayoutEffect(()=>{const e=j.current,o=B.current;if(B.current=a,!e||M(o,a))return;const t=o.getTime()<a.getTime(),n="rtl"===getComputedStyle(e).direction;e.style.setProperty("--_mp-calendar-from",String(t===n?-1:1)),e.dataset.mpPaged="true",e.style.animationName="none",e.offsetWidth,e.style.animationName=""},[a]);return o("div",{role:"grid","aria-label":x(r,{year:"numeric",month:"long"}).format(a),className:"flex h-full flex-col",children:[e("div",{role:"rowgroup",children:e("div",{role:"row",className:"grid grid-cols-7",children:S.map((o,t)=>e("span",{role:"columnheader","aria-label":_[t],className:`text-mp-on-surface-variant flex h-(--_mp-cell) items-center justify-center select-none ${d}`,children:o},t))})}),e("div",{ref:j,role:"rowgroup",className:"mp-calendar__page flex flex-1 flex-col",children:E.map((o,n)=>e("div",{role:"row",className:"grid grid-cols-7",children:o.map(({date:o,label:n})=>{const r=!M(o,a);if(r&&!m)return e("span",{role:"gridcell","aria-hidden":"true",className:"size-(--_mp-cell)"},o.getTime());const c=s.some(e=>N(e,o)),i=null!==C&&w(o,C[0])>=0&&w(o,C[1])<=0,d=null!==C&&i&&N(o,C[0]),y=null!==C&&i&&N(o,C[1]);return e(H,{label:n,selected:c,inRange:i&&!c,rangeEdge:i?d&&y?"both":d?"start":y?"end":"middle":null,current:N(o,F)&&!c,muted:r,disabled:p(o),focused:N(o,u),className:`size-(--_mp-cell) ${h[t]}`,onClick:()=>v(o),onPointerEnter:()=>b?.(o),onKeyDown:e=>((e,o)=>{const t=(o.getDay()-l+7)%7,n={ArrowLeft:()=>f(o,-1),ArrowRight:()=>f(o,1),ArrowUp:()=>f(o,-7),ArrowDown:()=>f(o,7),Home:()=>f(o,-t),End:()=>f(o,6-t),PageUp:()=>g(o,e.shiftKey?-12:-1),PageDown:()=>g(o,e.shiftKey?12:1)}[e.key];n&&(e.preventDefault(),D(n()))})(e,o),children:o.getDate()},o.getTime())})},n))})]})}function O({size:o,locale:t,month:n,chosen:r,minDate:l,maxDate:a,onMoveCursor:s,onPick:c}){const i=k(t,"short"),u=k(t,"long"),m=n.getFullYear(),d=new Date,p=e=>{const o={ArrowLeft:-1,ArrowRight:1,ArrowUp:-3,ArrowDown:3,PageUp:-12,PageDown:12}[e.key];void 0!==o&&(e.preventDefault(),s(g(F(n),o)))};return e("div",{role:"grid",className:"flex h-full flex-col justify-evenly",children:[0,1,2,3].map(t=>e("div",{role:"row",className:"grid grid-cols-3 gap-1",children:[0,1,2].map(s=>{const f=3*t+s,g=_(m,f,1),v=_(m,f,b(m,f));return e(H,{label:`${u[f]} ${m}`,selected:r.some(e=>e.getFullYear()===m&&e.getMonth()===f),current:d.getFullYear()===m&&d.getMonth()===f,disabled:P(l)&&w(v,l)<0||P(a)&&w(g,a)>0,focused:f===n.getMonth(),className:`h-(--_mp-cell) w-full ${h[o]}`,onClick:()=>c(f),onKeyDown:p,children:i[f]},f)})},t))})}function U({size:o,month:t,chosen:n,minDate:r,maxDate:l,onMoveCursor:a,onPick:s}){const c=B(t.getFullYear()),i=(new Date).getFullYear(),u=e=>{const o={ArrowLeft:-1,ArrowRight:1,ArrowUp:-4,ArrowDown:4,PageUp:-j,PageDown:j}[e.key];void 0!==o&&(e.preventDefault(),a(v(F(t),o)))};return e("div",{role:"grid",className:"flex h-full flex-col justify-evenly",children:[0,1,2].map(a=>e("div",{role:"row",className:"grid grid-cols-4 gap-1",children:[0,1,2,3].map(m=>{const d=c+4*a+m;return e(H,{label:String(d),selected:n.some(e=>e.getFullYear()===d),current:d===i,disabled:P(r)&&d<r.getFullYear()||P(l)&&d>l.getFullYear(),focused:d===t.getFullYear(),className:`h-(--_mp-cell) w-full ${h[o]}`,onClick:()=>s(d),onKeyDown:u,children:d},d)})},a))})}function q(e){const o=e.parentElement;if(!o)return;const t=e.getBoundingClientRect(),n=o.getBoundingClientRect(),r=t.top-n.top-o.clientTop+o.scrollTop,l=r+t.height;r<o.scrollTop?o.scrollTop=r:l>o.scrollTop+o.clientHeight&&(o.scrollTop=l-o.clientHeight)}export function MPTimeGrid({size:t,locale:r,value:l,referenceDate:a,onChange:s,hour12:c,showSeconds:i,hourStep:m,minuteStep:d,secondStep:f,shouldDisableTime:g,autoFocus:v=!1,labels:y}){const w=l??a,b=n.useRef(null),[D,S]=n.useMemo(()=>C(r),[r]);n.useEffect(()=>{const e=b.current;if(e?.querySelectorAll('[data-chosen="true"]').forEach(q),v){const o=e?.querySelector('[role="listbox"]');(o?.querySelector('[data-chosen="true"]')??o?.querySelector('[role="option"]'))?.focus({preventScroll:!0})}},[v]);const N=n.useMemo(()=>{const e=Math.ceil((c?12:24)/m),o=Array.from({length:e},(e,o)=>o*m);return c?o.map(e=>0===e?12:e):o},[c,m]),M=n.useMemo(()=>Array.from({length:Math.ceil(60/d)},(e,o)=>o*d),[d]),P=n.useMemo(()=>Array.from({length:Math.ceil(60/f)},(e,o)=>o*f),[f]),_=e=>String(e).padStart(2,"0"),k=c?w.getHours()%12||12:w.getHours(),z=(n,r,a,i,m)=>e("div",{role:"listbox","aria-label":r,className:["mp-time-grid__column flex flex-col gap-0.5 overflow-y-auto overscroll-contain","h-[calc(var(--_mp-cell)*7)] w-[calc(var(--_mp-cell)*1.75)]","scroll-py-0.5 [scrollbar-width:thin]"].join(" "),children:a.map(r=>{const a=((e,o)=>E(w,"hour"===e?{hours:c?o%12+(w.getHours()>=12?12:0):o}:"minute"===e?{minutes:o}:"second"===e?{seconds:o}:{hours:w.getHours()%12+12*o}))(n,r),d=null!==l&&i(r),p=g?.(a,n)??!1;return o("button",{type:"button",role:"option","aria-selected":d,"aria-disabled":p||void 0,"data-chosen":d?"true":void 0,className:[$,"rounded-mp-full h-(--_mp-cell) w-full shrink-0",h[t],p?"cursor-default text-mp-on-surface/38":d?"bg-(--_mp-accent) text-(--_mp-on-accent)":"text-mp-on-surface"].join(" "),onClick:()=>{p||s(a)},children:[p?null:e(u,{}),m(r)]},r)})},n);return o("div",{ref:b,className:"mp-time-grid flex gap-1",style:{"--_mp-cell":R[t]},children:[z("hour",y.hour,N,e=>e===k,e=>c?String(e):_(e)),z("minute",y.minute,M,e=>e===w.getMinutes(),_),i?z("second",y.second,P,e=>e===w.getSeconds(),_):null,c?z("meridiem",y.meridiem,[0,1],e=>(w.getHours()>=12?1:0)===e,e=>0===e?D:S):null,e("span",{className:p,"aria-live":"polite",children:null===l?"":x(r,{hour:"numeric",minute:"2-digit",...i?{second:"2-digit"}:{}}).format(l)})]})}