@univerjs/design 0.10.0 → 0.10.1

package/lib/cjs/index.js

@@ -106,7 +106,7 @@ For more information, see https://radix-ui.com/primitives/docs/components/${t.do
               univer-my-0 univer-text-lg univer-font-semibold univer-leading-none univer-tracking-tight
               univer-text-gray-900
               dark:!univer-text-white
-            `,e),...t}));Qf.displayName=qf.displayName;const Jf=P.forwardRef(({className:e,...t},n)=>M.jsx(Uf,{ref:n,className:Ce("univer-text-sm univer-text-gray-500",e),...t}));Jf.displayName=Uf.displayName;function Hy(e={}){const t=P.useCallback(()=>{const{innerWidth:v,innerHeight:p}=window;return{x:Math.max(0,(v-0)/2),y:Math.max(0,(p-0)/2)}},[]),{defaultPosition:n=t(),enabled:r=!1}=e,[o,a]=P.useState(n),[i,s]=P.useState(!1),u=P.useRef(null),c=P.useRef({x:0,y:0}),d=P.useRef({x:0,y:0}),l=P.useRef(!1);P.useEffect(()=>{if(!u.current||l.current||e.defaultPosition)return;const{width:v,height:p}=u.current.getBoundingClientRect(),{innerWidth:y,innerHeight:b}=window,w=Math.max(0,(y-v)/2),C=Math.max(0,(b-p)/2);a({x:w,y:C}),c.current={x:w,y:C},l.current=!0},[e.defaultPosition]);const h=P.useCallback((v,p)=>{if(!u.current)return{x:v,y:p};const y=u.current.getBoundingClientRect(),{clientWidth:b,clientHeight:w}=document.documentElement;let C=c.current.x+(v-d.current.x),S=c.current.y+(p-d.current.y);return C<0&&(C=0),S<0&&(S=0),C+y.width>b&&(C=b-y.width),S+y.height>w&&(S=w-y.height),{x:C,y:S}},[]),m=P.useCallback(v=>{r&&(v.preventDefault(),v.stopPropagation(),c.current={...o},d.current={x:v.clientX,y:v.clientY},s(!0),document.body.style.userSelect="none")},[r,o]),g=P.useCallback(v=>{if(!i)return;v.preventDefault(),v.stopPropagation();const p=h(v.clientX,v.clientY);a(p)},[i,h]),x=P.useCallback(()=>{s(!1),document.body.style.userSelect=""},[]);return P.useEffect(()=>{if(r)return document.addEventListener("mousemove",g),document.addEventListener("mouseup",x),()=>{document.removeEventListener("mousemove",g),document.removeEventListener("mouseup",x)}},[r,g,x]),{position:o,isDragging:i,elementRef:u,setElementRef:v=>{if(u.current=v,v&&!l.current&&!e.defaultPosition){const{width:p,height:y}=v.getBoundingClientRect(),{innerWidth:b,innerHeight:w}=window,C=Math.max(0,(b-p)/2),S=Math.max(0,(w-y)/2);a({x:C,y:S}),c.current={x:C,y:S},l.current=!0}},handleMouseDown:m}}function Pl(e){var $,L,N,z;const{className:t,children:n,style:r,open:o=!1,title:a,width:i,draggable:s=!1,defaultPosition:u,destroyOnClose:c=!1,footer:d,mask:l=!0,keyboard:h=!0,closable:m=!0,maskClosable:g=!0,showOk:x,showCancel:v,onOpenChange:p,onClose:y,onOk:b,onCancel:w}=e,{locale:C}=P.useContext(gn),{position:S,isDragging:R,setElementRef:E,handleMouseDown:D}=Hy({defaultPosition:u,enabled:s}),O=d!=null?d:x||v?M.jsxs("div",{className:"univer-flex univer-justify-end univer-gap-2",children:[v&&M.jsx(Ln,{onClick:w,children:(L=($=C==null?void 0:C.Confirm)==null?void 0:$.cancel)!=null?L:"Cancel"}),x&&M.jsx(Ln,{variant:"primary",onClick:b,children:(z=(N=C==null?void 0:C.Confirm)==null?void 0:N.confirm)!=null?z:"OK"})]}):null,I=P.useCallback(k=>{k&&s&&E(k)},[s,E]),j=P.useCallback(k=>{!g&&!k||(p==null||p(k),k||y==null||y())},[y,p]);function H(){p==null||p(!1),y==null||y()}return M.jsx(Fy,{open:o,onOpenChange:j,modal:l!==!1,children:M.jsxs(Kf,{ref:I,className:Ce(t,{"!univer-animate-none":s}),style:{...r,width:i?typeof i=="number"?`${i}px`:i:void 0,...s?{position:"absolute",margin:0,left:0,top:0,transform:`translate(${S.x}px, ${S.y}px)`,transition:R?"none":void 0,cursor:R?"grabbing":void 0}:{}},closable:m,onClickClose:H,children:[M.jsxs(Xf,{className:Ce({"!univer-hidden":!a}),"data-drag-handle":s?"true":void 0,style:{cursor:s?"grab":void 0,userSelect:s?"none":void 0,touchAction:s?"none":void 0},onMouseDown:s?D:void 0,children:[M.jsx(Qf,{children:a}),M.jsx(Jf,{className:"univer-hidden"})]}),n,O&&M.jsx(Zf,{children:O})]})})}const Xa=(e,t,n)=>{t=t/100,n=n/100;const r=n*t,o=r*(1-Math.abs(e/60%2-1)),a=n-r;let i=0,s=0,u=0;return e>=0&&e<60?(i=r,s=o,u=0):e>=60&&e<120?(i=o,s=r,u=0):e>=120&&e<180?(i=0,s=r,u=o):e>=180&&e<240?(i=0,s=o,u=r):e>=240&&e<300?(i=o,s=0,u=r):e>=300&&e<360&&(i=r,s=0,u=o),[Math.round((i+a)*255),Math.round((s+a)*255),Math.round((u+a)*255)]},ev=(e,t,n)=>{const r=o=>o.toString(16).padStart(2,"0");return`#${r(e)}${r(t)}${r(n)}`},tv=(e,t,n)=>{e/=255,t/=255,n/=255;const r=Math.max(e,t,n),o=Math.min(e,t,n),a=r-o;let i=0,s=0;const u=r;return r!==0&&(s=a/r),a!==0&&(r===e?i=(t-n)/a+(t<n?6:0):r===t?i=(n-e)/a+2:r===n&&(i=(e-t)/a+4),i*=60),[i,s*100,u*100]},Dl=e=>{const[t,n,r]=e.match(/\w\w/g).map(o=>Number.parseInt(o,16));return tv(t,n,r)},Za=(e,t,n)=>{const[r,o,a]=Xa(e,t,n);return ev(r,o,a)};function Vy({hsv:e,onChange:t}){const[n,r]=P.useState(""),o=P.useMemo(()=>Za(e[0],e[1],e[2]),[e]);P.useEffect(()=>{r(o.replace(/^#/,""))},[o]);const a=u=>/^[0-9A-Fa-f]{6}$/.test(u),i=u=>{const c=u.target.value.trim();if(!(c.length>6)&&!(c!==""&&!/^[0-9A-Fa-f]*$/.test(c))&&(r(c),a(c))){const d=Dl(c);d&&t&&t(...d)}},s=()=>{a(n)||r(o.replace(/^#/,""))};return M.jsxs(M.Fragment,{children:[M.jsx("input",{className:"univer-w-full univer-px-2 !univer-pl-4 univer-uppercase focus:univer-border-primary-500 focus:univer-outline-none",value:n,onChange:i,onBlur:s,maxLength:6,spellCheck:!1}),M.jsx("span",{className:"univer-absolute univer-left-1.5 univer-top-1/2 -univer-translate-y-1/2 univer-text-sm univer-text-gray-400",children:"#"})]})}function Wy({hsv:e,onChange:t}){const[n,r]=P.useState({r:0,g:0,b:0});P.useEffect(()=>{const[i,s,u]=Xa(e[0],e[1],e[2]);r({r:Math.round(i),g:Math.round(s),b:Math.round(u)})},[e]);const o=(i,s)=>{if(s!==""&&!/^\d*$/.test(s))return;const u=s===""?0:Number.parseInt(s,10);if(u>255)return;const c={...n,[i]:u};if(r(c),t){const d=tv(c.r,c.g,c.b);t(...d)}},a=()=>{const[i,s,u]=Xa(e[0],e[1],e[2]);r({r:Math.round(i),g:Math.round(s),b:Math.round(u)})};return M.jsxs("div",{className:"univer-flex univer-items-center univer-gap-2 [&>input]:univer-w-11",children:[M.jsx("input",{value:n.r,onChange:i=>o("r",i.target.value),onBlur:a,maxLength:3}),M.jsx("input",{value:n.g,onChange:i=>o("g",i.target.value),onBlur:a,maxLength:3}),M.jsx("input",{value:n.b,onChange:i=>o("b",i.target.value),onBlur:a,maxLength:3})]})}function By({hsv:e,onChange:t}){return M.jsx("div",{className:"dark:![&_input]:univer-border-gray-600 dark:![&_input]:univer-text-white univer-flex univer-gap-2 [&_input]:univer-box-border [&_input]:univer-flex [&_input]:univer-h-7 [&_input]:univer-items-center [&_input]:univer-rounded [&_input]:univer-border [&_input]:univer-border-solid [&_input]:univer-border-gray-200 [&_input]:univer-bg-transparent [&_input]:univer-px-1.5 [&_input]:univer-text-sm [&_input]:univer-text-gray-700 [&_input]:univer-outline-none",children:M.jsxs("div",{className:"univer-relative univer-flex univer-flex-1 univer-gap-2",children:[M.jsx(Vy,{hsv:e,onChange:t}),M.jsx(Wy,{hsv:e,onChange:t})]})})}const Yy=[["#FFFFFF","#E1EFFE","#FDE8E8","#FEECDC","#FFF4B9","#DEF7EC","#D5F5F6","#EDEBFE","#FCE8F3"],["#CDD0D8","#A4CAFE","#F8B4B4","#FDBA8C","#FAC815","#84E1BC","#7EDCE2","#CABFFD","#F8B4D9"],["#979DAC","#3F83F8","#F05252","#FF5A1F","#D49D0F","#0DA471","#0694A2","#9061F9","#E74694"],["#414657","#1A56DB","#C81E1E","#B43403","#9A6D15","#046C4E","#036672","#6C2BD9","#BF125D"],["#000000","#233876","#771D1D","#771D1D","#634312","#014737","#014451","#4A1D96","#751A3D"]];function qy({hsv:e,onChange:t}){const n=P.useCallback(o=>{const[a,i,s]=Dl(o);t(a,i,s)},[t]),r=Za(e[0],e[1],e[2]);return M.jsx("div",{"data-u-comp":"color-picker-presets",className:"univer-grid univer-content-center univer-gap-2",children:Yy.map((o,a)=>M.jsx("div",{className:"univer-grid univer-grid-flow-col univer-items-center univer-justify-between univer-gap-2",children:o.map((i,s)=>M.jsx("button",{type:"button",className:Ce("univer-box-border univer-h-5 univer-w-5 univer-cursor-pointer univer-rounded-full univer-border univer-border-solid univer-border-transparent univer-bg-gray-300 univer-transition-shadow",{"univer-ring-2 univer-ring-offset-2 univer-ring-offset-white dark:!univer-ring-primary-600 dark:!univer-ring-offset-gray-600":i.toUpperCase()===r.toUpperCase(),"!univer-border-gray-200":a===0&&s===0}),style:{backgroundColor:i},onClick:()=>n(i)},s))},a))})}function Uy({hsv:e,onChange:t,onChanged:n}){const r=P.useRef(null),o=P.useRef(null),[a,i]=P.useState(!1);P.useEffect(()=>{const l=r.current;if(!l)return;const h=l.getContext("2d");if(!h)return;const m=h.createLinearGradient(0,0,l.width,0);m.addColorStop(0,`hsl(${e[0]}, 0%, 50%)`),m.addColorStop(1,`hsl(${e[0]}, 100%, 50%)`),h.fillStyle=m,h.fillRect(0,0,l.width,l.height);const g=h.createLinearGradient(0,0,0,l.height);g.addColorStop(0,"rgba(255, 255, 255, 0)"),g.addColorStop(1,"rgba(0, 0, 0, 1)"),h.fillStyle=g,h.fillRect(0,0,l.width,l.height)},[e]);const s=l=>{l.stopPropagation();const h=r.current;if(!h)return;const m=h.getBoundingClientRect(),g=Math.max(0,Math.min(l.clientX-m.left,m.width)),x=Math.max(0,Math.min(l.clientY-m.top,m.height)),v=g/m.width*100,p=100-x/m.height*100;t(e[0],v,p)},u=P.useCallback(()=>{i(!1)},[e]);function c(){n==null||n(e[0],e[1],e[2])}P.useEffect(()=>{var l;return(l=o.current)==null||l.addEventListener("mouseup",c),window.addEventListener("pointerup",u),window.addEventListener("mouseup",u),()=>{var h;(h=o.current)==null||h.removeEventListener("mouseup",c),window.removeEventListener("pointerup",u),window.removeEventListener("mouseup",u)}},[e]);const d=()=>{var p,y,b,w;const m=(y=(p=o.current)==null?void 0:p.clientWidth)!=null?y:0,g=(w=(b=o.current)==null?void 0:b.clientHeight)!=null?w:0,x=e[1]/100*m-8,v=(100-e[2])/100*g-8;return{transform:`translate(${x}px, ${v}px)`,transition:a?"none":"transform 0.1s ease-out"}};return P.useEffect(()=>{const l=()=>{i(!1)};return window.addEventListener("pointerup",l),window.addEventListener("mouseup",l),()=>{window.removeEventListener("pointerup",l),window.removeEventListener("mouseup",l)}},[]),M.jsxs("div",{"data-u-comp":"color-picker-spectrum",ref:o,className:"univer-relative univer-overflow-hidden",children:[M.jsx("canvas",{ref:r,className:"univer-h-full univer-w-full univer-cursor-crosshair univer-rounded",onPointerDown:l=>{i(!0),s(l)},onPointerMove:l=>a&&s(l)}),M.jsx("div",{className:"univer-pointer-events-none univer-absolute univer-left-0 univer-top-0 univer-size-4 univer-rounded-full univer-border-2 univer-border-white univer-shadow-md univer-ring-2 univer-ring-white univer-will-change-transform",style:d()})]})}function Gy({hsv:e,onChange:t,onChanged:n}){const[r,o]=P.useState(!1),a=P.useRef(null),i=P.useRef(null),s=P.useMemo(()=>{var h,m;return(m=(h=i.current)==null?void 0:h.clientWidth)!=null?m:0},[]),u=P.useCallback(h=>{const m=a.current;if(!m)return;const g=m.getBoundingClientRect(),x=g.width-s,v=Math.max(0,Math.min(h-g.left,x)),p=Math.round(v/x*360);t(p,e[1],e[2])},[e,s,t]),c=P.useCallback(h=>{h.stopPropagation(),r&&u(h.clientX)},[r,u]),d=P.useCallback(()=>{o(!1),n==null||n(e[0],e[1],e[2])},[e,n]);P.useEffect(()=>(r&&(window.addEventListener("pointermove",c),window.addEventListener("pointerup",d),window.addEventListener("mouseup",d)),()=>{window.removeEventListener("pointermove",c),window.removeEventListener("pointerup",d),window.removeEventListener("mouseup",d)}),[r,c,d]);const l=()=>{var m;return`${Math.min(Math.max(e[0],0),360)/360*(100-s/((m=a.current)==null?void 0:m.clientWidth)*100)}%`};return M.jsx("div",{"data-u-comp":"color-picker-hue-slider",className:"univer-relative univer-w-full univer-select-none",children:M.jsx("div",{ref:a,className:"univer-relative univer-h-2 univer-w-full univer-cursor-pointer univer-rounded-full univer-shadow-inner",style:{background:`linear-gradient(to right,
+            `,e),...t}));Qf.displayName=qf.displayName;const Jf=P.forwardRef(({className:e,...t},n)=>M.jsx(Uf,{ref:n,className:Ce("univer-text-sm univer-text-gray-500",e),...t}));Jf.displayName=Uf.displayName;function Hy(e={}){const t=P.useCallback(()=>{const{innerWidth:v,innerHeight:p}=window;return{x:Math.max(0,(v-0)/2),y:Math.max(0,(p-0)/2)}},[]),{defaultPosition:n=t(),enabled:r=!1}=e,[o,a]=P.useState(n),[i,s]=P.useState(!1),u=P.useRef(null),c=P.useRef({x:0,y:0}),d=P.useRef({x:0,y:0}),l=P.useRef(!1);P.useEffect(()=>{if(!u.current||l.current||e.defaultPosition)return;const{width:v,height:p}=u.current.getBoundingClientRect(),{innerWidth:y,innerHeight:b}=window,w=Math.max(0,(y-v)/2),C=Math.max(0,(b-p)/2);a({x:w,y:C}),c.current={x:w,y:C},l.current=!0},[e.defaultPosition]);const h=P.useCallback((v,p)=>{if(!u.current)return{x:v,y:p};const y=u.current.getBoundingClientRect(),{clientWidth:b,clientHeight:w}=document.documentElement;let C=c.current.x+(v-d.current.x),S=c.current.y+(p-d.current.y);return C<0&&(C=0),S<0&&(S=0),C+y.width>b&&(C=b-y.width),S+y.height>w&&(S=w-y.height),{x:C,y:S}},[]),m=P.useCallback(v=>{r&&(v.preventDefault(),v.stopPropagation(),c.current={...o},d.current={x:v.clientX,y:v.clientY},s(!0),document.body.style.userSelect="none")},[r,o]),g=P.useCallback(v=>{if(!i)return;v.preventDefault(),v.stopPropagation();const p=h(v.clientX,v.clientY);a(p)},[i,h]),x=P.useCallback(()=>{s(!1),document.body.style.userSelect=""},[]);return P.useEffect(()=>{if(r)return document.addEventListener("mousemove",g),document.addEventListener("mouseup",x),()=>{document.removeEventListener("mousemove",g),document.removeEventListener("mouseup",x)}},[r,g,x]),{position:o,isDragging:i,elementRef:u,setElementRef:v=>{if(u.current=v,v&&!l.current&&!e.defaultPosition){const{width:p,height:y}=v.getBoundingClientRect(),{innerWidth:b,innerHeight:w}=window,C=Math.max(0,(b-p)/2),S=Math.max(0,(w-y)/2);a({x:C,y:S}),c.current={x:C,y:S},l.current=!0}},handleMouseDown:m}}function Pl(e){var $,L,N,z;const{className:t,children:n,style:r,open:o=!1,title:a,width:i,draggable:s=!1,defaultPosition:u,destroyOnClose:c=!1,footer:d,mask:l=!0,keyboard:h=!0,closable:m=!0,maskClosable:g=!0,showOk:x,showCancel:v,onOpenChange:p,onClose:y,onOk:b,onCancel:w}=e,{locale:C}=P.useContext(gn),{position:S,isDragging:R,setElementRef:E,handleMouseDown:D}=Hy({defaultPosition:u,enabled:s}),O=d!=null?d:x||v?M.jsxs("div",{className:"univer-flex univer-justify-end univer-gap-2",children:[v&&M.jsx(Ln,{onClick:w,children:(L=($=C==null?void 0:C.Confirm)==null?void 0:$.cancel)!=null?L:"Cancel"}),x&&M.jsx(Ln,{variant:"primary",onClick:b,children:(z=(N=C==null?void 0:C.Confirm)==null?void 0:N.confirm)!=null?z:"OK"})]}):null,I=P.useCallback(k=>{k&&s&&E(k)},[s,E]),j=P.useCallback(k=>{!g&&!k||(p==null||p(k),k||y==null||y())},[y,p]);function H(){p==null||p(!1),y==null||y()}return M.jsx(Fy,{open:o,onOpenChange:j,modal:l!==!1,children:M.jsxs(Kf,{ref:I,className:Ce(t,{"!univer-animate-none":s}),style:{...r,width:i?typeof i=="number"?`${i}px`:i:void 0,maxWidth:i?"initial":void 0,...s?{position:"absolute",margin:0,left:0,top:0,transform:`translate(${S.x}px, ${S.y}px)`,transition:R?"none":void 0,cursor:R?"grabbing":void 0}:{}},closable:m,onClickClose:H,children:[M.jsxs(Xf,{className:Ce({"!univer-hidden":!a}),"data-drag-handle":s?"true":void 0,style:{cursor:s?"grab":void 0,userSelect:s?"none":void 0,touchAction:s?"none":void 0},onMouseDown:s?D:void 0,children:[M.jsx(Qf,{children:a}),M.jsx(Jf,{className:"univer-hidden"})]}),n,O&&M.jsx(Zf,{children:O})]})})}const Xa=(e,t,n)=>{t=t/100,n=n/100;const r=n*t,o=r*(1-Math.abs(e/60%2-1)),a=n-r;let i=0,s=0,u=0;return e>=0&&e<60?(i=r,s=o,u=0):e>=60&&e<120?(i=o,s=r,u=0):e>=120&&e<180?(i=0,s=r,u=o):e>=180&&e<240?(i=0,s=o,u=r):e>=240&&e<300?(i=o,s=0,u=r):e>=300&&e<360&&(i=r,s=0,u=o),[Math.round((i+a)*255),Math.round((s+a)*255),Math.round((u+a)*255)]},ev=(e,t,n)=>{const r=o=>o.toString(16).padStart(2,"0");return`#${r(e)}${r(t)}${r(n)}`},tv=(e,t,n)=>{e/=255,t/=255,n/=255;const r=Math.max(e,t,n),o=Math.min(e,t,n),a=r-o;let i=0,s=0;const u=r;return r!==0&&(s=a/r),a!==0&&(r===e?i=(t-n)/a+(t<n?6:0):r===t?i=(n-e)/a+2:r===n&&(i=(e-t)/a+4),i*=60),[i,s*100,u*100]},Dl=e=>{const[t,n,r]=e.match(/\w\w/g).map(o=>Number.parseInt(o,16));return tv(t,n,r)},Za=(e,t,n)=>{const[r,o,a]=Xa(e,t,n);return ev(r,o,a)};function Vy({hsv:e,onChange:t}){const[n,r]=P.useState(""),o=P.useMemo(()=>Za(e[0],e[1],e[2]),[e]);P.useEffect(()=>{r(o.replace(/^#/,""))},[o]);const a=u=>/^[0-9A-Fa-f]{6}$/.test(u),i=u=>{const c=u.target.value.trim();if(!(c.length>6)&&!(c!==""&&!/^[0-9A-Fa-f]*$/.test(c))&&(r(c),a(c))){const d=Dl(c);d&&t&&t(...d)}},s=()=>{a(n)||r(o.replace(/^#/,""))};return M.jsxs(M.Fragment,{children:[M.jsx("input",{className:"univer-w-full univer-px-2 !univer-pl-4 univer-uppercase focus:univer-border-primary-500 focus:univer-outline-none",value:n,onChange:i,onBlur:s,maxLength:6,spellCheck:!1}),M.jsx("span",{className:"univer-absolute univer-left-1.5 univer-top-1/2 -univer-translate-y-1/2 univer-text-sm univer-text-gray-400",children:"#"})]})}function Wy({hsv:e,onChange:t}){const[n,r]=P.useState({r:0,g:0,b:0});P.useEffect(()=>{const[i,s,u]=Xa(e[0],e[1],e[2]);r({r:Math.round(i),g:Math.round(s),b:Math.round(u)})},[e]);const o=(i,s)=>{if(s!==""&&!/^\d*$/.test(s))return;const u=s===""?0:Number.parseInt(s,10);if(u>255)return;const c={...n,[i]:u};if(r(c),t){const d=tv(c.r,c.g,c.b);t(...d)}},a=()=>{const[i,s,u]=Xa(e[0],e[1],e[2]);r({r:Math.round(i),g:Math.round(s),b:Math.round(u)})};return M.jsxs("div",{className:"univer-flex univer-items-center univer-gap-2 [&>input]:univer-w-11",children:[M.jsx("input",{value:n.r,onChange:i=>o("r",i.target.value),onBlur:a,maxLength:3}),M.jsx("input",{value:n.g,onChange:i=>o("g",i.target.value),onBlur:a,maxLength:3}),M.jsx("input",{value:n.b,onChange:i=>o("b",i.target.value),onBlur:a,maxLength:3})]})}function By({hsv:e,onChange:t}){return M.jsx("div",{className:"dark:![&_input]:univer-border-gray-600 dark:![&_input]:univer-text-white univer-flex univer-gap-2 [&_input]:univer-box-border [&_input]:univer-flex [&_input]:univer-h-7 [&_input]:univer-items-center [&_input]:univer-rounded [&_input]:univer-border [&_input]:univer-border-solid [&_input]:univer-border-gray-200 [&_input]:univer-bg-transparent [&_input]:univer-px-1.5 [&_input]:univer-text-sm [&_input]:univer-text-gray-700 [&_input]:univer-outline-none",children:M.jsxs("div",{className:"univer-relative univer-flex univer-flex-1 univer-gap-2",children:[M.jsx(Vy,{hsv:e,onChange:t}),M.jsx(Wy,{hsv:e,onChange:t})]})})}const Yy=[["#FFFFFF","#E1EFFE","#FDE8E8","#FEECDC","#FFF4B9","#DEF7EC","#D5F5F6","#EDEBFE","#FCE8F3"],["#CDD0D8","#A4CAFE","#F8B4B4","#FDBA8C","#FAC815","#84E1BC","#7EDCE2","#CABFFD","#F8B4D9"],["#979DAC","#3F83F8","#F05252","#FF5A1F","#D49D0F","#0DA471","#0694A2","#9061F9","#E74694"],["#414657","#1A56DB","#C81E1E","#B43403","#9A6D15","#046C4E","#036672","#6C2BD9","#BF125D"],["#000000","#233876","#771D1D","#771D1D","#634312","#014737","#014451","#4A1D96","#751A3D"]];function qy({hsv:e,onChange:t}){const n=P.useCallback(o=>{const[a,i,s]=Dl(o);t(a,i,s)},[t]),r=Za(e[0],e[1],e[2]);return M.jsx("div",{"data-u-comp":"color-picker-presets",className:"univer-grid univer-content-center univer-gap-2",children:Yy.map((o,a)=>M.jsx("div",{className:"univer-grid univer-grid-flow-col univer-items-center univer-justify-between univer-gap-2",children:o.map((i,s)=>M.jsx("button",{type:"button",className:Ce("univer-box-border univer-h-5 univer-w-5 univer-cursor-pointer univer-rounded-full univer-border univer-border-solid univer-border-transparent univer-bg-gray-300 univer-transition-shadow",{"univer-ring-2 univer-ring-offset-2 univer-ring-offset-white dark:!univer-ring-primary-600 dark:!univer-ring-offset-gray-600":i.toUpperCase()===r.toUpperCase(),"!univer-border-gray-200":a===0&&s===0}),style:{backgroundColor:i},onClick:()=>n(i)},s))},a))})}function Uy({hsv:e,onChange:t,onChanged:n}){const r=P.useRef(null),o=P.useRef(null),[a,i]=P.useState(!1);P.useEffect(()=>{const l=r.current;if(!l)return;const h=l.getContext("2d");if(!h)return;const m=h.createLinearGradient(0,0,l.width,0);m.addColorStop(0,`hsl(${e[0]}, 0%, 50%)`),m.addColorStop(1,`hsl(${e[0]}, 100%, 50%)`),h.fillStyle=m,h.fillRect(0,0,l.width,l.height);const g=h.createLinearGradient(0,0,0,l.height);g.addColorStop(0,"rgba(255, 255, 255, 0)"),g.addColorStop(1,"rgba(0, 0, 0, 1)"),h.fillStyle=g,h.fillRect(0,0,l.width,l.height)},[e]);const s=l=>{l.stopPropagation();const h=r.current;if(!h)return;const m=h.getBoundingClientRect(),g=Math.max(0,Math.min(l.clientX-m.left,m.width)),x=Math.max(0,Math.min(l.clientY-m.top,m.height)),v=g/m.width*100,p=100-x/m.height*100;t(e[0],v,p)},u=P.useCallback(()=>{i(!1)},[e]);function c(){n==null||n(e[0],e[1],e[2])}P.useEffect(()=>{var l;return(l=o.current)==null||l.addEventListener("mouseup",c),window.addEventListener("pointerup",u),window.addEventListener("mouseup",u),()=>{var h;(h=o.current)==null||h.removeEventListener("mouseup",c),window.removeEventListener("pointerup",u),window.removeEventListener("mouseup",u)}},[e]);const d=()=>{var p,y,b,w;const m=(y=(p=o.current)==null?void 0:p.clientWidth)!=null?y:0,g=(w=(b=o.current)==null?void 0:b.clientHeight)!=null?w:0,x=e[1]/100*m-8,v=(100-e[2])/100*g-8;return{transform:`translate(${x}px, ${v}px)`,transition:a?"none":"transform 0.1s ease-out"}};return P.useEffect(()=>{const l=()=>{i(!1)};return window.addEventListener("pointerup",l),window.addEventListener("mouseup",l),()=>{window.removeEventListener("pointerup",l),window.removeEventListener("mouseup",l)}},[]),M.jsxs("div",{"data-u-comp":"color-picker-spectrum",ref:o,className:"univer-relative univer-overflow-hidden",children:[M.jsx("canvas",{ref:r,className:"univer-h-full univer-w-full univer-cursor-crosshair univer-rounded",onPointerDown:l=>{i(!0),s(l)},onPointerMove:l=>a&&s(l)}),M.jsx("div",{className:"univer-pointer-events-none univer-absolute univer-left-0 univer-top-0 univer-size-4 univer-rounded-full univer-border-2 univer-border-white univer-shadow-md univer-ring-2 univer-ring-white univer-will-change-transform",style:d()})]})}function Gy({hsv:e,onChange:t,onChanged:n}){const[r,o]=P.useState(!1),a=P.useRef(null),i=P.useRef(null),s=P.useMemo(()=>{var h,m;return(m=(h=i.current)==null?void 0:h.clientWidth)!=null?m:0},[]),u=P.useCallback(h=>{const m=a.current;if(!m)return;const g=m.getBoundingClientRect(),x=g.width-s,v=Math.max(0,Math.min(h-g.left,x)),p=Math.round(v/x*360);t(p,e[1],e[2])},[e,s,t]),c=P.useCallback(h=>{h.stopPropagation(),r&&u(h.clientX)},[r,u]),d=P.useCallback(()=>{o(!1),n==null||n(e[0],e[1],e[2])},[e,n]);P.useEffect(()=>(r&&(window.addEventListener("pointermove",c),window.addEventListener("pointerup",d),window.addEventListener("mouseup",d)),()=>{window.removeEventListener("pointermove",c),window.removeEventListener("pointerup",d),window.removeEventListener("mouseup",d)}),[r,c,d]);const l=()=>{var m;return`${Math.min(Math.max(e[0],0),360)/360*(100-s/((m=a.current)==null?void 0:m.clientWidth)*100)}%`};return M.jsx("div",{"data-u-comp":"color-picker-hue-slider",className:"univer-relative univer-w-full univer-select-none",children:M.jsx("div",{ref:a,className:"univer-relative univer-h-2 univer-w-full univer-cursor-pointer univer-rounded-full univer-shadow-inner",style:{background:`linear-gradient(to right,
                         hsl(0, 100%, 50%),
                         hsl(60, 100%, 50%),
                         hsl(120, 100%, 50%),

