@univerjs/design 0.10.11 → 0.10.12

package/lib/cjs/index.js

@@ -111,7 +111,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}));Cd.displayName=md.displayName;const Sd=M.forwardRef(({className:e,...t},r)=>S.jsx(gd,{ref:r,className:ie("univer-text-sm univer-text-gray-500",e),...t}));Sd.displayName=gd.displayName;function Dg(e={}){const t=M.useCallback(()=>{const{innerWidth:d,innerHeight:v}=window;return{x:Math.max(0,(d-0)/2),y:Math.max(0,(v-0)/2)}},[]),{defaultPosition:r=t(),enabled:n=!1}=e,[o,i]=M.useState(r),[a,s]=M.useState(!1),l=M.useRef(null),c=M.useRef({x:0,y:0}),f=M.useRef({x:0,y:0}),u=M.useRef(!1);M.useEffect(()=>{if(!l.current||u.current||e.defaultPosition)return;const{width:d,height:v}=l.current.getBoundingClientRect(),{innerWidth:p,innerHeight:b}=window,C=Math.max(0,(p-d)/2),x=Math.max(0,(b-v)/2);i({x:C,y:x}),c.current={x:C,y:x},u.current=!0},[e.defaultPosition]);const y=M.useCallback((d,v)=>{if(!l.current)return{x:d,y:v};const p=l.current.getBoundingClientRect(),{clientWidth:b,clientHeight:C}=document.documentElement;let x=c.current.x+(d-f.current.x),R=c.current.y+(v-f.current.y);return x<0&&(x=0),R<0&&(R=0),x+p.width>b&&(x=b-p.width),R+p.height>C&&(R=C-p.height),{x,y:R}},[]),h=M.useCallback(d=>{n&&(d.preventDefault(),d.stopPropagation(),c.current={...o},f.current={x:d.clientX,y:d.clientY},s(!0),document.body.style.userSelect="none")},[n,o]),g=M.useCallback(d=>{if(!a)return;d.preventDefault(),d.stopPropagation();const v=y(d.clientX,d.clientY);i(v)},[a,y]),w=M.useCallback(()=>{s(!1),document.body.style.userSelect=""},[]);return M.useEffect(()=>{if(n)return document.addEventListener("mousemove",g),document.addEventListener("mouseup",w),()=>{document.removeEventListener("mousemove",g),document.removeEventListener("mouseup",w)}},[n,g,w]),{position:o,isDragging:a,elementRef:l,setElementRef:d=>{if(l.current=d,d&&!u.current&&!e.defaultPosition){const{width:v,height:p}=d.getBoundingClientRect(),{innerWidth:b,innerHeight:C}=window,x=Math.max(0,(b-v)/2),R=Math.max(0,(C-p)/2);i({x,y:R}),c.current={x,y:R},u.current=!0}},handleMouseDown:h}}function Rs(e){var L,j,D,$;const{className:t,children:r,style:n,open:o=!1,title:i,width:a,draggable:s=!1,defaultPosition:l,destroyOnClose:c=!1,footer:f,mask:u=!0,keyboard:y=!0,closable:h=!0,maskClosable:g=!0,showOk:w,showCancel:d,onOpenChange:v,onClose:p,onOk:b,onCancel:C}=e,{locale:x}=M.useContext(pr),{position:R,isDragging:E,setElementRef:P,handleMouseDown:O}=Dg({defaultPosition:l,enabled:s}),N=f!=null?f:w||d?S.jsxs("div",{className:"univer-flex univer-justify-end univer-gap-2",children:[d&&S.jsx(Wr,{onClick:C,children:(j=(L=x==null?void 0:x.Confirm)==null?void 0:L.cancel)!=null?j:"Cancel"}),w&&S.jsx(Wr,{variant:"primary",onClick:b,children:($=(D=x==null?void 0:x.Confirm)==null?void 0:D.confirm)!=null?$:"OK"})]}):null,T=M.useCallback(I=>{I&&s&&P(I)},[s,P]),A=M.useCallback(I=>{!g&&!I||(v==null||v(I),I||p==null||p())},[p,v]);function H(){v==null||v(!1),p==null||p()}return S.jsx(Pg,{open:o,onOpenChange:A,modal:u!==!1,children:S.jsxs(bd,{ref:T,className:ie(t,{"!univer-animate-none":s}),style:{...n,width:a?typeof a=="number"?`${a}px`:a:void 0,maxWidth:a?"initial":void 0,...s?{position:"absolute",margin:0,left:0,top:0,transform:`translate(${R.x}px, ${R.y}px)`,transition:E?"none":void 0,cursor:E?"grabbing":void 0}:{}},closable:h,onClickClose:H,children:[S.jsxs(wd,{className:ie({"!univer-hidden":!i}),"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?O:void 0,children:[S.jsx(Cd,{children:i}),S.jsx(Sd,{className:"univer-hidden"})]}),r,N&&S.jsx(xd,{children:N})]})})}const di=(e,t,r)=>{t=t/100,r=r/100;const n=r*t,o=n*(1-Math.abs(e/60%2-1)),i=r-n;let a=0,s=0,l=0;return e>=0&&e<60?(a=n,s=o,l=0):e>=60&&e<120?(a=o,s=n,l=0):e>=120&&e<180?(a=0,s=n,l=o):e>=180&&e<240?(a=0,s=o,l=n):e>=240&&e<300?(a=o,s=0,l=n):e>=300&&e<360&&(a=n,s=0,l=o),[Math.round((a+i)*255),Math.round((s+i)*255),Math.round((l+i)*255)]},Rd=(e,t,r)=>{const n=o=>o.toString(16).padStart(2,"0");return`#${n(e)}${n(t)}${n(r)}`},Ed=(e,t,r)=>{e/=255,t/=255,r/=255;const n=Math.max(e,t,r),o=Math.min(e,t,r),i=n-o;let a=0,s=0;const l=n;return n!==0&&(s=i/n),i!==0&&(n===e?a=(t-r)/i+(t<r?6:0):n===t?a=(r-e)/i+2:n===r&&(a=(e-t)/i+4),a*=60),[a,s*100,l*100]},Es=e=>{const[t,r,n]=e.match(/\w\w/g).map(o=>Number.parseInt(o,16));return Ed(t,r,n)},fi=(e,t,r)=>{const[n,o,i]=di(e,t,r);return Rd(n,o,i)};function _g({hsv:e,onChange:t}){const[r,n]=M.useState(""),o=M.useMemo(()=>fi(e[0],e[1],e[2]),[e]);M.useEffect(()=>{n(o.replace(/^#/,""))},[o]);const i=l=>/^[0-9A-Fa-f]{6}$/.test(l),a=l=>{const c=l.target.value.trim();if(!(c.length>6)&&!(c!==""&&!/^[0-9A-Fa-f]*$/.test(c))&&(n(c),i(c))){const f=Es(c);f&&t&&t(...f)}},s=()=>{i(r)||n(o.replace(/^#/,""))};return S.jsxs(S.Fragment,{children:[S.jsx("input",{className:ie("univer-w-full univer-px-2 !univer-pl-4 univer-uppercase focus:univer-border-primary-500 focus:univer-outline-none dark:!univer-text-white",Ct),value:r,onChange:a,onBlur:s,maxLength:6,spellCheck:!1}),S.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 Og({hsv:e,onChange:t}){const[r,n]=M.useState({r:0,g:0,b:0});M.useEffect(()=>{const[a,s,l]=di(e[0],e[1],e[2]);n({r:Math.round(a),g:Math.round(s),b:Math.round(l)})},[e]);const o=(a,s)=>{if(s!==""&&!/^\d*$/.test(s))return;const l=s===""?0:Number.parseInt(s,10);if(l>255)return;const c={...r,[a]:l};if(n(c),t){const f=Ed(c.r,c.g,c.b);t(...f)}},i=()=>{const[a,s,l]=di(e[0],e[1],e[2]);n({r:Math.round(a),g:Math.round(s),b:Math.round(l)})};return S.jsxs("div",{className:"univer-flex univer-items-center univer-gap-2 [&>input]:univer-w-11 [&>input]:univer-border-gray-200 [&>input]:focus:univer-border-primary-500 dark:[&>input]:!univer-border-gray-600 dark:[&>input]:!univer-text-white",children:[S.jsx("input",{value:r.r,onChange:a=>o("r",a.target.value),onBlur:i,maxLength:3}),S.jsx("input",{value:r.g,onChange:a=>o("g",a.target.value),onBlur:i,maxLength:3}),S.jsx("input",{value:r.b,onChange:a=>o("b",a.target.value),onBlur:i,maxLength:3})]})}function kg({hsv:e,onChange:t}){return S.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:S.jsxs("div",{className:"univer-relative univer-flex univer-flex-1 univer-gap-2",children:[S.jsx(_g,{hsv:e,onChange:t}),S.jsx(Og,{hsv:e,onChange:t})]})})}const Tg=[["#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 Ig({hsv:e,onChange:t}){const r=M.useCallback(o=>{const[i,a,s]=Es(o);t(i,a,s)},[t]),n=fi(e[0],e[1],e[2]);return S.jsx("div",{"data-u-comp":"color-picker-presets",className:"univer-grid univer-content-center univer-gap-2",children:Tg.map((o,i)=>S.jsx("div",{className:"univer-grid univer-grid-flow-col univer-items-center univer-justify-between univer-gap-2",children:o.map((a,s)=>S.jsx("button",{type:"button",className:ie("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":a.toUpperCase()===n.toUpperCase(),"!univer-border-gray-200":i===0&&s===0}),style:{backgroundColor:a},onClick:()=>r(a)},s))},i))})}function Ag({hsv:e,onChange:t,onChanged:r}){const n=M.useRef(null),o=M.useRef(null),[i,a]=M.useState(!1);M.useEffect(()=>{const u=n.current;if(!u)return;const y=u.getContext("2d");if(!y)return;const h=y.createLinearGradient(0,0,u.width,0);h.addColorStop(0,`hsl(${e[0]}, 0%, 50%)`),h.addColorStop(1,`hsl(${e[0]}, 100%, 50%)`),y.fillStyle=h,y.fillRect(0,0,u.width,u.height);const g=y.createLinearGradient(0,0,0,u.height);g.addColorStop(0,"rgba(255, 255, 255, 0)"),g.addColorStop(1,"rgba(0, 0, 0, 1)"),y.fillStyle=g,y.fillRect(0,0,u.width,u.height)},[e]);const s=u=>{u.stopPropagation();const y=n.current;if(!y)return;const h=y.getBoundingClientRect(),g=Math.max(0,Math.min(u.clientX-h.left,h.width)),w=Math.max(0,Math.min(u.clientY-h.top,h.height)),d=g/h.width*100,v=100-w/h.height*100;t(e[0],d,v)},l=M.useCallback(()=>{a(!1)},[e]);function c(){r==null||r(e[0],e[1],e[2])}M.useEffect(()=>{var u;return(u=o.current)==null||u.addEventListener("mouseup",c),window.addEventListener("pointerup",l),window.addEventListener("mouseup",l),()=>{var y;(y=o.current)==null||y.removeEventListener("mouseup",c),window.removeEventListener("pointerup",l),window.removeEventListener("mouseup",l)}},[e]);const f=()=>{var v,p,b,C;const h=(p=(v=o.current)==null?void 0:v.clientWidth)!=null?p:0,g=(C=(b=o.current)==null?void 0:b.clientHeight)!=null?C:0,w=e[1]/100*h-8,d=(100-e[2])/100*g-8;return{transform:`translate(${w}px, ${d}px)`,transition:i?"none":"transform 0.1s ease-out"}};return M.useEffect(()=>{const u=()=>{a(!1)};return window.addEventListener("pointerup",u),window.addEventListener("mouseup",u),()=>{window.removeEventListener("pointerup",u),window.removeEventListener("mouseup",u)}},[]),S.jsxs("div",{"data-u-comp":"color-picker-spectrum",ref:o,className:"univer-relative univer-overflow-hidden",children:[S.jsx("canvas",{ref:n,className:"univer-h-full univer-w-full univer-cursor-crosshair univer-rounded",onPointerDown:u=>{a(!0),s(u)},onPointerMove:u=>i&&s(u)}),S.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:f()})]})}function Lg({hsv:e,onChange:t,onChanged:r}){const[n,o]=M.useState(!1),i=M.useRef(null),a=M.useRef(null),s=M.useMemo(()=>{var y,h;return(h=(y=a.current)==null?void 0:y.clientWidth)!=null?h:0},[]),l=M.useCallback(y=>{const h=i.current;if(!h)return;const g=h.getBoundingClientRect(),w=g.width-s,d=Math.max(0,Math.min(y-g.left,w)),v=Math.round(d/w*360);t(v,e[1],e[2])},[e,s,t]),c=M.useCallback(y=>{y.stopPropagation(),n&&l(y.clientX)},[n,l]),f=M.useCallback(()=>{o(!1),r==null||r(e[0],e[1],e[2])},[e,r]);M.useEffect(()=>(n&&(window.addEventListener("pointermove",c),window.addEventListener("pointerup",f),window.addEventListener("mouseup",f)),()=>{window.removeEventListener("pointermove",c),window.removeEventListener("pointerup",f),window.removeEventListener("mouseup",f)}),[n,c,f]);const u=()=>{var h;return`${Math.min(Math.max(e[0],0),360)/360*(100-s/((h=i.current)==null?void 0:h.clientWidth)*100)}%`};return S.jsx("div",{"data-u-comp":"color-picker-hue-slider",className:"univer-relative univer-w-full univer-select-none",children:S.jsx("div",{ref:i,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}));Cd.displayName=md.displayName;const Sd=M.forwardRef(({className:e,...t},r)=>S.jsx(gd,{ref:r,className:ie("univer-text-sm univer-text-gray-500",e),...t}));Sd.displayName=gd.displayName;function Dg(e={}){const t=M.useCallback(()=>{const{innerWidth:d,innerHeight:v}=window;return{x:Math.max(0,(d-0)/2),y:Math.max(0,(v-0)/2)}},[]),{defaultPosition:r=t(),enabled:n=!1}=e,[o,i]=M.useState(r),[a,s]=M.useState(!1),l=M.useRef(null),c=M.useRef({x:0,y:0}),f=M.useRef({x:0,y:0}),u=M.useRef(!1);M.useEffect(()=>{if(!l.current||u.current||e.defaultPosition)return;const{width:d,height:v}=l.current.getBoundingClientRect(),{innerWidth:p,innerHeight:b}=window,C=Math.max(0,(p-d)/2),x=Math.max(0,(b-v)/2);i({x:C,y:x}),c.current={x:C,y:x},u.current=!0},[e.defaultPosition]);const y=M.useCallback((d,v)=>{if(!l.current)return{x:d,y:v};const p=l.current.getBoundingClientRect(),{clientWidth:b,clientHeight:C}=document.documentElement;let x=c.current.x+(d-f.current.x),R=c.current.y+(v-f.current.y);return x<0&&(x=0),R<0&&(R=0),x+p.width>b&&(x=b-p.width),R+p.height>C&&(R=C-p.height),{x,y:R}},[]),h=M.useCallback(d=>{n&&(d.preventDefault(),d.stopPropagation(),c.current={...o},f.current={x:d.clientX,y:d.clientY},s(!0),document.body.style.userSelect="none")},[n,o]),g=M.useCallback(d=>{if(!a)return;d.preventDefault(),d.stopPropagation();const v=y(d.clientX,d.clientY);i(v)},[a,y]),w=M.useCallback(()=>{s(!1),document.body.style.userSelect=""},[]);return M.useEffect(()=>{if(n)return document.addEventListener("mousemove",g),document.addEventListener("mouseup",w),()=>{document.removeEventListener("mousemove",g),document.removeEventListener("mouseup",w)}},[n,g,w]),{position:o,isDragging:a,elementRef:l,setElementRef:d=>{if(l.current=d,d&&!u.current&&!e.defaultPosition){const{width:v,height:p}=d.getBoundingClientRect(),{innerWidth:b,innerHeight:C}=window,x=Math.max(0,(b-v)/2),R=Math.max(0,(C-p)/2);i({x,y:R}),c.current={x,y:R},u.current=!0}},handleMouseDown:h}}function Rs(e){var L,j,D,$;const{className:t,children:r,style:n,open:o=!1,title:i,width:a,draggable:s=!1,defaultPosition:l,destroyOnClose:c=!1,footer:f,mask:u=!0,keyboard:y=!0,closable:h=!0,maskClosable:g=!0,showOk:w,showCancel:d,onOpenChange:v,onClose:p,onOk:b,onCancel:C}=e,{locale:x}=M.useContext(pr),{position:R,isDragging:E,setElementRef:P,handleMouseDown:O}=Dg({defaultPosition:l,enabled:s}),N=f!=null?f:w||d?S.jsxs("div",{className:"univer-flex univer-justify-end univer-gap-2",children:[d&&S.jsx(Wr,{onClick:C,children:(j=(L=x==null?void 0:x.Confirm)==null?void 0:L.cancel)!=null?j:"Cancel"}),w&&S.jsx(Wr,{variant:"primary",onClick:b,children:($=(D=x==null?void 0:x.Confirm)==null?void 0:D.confirm)!=null?$:"OK"})]}):null,T=M.useCallback(I=>{I&&s&&P(I)},[s,P]),A=M.useCallback(I=>{!g&&!I||(v==null||v(I),I||p==null||p())},[p,v]);function H(){v==null||v(!1),p==null||p()}return S.jsx(Pg,{open:o,onOpenChange:A,modal:u!==!1,children:S.jsxs(bd,{ref:T,className:ie(t,{"!univer-animate-none":s}),style:{...n,width:a?typeof a=="number"?`${a}px`:a:void 0,maxWidth:a?"initial":void 0,...s?{position:"absolute",margin:0,left:0,top:0,transform:`translate(${R.x}px, ${R.y}px)`,transition:E?"none":void 0,cursor:E?"grabbing":void 0}:{}},closable:h,onClickClose:H,children:[S.jsxs(wd,{className:ie({"!univer-hidden":!i}),"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?O:void 0,children:[S.jsx(Cd,{children:i}),S.jsx(Sd,{className:"univer-hidden"})]}),r,N&&S.jsx(xd,{children:N})]})})}const di=(e,t,r)=>{t=t/100,r=r/100;const n=r*t,o=n*(1-Math.abs(e/60%2-1)),i=r-n;let a=0,s=0,l=0;return e>=0&&e<60?(a=n,s=o,l=0):e>=60&&e<120?(a=o,s=n,l=0):e>=120&&e<180?(a=0,s=n,l=o):e>=180&&e<240?(a=0,s=o,l=n):e>=240&&e<300?(a=o,s=0,l=n):e>=300&&e<360&&(a=n,s=0,l=o),[Math.round((a+i)*255),Math.round((s+i)*255),Math.round((l+i)*255)]},Rd=(e,t,r)=>{const n=o=>o.toString(16).padStart(2,"0");return`#${n(e)}${n(t)}${n(r)}`},Ed=(e,t,r)=>{e/=255,t/=255,r/=255;const n=Math.max(e,t,r),o=Math.min(e,t,r),i=n-o;let a=0,s=0;const l=n;return n!==0&&(s=i/n),i!==0&&(n===e?a=(t-r)/i+(t<r?6:0):n===t?a=(r-e)/i+2:n===r&&(a=(e-t)/i+4),a*=60),[a,s*100,l*100]},Es=e=>{e.length===4&&(e=`#${e.slice(1).split("").map(o=>o+o).join("")}`);const[t,r,n]=e.match(/\w\w/g).map(o=>Number.parseInt(o,16));return Ed(t,r,n)},fi=(e,t,r)=>{const[n,o,i]=di(e,t,r);return Rd(n,o,i)};function _g({hsv:e,onChange:t}){const[r,n]=M.useState(""),o=M.useMemo(()=>fi(e[0],e[1],e[2]),[e]);M.useEffect(()=>{n(o.replace(/^#/,""))},[o]);const i=l=>/^[0-9A-Fa-f]{6}$/.test(l),a=l=>{const c=l.target.value.trim();if(!(c.length>6)&&!(c!==""&&!/^[0-9A-Fa-f]*$/.test(c))&&(n(c),i(c))){const f=Es(c);f&&t&&t(...f)}},s=()=>{i(r)||n(o.replace(/^#/,""))};return S.jsxs(S.Fragment,{children:[S.jsx("input",{className:ie("univer-w-full univer-px-2 !univer-pl-4 univer-uppercase focus:univer-border-primary-500 focus:univer-outline-none dark:!univer-text-white",Ct),value:r,onChange:a,onBlur:s,maxLength:6,spellCheck:!1}),S.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 Og({hsv:e,onChange:t}){const[r,n]=M.useState({r:0,g:0,b:0});M.useEffect(()=>{const[a,s,l]=di(e[0],e[1],e[2]);n({r:Math.round(a),g:Math.round(s),b:Math.round(l)})},[e]);const o=(a,s)=>{if(s!==""&&!/^\d*$/.test(s))return;const l=s===""?0:Number.parseInt(s,10);if(l>255)return;const c={...r,[a]:l};if(n(c),t){const f=Ed(c.r,c.g,c.b);t(...f)}},i=()=>{const[a,s,l]=di(e[0],e[1],e[2]);n({r:Math.round(a),g:Math.round(s),b:Math.round(l)})};return S.jsxs("div",{className:"univer-flex univer-items-center univer-gap-2 [&>input]:univer-w-11 [&>input]:univer-border-gray-200 [&>input]:focus:univer-border-primary-500 dark:[&>input]:!univer-border-gray-600 dark:[&>input]:!univer-text-white",children:[S.jsx("input",{value:r.r,onChange:a=>o("r",a.target.value),onBlur:i,maxLength:3}),S.jsx("input",{value:r.g,onChange:a=>o("g",a.target.value),onBlur:i,maxLength:3}),S.jsx("input",{value:r.b,onChange:a=>o("b",a.target.value),onBlur:i,maxLength:3})]})}function kg({hsv:e,onChange:t}){return S.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:S.jsxs("div",{className:"univer-relative univer-flex univer-flex-1 univer-gap-2",children:[S.jsx(_g,{hsv:e,onChange:t}),S.jsx(Og,{hsv:e,onChange:t})]})})}const Tg=[["#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 Ig({hsv:e,onChange:t}){const r=M.useCallback(o=>{const[i,a,s]=Es(o);t(i,a,s)},[t]),n=fi(e[0],e[1],e[2]);return S.jsx("div",{"data-u-comp":"color-picker-presets",className:"univer-grid univer-content-center univer-gap-2",children:Tg.map((o,i)=>S.jsx("div",{className:"univer-grid univer-grid-flow-col univer-items-center univer-justify-between univer-gap-2",children:o.map((a,s)=>S.jsx("button",{type:"button",className:ie("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":a.toUpperCase()===n.toUpperCase(),"!univer-border-gray-200":i===0&&s===0}),style:{backgroundColor:a},onClick:()=>r(a)},s))},i))})}function Ag({hsv:e,onChange:t,onChanged:r}){const n=M.useRef(null),o=M.useRef(null),[i,a]=M.useState(!1);M.useEffect(()=>{const u=n.current;if(!u)return;const y=u.getContext("2d");if(!y)return;const h=y.createLinearGradient(0,0,u.width,0);h.addColorStop(0,`hsl(${e[0]}, 0%, 50%)`),h.addColorStop(1,`hsl(${e[0]}, 100%, 50%)`),y.fillStyle=h,y.fillRect(0,0,u.width,u.height);const g=y.createLinearGradient(0,0,0,u.height);g.addColorStop(0,"rgba(255, 255, 255, 0)"),g.addColorStop(1,"rgba(0, 0, 0, 1)"),y.fillStyle=g,y.fillRect(0,0,u.width,u.height)},[e]);const s=u=>{u.stopPropagation();const y=n.current;if(!y)return;const h=y.getBoundingClientRect(),g=Math.max(0,Math.min(u.clientX-h.left,h.width)),w=Math.max(0,Math.min(u.clientY-h.top,h.height)),d=g/h.width*100,v=100-w/h.height*100;t(e[0],d,v)},l=M.useCallback(()=>{a(!1)},[e]);function c(){r==null||r(e[0],e[1],e[2])}M.useEffect(()=>{var u;return(u=o.current)==null||u.addEventListener("mouseup",c),window.addEventListener("pointerup",l),window.addEventListener("mouseup",l),()=>{var y;(y=o.current)==null||y.removeEventListener("mouseup",c),window.removeEventListener("pointerup",l),window.removeEventListener("mouseup",l)}},[e]);const f=()=>{var v,p,b,C;const h=(p=(v=o.current)==null?void 0:v.clientWidth)!=null?p:0,g=(C=(b=o.current)==null?void 0:b.clientHeight)!=null?C:0,w=e[1]/100*h-8,d=(100-e[2])/100*g-8;return{transform:`translate(${w}px, ${d}px)`,transition:i?"none":"transform 0.1s ease-out"}};return M.useEffect(()=>{const u=()=>{a(!1)};return window.addEventListener("pointerup",u),window.addEventListener("mouseup",u),()=>{window.removeEventListener("pointerup",u),window.removeEventListener("mouseup",u)}},[]),S.jsxs("div",{"data-u-comp":"color-picker-spectrum",ref:o,className:"univer-relative univer-overflow-hidden",children:[S.jsx("canvas",{ref:n,className:"univer-h-full univer-w-full univer-cursor-crosshair univer-rounded",onPointerDown:u=>{a(!0),s(u)},onPointerMove:u=>i&&s(u)}),S.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:f()})]})}function Lg({hsv:e,onChange:t,onChanged:r}){const[n,o]=M.useState(!1),i=M.useRef(null),a=M.useRef(null),s=M.useMemo(()=>{var y,h;return(h=(y=a.current)==null?void 0:y.clientWidth)!=null?h:0},[]),l=M.useCallback(y=>{const h=i.current;if(!h)return;const g=h.getBoundingClientRect(),w=g.width-s,d=Math.max(0,Math.min(y-g.left,w)),v=Math.round(d/w*360);t(v,e[1],e[2])},[e,s,t]),c=M.useCallback(y=>{y.stopPropagation(),n&&l(y.clientX)},[n,l]),f=M.useCallback(()=>{o(!1),r==null||r(e[0],e[1],e[2])},[e,r]);M.useEffect(()=>(n&&(window.addEventListener("pointermove",c),window.addEventListener("pointerup",f),window.addEventListener("mouseup",f)),()=>{window.removeEventListener("pointermove",c),window.removeEventListener("pointerup",f),window.removeEventListener("mouseup",f)}),[n,c,f]);const u=()=>{var h;return`${Math.min(Math.max(e[0],0),360)/360*(100-s/((h=i.current)==null?void 0:h.clientWidth)*100)}%`};return S.jsx("div",{"data-u-comp":"color-picker-hue-slider",className:"univer-relative univer-w-full univer-select-none",children:S.jsx("div",{ref:i,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

@@ -4987,6 +4987,7 @@ const Ci = (e, t, n) => {
     l * 100
   ];
 }, Ws = (e) => {
+  e.length === 4 && (e = `#${e.slice(1).split("").map((o) => o + o).join("")}`);
   const [t, n, r] = e.match(/\w\w/g).map((o) => Number.parseInt(o, 16));
   return Ad(t, n, r);
 }, Si = (e, t, n) => {

package/lib/index.js

@@ -4987,6 +4987,7 @@ const Ci = (e, t, n) => {
     l * 100
   ];
 }, Ws = (e) => {
+  e.length === 4 && (e = `#${e.slice(1).split("").map((o) => o + o).join("")}`);
   const [t, n, r] = e.match(/\w\w/g).map((o) => Number.parseInt(o, 16));
   return Ad(t, n, r);
 }, Si = (e, t, n) => {

package/lib/umd/index.js

@@ -111,7 +111,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}));ju.displayName=$u.displayName;const Vu=P.forwardRef(({className:e,...t},r)=>S.jsx(zu,{ref:r,className:ae("univer-text-sm univer-text-gray-500",e),...t}));Vu.displayName=zu.displayName;function _g(e={}){const t=P.useCallback(()=>{const{innerWidth:d,innerHeight:v}=window;return{x:Math.max(0,(d-0)/2),y:Math.max(0,(v-0)/2)}},[]),{defaultPosition:r=t(),enabled:n=!1}=e,[o,i]=P.useState(r),[a,s]=P.useState(!1),u=P.useRef(null),c=P.useRef({x:0,y:0}),f=P.useRef({x:0,y:0}),l=P.useRef(!1);P.useEffect(()=>{if(!u.current||l.current||e.defaultPosition)return;const{width:d,height:v}=u.current.getBoundingClientRect(),{innerWidth:p,innerHeight:b}=window,x=Math.max(0,(p-d)/2),C=Math.max(0,(b-v)/2);i({x,y:C}),c.current={x,y:C},l.current=!0},[e.defaultPosition]);const y=P.useCallback((d,v)=>{if(!u.current)return{x:d,y:v};const p=u.current.getBoundingClientRect(),{clientWidth:b,clientHeight:x}=document.documentElement;let C=c.current.x+(d-f.current.x),E=c.current.y+(v-f.current.y);return C<0&&(C=0),E<0&&(E=0),C+p.width>b&&(C=b-p.width),E+p.height>x&&(E=x-p.height),{x:C,y:E}},[]),h=P.useCallback(d=>{n&&(d.preventDefault(),d.stopPropagation(),c.current={...o},f.current={x:d.clientX,y:d.clientY},s(!0),document.body.style.userSelect="none")},[n,o]),g=P.useCallback(d=>{if(!a)return;d.preventDefault(),d.stopPropagation();const v=y(d.clientX,d.clientY);i(v)},[a,y]),w=P.useCallback(()=>{s(!1),document.body.style.userSelect=""},[]);return P.useEffect(()=>{if(n)return document.addEventListener("mousemove",g),document.addEventListener("mouseup",w),()=>{document.removeEventListener("mousemove",g),document.removeEventListener("mouseup",w)}},[n,g,w]),{position:o,isDragging:a,elementRef:u,setElementRef:d=>{if(u.current=d,d&&!l.current&&!e.defaultPosition){const{width:v,height:p}=d.getBoundingClientRect(),{innerWidth:b,innerHeight:x}=window,C=Math.max(0,(b-v)/2),E=Math.max(0,(x-p)/2);i({x:C,y:E}),c.current={x:C,y:E},l.current=!0}},handleMouseDown:h}}function _a(e){var L,$,_,z;const{className:t,children:r,style:n,open:o=!1,title:i,width:a,draggable:s=!1,defaultPosition:u,destroyOnClose:c=!1,footer:f,mask:l=!0,keyboard:y=!0,closable:h=!0,maskClosable:g=!0,showOk:w,showCancel:d,onOpenChange:v,onClose:p,onOk:b,onCancel:x}=e,{locale:C}=P.useContext(nr),{position:E,isDragging:M,setElementRef:N,handleMouseDown:k}=_g({defaultPosition:u,enabled:s}),D=f!=null?f:w||d?S.jsxs("div",{className:"univer-flex univer-justify-end univer-gap-2",children:[d&&S.jsx(Or,{onClick:x,children:($=(L=C==null?void 0:C.Confirm)==null?void 0:L.cancel)!=null?$:"Cancel"}),w&&S.jsx(Or,{variant:"primary",onClick:b,children:(z=(_=C==null?void 0:C.Confirm)==null?void 0:_.confirm)!=null?z:"OK"})]}):null,I=P.useCallback(A=>{A&&s&&N(A)},[s,N]),R=P.useCallback(A=>{!g&&!A||(v==null||v(A),A||p==null||p())},[p,v]);function W(){v==null||v(!1),p==null||p()}return S.jsx(Ng,{open:o,onOpenChange:R,modal:l!==!1,children:S.jsxs(Hu,{ref:I,className:ae(t,{"!univer-animate-none":s}),style:{...n,width:a?typeof a=="number"?`${a}px`:a:void 0,maxWidth:a?"initial":void 0,...s?{position:"absolute",margin:0,left:0,top:0,transform:`translate(${E.x}px, ${E.y}px)`,transition:M?"none":void 0,cursor:M?"grabbing":void 0}:{}},closable:h,onClickClose:W,children:[S.jsxs(Wu,{className:ae({"!univer-hidden":!i}),"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:[S.jsx(ju,{children:i}),S.jsx(Vu,{className:"univer-hidden"})]}),r,D&&S.jsx(Bu,{children:D})]})})}const Jo=(e,t,r)=>{t=t/100,r=r/100;const n=r*t,o=n*(1-Math.abs(e/60%2-1)),i=r-n;let a=0,s=0,u=0;return e>=0&&e<60?(a=n,s=o,u=0):e>=60&&e<120?(a=o,s=n,u=0):e>=120&&e<180?(a=0,s=n,u=o):e>=180&&e<240?(a=0,s=o,u=n):e>=240&&e<300?(a=o,s=0,u=n):e>=300&&e<360&&(a=n,s=0,u=o),[Math.round((a+i)*255),Math.round((s+i)*255),Math.round((u+i)*255)]},qu=(e,t,r)=>{const n=o=>o.toString(16).padStart(2,"0");return`#${n(e)}${n(t)}${n(r)}`},Gu=(e,t,r)=>{e/=255,t/=255,r/=255;const n=Math.max(e,t,r),o=Math.min(e,t,r),i=n-o;let a=0,s=0;const u=n;return n!==0&&(s=i/n),i!==0&&(n===e?a=(t-r)/i+(t<r?6:0):n===t?a=(r-e)/i+2:n===r&&(a=(e-t)/i+4),a*=60),[a,s*100,u*100]},Oa=e=>{const[t,r,n]=e.match(/\w\w/g).map(o=>Number.parseInt(o,16));return Gu(t,r,n)},ei=(e,t,r)=>{const[n,o,i]=Jo(e,t,r);return qu(n,o,i)};function Og({hsv:e,onChange:t}){const[r,n]=P.useState(""),o=P.useMemo(()=>ei(e[0],e[1],e[2]),[e]);P.useEffect(()=>{n(o.replace(/^#/,""))},[o]);const i=u=>/^[0-9A-Fa-f]{6}$/.test(u),a=u=>{const c=u.target.value.trim();if(!(c.length>6)&&!(c!==""&&!/^[0-9A-Fa-f]*$/.test(c))&&(n(c),i(c))){const f=Oa(c);f&&t&&t(...f)}},s=()=>{i(r)||n(o.replace(/^#/,""))};return S.jsxs(S.Fragment,{children:[S.jsx("input",{className:ae("univer-w-full univer-px-2 !univer-pl-4 univer-uppercase focus:univer-border-primary-500 focus:univer-outline-none dark:!univer-text-white",Ct),value:r,onChange:a,onBlur:s,maxLength:6,spellCheck:!1}),S.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 kg({hsv:e,onChange:t}){const[r,n]=P.useState({r:0,g:0,b:0});P.useEffect(()=>{const[a,s,u]=Jo(e[0],e[1],e[2]);n({r:Math.round(a),g:Math.round(s),b:Math.round(u)})},[e]);const o=(a,s)=>{if(s!==""&&!/^\d*$/.test(s))return;const u=s===""?0:Number.parseInt(s,10);if(u>255)return;const c={...r,[a]:u};if(n(c),t){const f=Gu(c.r,c.g,c.b);t(...f)}},i=()=>{const[a,s,u]=Jo(e[0],e[1],e[2]);n({r:Math.round(a),g:Math.round(s),b:Math.round(u)})};return S.jsxs("div",{className:"univer-flex univer-items-center univer-gap-2 [&>input]:univer-w-11 [&>input]:univer-border-gray-200 [&>input]:focus:univer-border-primary-500 dark:[&>input]:!univer-border-gray-600 dark:[&>input]:!univer-text-white",children:[S.jsx("input",{value:r.r,onChange:a=>o("r",a.target.value),onBlur:i,maxLength:3}),S.jsx("input",{value:r.g,onChange:a=>o("g",a.target.value),onBlur:i,maxLength:3}),S.jsx("input",{value:r.b,onChange:a=>o("b",a.target.value),onBlur:i,maxLength:3})]})}function Tg({hsv:e,onChange:t}){return S.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:S.jsxs("div",{className:"univer-relative univer-flex univer-flex-1 univer-gap-2",children:[S.jsx(Og,{hsv:e,onChange:t}),S.jsx(kg,{hsv:e,onChange:t})]})})}const Ig=[["#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 Ag({hsv:e,onChange:t}){const r=P.useCallback(o=>{const[i,a,s]=Oa(o);t(i,a,s)},[t]),n=ei(e[0],e[1],e[2]);return S.jsx("div",{"data-u-comp":"color-picker-presets",className:"univer-grid univer-content-center univer-gap-2",children:Ig.map((o,i)=>S.jsx("div",{className:"univer-grid univer-grid-flow-col univer-items-center univer-justify-between univer-gap-2",children:o.map((a,s)=>S.jsx("button",{type:"button",className:ae("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":a.toUpperCase()===n.toUpperCase(),"!univer-border-gray-200":i===0&&s===0}),style:{backgroundColor:a},onClick:()=>r(a)},s))},i))})}function Rg({hsv:e,onChange:t,onChanged:r}){const n=P.useRef(null),o=P.useRef(null),[i,a]=P.useState(!1);P.useEffect(()=>{const l=n.current;if(!l)return;const y=l.getContext("2d");if(!y)return;const h=y.createLinearGradient(0,0,l.width,0);h.addColorStop(0,`hsl(${e[0]}, 0%, 50%)`),h.addColorStop(1,`hsl(${e[0]}, 100%, 50%)`),y.fillStyle=h,y.fillRect(0,0,l.width,l.height);const g=y.createLinearGradient(0,0,0,l.height);g.addColorStop(0,"rgba(255, 255, 255, 0)"),g.addColorStop(1,"rgba(0, 0, 0, 1)"),y.fillStyle=g,y.fillRect(0,0,l.width,l.height)},[e]);const s=l=>{l.stopPropagation();const y=n.current;if(!y)return;const h=y.getBoundingClientRect(),g=Math.max(0,Math.min(l.clientX-h.left,h.width)),w=Math.max(0,Math.min(l.clientY-h.top,h.height)),d=g/h.width*100,v=100-w/h.height*100;t(e[0],d,v)},u=P.useCallback(()=>{a(!1)},[e]);function c(){r==null||r(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 y;(y=o.current)==null||y.removeEventListener("mouseup",c),window.removeEventListener("pointerup",u),window.removeEventListener("mouseup",u)}},[e]);const f=()=>{var v,p,b,x;const h=(p=(v=o.current)==null?void 0:v.clientWidth)!=null?p:0,g=(x=(b=o.current)==null?void 0:b.clientHeight)!=null?x:0,w=e[1]/100*h-8,d=(100-e[2])/100*g-8;return{transform:`translate(${w}px, ${d}px)`,transition:i?"none":"transform 0.1s ease-out"}};return P.useEffect(()=>{const l=()=>{a(!1)};return window.addEventListener("pointerup",l),window.addEventListener("mouseup",l),()=>{window.removeEventListener("pointerup",l),window.removeEventListener("mouseup",l)}},[]),S.jsxs("div",{"data-u-comp":"color-picker-spectrum",ref:o,className:"univer-relative univer-overflow-hidden",children:[S.jsx("canvas",{ref:n,className:"univer-h-full univer-w-full univer-cursor-crosshair univer-rounded",onPointerDown:l=>{a(!0),s(l)},onPointerMove:l=>i&&s(l)}),S.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:f()})]})}function Lg({hsv:e,onChange:t,onChanged:r}){const[n,o]=P.useState(!1),i=P.useRef(null),a=P.useRef(null),s=P.useMemo(()=>{var y,h;return(h=(y=a.current)==null?void 0:y.clientWidth)!=null?h:0},[]),u=P.useCallback(y=>{const h=i.current;if(!h)return;const g=h.getBoundingClientRect(),w=g.width-s,d=Math.max(0,Math.min(y-g.left,w)),v=Math.round(d/w*360);t(v,e[1],e[2])},[e,s,t]),c=P.useCallback(y=>{y.stopPropagation(),n&&u(y.clientX)},[n,u]),f=P.useCallback(()=>{o(!1),r==null||r(e[0],e[1],e[2])},[e,r]);P.useEffect(()=>(n&&(window.addEventListener("pointermove",c),window.addEventListener("pointerup",f),window.addEventListener("mouseup",f)),()=>{window.removeEventListener("pointermove",c),window.removeEventListener("pointerup",f),window.removeEventListener("mouseup",f)}),[n,c,f]);const l=()=>{var h;return`${Math.min(Math.max(e[0],0),360)/360*(100-s/((h=i.current)==null?void 0:h.clientWidth)*100)}%`};return S.jsx("div",{"data-u-comp":"color-picker-hue-slider",className:"univer-relative univer-w-full univer-select-none",children:S.jsx("div",{ref:i,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}));ju.displayName=$u.displayName;const Vu=P.forwardRef(({className:e,...t},r)=>S.jsx(zu,{ref:r,className:ae("univer-text-sm univer-text-gray-500",e),...t}));Vu.displayName=zu.displayName;function _g(e={}){const t=P.useCallback(()=>{const{innerWidth:d,innerHeight:v}=window;return{x:Math.max(0,(d-0)/2),y:Math.max(0,(v-0)/2)}},[]),{defaultPosition:r=t(),enabled:n=!1}=e,[o,i]=P.useState(r),[a,s]=P.useState(!1),u=P.useRef(null),c=P.useRef({x:0,y:0}),f=P.useRef({x:0,y:0}),l=P.useRef(!1);P.useEffect(()=>{if(!u.current||l.current||e.defaultPosition)return;const{width:d,height:v}=u.current.getBoundingClientRect(),{innerWidth:p,innerHeight:b}=window,x=Math.max(0,(p-d)/2),C=Math.max(0,(b-v)/2);i({x,y:C}),c.current={x,y:C},l.current=!0},[e.defaultPosition]);const y=P.useCallback((d,v)=>{if(!u.current)return{x:d,y:v};const p=u.current.getBoundingClientRect(),{clientWidth:b,clientHeight:x}=document.documentElement;let C=c.current.x+(d-f.current.x),E=c.current.y+(v-f.current.y);return C<0&&(C=0),E<0&&(E=0),C+p.width>b&&(C=b-p.width),E+p.height>x&&(E=x-p.height),{x:C,y:E}},[]),h=P.useCallback(d=>{n&&(d.preventDefault(),d.stopPropagation(),c.current={...o},f.current={x:d.clientX,y:d.clientY},s(!0),document.body.style.userSelect="none")},[n,o]),g=P.useCallback(d=>{if(!a)return;d.preventDefault(),d.stopPropagation();const v=y(d.clientX,d.clientY);i(v)},[a,y]),w=P.useCallback(()=>{s(!1),document.body.style.userSelect=""},[]);return P.useEffect(()=>{if(n)return document.addEventListener("mousemove",g),document.addEventListener("mouseup",w),()=>{document.removeEventListener("mousemove",g),document.removeEventListener("mouseup",w)}},[n,g,w]),{position:o,isDragging:a,elementRef:u,setElementRef:d=>{if(u.current=d,d&&!l.current&&!e.defaultPosition){const{width:v,height:p}=d.getBoundingClientRect(),{innerWidth:b,innerHeight:x}=window,C=Math.max(0,(b-v)/2),E=Math.max(0,(x-p)/2);i({x:C,y:E}),c.current={x:C,y:E},l.current=!0}},handleMouseDown:h}}function _a(e){var L,$,_,z;const{className:t,children:r,style:n,open:o=!1,title:i,width:a,draggable:s=!1,defaultPosition:u,destroyOnClose:c=!1,footer:f,mask:l=!0,keyboard:y=!0,closable:h=!0,maskClosable:g=!0,showOk:w,showCancel:d,onOpenChange:v,onClose:p,onOk:b,onCancel:x}=e,{locale:C}=P.useContext(nr),{position:E,isDragging:M,setElementRef:N,handleMouseDown:k}=_g({defaultPosition:u,enabled:s}),D=f!=null?f:w||d?S.jsxs("div",{className:"univer-flex univer-justify-end univer-gap-2",children:[d&&S.jsx(Or,{onClick:x,children:($=(L=C==null?void 0:C.Confirm)==null?void 0:L.cancel)!=null?$:"Cancel"}),w&&S.jsx(Or,{variant:"primary",onClick:b,children:(z=(_=C==null?void 0:C.Confirm)==null?void 0:_.confirm)!=null?z:"OK"})]}):null,I=P.useCallback(A=>{A&&s&&N(A)},[s,N]),R=P.useCallback(A=>{!g&&!A||(v==null||v(A),A||p==null||p())},[p,v]);function W(){v==null||v(!1),p==null||p()}return S.jsx(Ng,{open:o,onOpenChange:R,modal:l!==!1,children:S.jsxs(Hu,{ref:I,className:ae(t,{"!univer-animate-none":s}),style:{...n,width:a?typeof a=="number"?`${a}px`:a:void 0,maxWidth:a?"initial":void 0,...s?{position:"absolute",margin:0,left:0,top:0,transform:`translate(${E.x}px, ${E.y}px)`,transition:M?"none":void 0,cursor:M?"grabbing":void 0}:{}},closable:h,onClickClose:W,children:[S.jsxs(Wu,{className:ae({"!univer-hidden":!i}),"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:[S.jsx(ju,{children:i}),S.jsx(Vu,{className:"univer-hidden"})]}),r,D&&S.jsx(Bu,{children:D})]})})}const Jo=(e,t,r)=>{t=t/100,r=r/100;const n=r*t,o=n*(1-Math.abs(e/60%2-1)),i=r-n;let a=0,s=0,u=0;return e>=0&&e<60?(a=n,s=o,u=0):e>=60&&e<120?(a=o,s=n,u=0):e>=120&&e<180?(a=0,s=n,u=o):e>=180&&e<240?(a=0,s=o,u=n):e>=240&&e<300?(a=o,s=0,u=n):e>=300&&e<360&&(a=n,s=0,u=o),[Math.round((a+i)*255),Math.round((s+i)*255),Math.round((u+i)*255)]},qu=(e,t,r)=>{const n=o=>o.toString(16).padStart(2,"0");return`#${n(e)}${n(t)}${n(r)}`},Gu=(e,t,r)=>{e/=255,t/=255,r/=255;const n=Math.max(e,t,r),o=Math.min(e,t,r),i=n-o;let a=0,s=0;const u=n;return n!==0&&(s=i/n),i!==0&&(n===e?a=(t-r)/i+(t<r?6:0):n===t?a=(r-e)/i+2:n===r&&(a=(e-t)/i+4),a*=60),[a,s*100,u*100]},Oa=e=>{e.length===4&&(e=`#${e.slice(1).split("").map(o=>o+o).join("")}`);const[t,r,n]=e.match(/\w\w/g).map(o=>Number.parseInt(o,16));return Gu(t,r,n)},ei=(e,t,r)=>{const[n,o,i]=Jo(e,t,r);return qu(n,o,i)};function Og({hsv:e,onChange:t}){const[r,n]=P.useState(""),o=P.useMemo(()=>ei(e[0],e[1],e[2]),[e]);P.useEffect(()=>{n(o.replace(/^#/,""))},[o]);const i=u=>/^[0-9A-Fa-f]{6}$/.test(u),a=u=>{const c=u.target.value.trim();if(!(c.length>6)&&!(c!==""&&!/^[0-9A-Fa-f]*$/.test(c))&&(n(c),i(c))){const f=Oa(c);f&&t&&t(...f)}},s=()=>{i(r)||n(o.replace(/^#/,""))};return S.jsxs(S.Fragment,{children:[S.jsx("input",{className:ae("univer-w-full univer-px-2 !univer-pl-4 univer-uppercase focus:univer-border-primary-500 focus:univer-outline-none dark:!univer-text-white",Ct),value:r,onChange:a,onBlur:s,maxLength:6,spellCheck:!1}),S.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 kg({hsv:e,onChange:t}){const[r,n]=P.useState({r:0,g:0,b:0});P.useEffect(()=>{const[a,s,u]=Jo(e[0],e[1],e[2]);n({r:Math.round(a),g:Math.round(s),b:Math.round(u)})},[e]);const o=(a,s)=>{if(s!==""&&!/^\d*$/.test(s))return;const u=s===""?0:Number.parseInt(s,10);if(u>255)return;const c={...r,[a]:u};if(n(c),t){const f=Gu(c.r,c.g,c.b);t(...f)}},i=()=>{const[a,s,u]=Jo(e[0],e[1],e[2]);n({r:Math.round(a),g:Math.round(s),b:Math.round(u)})};return S.jsxs("div",{className:"univer-flex univer-items-center univer-gap-2 [&>input]:univer-w-11 [&>input]:univer-border-gray-200 [&>input]:focus:univer-border-primary-500 dark:[&>input]:!univer-border-gray-600 dark:[&>input]:!univer-text-white",children:[S.jsx("input",{value:r.r,onChange:a=>o("r",a.target.value),onBlur:i,maxLength:3}),S.jsx("input",{value:r.g,onChange:a=>o("g",a.target.value),onBlur:i,maxLength:3}),S.jsx("input",{value:r.b,onChange:a=>o("b",a.target.value),onBlur:i,maxLength:3})]})}function Tg({hsv:e,onChange:t}){return S.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:S.jsxs("div",{className:"univer-relative univer-flex univer-flex-1 univer-gap-2",children:[S.jsx(Og,{hsv:e,onChange:t}),S.jsx(kg,{hsv:e,onChange:t})]})})}const Ig=[["#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 Ag({hsv:e,onChange:t}){const r=P.useCallback(o=>{const[i,a,s]=Oa(o);t(i,a,s)},[t]),n=ei(e[0],e[1],e[2]);return S.jsx("div",{"data-u-comp":"color-picker-presets",className:"univer-grid univer-content-center univer-gap-2",children:Ig.map((o,i)=>S.jsx("div",{className:"univer-grid univer-grid-flow-col univer-items-center univer-justify-between univer-gap-2",children:o.map((a,s)=>S.jsx("button",{type:"button",className:ae("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":a.toUpperCase()===n.toUpperCase(),"!univer-border-gray-200":i===0&&s===0}),style:{backgroundColor:a},onClick:()=>r(a)},s))},i))})}function Rg({hsv:e,onChange:t,onChanged:r}){const n=P.useRef(null),o=P.useRef(null),[i,a]=P.useState(!1);P.useEffect(()=>{const l=n.current;if(!l)return;const y=l.getContext("2d");if(!y)return;const h=y.createLinearGradient(0,0,l.width,0);h.addColorStop(0,`hsl(${e[0]}, 0%, 50%)`),h.addColorStop(1,`hsl(${e[0]}, 100%, 50%)`),y.fillStyle=h,y.fillRect(0,0,l.width,l.height);const g=y.createLinearGradient(0,0,0,l.height);g.addColorStop(0,"rgba(255, 255, 255, 0)"),g.addColorStop(1,"rgba(0, 0, 0, 1)"),y.fillStyle=g,y.fillRect(0,0,l.width,l.height)},[e]);const s=l=>{l.stopPropagation();const y=n.current;if(!y)return;const h=y.getBoundingClientRect(),g=Math.max(0,Math.min(l.clientX-h.left,h.width)),w=Math.max(0,Math.min(l.clientY-h.top,h.height)),d=g/h.width*100,v=100-w/h.height*100;t(e[0],d,v)},u=P.useCallback(()=>{a(!1)},[e]);function c(){r==null||r(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 y;(y=o.current)==null||y.removeEventListener("mouseup",c),window.removeEventListener("pointerup",u),window.removeEventListener("mouseup",u)}},[e]);const f=()=>{var v,p,b,x;const h=(p=(v=o.current)==null?void 0:v.clientWidth)!=null?p:0,g=(x=(b=o.current)==null?void 0:b.clientHeight)!=null?x:0,w=e[1]/100*h-8,d=(100-e[2])/100*g-8;return{transform:`translate(${w}px, ${d}px)`,transition:i?"none":"transform 0.1s ease-out"}};return P.useEffect(()=>{const l=()=>{a(!1)};return window.addEventListener("pointerup",l),window.addEventListener("mouseup",l),()=>{window.removeEventListener("pointerup",l),window.removeEventListener("mouseup",l)}},[]),S.jsxs("div",{"data-u-comp":"color-picker-spectrum",ref:o,className:"univer-relative univer-overflow-hidden",children:[S.jsx("canvas",{ref:n,className:"univer-h-full univer-w-full univer-cursor-crosshair univer-rounded",onPointerDown:l=>{a(!0),s(l)},onPointerMove:l=>i&&s(l)}),S.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:f()})]})}function Lg({hsv:e,onChange:t,onChanged:r}){const[n,o]=P.useState(!1),i=P.useRef(null),a=P.useRef(null),s=P.useMemo(()=>{var y,h;return(h=(y=a.current)==null?void 0:y.clientWidth)!=null?h:0},[]),u=P.useCallback(y=>{const h=i.current;if(!h)return;const g=h.getBoundingClientRect(),w=g.width-s,d=Math.max(0,Math.min(y-g.left,w)),v=Math.round(d/w*360);t(v,e[1],e[2])},[e,s,t]),c=P.useCallback(y=>{y.stopPropagation(),n&&u(y.clientX)},[n,u]),f=P.useCallback(()=>{o(!1),r==null||r(e[0],e[1],e[2])},[e,r]);P.useEffect(()=>(n&&(window.addEventListener("pointermove",c),window.addEventListener("pointerup",f),window.addEventListener("mouseup",f)),()=>{window.removeEventListener("pointermove",c),window.removeEventListener("pointerup",f),window.removeEventListener("mouseup",f)}),[n,c,f]);const l=()=>{var h;return`${Math.min(Math.max(e[0],0),360)/360*(100-s/((h=i.current)==null?void 0:h.clientWidth)*100)}%`};return S.jsx("div",{"data-u-comp":"color-picker-hue-slider",className:"univer-relative univer-w-full univer-select-none",children:S.jsx("div",{ref:i,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.11",
+  "version": "0.10.12",
   "private": false,
   "description": "UI component library for building exceptional Univer.",
   "author": "DreamNum <developer@univer.ai>",
@@ -71,7 +71,7 @@
     "react-transition-group": "^4.4.5",
     "sonner": "^2.0.7",
     "tailwind-merge": "2.6.0",
-    "@univerjs/themes": "0.10.11"
+    "@univerjs/themes": "0.10.12"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "6.9.1",
@@ -86,8 +86,8 @@
     "typescript": "^5.9.3",
     "vite": "^7.1.10",
     "vitest": "^3.2.4",
-    "@univerjs-infra/shared": "0.10.11",
-    "@univerjs/core": "0.10.11"
+    "@univerjs/core": "0.10.12",
+    "@univerjs-infra/shared": "0.10.12"
   },
   "scripts": {
     "test": "vitest run",