@baseline-ui/core 3.7.0 → 3.8.0

package/dist/chunk-ZXN5VT4G.mjs

@@ -1,10 +0,0 @@
-import {a as a$k}from'./chunk-SBR5UAUY.mjs';import {a as a$m}from'./chunk-NLVJYKSA.mjs';import {c as c$2}from'./chunk-54ZKQAA3.mjs';import {c as c$4}from'./chunk-HTRO6BM5.mjs';import {I,j,f,e,p,F,A,H,i,B,s,C,G,z,h,g,m,q,D,E,t,l,v,y,u,a as a$n,w,d,c as c$6,x,k,b as b$8,o,n,r}from'./chunk-LY2ZVEGJ.mjs';import {a as a$7,b as b$7,c as c$5,d as d$1}from'./chunk-FCKJCFMD.mjs';import {a as a$p}from'./chunk-IN7BLI4M.mjs';import {a as a$i}from'./chunk-YAI33K42.mjs';import {a as a$c}from'./chunk-4QGZDJW4.mjs';import {a as a$d}from'./chunk-NT2MFIKD.mjs';import {b as b$5,e as e$1}from'./chunk-VPVF5N62.mjs';import {a as a$e}from'./chunk-JZXLV6JU.mjs';import {b as b$2,c as c$3}from'./chunk-IDIZSV2Y.mjs';import {b as b$4}from'./chunk-INFMXVHD.mjs';import {a as a$h}from'./chunk-DIL5HL6K.mjs';import {a as a$l}from'./chunk-OPIPJTLG.mjs';import {a as a$g}from'./chunk-5W6G3ZUT.mjs';import {a as a$a}from'./chunk-BA5OA5DY.mjs';import {a as a$o}from'./chunk-4EAXDHSV.mjs';import {a as a$j}from'./chunk-KX7WG3L4.mjs';import {b as b$3}from'./chunk-N2XGJKZG.mjs';import {b}from'./chunk-K5RYVERS.mjs';import {b as b$6,j as j$1}from'./chunk-MBRNO6IW.mjs';import {a as a$9}from'./chunk-22MA6EYO.mjs';import {a as a$f}from'./chunk-VDUFLHKK.mjs';import {a as a$8}from'./chunk-22VRCVTH.mjs';import {a as a$6}from'./chunk-66CUIXA6.mjs';import {a as a$b}from'./chunk-FPM5UJRF.mjs';import {a as a$5}from'./chunk-HPUUQKKH.mjs';import {a as a$1}from'./chunk-SGZWUG3H.mjs';import {a as a$3}from'./chunk-RSKKEGJZ.mjs';import {a as a$2}from'./chunk-STMDFIUL.mjs';import {a}from'./chunk-B3EZOXNU.mjs';import {b as b$1,c as c$1}from'./chunk-3WKDIXCM.mjs';import {c}from'./chunk-ETM4MNG4.mjs';import {j as j$2}from'./chunk-SD43KVTU.mjs';import {a as a$4}from'./chunk-4QEH5CGK.mjs';import io,{useCallback,useMemo,useEffect}from'react';import {jsxs,jsx,Fragment}from'react/jsx-runtime';import {TextIcon,PlusIcon,MinusIcon}from'@baseline-ui/icons/20';import {sprinkles}from'@baseline-ui/tokens';/**
- * Copyright (c) 2023-2024 PSPDFKit GmbH. All rights reserved.
- *
- * THIS SOURCE CODE AND ANY ACCOMPANYING DOCUMENTATION ARE PROTECTED BY INTERNATIONAL COPYRIGHT LAW
- * AND MAY NOT BE RESOLD OR REDISTRIBUTED. USAGE IS BOUND TO THE PSPDFKIT LICENSE AGREEMENT.
- * UNAUTHORIZED REPRODUCTION OR DISTRIBUTION IS SUBJECT TO CIVIL AND CRIMINAL PENALTIES.
- * This notice may not be removed from this file.
- *
- */
-var no=io.forwardRef(({color:o,colorLabel:e,colorName:l,isIndeterminate:r,indeterminateIcon:t,noneLabel:s,...a$5},n)=>{let i=io.useRef(null),{hoverProps:c$2,isHovered:m}=a({isDisabled:a$5.isDisabled}),{buttonProps:d,isPressed:g}=a$1(a$5,i),{isFocusVisible:f$1,focusProps:b$2}=a$2(),v=a$3({"data-block-id":a$5["data-block-id"],"data-focused":f$1,"data-focus-visible":f$1,"data-disabled":a$5.isDisabled,"data-hovered":m,"data-pressed":g}),P=c(),R=c();return jsxs("button",{...c$1(d,c$2,b$2,v),style:a$5.style,className:a$4(f({isHovered:m,isFocusVisible:f$1||a$5.isOpen,isDisabled:a$5.isDisabled,labelPosition:a$5.labelPosition}),"BaselineUI-ColorInputButton",a$5.className),ref:b$1(n,i),id:P,"aria-labelledby":a$5["aria-labelledby"]||`${P} ${R}`,children:[jsx(I,{color:o?.toString("hexa"),isIndeterminate:r,indeterminateIcon:t,noneLabel:s}),e?jsx("div",{className:j,id:R,"aria-hidden":"true",children:l}):typeof l=="string"&&jsx(b,{children:l})]})});no.displayName="ColorInputButton";var So=io.forwardRef(({className:o,style:e$1,icon:l,elementType:r="button",...t},s)=>{let a$6=io.useRef(null),{hoverProps:n,isHovered:i}=a({isDisabled:t.isDisabled}),{buttonProps:c,isPressed:m}=a$1({...t,elementType:r},a$6),{isFocusVisible:d,focusProps:g}=a$2(),f=a$3({"data-block-id":t["data-block-id"],"data-focused":d,"data-focus-visible":d,"data-disabled":t.isDisabled,"data-hovered":i,"data-pressed":m});return jsxs(r,{...c$1(a$5(r,t.isDisabled),c,n,g,f),ref:b$1(s,a$6),style:e$1,className:a$4(p({isHovered:i||m||t.isOpen,isFocusVisible:d,isDisabled:t.isDisabled}),"BaselineUI-IconColorInputButton","BaselineUI-IconColorInput-Button",o),children:[jsx(l,{size:16}),jsx("div",{className:e,style:{backgroundColor:t.color||void 0}})]})});So.displayName="IconColorInputButton";var qo=io.forwardRef(({setColor:o,color:e,triggerRef:l,autoFocus:r,presets:t,state:s$1,isIndeterminate:a,colorPresetsLabel:n},i$1)=>{let{formatMessage:c}=b$2(),m=useCallback(d=>{if(d instanceof Set&&d.size){let g=[...d][0],f=t.find(b=>b.id===g);a$6(f,"Preset not found"),o(f.id===F?null:a$7(f.id).toFormat(A)),s$1.close();}},[s$1,t,o]);return jsx("div",{className:a$4(s,"BaselineUI-ColorInput-Presets"),style:{minWidth:l.current?.offsetWidth},ref:i$1,children:jsx(c$2,{autoFocus:r,items:t,layout:"grid","aria-label":n??c(dt.colorPresets),className:i,renderOption:H,selectionMode:"single",selectedKeys:a?[]:[e?.toString(B)||F],onSelectionChange:m,shouldSelectOnPressUp:true,escapeKeyBehavior:"none"})})});qo.displayName="ColorPresetList";var dt=c$3({colorPresets:{defaultMessage:"Color Presets",id:"bui.colorInput.colorPresets"}});var Ye=({value:o,...e})=>{let l=io.useRef(null),r=io.useRef(null),t=io.useRef(null),s=b$7({...e,value:o}),{colorAreaProps:a,xInputProps:n,yInputProps:i,thumbProps:c}=a$n({...e,value:o,inputXRef:l,inputYRef:r,containerRef:t},s);useEffect(()=>{l.current?.focus();},[]);let{focusProps:m,isFocusVisible:d$1}=a$2();return jsx("div",{ref:t,...a,className:a$4(d,"BaselineUI-ColorInput-ColorArea"),children:jsxs("div",{...c,className:a$4(w({isFocusVisible:d$1}),"BaselineUI-ColorInput-ColorAreaThumb"),style:{...c.style,transform:"translate(-50%, -50%)",backgroundColor:C(o)?.withChannelValue("alpha",1).toString("css")},children:[jsx("input",{ref:l,...n,...m}),jsx("input",{ref:r,...i,...m})]})})};var qe=({color:o$1,setColor:e,allowAlpha:l,...r})=>{let t=d$1({value:o$1,onChange:d=>{e(C(d)?.toFormat(A).withChannelValue("alpha",o$1.getChannelValue("alpha")??1)||z);}}),s=io.useRef(null),{inputProps:a$1}=b$8({...r,"aria-label":"Hex"},t,s),{focusProps:n$1,isFocused:i}=a$2({isTextInput:true}),{hoverProps:c,isHovered:m}=a({});return jsxs("div",{className:a$4(n,"BaselineUI-ColorInput-FieldInput"),"data-color-mode":l?"hexa":"hex",children:[jsx("input",{...c$1(a$1,n$1,c),ref:s,className:o({isFocused:i,isHovered:m,allowAlpha:l})}),l?jsx(Je,{color:o$1,setColor:e}):null]})},Ge=({color:o,setColor:e,allowAlpha:l})=>{let r$1=o.toFormat("rgba"),{locale:t}=b$3();return jsxs("div",{className:a$4(n,"BaselineUI-ColorInput-FieldInput"),"data-color-mode":l?"rgba":"rgb",children:[jsx(a$p,{"aria-label":o.getChannelName("red",t),value:r$1.getChannelValue("red"),showStepper:false,className:r,onChange:s=>{e(r$1.withChannelValue("red",s).toFormat(A));},step:1,minValue:0,maxValue:255}),jsx(a$p,{"aria-label":o.getChannelName("green",t),value:r$1.getChannelValue("green"),showStepper:false,className:r,onChange:s=>{e(r$1.withChannelValue("green",s).toFormat(A));},step:1,minValue:0,maxValue:255}),jsx(a$p,{"aria-label":o.getChannelName("blue",t),value:r$1.getChannelValue("blue"),showStepper:false,className:r,onChange:s=>{e(r$1.withChannelValue("blue",s).toFormat(A));},step:1,minValue:0,maxValue:255}),l?jsx(Je,{color:o,setColor:e}):null]})},It={style:"percent",maximumFractionDigits:0},Je=({color:o,setColor:e})=>{let{locale:l}=b$3(),r$1=useCallback(t=>{e(o.withChannelValue("alpha",t));},[o,e]);return jsx(a$p,{"aria-label":o.getChannelName("alpha",l),value:o.getChannelValue("alpha"),formatOptions:It,className:r,showStepper:false,onChange:r$1,minValue:0,maxValue:1})};var Qo=({channel:o,...e})=>{let{locale:l}=b$3(),r=c$5({...e,channel:o,locale:l}),t=io.useRef(null),s=io.useRef(null),{trackProps:a,thumbProps:n,inputProps:i}=c$6({...e,channel:o,trackRef:t,inputRef:s,"aria-label":r.value.getChannelName(o,l)},r),{focusProps:c,isFocusVisible:m}=a$2();return jsxs("div",{className:a$4(k,{[a$o({size:"xs"})]:o==="alpha"},"BaselineUI-ColorInput-ColorSlider"),"data-channel":o,...a,ref:t,children:[o==="alpha"&&jsx("div",{className:x}),jsx("div",{className:k,style:a.style}),jsxs("div",{className:a$4(w({isFocusVisible:m}),"BaselineUI-ColorInput-ColorSliderThumb"),...n,children:[jsx("div",{className:x,style:{backgroundColor:"#ffffff"}}),jsx("div",{style:{backgroundColor:r.getDisplayColor().toString("css"),height:8},className:k}),jsx(b,{children:jsx("input",{ref:s,...i,...c})})]})]})};var Fo=({color:o,setColor:e,allowAlpha:l,colorFormatLabel:r,onChangeEnd:t})=>{let[s,a]=io.useState("hex"),{formatMessage:n}=b$2();return jsxs(Fragment,{children:[jsx(Ye,{value:o,xChannel:"saturation",yChannel:"lightness",onChange:e,onChangeEnd:t}),jsxs("div",{className:v,children:[jsx(Qo,{channel:"hue",value:o,onChange:e,onChangeEnd:t}),l?jsx(Qo,{channel:"alpha",value:o,onChange:e,onChangeEnd:t}):null]}),jsxs("div",{className:a$4(v,sprinkles.variants({paddingTop:"none",gap:"sm"})),children:[jsx(c$4,{label:r??n(vt.colorFormat),labelPosition:"start",variant:"ghost",items:y,selectedKey:s,onSelectionChange:i=>{a(i);}}),s==="hex"&&jsx(qe,{color:o,setColor:i=>{e(i),t?.(i);},allowAlpha:l}),s==="rgb"&&jsx(Ge,{color:o,setColor:i=>{e(i),t?.(i);},allowAlpha:l})]})]})},vt=c$3({colorFormat:{defaultMessage:"Color Format",id:"bui.colorInput.colorFormat"}});var ot=({color:o,setColor:e,storePickedColorKey:l$1,addColorButtonLabel:r,removeColorButtonLabel:t$1,customColorsLabel:s$1,addLabel:a,cancelLabel:n,newColorLabel:i$1,colorFormatLabel:c$1,pickerMode:m$1,allowAlpha:d,isIndeterminate:g,state:f})=>{let{locale:b}=b$3(),{formatMessage:v}=b$2(),P=io.useRef(null),R=a$j(P.current),[A$1,M]=a$k(l$1,[]),I=io.useMemo(()=>Array.isArray(A$1)?A$1.filter(p=>St(p)):[],[A$1]),H$1=io.useRef(null),[$,Ao]=io.useState(o),Mo=io.useMemo(()=>I.map(p=>({id:p,label:a$7(p).getColorName(b),description:p})),[I,b]),Q=useCallback(()=>{let p=m$1==="active"?o:$;if(I.includes(p.toString(B))){H$1.current?.querySelector(`[data-key='${p.toString(B)}']`)?.classList.add(t);return}M([...I,p.toString(B)]);},[I,o,M,$,m$1]);useEffect(()=>{let p=H$1.current;function y(co){co.animationName===u&&j$2(co)?.classList.remove(t);}return p?.addEventListener("animationend",y),()=>{p?.removeEventListener("animationend",y);}},[]);let O=c(),Z=jsx(a$l,{ref:P,variant:"secondary",size:"md","aria-label":r,icon:PlusIcon,onPress:m$1==="active"?Q:void 0}),uo=useCallback(p=>jsxs(a$d,{size:"content",className:m({includesCustomColorPicker:true}),style:{paddingBlockEnd:0},"aria-label":i$1??v(oe.newColor),children:[jsx(Fo,{color:$,setColor:Ao,allowAlpha:d,colorFormatLabel:c$1}),jsx(a$e,{}),jsx(a$h,{padding:"lg",display:"flex",flexDirection:"row-reverse",children:jsxs(a$h,{display:"inline-flex",gap:"lg",children:[jsx(b$4,{label:n??v(oe.cancel),size:"sm",variant:"secondary",onPress:p}),jsx(b$4,{label:a??v(oe.add),variant:"primary",onPress:()=>{Q(),p();},size:"sm"})]})})]}),[$,Q,v,d,i$1,c$1,n,a]),Oo=useCallback(p=>{a$6(p instanceof Set,"Key must be a set");let y=[...p][0];y&&(e(a$7(y).toFormat(A)),m$1==="lazy"&&f.close());},[e,m$1,f]);return jsxs(Fragment,{children:[jsx(a$e,{}),jsxs("div",{className:a$4(l,"BaselineUI-ColorInput-CustomColors"),children:[jsx("span",{id:O,children:s$1}),jsxs(a$h,{display:"flex",children:[!!I.length&&I.includes(o.toString(B))&&jsx(a$l,{variant:"secondary",size:"md",elementType:"div",icon:MinusIcon,"aria-label":t$1,onPress:()=>{M(I.filter(p=>p!==o.toString(B)));}}),m$1==="active"&&Z,m$1==="lazy"&&(R==="mobile"?jsxs(b$5,{children:[jsx(a$m,{children:Z}),jsx(e$1,{style:{zIndex:1e5},children:({close:p})=>uo(p)})]}):jsxs(b$6,{type:"dialog",children:[jsx(j$1,{children:Z}),jsx(a$c,{placement:"right top",className:q,offset:6,children:({close:p})=>uo(p)})]}))]})]}),!!I.length&&jsx(c$2,{items:Mo,layout:"grid","aria-labelledby":O,className:a$4(i,s,sprinkles.variants({paddingTop:"xs"}),"BaselineUI-ColorInput-CustomColorsListBox"),renderOption:H,ref:H$1,autoFocus:false,selectionMode:"single",selectedKeys:g?[]:[o.toString(B)],onSelectionChange:Oo,shouldSelectOnPressUp:true})]})},oe=c$3({newColor:{defaultMessage:"New Custom Color",id:"bui.colorInput.newColor"},cancel:{defaultMessage:"Cancel",id:"bui.colorInput.cancel"},add:{defaultMessage:"Add",id:"bui.colorInput.add"}});function St(o){if(typeof o!="string")return  false;try{return a$7(o),!0}catch{return  false}}function tt({colorLabel:o,color:e,presets:l,isIndeterminate:r,indeterminateLabel:t,transparentLabel:s}){let{formatMessage:a}=b$2(),{locale:n}=b$3(),i=useMemo(()=>r?{id:"indeterminate",label:t??a(et.indeterminate)}:l.find(d=>d.id===F?!e:e?D(e,a$7(d.id)):false),[l,e,r,a,t]),c=useMemo(()=>{if(typeof o=="function")return o?.(e,{isIndeterminate:!!r});if(typeof o=="boolean")return o?E(e,i,s??a(et.transparent)):false;throw new TypeError("`colorLabel` must be a function or a boolean")},[e,o,a,i,r,s]),m=useMemo(()=>{if(i?.label)return i.label;e?.getColorName(n);},[e,n,i?.label]);return {colorName:c,humanReadableName:m}}var et=c$3({transparent:{defaultMessage:"Transparent",id:"bui.colorInput.transparent"},indeterminate:{defaultMessage:"Indeterminate",id:"bui.colorInput.indeterminate"}});var To=io.forwardRef(({className:o,style:e,allowRemoval:l,allowAlpha:r=true,presets:t,labelPosition:s="top",colorLabel:a=true,includePicker:n=true,onChange:i,onChangeEnd:c$2,defaultValue:m$1,storePickedColorKey:d="baselinePickedColor",value:g$1,addColorButtonLabel:f,removeColorButtonLabel:b,customColorsLabel:v,addLabel:P,cancelLabel:R,newColorLabel:A,colorFormatLabel:M,colorPresetsLabel:I,noColorLabel:H,indeterminateLabel:$,transparentLabel:Ao,onTriggerPress:Mo,renderTriggerButton:Q=({isOpen:Y,color:wo,ref:k,colorName:Do,triggerProps:Ho,labelId:ko,isIndeterminate:E,indeterminateIcon:j,noneLabel:V})=>jsx(no,{...c$1(Ho,{...B.label?{"aria-labelledby":ko}:{"aria-label":B["aria-label"]}}),ref:k,isOpen:Y,isDisabled:B.isDisabled,labelPosition:s,color:wo,colorLabel:a,colorName:Do,isIndeterminate:E,indeterminateIcon:j,noneLabel:V}),pickerMode:O="active",offset:Z=2,placement:uo=s==="start"?"bottom end":"bottom start","data-block-id":Oo,"data-block-class":p,isIndeterminate:y,indeterminateIcon:co,...B},st)=>{let Y=io.useRef(null),wo=io.useRef(null),k=a$8(B),{triggerProps:Do,overlayProps:Ho}=a$9({type:"listbox"},k,Y),ko=a$a(B.portalContainer),[E,j]=a$b(g$1===void 0?void 0:C(g$1),C(m$1),h=>i?.(h?.toFormat("rgba")||null)),{formatMessage:V}=b$2(),Eo=useMemo(()=>G(H??V(xo.noColor),t),[t,V,H]),Vo=c(),{colorName:nt}=tt({colorLabel:a,color:E,presets:Eo,isIndeterminate:y,indeterminateLabel:$,transparentLabel:Ao}),le=useMemo(()=>Eo.filter(h=>l||h.id!==F),[Eo,l]),it=f||V(xo.addColor),mt=b||V(xo.removeColor),pt=v||V(xo.customColors),ae=jsx(ot,{color:E||z,setColor:h=>{j(h),c$2?.(h?.toFormat("rgba")||null);},storePickedColorKey:d,addColorButtonLabel:it,removeColorButtonLabel:mt,customColorsLabel:pt,addLabel:P,cancelLabel:R,newColorLabel:A,colorFormatLabel:M,pickerMode:O,allowAlpha:r,isIndeterminate:!!y,state:k});return jsxs(Fragment,{children:[jsxs("div",{className:a$4({[g]:s==="start"},"BaselineUI-ColorInput-Trigger",o),"data-block-id":Oo,"data-block-class":p,style:e,ref:st,children:[B.label?jsx("label",{id:Vo,className:h({labelPosition:s}),children:B.label}):null,Q({isOpen:k.isOpen,color:E,ref:Y,colorName:nt,triggerProps:c$1(Do,{onPress:Mo}),labelId:Vo,isIndeterminate:y,indeterminateIcon:co,noneLabel:H})]}),jsx(a$c,{...B,portalContainer:ko,placement:uo,state:k,offset:Z,className:a$4(q,"BaselineUI-ColorInput-Popover"),triggerRef:Y,overlayProps:Ho,children:jsxs(a$d,{size:"content",className:m({includesCustomColorPicker:n}),ref:wo,"aria-labelledby":B.label?Vo:void 0,"aria-label":B["aria-label"],children:[n&&O==="active"?jsxs(Fragment,{children:[jsx(Fo,{color:E||z,setColor:j,allowAlpha:r,colorFormatLabel:M,onChangeEnd:h=>{c$2?.(h?.toFormat("rgba")||null);}}),ae]}):null,!!le.length&&jsxs(Fragment,{children:[n&&O==="active"?jsx(a$e,{}):null,jsx(qo,{autoFocus:n&&O==="active"?false:"first",state:k,triggerRef:Y,presets:le,colorPresetsLabel:I,color:E,setColor:h=>{j(h),c$2?.(h?.toFormat("rgba")||null);},isIndeterminate:!!y})]}),n&&O==="lazy"?ae:null]})})]})});To.displayName="ColorInput";var xo=c$3({addColor:{defaultMessage:"Add Color",id:"bui.colorInput.addColor"},removeColor:{defaultMessage:"Remove Color",id:"bui.colorInput.removeColor"},customColors:{defaultMessage:"Custom Colors",id:"bui.colorInput.customColors"},noColor:{defaultMessage:"None",id:"bui.colorInput.noColor"}});var at=io.forwardRef(({className:o,style:e,icon:l,variant:r="standard","data-block-id":t,tooltip:s=true,iconTooltip:a=true,...n},i)=>{let c=io.useRef(null),{tooltipProps:m}=a$f({label:n["aria-label"],tooltip:s}),d=useCallback(({isOpen:g,color:f,ref:b,colorName:v,triggerProps:P,isIndeterminate:R,indeterminateIcon:A,noneLabel:M})=>jsx(a$g,{...m,children:r==="standard"?jsx(no,{...P,"aria-label":n["aria-label"],ref:b,isOpen:g,isDisabled:n.isDisabled,color:f,colorLabel:false,colorName:v,isIndeterminate:R,indeterminateIcon:A,noneLabel:M}):jsx(So,{...P,isOpen:g,icon:TextIcon,color:f?.toString("hexa"),ref:b,isDisabled:n.isDisabled,"aria-label":n["aria-label"],isIndeterminate:R,indeterminateIcon:A})}),[n,m,r]);return jsxs(a$h,{display:"flex",flexDirection:"row",gap:"md",paddingX:r==="standard"?"md":"none",alignItems:"center",className:a$4("BaselineUI-IconColorInput",o),"data-block-id":t,style:e,ref:b$1(i,c),children:[r==="standard"&&l?jsx(a$i,{icon:l,label:n["aria-label"],tooltip:a,"aria-hidden":"true",size:24,isFocusable:false,className:sprinkles({color:"icon.primary"})}):null,jsx(To,{...n,colorLabel:false,renderTriggerButton:d})]})});at.displayName="IconColorInput";export{So as a,To as b,at as c};