package/lib/es/index.js

@@ -4922,6 +4922,7 @@ function fv(e) {
           style: {
             ...r,
             width: i ? typeof i == "number" ? `${i}px` : i : void 0,
+            maxWidth: i ? "initial" : void 0,
             ...s ? {
               position: "absolute",
               margin: 0,

package/lib/index.js

@@ -4922,6 +4922,7 @@ function fv(e) {
           style: {
             ...r,
             width: i ? typeof i == "number" ? `${i}px` : i : void 0,
+            maxWidth: i ? "initial" : void 0,
             ...s ? {
               position: "absolute",
               margin: 0,

package/lib/umd/index.js

@@ -106,7 +106,7 @@ For more information, see https://radix-ui.com/primitives/docs/components/${t.do
               univer-my-0 univer-text-lg univer-font-semibold univer-leading-none univer-tracking-tight
               univer-text-gray-900
               dark:!univer-text-white
-            `,e),...t}));id.displayName=ed.displayName;const sd=D.forwardRef(({className:e,...t},n)=>P.jsx(td,{ref:n,className:xe("univer-text-sm univer-text-gray-500",e),...t}));sd.displayName=td.displayName;function Vy(e={}){const t=D.useCallback(()=>{const{innerWidth:v,innerHeight:p}=window;return{x:Math.max(0,(v-0)/2),y:Math.max(0,(p-0)/2)}},[]),{defaultPosition:n=t(),enabled:r=!1}=e,[o,a]=D.useState(n),[i,s]=D.useState(!1),u=D.useRef(null),c=D.useRef({x:0,y:0}),d=D.useRef({x:0,y:0}),l=D.useRef(!1);D.useEffect(()=>{if(!u.current||l.current||e.defaultPosition)return;const{width:v,height:p}=u.current.getBoundingClientRect(),{innerWidth:y,innerHeight:b}=window,C=Math.max(0,(y-v)/2),x=Math.max(0,(b-p)/2);a({x:C,y:x}),c.current={x:C,y:x},l.current=!0},[e.defaultPosition]);const h=D.useCallback((v,p)=>{if(!u.current)return{x:v,y:p};const y=u.current.getBoundingClientRect(),{clientWidth:b,clientHeight:C}=document.documentElement;let x=c.current.x+(v-d.current.x),S=c.current.y+(p-d.current.y);return x<0&&(x=0),S<0&&(S=0),x+y.width>b&&(x=b-y.width),S+y.height>C&&(S=C-y.height),{x,y:S}},[]),m=D.useCallback(v=>{r&&(v.preventDefault(),v.stopPropagation(),c.current={...o},d.current={x:v.clientX,y:v.clientY},s(!0),document.body.style.userSelect="none")},[r,o]),g=D.useCallback(v=>{if(!i)return;v.preventDefault(),v.stopPropagation();const p=h(v.clientX,v.clientY);a(p)},[i,h]),w=D.useCallback(()=>{s(!1),document.body.style.userSelect=""},[]);return D.useEffect(()=>{if(r)return document.addEventListener("mousemove",g),document.addEventListener("mouseup",w),()=>{document.removeEventListener("mousemove",g),document.removeEventListener("mouseup",w)}},[r,g,w]),{position:o,isDragging:i,elementRef:u,setElementRef:v=>{if(u.current=v,v&&!l.current&&!e.defaultPosition){const{width:p,height:y}=v.getBoundingClientRect(),{innerWidth:b,innerHeight:C}=window,x=Math.max(0,(b-p)/2),S=Math.max(0,(C-y)/2);a({x,y:S}),c.current={x,y:S},l.current=!0}},handleMouseDown:m}}function Ss(e){var $,L,_,H;const{className:t,children:n,style:r,open:o=!1,title:a,width:i,draggable:s=!1,defaultPosition:u,destroyOnClose:c=!1,footer:d,mask:l=!0,keyboard:h=!0,closable:m=!0,maskClosable:g=!0,showOk:w,showCancel:v,onOpenChange:p,onClose:y,onOk:b,onCancel:C}=e,{locale:x}=D.useContext(hn),{position:S,isDragging:E,setElementRef:M,handleMouseDown:k}=Vy({defaultPosition:u,enabled:s}),T=d!=null?d:w||v?P.jsxs("div",{className:"univer-flex univer-justify-end univer-gap-2",children:[v&&P.jsx(kn,{onClick:C,children:(L=($=x==null?void 0:x.Confirm)==null?void 0:$.cancel)!=null?L:"Cancel"}),w&&P.jsx(kn,{variant:"primary",onClick:b,children:(H=(_=x==null?void 0:x.Confirm)==null?void 0:_.confirm)!=null?H:"OK"})]}):null,R=D.useCallback(N=>{N&&s&&M(N)},[s,M]),F=D.useCallback(N=>{!g&&!N||(p==null||p(N),N||y==null||y())},[y,p]);function V(){p==null||p(!1),y==null||y()}return P.jsx(zy,{open:o,onOpenChange:F,modal:l!==!1,children:P.jsxs(rd,{ref:R,className:xe(t,{"!univer-animate-none":s}),style:{...r,width:i?typeof i=="number"?`${i}px`:i:void 0,...s?{position:"absolute",margin:0,left:0,top:0,transform:`translate(${S.x}px, ${S.y}px)`,transition:E?"none":void 0,cursor:E?"grabbing":void 0}:{}},closable:m,onClickClose:V,children:[P.jsxs(od,{className:xe({"!univer-hidden":!a}),"data-drag-handle":s?"true":void 0,style:{cursor:s?"grab":void 0,userSelect:s?"none":void 0,touchAction:s?"none":void 0},onMouseDown:s?k:void 0,children:[P.jsx(id,{children:a}),P.jsx(sd,{className:"univer-hidden"})]}),n,T&&P.jsx(ad,{children:T})]})})}const Pa=(e,t,n)=>{t=t/100,n=n/100;const r=n*t,o=r*(1-Math.abs(e/60%2-1)),a=n-r;let i=0,s=0,u=0;return e>=0&&e<60?(i=r,s=o,u=0):e>=60&&e<120?(i=o,s=r,u=0):e>=120&&e<180?(i=0,s=r,u=o):e>=180&&e<240?(i=0,s=o,u=r):e>=240&&e<300?(i=o,s=0,u=r):e>=300&&e<360&&(i=r,s=0,u=o),[Math.round((i+a)*255),Math.round((s+a)*255),Math.round((u+a)*255)]},ld=(e,t,n)=>{const r=o=>o.toString(16).padStart(2,"0");return`#${r(e)}${r(t)}${r(n)}`},ud=(e,t,n)=>{e/=255,t/=255,n/=255;const r=Math.max(e,t,n),o=Math.min(e,t,n),a=r-o;let i=0,s=0;const u=r;return r!==0&&(s=a/r),a!==0&&(r===e?i=(t-n)/a+(t<n?6:0):r===t?i=(n-e)/a+2:r===n&&(i=(e-t)/a+4),i*=60),[i,s*100,u*100]},Es=e=>{const[t,n,r]=e.match(/\w\w/g).map(o=>Number.parseInt(o,16));return ud(t,n,r)},Da=(e,t,n)=>{const[r,o,a]=Pa(e,t,n);return ld(r,o,a)};function Wy({hsv:e,onChange:t}){const[n,r]=D.useState(""),o=D.useMemo(()=>Da(e[0],e[1],e[2]),[e]);D.useEffect(()=>{r(o.replace(/^#/,""))},[o]);const a=u=>/^[0-9A-Fa-f]{6}$/.test(u),i=u=>{const c=u.target.value.trim();if(!(c.length>6)&&!(c!==""&&!/^[0-9A-Fa-f]*$/.test(c))&&(r(c),a(c))){const d=Es(c);d&&t&&t(...d)}},s=()=>{a(n)||r(o.replace(/^#/,""))};return P.jsxs(P.Fragment,{children:[P.jsx("input",{className:"univer-w-full univer-px-2 !univer-pl-4 univer-uppercase focus:univer-border-primary-500 focus:univer-outline-none",value:n,onChange:i,onBlur:s,maxLength:6,spellCheck:!1}),P.jsx("span",{className:"univer-absolute univer-left-1.5 univer-top-1/2 -univer-translate-y-1/2 univer-text-sm univer-text-gray-400",children:"#"})]})}function By({hsv:e,onChange:t}){const[n,r]=D.useState({r:0,g:0,b:0});D.useEffect(()=>{const[i,s,u]=Pa(e[0],e[1],e[2]);r({r:Math.round(i),g:Math.round(s),b:Math.round(u)})},[e]);const o=(i,s)=>{if(s!==""&&!/^\d*$/.test(s))return;const u=s===""?0:Number.parseInt(s,10);if(u>255)return;const c={...n,[i]:u};if(r(c),t){const d=ud(c.r,c.g,c.b);t(...d)}},a=()=>{const[i,s,u]=Pa(e[0],e[1],e[2]);r({r:Math.round(i),g:Math.round(s),b:Math.round(u)})};return P.jsxs("div",{className:"univer-flex univer-items-center univer-gap-2 [&>input]:univer-w-11",children:[P.jsx("input",{value:n.r,onChange:i=>o("r",i.target.value),onBlur:a,maxLength:3}),P.jsx("input",{value:n.g,onChange:i=>o("g",i.target.value),onBlur:a,maxLength:3}),P.jsx("input",{value:n.b,onChange:i=>o("b",i.target.value),onBlur:a,maxLength:3})]})}function jy({hsv:e,onChange:t}){return P.jsx("div",{className:"dark:![&_input]:univer-border-gray-600 dark:![&_input]:univer-text-white univer-flex univer-gap-2 [&_input]:univer-box-border [&_input]:univer-flex [&_input]:univer-h-7 [&_input]:univer-items-center [&_input]:univer-rounded [&_input]:univer-border [&_input]:univer-border-solid [&_input]:univer-border-gray-200 [&_input]:univer-bg-transparent [&_input]:univer-px-1.5 [&_input]:univer-text-sm [&_input]:univer-text-gray-700 [&_input]:univer-outline-none",children:P.jsxs("div",{className:"univer-relative univer-flex univer-flex-1 univer-gap-2",children:[P.jsx(Wy,{hsv:e,onChange:t}),P.jsx(By,{hsv:e,onChange:t})]})})}const Yy=[["#FFFFFF","#E1EFFE","#FDE8E8","#FEECDC","#FFF4B9","#DEF7EC","#D5F5F6","#EDEBFE","#FCE8F3"],["#CDD0D8","#A4CAFE","#F8B4B4","#FDBA8C","#FAC815","#84E1BC","#7EDCE2","#CABFFD","#F8B4D9"],["#979DAC","#3F83F8","#F05252","#FF5A1F","#D49D0F","#0DA471","#0694A2","#9061F9","#E74694"],["#414657","#1A56DB","#C81E1E","#B43403","#9A6D15","#046C4E","#036672","#6C2BD9","#BF125D"],["#000000","#233876","#771D1D","#771D1D","#634312","#014737","#014451","#4A1D96","#751A3D"]];function Uy({hsv:e,onChange:t}){const n=D.useCallback(o=>{const[a,i,s]=Es(o);t(a,i,s)},[t]),r=Da(e[0],e[1],e[2]);return P.jsx("div",{"data-u-comp":"color-picker-presets",className:"univer-grid univer-content-center univer-gap-2",children:Yy.map((o,a)=>P.jsx("div",{className:"univer-grid univer-grid-flow-col univer-items-center univer-justify-between univer-gap-2",children:o.map((i,s)=>P.jsx("button",{type:"button",className:xe("univer-box-border univer-h-5 univer-w-5 univer-cursor-pointer univer-rounded-full univer-border univer-border-solid univer-border-transparent univer-bg-gray-300 univer-transition-shadow",{"univer-ring-2 univer-ring-offset-2 univer-ring-offset-white dark:!univer-ring-primary-600 dark:!univer-ring-offset-gray-600":i.toUpperCase()===r.toUpperCase(),"!univer-border-gray-200":a===0&&s===0}),style:{backgroundColor:i},onClick:()=>n(i)},s))},a))})}function qy({hsv:e,onChange:t,onChanged:n}){const r=D.useRef(null),o=D.useRef(null),[a,i]=D.useState(!1);D.useEffect(()=>{const l=r.current;if(!l)return;const h=l.getContext("2d");if(!h)return;const m=h.createLinearGradient(0,0,l.width,0);m.addColorStop(0,`hsl(${e[0]}, 0%, 50%)`),m.addColorStop(1,`hsl(${e[0]}, 100%, 50%)`),h.fillStyle=m,h.fillRect(0,0,l.width,l.height);const g=h.createLinearGradient(0,0,0,l.height);g.addColorStop(0,"rgba(255, 255, 255, 0)"),g.addColorStop(1,"rgba(0, 0, 0, 1)"),h.fillStyle=g,h.fillRect(0,0,l.width,l.height)},[e]);const s=l=>{l.stopPropagation();const h=r.current;if(!h)return;const m=h.getBoundingClientRect(),g=Math.max(0,Math.min(l.clientX-m.left,m.width)),w=Math.max(0,Math.min(l.clientY-m.top,m.height)),v=g/m.width*100,p=100-w/m.height*100;t(e[0],v,p)},u=D.useCallback(()=>{i(!1)},[e]);function c(){n==null||n(e[0],e[1],e[2])}D.useEffect(()=>{var l;return(l=o.current)==null||l.addEventListener("mouseup",c),window.addEventListener("pointerup",u),window.addEventListener("mouseup",u),()=>{var h;(h=o.current)==null||h.removeEventListener("mouseup",c),window.removeEventListener("pointerup",u),window.removeEventListener("mouseup",u)}},[e]);const d=()=>{var p,y,b,C;const m=(y=(p=o.current)==null?void 0:p.clientWidth)!=null?y:0,g=(C=(b=o.current)==null?void 0:b.clientHeight)!=null?C:0,w=e[1]/100*m-8,v=(100-e[2])/100*g-8;return{transform:`translate(${w}px, ${v}px)`,transition:a?"none":"transform 0.1s ease-out"}};return D.useEffect(()=>{const l=()=>{i(!1)};return window.addEventListener("pointerup",l),window.addEventListener("mouseup",l),()=>{window.removeEventListener("pointerup",l),window.removeEventListener("mouseup",l)}},[]),P.jsxs("div",{"data-u-comp":"color-picker-spectrum",ref:o,className:"univer-relative univer-overflow-hidden",children:[P.jsx("canvas",{ref:r,className:"univer-h-full univer-w-full univer-cursor-crosshair univer-rounded",onPointerDown:l=>{i(!0),s(l)},onPointerMove:l=>a&&s(l)}),P.jsx("div",{className:"univer-pointer-events-none univer-absolute univer-left-0 univer-top-0 univer-size-4 univer-rounded-full univer-border-2 univer-border-white univer-shadow-md univer-ring-2 univer-ring-white univer-will-change-transform",style:d()})]})}function Gy({hsv:e,onChange:t,onChanged:n}){const[r,o]=D.useState(!1),a=D.useRef(null),i=D.useRef(null),s=D.useMemo(()=>{var h,m;return(m=(h=i.current)==null?void 0:h.clientWidth)!=null?m:0},[]),u=D.useCallback(h=>{const m=a.current;if(!m)return;const g=m.getBoundingClientRect(),w=g.width-s,v=Math.max(0,Math.min(h-g.left,w)),p=Math.round(v/w*360);t(p,e[1],e[2])},[e,s,t]),c=D.useCallback(h=>{h.stopPropagation(),r&&u(h.clientX)},[r,u]),d=D.useCallback(()=>{o(!1),n==null||n(e[0],e[1],e[2])},[e,n]);D.useEffect(()=>(r&&(window.addEventListener("pointermove",c),window.addEventListener("pointerup",d),window.addEventListener("mouseup",d)),()=>{window.removeEventListener("pointermove",c),window.removeEventListener("pointerup",d),window.removeEventListener("mouseup",d)}),[r,c,d]);const l=()=>{var m;return`${Math.min(Math.max(e[0],0),360)/360*(100-s/((m=a.current)==null?void 0:m.clientWidth)*100)}%`};return P.jsx("div",{"data-u-comp":"color-picker-hue-slider",className:"univer-relative univer-w-full univer-select-none",children:P.jsx("div",{ref:a,className:"univer-relative univer-h-2 univer-w-full univer-cursor-pointer univer-rounded-full univer-shadow-inner",style:{background:`linear-gradient(to right,
+            `,e),...t}));id.displayName=ed.displayName;const sd=D.forwardRef(({className:e,...t},n)=>P.jsx(td,{ref:n,className:xe("univer-text-sm univer-text-gray-500",e),...t}));sd.displayName=td.displayName;function Vy(e={}){const t=D.useCallback(()=>{const{innerWidth:v,innerHeight:p}=window;return{x:Math.max(0,(v-0)/2),y:Math.max(0,(p-0)/2)}},[]),{defaultPosition:n=t(),enabled:r=!1}=e,[o,a]=D.useState(n),[i,s]=D.useState(!1),u=D.useRef(null),c=D.useRef({x:0,y:0}),d=D.useRef({x:0,y:0}),l=D.useRef(!1);D.useEffect(()=>{if(!u.current||l.current||e.defaultPosition)return;const{width:v,height:p}=u.current.getBoundingClientRect(),{innerWidth:y,innerHeight:b}=window,C=Math.max(0,(y-v)/2),x=Math.max(0,(b-p)/2);a({x:C,y:x}),c.current={x:C,y:x},l.current=!0},[e.defaultPosition]);const h=D.useCallback((v,p)=>{if(!u.current)return{x:v,y:p};const y=u.current.getBoundingClientRect(),{clientWidth:b,clientHeight:C}=document.documentElement;let x=c.current.x+(v-d.current.x),S=c.current.y+(p-d.current.y);return x<0&&(x=0),S<0&&(S=0),x+y.width>b&&(x=b-y.width),S+y.height>C&&(S=C-y.height),{x,y:S}},[]),m=D.useCallback(v=>{r&&(v.preventDefault(),v.stopPropagation(),c.current={...o},d.current={x:v.clientX,y:v.clientY},s(!0),document.body.style.userSelect="none")},[r,o]),g=D.useCallback(v=>{if(!i)return;v.preventDefault(),v.stopPropagation();const p=h(v.clientX,v.clientY);a(p)},[i,h]),w=D.useCallback(()=>{s(!1),document.body.style.userSelect=""},[]);return D.useEffect(()=>{if(r)return document.addEventListener("mousemove",g),document.addEventListener("mouseup",w),()=>{document.removeEventListener("mousemove",g),document.removeEventListener("mouseup",w)}},[r,g,w]),{position:o,isDragging:i,elementRef:u,setElementRef:v=>{if(u.current=v,v&&!l.current&&!e.defaultPosition){const{width:p,height:y}=v.getBoundingClientRect(),{innerWidth:b,innerHeight:C}=window,x=Math.max(0,(b-p)/2),S=Math.max(0,(C-y)/2);a({x,y:S}),c.current={x,y:S},l.current=!0}},handleMouseDown:m}}function Ss(e){var $,L,_,H;const{className:t,children:n,style:r,open:o=!1,title:a,width:i,draggable:s=!1,defaultPosition:u,destroyOnClose:c=!1,footer:d,mask:l=!0,keyboard:h=!0,closable:m=!0,maskClosable:g=!0,showOk:w,showCancel:v,onOpenChange:p,onClose:y,onOk:b,onCancel:C}=e,{locale:x}=D.useContext(hn),{position:S,isDragging:E,setElementRef:M,handleMouseDown:k}=Vy({defaultPosition:u,enabled:s}),T=d!=null?d:w||v?P.jsxs("div",{className:"univer-flex univer-justify-end univer-gap-2",children:[v&&P.jsx(kn,{onClick:C,children:(L=($=x==null?void 0:x.Confirm)==null?void 0:$.cancel)!=null?L:"Cancel"}),w&&P.jsx(kn,{variant:"primary",onClick:b,children:(H=(_=x==null?void 0:x.Confirm)==null?void 0:_.confirm)!=null?H:"OK"})]}):null,R=D.useCallback(N=>{N&&s&&M(N)},[s,M]),F=D.useCallback(N=>{!g&&!N||(p==null||p(N),N||y==null||y())},[y,p]);function V(){p==null||p(!1),y==null||y()}return P.jsx(zy,{open:o,onOpenChange:F,modal:l!==!1,children:P.jsxs(rd,{ref:R,className:xe(t,{"!univer-animate-none":s}),style:{...r,width:i?typeof i=="number"?`${i}px`:i:void 0,maxWidth:i?"initial":void 0,...s?{position:"absolute",margin:0,left:0,top:0,transform:`translate(${S.x}px, ${S.y}px)`,transition:E?"none":void 0,cursor:E?"grabbing":void 0}:{}},closable:m,onClickClose:V,children:[P.jsxs(od,{className:xe({"!univer-hidden":!a}),"data-drag-handle":s?"true":void 0,style:{cursor:s?"grab":void 0,userSelect:s?"none":void 0,touchAction:s?"none":void 0},onMouseDown:s?k:void 0,children:[P.jsx(id,{children:a}),P.jsx(sd,{className:"univer-hidden"})]}),n,T&&P.jsx(ad,{children:T})]})})}const Pa=(e,t,n)=>{t=t/100,n=n/100;const r=n*t,o=r*(1-Math.abs(e/60%2-1)),a=n-r;let i=0,s=0,u=0;return e>=0&&e<60?(i=r,s=o,u=0):e>=60&&e<120?(i=o,s=r,u=0):e>=120&&e<180?(i=0,s=r,u=o):e>=180&&e<240?(i=0,s=o,u=r):e>=240&&e<300?(i=o,s=0,u=r):e>=300&&e<360&&(i=r,s=0,u=o),[Math.round((i+a)*255),Math.round((s+a)*255),Math.round((u+a)*255)]},ld=(e,t,n)=>{const r=o=>o.toString(16).padStart(2,"0");return`#${r(e)}${r(t)}${r(n)}`},ud=(e,t,n)=>{e/=255,t/=255,n/=255;const r=Math.max(e,t,n),o=Math.min(e,t,n),a=r-o;let i=0,s=0;const u=r;return r!==0&&(s=a/r),a!==0&&(r===e?i=(t-n)/a+(t<n?6:0):r===t?i=(n-e)/a+2:r===n&&(i=(e-t)/a+4),i*=60),[i,s*100,u*100]},Es=e=>{const[t,n,r]=e.match(/\w\w/g).map(o=>Number.parseInt(o,16));return ud(t,n,r)},Da=(e,t,n)=>{const[r,o,a]=Pa(e,t,n);return ld(r,o,a)};function Wy({hsv:e,onChange:t}){const[n,r]=D.useState(""),o=D.useMemo(()=>Da(e[0],e[1],e[2]),[e]);D.useEffect(()=>{r(o.replace(/^#/,""))},[o]);const a=u=>/^[0-9A-Fa-f]{6}$/.test(u),i=u=>{const c=u.target.value.trim();if(!(c.length>6)&&!(c!==""&&!/^[0-9A-Fa-f]*$/.test(c))&&(r(c),a(c))){const d=Es(c);d&&t&&t(...d)}},s=()=>{a(n)||r(o.replace(/^#/,""))};return P.jsxs(P.Fragment,{children:[P.jsx("input",{className:"univer-w-full univer-px-2 !univer-pl-4 univer-uppercase focus:univer-border-primary-500 focus:univer-outline-none",value:n,onChange:i,onBlur:s,maxLength:6,spellCheck:!1}),P.jsx("span",{className:"univer-absolute univer-left-1.5 univer-top-1/2 -univer-translate-y-1/2 univer-text-sm univer-text-gray-400",children:"#"})]})}function By({hsv:e,onChange:t}){const[n,r]=D.useState({r:0,g:0,b:0});D.useEffect(()=>{const[i,s,u]=Pa(e[0],e[1],e[2]);r({r:Math.round(i),g:Math.round(s),b:Math.round(u)})},[e]);const o=(i,s)=>{if(s!==""&&!/^\d*$/.test(s))return;const u=s===""?0:Number.parseInt(s,10);if(u>255)return;const c={...n,[i]:u};if(r(c),t){const d=ud(c.r,c.g,c.b);t(...d)}},a=()=>{const[i,s,u]=Pa(e[0],e[1],e[2]);r({r:Math.round(i),g:Math.round(s),b:Math.round(u)})};return P.jsxs("div",{className:"univer-flex univer-items-center univer-gap-2 [&>input]:univer-w-11",children:[P.jsx("input",{value:n.r,onChange:i=>o("r",i.target.value),onBlur:a,maxLength:3}),P.jsx("input",{value:n.g,onChange:i=>o("g",i.target.value),onBlur:a,maxLength:3}),P.jsx("input",{value:n.b,onChange:i=>o("b",i.target.value),onBlur:a,maxLength:3})]})}function jy({hsv:e,onChange:t}){return P.jsx("div",{className:"dark:![&_input]:univer-border-gray-600 dark:![&_input]:univer-text-white univer-flex univer-gap-2 [&_input]:univer-box-border [&_input]:univer-flex [&_input]:univer-h-7 [&_input]:univer-items-center [&_input]:univer-rounded [&_input]:univer-border [&_input]:univer-border-solid [&_input]:univer-border-gray-200 [&_input]:univer-bg-transparent [&_input]:univer-px-1.5 [&_input]:univer-text-sm [&_input]:univer-text-gray-700 [&_input]:univer-outline-none",children:P.jsxs("div",{className:"univer-relative univer-flex univer-flex-1 univer-gap-2",children:[P.jsx(Wy,{hsv:e,onChange:t}),P.jsx(By,{hsv:e,onChange:t})]})})}const Yy=[["#FFFFFF","#E1EFFE","#FDE8E8","#FEECDC","#FFF4B9","#DEF7EC","#D5F5F6","#EDEBFE","#FCE8F3"],["#CDD0D8","#A4CAFE","#F8B4B4","#FDBA8C","#FAC815","#84E1BC","#7EDCE2","#CABFFD","#F8B4D9"],["#979DAC","#3F83F8","#F05252","#FF5A1F","#D49D0F","#0DA471","#0694A2","#9061F9","#E74694"],["#414657","#1A56DB","#C81E1E","#B43403","#9A6D15","#046C4E","#036672","#6C2BD9","#BF125D"],["#000000","#233876","#771D1D","#771D1D","#634312","#014737","#014451","#4A1D96","#751A3D"]];function Uy({hsv:e,onChange:t}){const n=D.useCallback(o=>{const[a,i,s]=Es(o);t(a,i,s)},[t]),r=Da(e[0],e[1],e[2]);return P.jsx("div",{"data-u-comp":"color-picker-presets",className:"univer-grid univer-content-center univer-gap-2",children:Yy.map((o,a)=>P.jsx("div",{className:"univer-grid univer-grid-flow-col univer-items-center univer-justify-between univer-gap-2",children:o.map((i,s)=>P.jsx("button",{type:"button",className:xe("univer-box-border univer-h-5 univer-w-5 univer-cursor-pointer univer-rounded-full univer-border univer-border-solid univer-border-transparent univer-bg-gray-300 univer-transition-shadow",{"univer-ring-2 univer-ring-offset-2 univer-ring-offset-white dark:!univer-ring-primary-600 dark:!univer-ring-offset-gray-600":i.toUpperCase()===r.toUpperCase(),"!univer-border-gray-200":a===0&&s===0}),style:{backgroundColor:i},onClick:()=>n(i)},s))},a))})}function qy({hsv:e,onChange:t,onChanged:n}){const r=D.useRef(null),o=D.useRef(null),[a,i]=D.useState(!1);D.useEffect(()=>{const l=r.current;if(!l)return;const h=l.getContext("2d");if(!h)return;const m=h.createLinearGradient(0,0,l.width,0);m.addColorStop(0,`hsl(${e[0]}, 0%, 50%)`),m.addColorStop(1,`hsl(${e[0]}, 100%, 50%)`),h.fillStyle=m,h.fillRect(0,0,l.width,l.height);const g=h.createLinearGradient(0,0,0,l.height);g.addColorStop(0,"rgba(255, 255, 255, 0)"),g.addColorStop(1,"rgba(0, 0, 0, 1)"),h.fillStyle=g,h.fillRect(0,0,l.width,l.height)},[e]);const s=l=>{l.stopPropagation();const h=r.current;if(!h)return;const m=h.getBoundingClientRect(),g=Math.max(0,Math.min(l.clientX-m.left,m.width)),w=Math.max(0,Math.min(l.clientY-m.top,m.height)),v=g/m.width*100,p=100-w/m.height*100;t(e[0],v,p)},u=D.useCallback(()=>{i(!1)},[e]);function c(){n==null||n(e[0],e[1],e[2])}D.useEffect(()=>{var l;return(l=o.current)==null||l.addEventListener("mouseup",c),window.addEventListener("pointerup",u),window.addEventListener("mouseup",u),()=>{var h;(h=o.current)==null||h.removeEventListener("mouseup",c),window.removeEventListener("pointerup",u),window.removeEventListener("mouseup",u)}},[e]);const d=()=>{var p,y,b,C;const m=(y=(p=o.current)==null?void 0:p.clientWidth)!=null?y:0,g=(C=(b=o.current)==null?void 0:b.clientHeight)!=null?C:0,w=e[1]/100*m-8,v=(100-e[2])/100*g-8;return{transform:`translate(${w}px, ${v}px)`,transition:a?"none":"transform 0.1s ease-out"}};return D.useEffect(()=>{const l=()=>{i(!1)};return window.addEventListener("pointerup",l),window.addEventListener("mouseup",l),()=>{window.removeEventListener("pointerup",l),window.removeEventListener("mouseup",l)}},[]),P.jsxs("div",{"data-u-comp":"color-picker-spectrum",ref:o,className:"univer-relative univer-overflow-hidden",children:[P.jsx("canvas",{ref:r,className:"univer-h-full univer-w-full univer-cursor-crosshair univer-rounded",onPointerDown:l=>{i(!0),s(l)},onPointerMove:l=>a&&s(l)}),P.jsx("div",{className:"univer-pointer-events-none univer-absolute univer-left-0 univer-top-0 univer-size-4 univer-rounded-full univer-border-2 univer-border-white univer-shadow-md univer-ring-2 univer-ring-white univer-will-change-transform",style:d()})]})}function Gy({hsv:e,onChange:t,onChanged:n}){const[r,o]=D.useState(!1),a=D.useRef(null),i=D.useRef(null),s=D.useMemo(()=>{var h,m;return(m=(h=i.current)==null?void 0:h.clientWidth)!=null?m:0},[]),u=D.useCallback(h=>{const m=a.current;if(!m)return;const g=m.getBoundingClientRect(),w=g.width-s,v=Math.max(0,Math.min(h-g.left,w)),p=Math.round(v/w*360);t(p,e[1],e[2])},[e,s,t]),c=D.useCallback(h=>{h.stopPropagation(),r&&u(h.clientX)},[r,u]),d=D.useCallback(()=>{o(!1),n==null||n(e[0],e[1],e[2])},[e,n]);D.useEffect(()=>(r&&(window.addEventListener("pointermove",c),window.addEventListener("pointerup",d),window.addEventListener("mouseup",d)),()=>{window.removeEventListener("pointermove",c),window.removeEventListener("pointerup",d),window.removeEventListener("mouseup",d)}),[r,c,d]);const l=()=>{var m;return`${Math.min(Math.max(e[0],0),360)/360*(100-s/((m=a.current)==null?void 0:m.clientWidth)*100)}%`};return P.jsx("div",{"data-u-comp":"color-picker-hue-slider",className:"univer-relative univer-w-full univer-select-none",children:P.jsx("div",{ref:a,className:"univer-relative univer-h-2 univer-w-full univer-cursor-pointer univer-rounded-full univer-shadow-inner",style:{background:`linear-gradient(to right,
                         hsl(0, 100%, 50%),
                         hsl(60, 100%, 50%),
                         hsl(120, 100%, 50%),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@univerjs/design",
-  "version": "0.10.0",
+  "version": "0.10.1",
   "private": false,
   "description": "UI component library for building exceptional Univer.",
   "author": "DreamNum <developer@univer.ai>",
@@ -74,7 +74,7 @@
     "react-transition-group": "^4.4.5",
     "sonner": "^2.0.6",
     "tailwind-merge": "^3.3.1",
-    "@univerjs/themes": "0.10.0"
+    "@univerjs/themes": "0.10.1"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.4",
@@ -89,8 +89,8 @@
     "typescript": "^5.8.3",
     "vite": "^7.0.6",
     "vitest": "^3.2.4",
-    "@univerjs-infra/shared": "0.10.0",
-    "@univerjs/core": "0.10.0"
+    "@univerjs-infra/shared": "0.10.1",
+    "@univerjs/core": "0.10.1"
   },
   "scripts": {
     "test": "vitest run",