@graphty/compact-mantine 0.5.0 → 0.5.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +1 -1
- package/dist/index.d.ts +38 -8
- package/dist/index.js +806 -754
- package/package.json +3 -2
package/dist/index.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@mantine/core"),o=require("react/jsx-runtime"),V=require("@mantine/hooks"),D=require("lucide-react"),a=require("react"),Fe=require("react-dom"),ve=["#d5d7da","#a3a8b1","#7a828e","#5f6873","#48525c","#374047","#2a3035","#1f2428","#161b22","#0d1117"],Pe={...e.DEFAULT_THEME.colors,dark:ve},Re={"--button-height":"24px","--button-fz":"11px","--button-padding-x":"8px"},De={"--ai-size":"24px"},_e={"--cb-size":"16px","--cb-icon-size":"12px"},Ve={Button:e.Button.extend({defaultProps:{size:"sm"},vars:()=>({root:Re})}),ActionIcon:e.ActionIcon.extend({defaultProps:{size:"sm",variant:"subtle"},vars:()=>({root:De})}),CloseButton:e.CloseButton.extend({defaultProps:{size:"xs"},vars:()=>({root:_e})})},He={"--switch-height":"16px","--switch-width":"28px","--switch-thumb-size":"12px","--switch-track-label-padding":"2px","--switch-label-font-size":"5px"},Le={"--checkbox-size":"16px"},Me={"--radio-size":"16px","--radio-icon-size":"6px"},xe={"--slider-size":"4px","--slider-thumb-size":"12px"},Ne={"--sc-font-size":"10px","--sc-padding":"4px 8px"},Ge={backgroundColor:"transparent"},Ue={backgroundColor:"var(--mantine-color-dark-6)"},Q={fontSize:11},me={fontSize:10,marginTop:2},$e={SegmentedControl:e.SegmentedControl.extend({defaultProps:{size:"sm",withItemsBorders:!1},vars:()=>({root:Ne}),styles:{root:Ge,indicator:Ue}}),Checkbox:e.Checkbox.extend({defaultProps:{size:"sm"},vars:()=>({root:Le}),styles:{label:Q}}),Switch:e.Switch.extend({defaultProps:{size:"sm"},vars:()=>({root:He}),styles:{label:Q}}),Slider:e.Slider.extend({defaultProps:{size:"sm"},vars:()=>({root:xe}),styles:{markLabel:me}}),Radio:e.Radio.extend({defaultProps:{size:"sm"},vars:()=>({root:Me}),styles:{label:Q}}),RangeSlider:e.RangeSlider.extend({defaultProps:{size:"sm"},vars:()=>({root:xe}),styles:{markLabel:me}})},Xe={"--badge-height":"14px","--badge-fz":"9px","--badge-padding-x":"4px"},We={"--avatar-size":"24px"},qe={"--ti-size":"24px"},Ze={"--indicator-size":"8px"},Ke={"--kbd-fz":"10px","--kbd-padding":"2px 4px"},Ye={"--pill-height":"16px","--pill-fz":"10px"},Je={Text:e.Text.extend({}),Badge:e.Badge.extend({defaultProps:{size:"sm"},vars:()=>({root:Xe})}),Pill:e.Pill.extend({defaultProps:{size:"sm"},vars:()=>({root:Ye})}),Avatar:e.Avatar.extend({defaultProps:{size:"sm"},vars:()=>({root:We})}),ThemeIcon:e.ThemeIcon.extend({defaultProps:{size:"sm"},vars:()=>({root:qe})}),Indicator:e.Indicator.extend({defaultProps:{size:"sm"},vars:()=>({root:Ze})}),Kbd:e.Kbd.extend({defaultProps:{size:"sm"},vars:()=>({root:Ke})})},Qe={"--loader-size":"18px"},et={"--progress-size":"4px"},tt={label:{fontSize:9}},ot={Loader:e.Loader.extend({defaultProps:{size:"sm"},vars:()=>({root:Qe})}),Progress:e.Progress.extend({defaultProps:{size:"sm"},vars:()=>({root:et}),styles:tt}),RingProgress:e.RingProgress.extend({})},te=1e3,L=1100,Se=8,nt=4,G={"--input-height":"24px","--input-size":"24px","--input-fz":"11px","--input-bg":"var(--mantine-color-default)","--input-bd":"none"},q={"--input-fz":"11px","--input-bg":"var(--mantine-color-default)","--input-bd":"none"},$={fontSize:11,color:"var(--mantine-color-dimmed)",marginBottom:1,lineHeight:1.2},oe={paddingLeft:8,paddingRight:8,border:"none",backgroundColor:"var(--mantine-color-default)"},U={label:$,input:oe},ge={label:$,input:oe},Z={dropdown:{padding:4,border:"none",boxShadow:"var(--mantine-shadow-md)"},option:{fontSize:11,padding:"4px 8px",borderRadius:4},options:{},groupLabel:{fontSize:10,padding:"4px 8px"},empty:{fontSize:11,padding:"8px"}},ee={input:{...U.input,minHeight:24,height:"auto",display:"flex",alignItems:"center",paddingTop:4,paddingBottom:4},pillsList:{columnGap:4,rowGap:2},pill:{margin:0}},st={TextInput:e.TextInput.extend({defaultProps:{size:"sm",variant:"filled"},vars:()=>({root:{},wrapper:G}),styles:U}),NumberInput:e.NumberInput.extend({defaultProps:{size:"sm",variant:"filled"},vars:()=>({root:{},wrapper:{...G,"--input-right-section-width":"24px"},controls:{"--ni-chevron-size":"10px"}}),styles:{label:$,input:oe,control:{borderColor:"transparent"}}}),Select:e.Select.extend({defaultProps:{size:"sm",variant:"filled",comboboxProps:{zIndex:L}},vars:()=>({root:{},wrapper:G}),styles:{...U,...Z}}),Textarea:e.Textarea.extend({defaultProps:{size:"sm",variant:"filled"},vars:()=>({root:{},wrapper:q}),styles:ge}),PasswordInput:e.PasswordInput.extend({defaultProps:{size:"sm",variant:"filled"},vars:()=>({root:{},wrapper:G}),styles:{...U,innerInput:{paddingLeft:8,paddingRight:8}}}),Autocomplete:e.Autocomplete.extend({defaultProps:{size:"sm",variant:"filled",comboboxProps:{zIndex:L}},vars:()=>({root:{},wrapper:G}),styles:{...U,...Z}}),MultiSelect:e.MultiSelect.extend({defaultProps:{size:"sm",variant:"filled",comboboxProps:{zIndex:L}},vars:()=>({root:{},wrapper:{...G,"--combobox-chevron-size":"12px"}}),styles:{label:$,...Z,...ee,inputField:{minWidth:60,flexBasis:60}}}),TagsInput:e.TagsInput.extend({defaultProps:{size:"sm",variant:"filled",comboboxProps:{zIndex:L}},vars:()=>({root:{},wrapper:q}),styles:{label:$,...Z,...ee,inputField:{minWidth:30,flexBasis:30}}}),PillsInput:e.PillsInput.extend({defaultProps:{size:"sm",variant:"filled"},vars:()=>({root:{},wrapper:q}),styles:{label:$,...ee}}),FileInput:e.FileInput.extend({defaultProps:{size:"sm",variant:"filled"},vars:()=>({root:{},wrapper:G}),styles:U}),JsonInput:e.JsonInput.extend({defaultProps:{size:"sm",variant:"filled"},vars:()=>({root:{},wrapper:q}),styles:ge}),InputClearButton:e.InputClearButton.extend({defaultProps:{size:"xs"},vars:()=>({root:{"--cb-size":"16px","--cb-icon-size":"12px"}})})},rt={"--pagination-control-size":"24px","--pagination-control-fz":"11px"},at={"--stepper-icon-size":"24px","--stepper-fz":"11px","--stepper-spacing":"8px"},lt={"--burger-size":"18px","--burger-line-size":"2px"},it={root:{fontSize:11}},ct={root:{fontSize:11,minHeight:28},label:{fontSize:11}},ut={tab:{fontSize:11,padding:"6px 10px"}},dt={Anchor:e.Anchor.extend({defaultProps:{size:"sm"},styles:it}),Burger:e.Burger.extend({defaultProps:{size:"sm"},vars:()=>({root:lt})}),NavLink:e.NavLink.extend({styles:ct}),Pagination:e.Pagination.extend({defaultProps:{size:"sm"},vars:()=>({root:rt})}),Stepper:e.Stepper.extend({defaultProps:{size:"sm"},vars:()=>({root:at})}),Tabs:e.Tabs.extend({styles:ut})},pt={"--menu-item-fz":"11px"},ft={tooltip:{fontSize:11,padding:"4px 8px"}},xt={dropdown:{padding:8}},mt={dropdown:{padding:8}},gt={Menu:e.Menu.extend({defaultProps:{zIndex:L},vars:()=>({dropdown:pt})}),Tooltip:e.Tooltip.extend({defaultProps:{zIndex:L},styles:ft}),Popover:e.Popover.extend({defaultProps:{zIndex:L},styles:xt}),HoverCard:e.HoverCard.extend({defaultProps:{zIndex:L},styles:mt})},ht={xs:"10px",sm:"11px",md:"13px",lg:"14px",xl:"16px"},bt={xs:"4px",sm:"6px",md:"8px",lg:"12px",xl:"16px"},vt={xs:"2px",sm:"4px",md:"6px",lg:"8px",xl:"12px"},Ce=e.createTheme({colors:Pe,fontSizes:ht,spacing:bt,radius:vt,focusRing:"never",components:{...st,...Ve,...$e,...Je,...ot,...dt,...gt}}),Pt=e.mergeMantineTheme(e.DEFAULT_THEME,Ce),St=["#5B8FF9","#FF6B6B","#61D095","#F7B731","#9B59B6"],ze=["#5B8FF9FF","#FF6B6BFF","#61D095FF","#F7B731FF","#9B59B6FF","#5B8FF980","#FF6B6B80","#61D09580","#F7B73180","#9B59B680"],K="#888888",ne=255,se=100;function re(t){return Math.round(parseInt(t,16)/ne*se)}function ae(t){return Math.round(t/se*ne).toString(16).padStart(2,"0")}function Ct(t){let n=t.replace("#","");n.length===3?n=`${n.split("").map(s=>s+s).join("")}ff`:n.length===4?n=n.split("").map(s=>s+s).join(""):n.length===6&&(n=`${n}ff`);const l=`#${n.slice(0,6)}`,r=n.slice(6,8),i=re(r);return{hex:l,opacity:i}}function zt(t,n){const l=t.replace("#",""),r=ae(n);return`#${l}${r}`}function yt(t){return/^#?([A-Fa-f0-9]{3}|[A-Fa-f0-9]{4}|[A-Fa-f0-9]{6}|[A-Fa-f0-9]{8})$/.test(t)}const ye=a.createContext(null);function wt(){return a.useContext(ye)}function It({children:t}){const n=a.useRef(null);if(!a.isValidElement(t))throw new Error("PopoutAnchor requires a single valid React element as its child");const l=t,r=a.cloneElement(l,{ref:n});return o.jsx(ye.Provider,{value:{anchorRef:n},children:r})}function kt({children:t}){return o.jsx(e.Box,{p:"sm",children:t})}const Tt=["[data-portal]","[data-combobox-dropdown]","[data-menu-dropdown]","[data-popover-dropdown]","[data-tooltip]","[data-hovercard-dropdown]","[data-dates-dropdown]","[data-modal]"].join(", ");function jt(t,n=!0){a.useEffect(()=>{if(!n)return;const l=r=>{const i=r.target;i.closest('[role="dialog"]')||i.closest("[data-popout-trigger]")||i.closest("[data-popout-portal-container]")||i.closest(Tt)||t()};return document.addEventListener("mousedown",l),()=>{document.removeEventListener("mousedown",l)}},[t,n])}function At(t,n=!0){a.useEffect(()=>{if(!n)return;const l=r=>{r.key==="Escape"&&(r.preventDefault(),t())};return document.addEventListener("keydown",l),()=>{document.removeEventListener("keydown",l)}},[t,n])}const le=a.createContext(null),we=a.createContext(null);function ie(){const t=a.useContext(le);if(!t)throw new Error("usePopoutContext must be used within a Popout component");return t}function Et(){return a.useContext(le)}function Bt(){const t=a.useContext(we);if(!t)throw new Error("usePopoutManagerContext must be used within a PopoutManager");return t}function Ot({children:t,parentId:n=null}){const l=a.useId(),[r,i]=a.useState(!1),s=a.useRef(null),c=a.useMemo(()=>({id:l,isOpen:r,open:()=>{i(!0)},close:()=>{i(!1)},toggle:()=>{i(d=>!d)},triggerRef:s,parentId:n}),[l,r,n]);return o.jsx(le.Provider,{value:c,children:t})}function Ft({children:t}){const[n,l]=a.useState(null),r=a.useRef([]),i=a.useRef(new Map),s=a.useRef(new Map),[c,d]=a.useState(0),x=a.useCallback((f,g,C)=>{var y,_;if(!r.current.includes(f)){const z=r.current,B=[];for(const A of z)s.current.get(A)===(C??null)&&B.push(A);for(const A of B.reverse()){const R=[];for(const O of z){let F=O;for(;F;){const I=s.current.get(F);if(I===A){R.push(O);break}F=I??null}}for(const O of R.reverse())(y=i.current.get(O))==null||y();(_=i.current.get(A))==null||_()}r.current=[...r.current.filter(A=>!B.includes(A)&&!B.some(R=>{let O=A;for(;O;){const F=s.current.get(O);if(F===R)return!0;O=F??null}return!1})),f],i.current.set(f,g),s.current.set(f,C??null),d(A=>A+1)}},[]),b=a.useCallback(f=>{r.current=r.current.filter(g=>g!==f),i.current.delete(f),s.current.delete(f),d(g=>g+1)},[]),P=a.useCallback(f=>{const g=r.current.indexOf(f);return g>=0?te+g:te},[]),m=a.useCallback(f=>{const g=r.current,C=g.indexOf(f);C===-1||C===g.length-1||(r.current=[...g.filter(y=>y!==f),f],d(y=>y+1))},[]),p=a.useCallback(f=>s.current.get(f)??null,[]),v=a.useCallback((f,g)=>{let C=g;for(;C;){const y=s.current.get(C);if(y===f)return!0;C=y??null}return!1},[]),E=a.useCallback(f=>{const g=[],C=r.current;for(const y of C)v(f,y)&&g.push(y);return g},[v]),u=a.useCallback(f=>{const g=E(f);for(const C of[...g].reverse()){const y=i.current.get(C);y==null||y()}},[E]),h=a.useCallback(f=>{u(f);const g=i.current.get(f);g==null||g()},[u]),S=a.useCallback((f,g)=>{const C=r.current;for(const y of C){if(y===f)continue;s.current.get(y)===g&&h(y)}},[h]),w=a.useCallback(()=>{const f=r.current;if(f.length===0)return;const g=f[f.length-1],C=i.current.get(g);C==null||C()},[]),j=a.useCallback(()=>{const f=[...r.current];for(const g of f){const C=i.current.get(g);C==null||C()}},[]),k=a.useCallback(()=>r.current.length>0,[]),[M,H]=a.useState(!1);a.useEffect(()=>{H(r.current.length>0)},[c]),At(w,M),jt(j,M);const X=a.useMemo(()=>({register:x,unregister:b,getZIndex:P,bringToFront:m,portalContainer:n,zIndexVersion:c,closeFocused:w,closeAll:j,hasOpenPopouts:k,closeWithDescendants:h,closeDescendants:u,closeSiblings:S,getParentId:p,isAncestor:v}),[x,b,P,m,n,c,w,j,k,h,u,S,p,v]);return o.jsxs(we.Provider,{value:X,children:[t,o.jsx("div",{ref:l,"data-popout-portal-container":!0})]})}function Rt(t){const{isOpen:n,onDragStart:l}=t,[r,i]=a.useState({left:0,top:0}),s=a.useRef(!1),c=a.useRef({x:0,y:0,offsetLeft:0,offsetTop:0}),d=a.useCallback(()=>{i({left:0,top:0})},[]),x=a.useCallback(m=>{const p=m.target;p.tagName==="INPUT"||p.tagName==="TEXTAREA"||p.tagName==="BUTTON"||p.tagName==="SELECT"||p.closest("button")||p.closest("input")||p.closest("textarea")||p.closest("select")||(s.current=!0,c.current={x:m.clientX,y:m.clientY,offsetLeft:r.left,offsetTop:r.top},l==null||l(),m.target.setPointerCapture(m.pointerId))},[r.left,r.top,l]),b=a.useCallback(m=>{if(!s.current)return;const p=m.clientX-c.current.x,v=m.clientY-c.current.y;i({left:c.current.offsetLeft+p,top:c.current.offsetTop+v})},[]),P=a.useCallback(m=>{s.current&&(s.current=!1,m.target.releasePointerCapture(m.pointerId))},[]);return n?{dragTriggerProps:{"data-drag-trigger":!0,onPointerDown:x,onPointerMove:b,onPointerUp:P,style:{cursor:"grab",userSelect:"none",touchAction:"none"}},dragOffset:r,resetDragOffset:d}:{dragTriggerProps:{},dragOffset:{left:0,top:0},resetDragOffset:d}}function Dt({config:t,onClose:n,dragTriggerProps:l={},actions:r=[],activeTab:i,onTabChange:s,titleId:c}){var p;const{style:d,...x}=l,P=t.variant==="tabs"?t:null,m=(P==null?void 0:P.tabs.map(v=>({value:v.id,label:v.label})))??[];return o.jsxs(e.Group,{justify:"space-between",px:"sm",py:"xs",...x,style:{...d},children:[t.variant==="title"?o.jsx(e.Text,{id:c,size:"sm",fw:500,children:t.title}):o.jsxs(o.Fragment,{children:[o.jsx("span",{id:c,style:{position:"absolute",width:1,height:1,overflow:"hidden",clip:"rect(0, 0, 0, 0)"},children:((p=P==null?void 0:P.tabs[0])==null?void 0:p.label)??"Settings"}),o.jsx(e.SegmentedControl,{data:m,value:i,onChange:v=>s==null?void 0:s(v),size:"xs"})]}),o.jsxs(e.Group,{gap:4,children:[r.map(v=>o.jsx(e.ActionIcon,{variant:"subtle",onClick:v.onClick,"aria-label":v.label,children:v.icon},v.id)),o.jsx(e.CloseButton,{size:"sm",onClick:n,"aria-label":"Close panel"})]})]})}function _t(t,n,l=Se,r={}){const{placement:i="left",alignment:s="start",panelHeight:c=0}=r;let d,x;switch(i){case"left":d=t.left-n-l,x=he(t,s,c);break;case"right":d=t.right+l,x=he(t,s,c);break;case"top":d=be(t,s,n),x=t.top-c-l;break;case"bottom":d=be(t,s,n),x=t.bottom+l;break;default:{const b=i;throw new Error(`Unknown placement: ${String(b)}`)}}return{left:d,top:x}}function he(t,n,l){switch(n){case"start":return t.top;case"center":return t.top+t.height/2-l/2;case"end":return t.bottom-l;default:{const r=n;throw new Error(`Unknown alignment: ${String(r)}`)}}}function be(t,n,l){switch(n){case"start":return t.left;case"center":return t.left+t.width/2-l/2;case"end":return t.right-l;default:{const r=n;throw new Error(`Unknown alignment: ${String(r)}`)}}}function Vt({width:t,height:n,header:l,children:r,anchorRef:i,placement:s="left",alignment:c="start",gap:d=0,actions:x}){var pe,fe;const{isOpen:b,close:P,triggerRef:m,id:p,parentId:v}=ie(),{getZIndex:E,portalContainer:u,register:h,unregister:S,bringToFront:w,zIndexVersion:j,closeWithDescendants:k,closeDescendants:M}=Bt(),H=wt(),X=a.useId(),f=`popout-panel-${p}`,g=`popout-title-${X}`,[C,y]=a.useState(null),_=a.useRef(!1),z=a.useRef(null),B=a.useCallback(()=>{w(p)},[w,p]),{dragTriggerProps:A,dragOffset:R,resetDragOffset:O}=Rt({isOpen:b,onDragStart:B}),F=l.variant==="tabs",I=F?l:null,J=(I==null?void 0:I.defaultTab)??((pe=I==null?void 0:I.tabs[0])==null?void 0:pe.id),[ce,ue]=a.useState(J),Te=a.useCallback(T=>{var N;ue(T),(N=I==null?void 0:I.onTabChange)==null||N.call(I,T)},[I]),je=a.useCallback(T=>{T.stopPropagation(),M(p),w(p)},[M,w,p]),Ae=a.useCallback(()=>{k(p)},[k,p]);if(a.useEffect(()=>(b?h(p,P,v):S(p),()=>{S(p)}),[b,p,h,S,P,v]),a.useEffect(()=>{if(b){let T=(i==null?void 0:i.current)??null;if(!T&&(H!=null&&H.anchorRef.current)&&(T=H.anchorRef.current),!T&&v&&(T=document.querySelector(`[data-popout-id="${v}"]`)),T||(T=m.current),T){const N=T.getBoundingClientRect(),Oe=_t(N,t,d,{placement:s,alignment:c,panelHeight:n});y(Oe),_.current||(O(),F&&ue(J))}}_.current=b},[b,t,n,d,m,i,s,c,O,F,J,v]),a.useEffect(()=>{if(b&&z.current){const T=setTimeout(()=>{var N;(N=z.current)==null||N.focus()},0);return()=>{clearTimeout(T)}}else!b&&m.current&&m.current.focus()},[b,m]),!b||!u||!C)return null;const Ee=E(p),de={left:C.left+R.left,top:C.top+R.top},Be=o.jsxs(e.Paper,{ref:z,id:f,role:"dialog","aria-modal":"false","aria-labelledby":g,tabIndex:-1,radius:8,onClick:je,"data-popout-id":p,...v&&{"data-parent-id":v},style:{position:"fixed",left:de.left,top:de.top,minWidth:t,...n!==void 0&&{minHeight:n},zIndex:Ee,backgroundColor:"var(--mantine-color-body)",border:"1px solid light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.12))",boxShadow:["0 1px 2px light-dark(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.4))","0 4px 8px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.35))","0 8px 16px light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.25))"].join(", "),outline:"none"},children:[o.jsx(Dt,{config:l,onClose:Ae,dragTriggerProps:A,activeTab:ce,onTabChange:Te,actions:x,titleId:g}),o.jsx(e.Box,{children:F?(fe=I==null?void 0:I.tabs.find(T=>T.id===ce))==null?void 0:fe.content:r})]});return Fe.createPortal(Be,u)}function Ht({children:t}){const{toggle:n,triggerRef:l,isOpen:r,id:i}=ie(),s=a.useCallback(x=>{x.stopPropagation(),n()},[n]);if(!a.isValidElement(t))throw new Error("PopoutTrigger requires a single valid React element as its child");const c=`popout-panel-${i}`,d=t;return a.cloneElement(d,{onClick:x=>{var b,P;(P=(b=d.props).onClick)==null||P.call(b,x),s(x)},ref:l,"data-popout-trigger":!0,"aria-expanded":r,"aria-controls":c,"aria-haspopup":"dialog"})}function Lt({children:t}){const n=Et(),l=(n==null?void 0:n.id)??null;return o.jsx(Ot,{parentId:l,children:t})}const W=Object.assign(Lt,{Trigger:Ht,Panel:Vt,Content:kt,Anchor:It}),Mt=a.forwardRef(function({icon:n,size:l="xs",...r},i){const{isOpen:s}=ie();return o.jsx(e.ActionIcon,{ref:i,variant:s?"light":"subtle",size:l,c:s?void 0:"dimmed",...r,children:n})});function Nt({children:t}){return o.jsx(Ft,{children:t})}function Ie({color:t,defaultColor:n,opacity:l,defaultOpacity:r=100,onColorChange:i,onOpacityChange:s,label:c,showOpacity:d=!0}){const[x,b]=V.useUncontrolled({value:t,defaultValue:void 0,finalValue:void 0,onChange:i}),[P,m]=V.useUncontrolled({value:l,defaultValue:void 0,finalValue:void 0,onChange:s}),p=x===void 0,v=P===void 0,E=p&&(!d||v),u=x??n,h=P??r,[S,w]=a.useState(u.replace("#","").toUpperCase()),[j,k]=a.useState(h);a.useEffect(()=>{w(u.replace("#","").toUpperCase())},[u]),a.useEffect(()=>{k(h)},[h]);const M=z=>{if(z.length===9){const B=z.slice(0,7).toUpperCase(),A=z.slice(7,9),R=re(A);b(B),d&&m(R)}else b(z.toUpperCase())},H=()=>{const z=ae(h);return`${u}${z}`.toUpperCase()},X=z=>{w(z.currentTarget.value.toUpperCase())},f=()=>{let z=S.toUpperCase();z&&!z.startsWith("#")&&(z=`#${z}`),/^#[0-9A-F]{6}$/i.test(z)&&z!==u?b(z):w(u.replace("#","").toUpperCase())},g=z=>{k(z)},C=()=>{const z=typeof j=="string"?parseFloat(j):j;if(isNaN(z))k(h);else{const B=Math.min(100,Math.max(0,z));B!==h&&m(B)}},y=()=>{b(void 0),d&&m(void 0)},_=o.jsxs(e.Group,{gap:4,wrap:"nowrap",children:[o.jsxs(e.Group,{gap:0,children:[o.jsxs(W,{children:[o.jsx(W.Trigger,{children:o.jsx(e.ActionIcon,{variant:"filled",size:24,radius:0,style:{backgroundColor:"var(--mantine-color-default)",borderRadius:"4px 0 0 4px"},"aria-label":"Color swatch",children:o.jsx(e.ColorSwatch,{color:u,size:14,radius:2,style:{border:"1px solid var(--mantine-color-default-border)"}})})}),o.jsx(W.Panel,{width:220,header:{variant:"title",title:c??"Color"},placement:"bottom",alignment:"start",gap:4,children:o.jsx(W.Content,{children:o.jsx(e.ColorPicker,{format:"hexa",value:H(),onChange:M,swatches:[...ze]})})})]}),o.jsx(e.TextInput,{value:S,onChange:X,onBlur:f,"aria-label":"Color hex value","data-is-default":p?"true":"false",w:72,styles:{input:{borderRadius:d?0:"0 4px 4px 0",fontFamily:"monospace",textTransform:"uppercase",...p?{fontStyle:"italic",color:"var(--mantine-color-dimmed)"}:{}}}}),d&&o.jsxs(o.Fragment,{children:[o.jsx(e.Box,{style:{width:1,height:24,backgroundColor:"var(--mantine-color-default-border)"}}),o.jsx(e.NumberInput,{value:j,onChange:g,onBlur:C,min:0,max:100,hideControls:!0,suffix:"%","aria-label":"Opacity","data-is-default":v?"true":"false",w:54,styles:{input:{borderRadius:"0 4px 4px 0",textAlign:"right",...v?{fontStyle:"italic",color:"var(--mantine-color-dimmed)"}:{}}}})]})]}),!E&&o.jsx(e.ActionIcon,{variant:"subtle",size:"xs",c:"dimmed","aria-label":`Reset ${c??"color"} to default`,onClick:y,children:o.jsx(D.X,{size:12})})]});return c?o.jsxs(e.Stack,{gap:0,children:[o.jsx(e.Text,{size:"xs",c:"dimmed",mb:1,lh:1.2,children:c}),_]}):_}function Gt({label:t,actions:n,children:l,bleed:r}){const i=r?"calc(-1 * var(--mantine-spacing-sm) - 1px)":void 0;return o.jsxs(e.Box,{children:[o.jsx(e.Divider,{color:"gray.7",mt:8,mb:0,mx:i}),o.jsxs(e.Group,{justify:"space-between",py:8,px:8,children:[o.jsx(e.Text,{size:"xs",fw:500,lh:1.2,children:t}),n&&o.jsx(e.Group,{gap:4,children:n})]}),o.jsx(e.Stack,{gap:0,px:8,children:l})]})}function Ut({label:t,defaultOpen:n=!0,children:l,hasConfiguredValues:r=!1}){const[i,{toggle:s}]=V.useDisclosure(n);return o.jsxs(e.Box,{children:[o.jsx(e.Divider,{color:"gray.7",mt:8,mb:0,mx:8}),o.jsx(e.Group,{justify:"space-between",py:8,px:8,style:{cursor:"pointer"},onClick:s,children:o.jsxs(e.Group,{gap:4,children:[o.jsx(e.ActionIcon,{variant:"subtle",size:"xs",c:"dimmed","aria-label":i?`Collapse ${t}`:`Expand ${t}`,children:i?o.jsx(D.ChevronDown,{size:12}):o.jsx(D.ChevronRight,{size:12})}),o.jsx(e.Text,{size:"xs",fw:500,lh:1.2,children:t}),r&&o.jsx(e.Box,{"aria-label":`${t} has configured values`,style:{width:6,height:6,borderRadius:"50%",backgroundColor:"var(--mantine-color-blue-5)",marginLeft:4}})]})}),o.jsx(e.Collapse,{in:i,children:o.jsx(e.Stack,{gap:0,children:l})})]})}function $t({label:t,defaultOpen:n=!1,children:l}){const[r,{toggle:i}]=V.useDisclosure(n);return o.jsxs(e.Box,{children:[o.jsxs(e.Group,{gap:4,py:4,style:{cursor:"pointer"},onClick:i,children:[o.jsx(e.ActionIcon,{variant:"subtle",size:"xs",c:"dimmed","aria-label":r?`Collapse ${t}`:`Expand ${t}`,children:r?o.jsx(D.ChevronDown,{size:10}):o.jsx(D.ChevronRight,{size:10})}),o.jsx(e.Text,{size:"xs",c:"dimmed",lh:1.2,children:t})]}),r&&o.jsx(e.Box,{pl:"md",children:o.jsx(e.Stack,{gap:4,children:l})})]})}function Xt(){return crypto.randomUUID().slice(0,8)}function Y(t,n){return{id:Xt(),offset:t,color:n}}function ke(){return[Y(0,"#6366F1"),Y(1,"#06B6D4")]}function Wt({stops:t,defaultStops:n,direction:l,defaultDirection:r=0,showDirection:i=!0,onChange:s}){const[c,d]=V.useUncontrolled({value:t,defaultValue:n,finalValue:ke(),onChange:u=>s==null?void 0:s(u,x)}),[x,b]=V.useUncontrolled({value:l,defaultValue:r,finalValue:0,onChange:u=>s==null?void 0:s(c,u)}),P=(u,h)=>{const S=[...c];S[u]={...S[u],color:h},d(S),s==null||s(S,x)},m=(u,h)=>{const S=[...c];S[u]={...S[u],offset:h/100},d(S),s==null||s(S,x)},p=u=>{b(u),s==null||s(c,u)},v=()=>{if(c.length>=5)return;const u=c.length>0?(c[c.length-1].offset+1)/2:.5,h=[...c,Y(u,K)];h.sort((S,w)=>S.offset-w.offset),d(h),s==null||s(h,x)},E=u=>{if(c.length<=2)return;const h=c.filter((S,w)=>w!==u);d(h),s==null||s(h,x)};return o.jsxs(e.Stack,{gap:"xs",children:[o.jsxs(e.Group,{justify:"space-between",align:"center",children:[o.jsx(e.Text,{size:"xs",c:"dimmed",children:"Color Stops"}),o.jsx(e.ActionIcon,{variant:"subtle",color:"gray",onClick:v,disabled:c.length>=5,"aria-label":"Add color stop",children:o.jsx(D.Plus,{size:12})})]}),c.map((u,h)=>o.jsxs(e.Group,{gap:"xs",align:"flex-end",children:[o.jsx(Ie,{color:u.color,defaultColor:K,onColorChange:S=>{P(h,S??K)},showOpacity:!1}),o.jsx(e.Box,{style:{width:"80px"},children:o.jsx(e.Slider,{min:0,max:100,value:u.offset*100,onChange:S=>{m(h,S)},label:S=>`${Math.round(S)}%`,"aria-label":`Stop ${h+1} position`})}),o.jsx(e.ActionIcon,{variant:"subtle",color:"gray",onClick:()=>{E(h)},disabled:c.length<=2,"aria-label":`Remove color stop ${h+1}`,children:o.jsx(D.Minus,{size:12})})]},u.id)),i&&o.jsxs(e.Box,{pb:"md",children:[o.jsx(e.Text,{size:"xs",c:"dimmed",mb:4,children:"Direction"}),o.jsx(e.Slider,{min:0,max:360,value:x,onChange:p,label:u=>`${u}°`,"aria-label":"Gradient direction",marks:[{value:0,label:"0°"},{value:90,label:"90°"},{value:180,label:"180°"},{value:270,label:"270°"},{value:360,label:"360°"}]})]})]})}function qt({label:t,value:n}){return o.jsxs(e.Group,{justify:"space-between",py:4,children:[o.jsx(e.Text,{size:"sm",c:"dimmed",children:t}),o.jsx(e.Text,{size:"sm",c:"var(--mantine-color-text)",fw:500,children:String(n)})]})}function Zt({label:t,value:n,defaultValue:l,onChange:r,min:i,max:s,step:c,decimalScale:d,suffix:x,hideControls:b=!0}){const[P,m]=V.useUncontrolled({value:n,defaultValue:void 0,finalValue:void 0,onChange:r}),p=P===void 0,v=P??l,[E,u]=a.useState(v);a.useEffect(()=>{u(P??l)},[P,l]);const h=j=>{u(j)},S=()=>{const j=typeof E=="string"?parseFloat(E):E;if(isNaN(j))u(P??l);else{let k=j;i!==void 0&&k<i&&(k=i),s!==void 0&&k>s&&(k=s),k!==P&&m(k),u(k)}},w=()=>{m(void 0)};return o.jsxs(e.Group,{gap:4,wrap:"nowrap",align:"flex-end",children:[o.jsx(e.NumberInput,{label:t,"aria-label":t,value:E,onChange:h,onBlur:S,min:i,max:s,step:c,decimalScale:d,suffix:x,hideControls:b,"data-is-default":p?"true":"false",styles:{input:p?{fontStyle:"italic",color:"var(--mantine-color-dimmed)"}:void 0},style:{flex:1}}),!p&&o.jsx(e.ActionIcon,{variant:"subtle",size:"xs",c:"dimmed","aria-label":`Reset ${t} to default`,onClick:w,style:{marginBottom:2},children:o.jsx(D.X,{size:12})})]})}function Kt({label:t,value:n,defaultValue:l,options:r,onChange:i}){const[s,c]=V.useUncontrolled({value:n,defaultValue:void 0,finalValue:void 0,onChange:i}),d=s===void 0,x=s??l,b=m=>{m!==null&&c(m)},P=()=>{c(void 0)};return o.jsxs(e.Group,{gap:4,wrap:"nowrap",align:"flex-end",children:[o.jsx(e.Select,{label:t,"aria-label":t,value:x,onChange:b,data:r,rightSection:o.jsx(D.ChevronDown,{size:14}),rightSectionPointerEvents:"none","data-is-default":d?"true":"false",allowDeselect:!1,styles:{input:d?{fontStyle:"italic",color:"var(--mantine-color-dimmed)"}:void 0},style:{flex:1}}),!d&&o.jsx(e.ActionIcon,{variant:"subtle",size:"xs",c:"dimmed","aria-label":`Reset ${t} to default`,onClick:P,style:{marginBottom:2},children:o.jsx(D.X,{size:12})})]})}function Yt({label:t,checked:n,defaultChecked:l,onChange:r,children:i}){const[s,c]=V.useUncontrolled({value:n,defaultValue:l,finalValue:!1,onChange:r});return o.jsxs(e.Stack,{gap:4,children:[o.jsx(e.Checkbox,{label:t,checked:s,onChange:d=>{c(d.currentTarget.checked)}}),s&&o.jsx(e.Box,{"data-testid":"toggle-with-content-children",pl:"md",children:o.jsx(e.Stack,{gap:4,children:i})})]})}function Jt(){return e.useComputedColorScheme("dark")}const Qt={xs:e.rem(4),sm:e.rem(8),md:e.rem(16),lg:e.rem(24),xl:e.rem(32)},eo="0.1.0";exports.CompactColorInput=Ie;exports.ControlGroup=Gt;exports.ControlSection=Ut;exports.ControlSubGroup=$t;exports.DEFAULT_GRADIENT_STOP_COLOR=K;exports.GradientEditor=Wt;exports.MANTINE_SPACING=Qt;exports.MAX_ALPHA_HEX=ne;exports.MAX_OPACITY_PERCENT=se;exports.POPOUT_GAP=Se;exports.POPOUT_NESTED_GAP=nt;exports.POPOUT_Z_INDEX_BASE=te;exports.Popout=W;exports.PopoutButton=Mt;exports.PopoutManager=Nt;exports.SWATCH_COLORS=St;exports.SWATCH_COLORS_HEXA=ze;exports.StatRow=qt;exports.StyleNumberInput=Zt;exports.StyleSelect=Kt;exports.ToggleWithContent=Yt;exports.VERSION=eo;exports.compactColors=Pe;exports.compactDarkColors=ve;exports.compactTheme=Pt;exports.compactThemeOverride=Ce;exports.createColorStop=Y;exports.createDefaultGradientStops=ke;exports.isValidHex=yt;exports.opacityToAlphaHex=ae;exports.parseAlphaFromHexa=re;exports.parseHexaColor=Ct;exports.toHexaColor=zt;exports.useActualColorScheme=Jt;
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@mantine/core"),o=require("react/jsx-runtime"),B=require("@mantine/hooks"),D=require("lucide-react"),s=require("react"),Be=require("react-dom"),ve=["#d5d7da","#a3a8b1","#7a828e","#5f6873","#48525c","#374047","#2a3035","#1f2428","#161b22","#0d1117"],Ce={...e.DEFAULT_THEME.colors,dark:ve},Re={"--button-height":"24px","--button-fz":"11px","--button-padding-x":"8px"},_e={"--ai-size":"24px"},Fe={"--cb-size":"16px","--cb-icon-size":"12px"},Ve={Button:e.Button.extend({defaultProps:{size:"sm"},vars:()=>({root:Re})}),ActionIcon:e.ActionIcon.extend({defaultProps:{size:"sm",variant:"subtle"},vars:()=>({root:_e})}),CloseButton:e.CloseButton.extend({defaultProps:{size:"xs"},vars:()=>({root:Fe})})},Ne={"--switch-height":"16px","--switch-width":"28px","--switch-thumb-size":"12px","--switch-track-label-padding":"2px","--switch-label-font-size":"5px"},Me={"--checkbox-size":"16px"},He={"--radio-size":"16px","--radio-icon-size":"6px"},xe={"--slider-size":"4px","--slider-thumb-size":"12px"},Le={"--sc-font-size":"10px","--sc-padding":"4px 8px"},Ge={backgroundColor:"transparent"},Ue={backgroundColor:"light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-6))"},Q={fontSize:11},ge={fontSize:10,marginTop:2},$e={SegmentedControl:e.SegmentedControl.extend({defaultProps:{size:"sm",withItemsBorders:!1},vars:()=>({root:Le}),styles:{root:Ge,indicator:Ue}}),Checkbox:e.Checkbox.extend({defaultProps:{size:"sm"},vars:()=>({root:Me}),styles:{label:Q}}),Switch:e.Switch.extend({defaultProps:{size:"sm"},vars:()=>({root:Ne}),styles:{label:Q}}),Slider:e.Slider.extend({defaultProps:{size:"sm"},vars:()=>({root:xe}),styles:{markLabel:ge}}),Radio:e.Radio.extend({defaultProps:{size:"sm"},vars:()=>({root:He}),styles:{label:Q}}),RangeSlider:e.RangeSlider.extend({defaultProps:{size:"sm"},vars:()=>({root:xe}),styles:{markLabel:ge}})},Xe={"--badge-height":"14px","--badge-fz":"9px","--badge-padding-x":"4px"},qe={"--avatar-size":"24px"},Ke={"--ti-size":"24px"},We={"--indicator-size":"8px"},Ze={"--kbd-fz":"10px","--kbd-padding":"2px 4px"},Ye={"--pill-height":"16px","--pill-fz":"10px"},Je={Text:e.Text.extend({}),Badge:e.Badge.extend({defaultProps:{size:"sm"},vars:()=>({root:Xe})}),Pill:e.Pill.extend({defaultProps:{size:"sm"},vars:()=>({root:Ye})}),Avatar:e.Avatar.extend({defaultProps:{size:"sm"},vars:()=>({root:qe})}),ThemeIcon:e.ThemeIcon.extend({defaultProps:{size:"sm"},vars:()=>({root:Ke})}),Indicator:e.Indicator.extend({defaultProps:{size:"sm"},vars:()=>({root:We})}),Kbd:e.Kbd.extend({defaultProps:{size:"sm"},vars:()=>({root:Ze})})},Qe={"--loader-size":"18px"},et={"--progress-size":"4px"},tt={label:{fontSize:9}},ot={Loader:e.Loader.extend({defaultProps:{size:"sm"},vars:()=>({root:Qe})}),Progress:e.Progress.extend({defaultProps:{size:"sm"},vars:()=>({root:et}),styles:tt}),RingProgress:e.RingProgress.extend({})},te=1e3,R=1100,Pe=8,nt=4,H={"--input-height":"24px","--input-size":"24px","--input-fz":"11px","--input-bg":"var(--mantine-color-default)","--input-bd":"none"},K={"--input-fz":"11px","--input-bg":"var(--mantine-color-default)","--input-bd":"none"},$={fontSize:11,color:"var(--mantine-color-dimmed)",marginBottom:1,lineHeight:1.2},oe={paddingLeft:8,paddingRight:8,border:"none",backgroundColor:"var(--mantine-color-default)"},U={label:$,input:oe},me={label:$,input:oe},W={dropdown:{padding:4,border:"none",boxShadow:"var(--mantine-shadow-md)"},option:{fontSize:11,padding:"4px 8px",borderRadius:4},options:{},groupLabel:{fontSize:10,padding:"4px 8px"},empty:{fontSize:11,padding:"8px"}},ee={input:{...U.input,minHeight:24,height:"auto",display:"flex",alignItems:"center",paddingTop:4,paddingBottom:4},pillsList:{columnGap:4,rowGap:2},pill:{margin:0}},st={TextInput:e.TextInput.extend({defaultProps:{size:"sm",variant:"filled"},vars:()=>({root:{},wrapper:H}),styles:U}),NumberInput:e.NumberInput.extend({defaultProps:{size:"sm",variant:"filled"},vars:()=>({root:{},wrapper:{...H,"--input-right-section-width":"24px"},controls:{"--ni-chevron-size":"10px"}}),styles:{label:$,input:oe,control:{borderColor:"transparent"}}}),Select:e.Select.extend({defaultProps:{size:"sm",variant:"filled",comboboxProps:{zIndex:R}},vars:()=>({root:{},wrapper:H}),styles:{...U,...W}}),Textarea:e.Textarea.extend({defaultProps:{size:"sm",variant:"filled"},vars:()=>({root:{},wrapper:K}),styles:me}),PasswordInput:e.PasswordInput.extend({defaultProps:{size:"sm",variant:"filled"},vars:()=>({root:{},wrapper:H}),styles:{...U,innerInput:{paddingLeft:8,paddingRight:8}}}),Autocomplete:e.Autocomplete.extend({defaultProps:{size:"sm",variant:"filled",comboboxProps:{zIndex:R}},vars:()=>({root:{},wrapper:H}),styles:{...U,...W}}),MultiSelect:e.MultiSelect.extend({defaultProps:{size:"sm",variant:"filled",comboboxProps:{zIndex:R}},vars:()=>({root:{},wrapper:{...H,"--combobox-chevron-size":"12px"}}),styles:{label:$,...W,...ee,inputField:{minWidth:60,flexBasis:60}}}),TagsInput:e.TagsInput.extend({defaultProps:{size:"sm",variant:"filled",comboboxProps:{zIndex:R}},vars:()=>({root:{},wrapper:K}),styles:{label:$,...W,...ee,inputField:{minWidth:30,flexBasis:30}}}),PillsInput:e.PillsInput.extend({defaultProps:{size:"sm",variant:"filled"},vars:()=>({root:{},wrapper:K}),styles:{label:$,...ee}}),FileInput:e.FileInput.extend({defaultProps:{size:"sm",variant:"filled"},vars:()=>({root:{},wrapper:H}),styles:U}),JsonInput:e.JsonInput.extend({defaultProps:{size:"sm",variant:"filled"},vars:()=>({root:{},wrapper:K}),styles:me}),InputClearButton:e.InputClearButton.extend({defaultProps:{size:"xs"},vars:()=>({root:{"--cb-size":"16px","--cb-icon-size":"12px"}})})},rt={"--pagination-control-size":"24px","--pagination-control-fz":"11px"},at={"--stepper-icon-size":"24px","--stepper-fz":"11px","--stepper-spacing":"8px"},lt={"--burger-size":"18px","--burger-line-size":"2px"},it={root:{fontSize:11}},ct={root:{fontSize:11,minHeight:28},label:{fontSize:11}},ut={tab:{fontSize:11,padding:"6px 10px"}},dt={Anchor:e.Anchor.extend({defaultProps:{size:"sm"},styles:it}),Burger:e.Burger.extend({defaultProps:{size:"sm"},vars:()=>({root:lt})}),NavLink:e.NavLink.extend({styles:ct}),Pagination:e.Pagination.extend({defaultProps:{size:"sm"},vars:()=>({root:rt})}),Stepper:e.Stepper.extend({defaultProps:{size:"sm"},vars:()=>({root:at})}),Tabs:e.Tabs.extend({styles:ut})},pt={"--menu-item-fz":"11px"},ft={tooltip:{fontSize:11,padding:"4px 8px"}},xt={dropdown:{padding:8}},gt={dropdown:{padding:8}},mt={Menu:e.Menu.extend({defaultProps:{zIndex:R},vars:()=>({dropdown:pt})}),Tooltip:e.Tooltip.extend({defaultProps:{zIndex:R},styles:ft}),Popover:e.Popover.extend({defaultProps:{zIndex:R},styles:xt}),HoverCard:e.HoverCard.extend({defaultProps:{zIndex:R},styles:gt})},ht={xs:"10px",sm:"11px",md:"13px",lg:"14px",xl:"16px"},bt={xs:"4px",sm:"6px",md:"8px",lg:"12px",xl:"16px"},vt={xs:"2px",sm:"4px",md:"6px",lg:"8px",xl:"12px"},Se=e.createTheme({colors:Ce,fontSizes:ht,spacing:bt,radius:vt,focusRing:"never",components:{...st,...Ve,...$e,...Je,...ot,...dt,...mt}}),Ct=e.mergeMantineTheme(e.DEFAULT_THEME,Se),ye=["#5B8FF9FF","#FF6B6BFF","#61D095FF","#F7B731FF","#9B59B6FF","#5B8FF980","#FF6B6B80","#61D09580","#F7B73180","#9B59B680"],Z="#888888",ne=255,se=100;function re(t){return Math.round(parseInt(t,16)/ne*se)}function ae(t){return Math.round(t/se*ne).toString(16).padStart(2,"0")}function Pt(t){let n=t.replace("#","");n.length===3?n=`${n.split("").map(l=>l+l).join("")}ff`:n.length===4?n=n.split("").map(l=>l+l).join(""):n.length===6&&(n=`${n}ff`);const i=`#${n.slice(0,6)}`,r=n.slice(6,8),c=re(r);return{hex:i,opacity:c}}function St(t,n){const i=t.replace("#",""),r=ae(n);return`#${i}${r}`}function yt(t){return/^#?([A-Fa-f0-9]{3}|[A-Fa-f0-9]{4}|[A-Fa-f0-9]{6}|[A-Fa-f0-9]{8})$/.test(t)}const ze=s.createContext(null);function zt(){return s.useContext(ze)}function It({children:t}){const n=s.useRef(null);if(!s.isValidElement(t))throw new Error("PopoutAnchor requires a single valid React element as its child");const i=t,r=s.cloneElement(i,{ref:n});return o.jsx(ze.Provider,{value:{anchorRef:n},children:r})}function wt({children:t}){return o.jsx(e.Box,{p:"sm",children:t})}const kt=["[data-portal]","[data-combobox-dropdown]","[data-menu-dropdown]","[data-popover-dropdown]","[data-tooltip]","[data-hovercard-dropdown]","[data-dates-dropdown]","[data-modal]"].join(", ");function Tt(t,n=!0){s.useEffect(()=>{if(!n)return;const i=r=>{const c=r.target;c.closest('[role="dialog"]')||c.closest("[data-popout-trigger]")||c.closest("[data-popout-portal-container]")||c.closest(kt)||t()};return document.addEventListener("mousedown",i),()=>{document.removeEventListener("mousedown",i)}},[t,n])}function jt(t,n=!0){s.useEffect(()=>{if(!n)return;const i=r=>{r.key==="Escape"&&(r.preventDefault(),t())};return document.addEventListener("keydown",i),()=>{document.removeEventListener("keydown",i)}},[t,n])}const le=s.createContext(null),Ie=s.createContext(null);function ie(){const t=s.useContext(le);if(!t)throw new Error("usePopoutContext must be used within a Popout component");return t}function At(){return s.useContext(le)}function Et(){const t=s.useContext(Ie);if(!t)throw new Error("usePopoutManagerContext must be used within a PopoutManager");return t}function Ot({children:t,parentId:n=null}){const i=s.useId(),[r,c]=s.useState(!1),l=s.useRef(null),u=s.useMemo(()=>({id:i,isOpen:r,open:()=>{c(!0)},close:()=>{c(!1)},toggle:()=>{c(p=>!p)},triggerRef:l,parentId:n}),[i,r,n]);return o.jsx(le.Provider,{value:u,children:t})}function Dt({children:t}){const[n,i]=s.useState(null),r=s.useRef([]),c=s.useRef(new Map),l=s.useRef(new Map),[u,p]=s.useState(0),P=s.useCallback(d=>{const a=[];for(const f of r.current)(l.current.get(f)??null)===d&&a.push(f);return a},[]),b=s.useCallback(d=>{const a=[];for(const f of r.current){let m=f;for(;m;){const E=l.current.get(m)??null;if(E===d){a.push(f);break}m=E}}return a},[]),v=s.useCallback(d=>{let a=0,f=d;for(;f;){const m=l.current.get(f)??null;if(!m)break;a++,f=m}return a},[]),h=s.useCallback(d=>{var f;const a=[...d].sort((m,E)=>v(E)-v(m));for(const m of a)(f=c.current.get(m))==null||f()},[v]),x=s.useCallback((d,a,f)=>{if(r.current.includes(d))return;const m=f??null,E=P(m),N=[];for(const z of E)N.push(z),N.push(...b(z));h(N);const G=new Set(N);r.current=r.current.filter(z=>!G.has(z)),r.current.push(d),c.current.set(d,a),l.current.set(d,m),p(z=>z+1)},[P,b,h]),S=s.useCallback(d=>{r.current=r.current.filter(a=>a!==d),c.current.delete(d),l.current.delete(d),p(a=>a+1)},[]),j=s.useCallback(d=>{const a=r.current.indexOf(d);return a>=0?te+a:te},[]),g=s.useCallback(d=>{const a=r.current,f=a.indexOf(d);f===-1||f===a.length-1||(r.current=[...a.filter(m=>m!==d),d],p(m=>m+1))},[]),C=s.useCallback(d=>l.current.get(d)??null,[]),y=s.useCallback((d,a)=>{let f=a;for(;f;){const m=l.current.get(f);if(m===d)return!0;f=m??null}return!1},[]),I=s.useCallback(d=>{const a=[],f=r.current;for(const m of f)y(d,m)&&a.push(m);return a},[y]),A=s.useCallback(d=>{const a=I(d);for(const f of[...a].reverse()){const m=c.current.get(f);m==null||m()}},[I]),k=s.useCallback(d=>{A(d);const a=c.current.get(d);a==null||a()},[A]),T=s.useCallback((d,a)=>{const f=r.current;for(const m of f){if(m===d)continue;l.current.get(m)===a&&k(m)}},[k]),O=s.useCallback(()=>{const d=r.current;if(d.length===0)return;const a=d[d.length-1],f=c.current.get(a);f==null||f()},[]),_=s.useCallback(()=>{const d=[...r.current];for(const a of d){const f=c.current.get(a);f==null||f()}},[]),L=s.useCallback(()=>r.current.length>0,[]),[F,V]=s.useState(!1);s.useEffect(()=>{V(r.current.length>0)},[u]),jt(O,F),Tt(_,F);const X=s.useMemo(()=>({register:x,unregister:S,getZIndex:j,bringToFront:g,portalContainer:n,zIndexVersion:u,closeFocused:O,closeAll:_,hasOpenPopouts:L,closeWithDescendants:k,closeDescendants:A,closeSiblings:T,getParentId:C,isAncestor:y}),[x,S,j,g,n,u,O,_,L,k,A,T,C,y]);return o.jsxs(Ie.Provider,{value:X,children:[t,o.jsx("div",{ref:i,"data-popout-portal-container":!0})]})}function Bt(t){const{isOpen:n,onDragStart:i}=t,[r,c]=s.useState({left:0,top:0}),l=s.useRef(!1),u=s.useRef({x:0,y:0,offsetLeft:0,offsetTop:0}),p=s.useCallback(()=>{c({left:0,top:0})},[]),P=s.useCallback(h=>{const x=h.target;x.tagName==="INPUT"||x.tagName==="TEXTAREA"||x.tagName==="BUTTON"||x.tagName==="SELECT"||x.closest("button")||x.closest("input")||x.closest("textarea")||x.closest("select")||(l.current=!0,u.current={x:h.clientX,y:h.clientY,offsetLeft:r.left,offsetTop:r.top},i==null||i(),h.target.setPointerCapture(h.pointerId))},[r.left,r.top,i]),b=s.useCallback(h=>{if(!l.current)return;const x=h.clientX-u.current.x,S=h.clientY-u.current.y;c({left:u.current.offsetLeft+x,top:u.current.offsetTop+S})},[]),v=s.useCallback(h=>{l.current&&(l.current=!1,h.target.releasePointerCapture(h.pointerId))},[]);return n?{dragTriggerProps:{"data-drag-trigger":!0,onPointerDown:P,onPointerMove:b,onPointerUp:v,style:{cursor:"grab",userSelect:"none",touchAction:"none"}},dragOffset:r,resetDragOffset:p}:{dragTriggerProps:{},dragOffset:{left:0,top:0},resetDragOffset:p}}function Rt({config:t,onClose:n,dragTriggerProps:i={},actions:r=[],activeTab:c,onTabChange:l,titleId:u}){var x;const{style:p,...P}=i,v=t.variant==="tabs"?t:null,h=(v==null?void 0:v.tabs.map(S=>({value:S.id,label:S.label})))??[];return o.jsxs(e.Group,{justify:"space-between",px:"sm",py:"xs",...P,style:{...p},children:[t.variant==="title"?o.jsx(e.Text,{id:u,size:"sm",fw:500,children:t.title}):o.jsxs(o.Fragment,{children:[o.jsx("span",{id:u,style:{position:"absolute",width:1,height:1,overflow:"hidden",clip:"rect(0, 0, 0, 0)"},children:((x=v==null?void 0:v.tabs[0])==null?void 0:x.label)??"Settings"}),o.jsx(e.SegmentedControl,{data:h,value:c,onChange:S=>l==null?void 0:l(S),size:"xs"})]}),o.jsxs(e.Group,{gap:4,children:[r.map(S=>o.jsx(e.ActionIcon,{variant:"subtle",onClick:S.onClick,"aria-label":S.label,children:S.icon},S.id)),o.jsx(e.CloseButton,{size:"sm",onClick:n,"aria-label":"Close panel"})]})]})}function _t(t,n,i=Pe,r={}){const{placement:c="left",alignment:l="start",panelHeight:u=0}=r;let p,P;switch(c){case"left":p=t.left-n-i,P=he(t,l,u);break;case"right":p=t.right+i,P=he(t,l,u);break;case"top":p=be(t,l,n),P=t.top-u-i;break;case"bottom":p=be(t,l,n),P=t.bottom+i;break;default:{const b=c;throw new Error(`Unknown placement: ${String(b)}`)}}return{left:p,top:P}}function he(t,n,i){switch(n){case"start":return t.top;case"center":return t.top+t.height/2-i/2;case"end":return t.bottom-i;default:{const r=n;throw new Error(`Unknown alignment: ${String(r)}`)}}}function be(t,n,i){switch(n){case"start":return t.left;case"center":return t.left+t.width/2-i/2;case"end":return t.right-i;default:{const r=n;throw new Error(`Unknown alignment: ${String(r)}`)}}}function Ft({width:t,height:n,header:i,children:r,anchorRef:c,placement:l="left",alignment:u="start",gap:p=0,actions:P}){var pe,fe;const{isOpen:b,close:v,triggerRef:h,id:x,parentId:S}=ie(),{getZIndex:j,portalContainer:g,register:C,unregister:y,bringToFront:I,zIndexVersion:A,closeWithDescendants:k,closeDescendants:T}=Et(),O=zt(),_=s.useId(),L=`popout-panel-${x}`,F=`popout-title-${_}`,[V,X]=s.useState(null),d=s.useRef(!1),a=s.useRef(null),f=s.useCallback(()=>{I(x)},[I,x]),{dragTriggerProps:m,dragOffset:E,resetDragOffset:N}=Bt({isOpen:b,onDragStart:f}),G=i.variant==="tabs",z=G?i:null,J=(z==null?void 0:z.defaultTab)??((pe=z==null?void 0:z.tabs[0])==null?void 0:pe.id),[ce,ue]=s.useState(J),Te=s.useCallback(w=>{var M;ue(w),(M=z==null?void 0:z.onTabChange)==null||M.call(z,w)},[z]),je=s.useCallback(w=>{w.stopPropagation(),T(x),I(x)},[T,I,x]),Ae=s.useCallback(()=>{k(x)},[k,x]);if(s.useEffect(()=>(b?C(x,v,S):y(x),()=>{y(x)}),[b,x,C,y,v,S]),s.useEffect(()=>{if(b){let w=(c==null?void 0:c.current)??null;if(!w&&(O!=null&&O.anchorRef.current)&&(w=O.anchorRef.current),!w&&S&&(w=document.querySelector(`[data-popout-id="${S}"]`)),w||(w=h.current),w){const M=w.getBoundingClientRect(),De=_t(M,t,p,{placement:l,alignment:u,panelHeight:n});X(De),d.current||(N(),G&&ue(J))}}d.current=b},[b,t,n,p,h,c,l,u,N,G,J,S,O]),s.useEffect(()=>{if(b&&a.current){const w=setTimeout(()=>{var M;(M=a.current)==null||M.focus()},0);return()=>{clearTimeout(w)}}else!b&&h.current&&h.current.focus()},[b,h]),!b||!g||!V)return null;const Ee=j(x),de={left:V.left+E.left,top:V.top+E.top},Oe=o.jsxs(e.Paper,{ref:a,id:L,role:"dialog","aria-modal":"false","aria-labelledby":F,tabIndex:-1,radius:8,onClick:je,"data-popout-id":x,...S&&{"data-parent-id":S},style:{position:"fixed",left:de.left,top:de.top,minWidth:t,...n!==void 0&&{minHeight:n},zIndex:Ee,backgroundColor:"var(--mantine-color-body)",border:"1px solid light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.12))",boxShadow:["0 1px 2px light-dark(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.4))","0 4px 8px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.35))","0 8px 16px light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.25))"].join(", "),outline:"none"},children:[o.jsx(Rt,{config:i,onClose:Ae,dragTriggerProps:m,activeTab:ce,onTabChange:Te,actions:P,titleId:F}),o.jsx(e.Box,{children:G?(fe=z==null?void 0:z.tabs.find(w=>w.id===ce))==null?void 0:fe.content:r})]});return Be.createPortal(Oe,g)}function Vt({children:t}){const{toggle:n,triggerRef:i,isOpen:r,id:c}=ie(),l=s.useCallback(P=>{P.stopPropagation(),n()},[n]);if(!s.isValidElement(t))throw new Error("PopoutTrigger requires a single valid React element as its child");const u=`popout-panel-${c}`,p=t;return s.cloneElement(p,{onClick:P=>{var b,v;(v=(b=p.props).onClick)==null||v.call(b,P),l(P)},ref:i,"data-popout-trigger":!0,"aria-expanded":r,"aria-controls":u,"aria-haspopup":"dialog"})}function Nt({children:t}){const n=At(),i=(n==null?void 0:n.id)??null;return o.jsx(Ot,{parentId:i,children:t})}const q=Object.assign(Nt,{Trigger:Vt,Panel:Ft,Content:wt,Anchor:It}),Mt=s.forwardRef(function({icon:n,size:i="xs",...r},c){const{isOpen:l}=ie();return o.jsx(e.ActionIcon,{ref:c,variant:l?"light":"subtle",size:i,c:l?void 0:"dimmed",...r,children:n})});function Ht({children:t}){return o.jsx(Dt,{children:t})}function we({color:t,defaultColor:n,opacity:i,defaultOpacity:r=100,onColorChange:c,onOpacityChange:l,label:u,showOpacity:p=!0}){const[P,b]=B.useUncontrolled({value:t,defaultValue:void 0,finalValue:void 0,onChange:c}),[v,h]=B.useUncontrolled({value:i,defaultValue:void 0,finalValue:void 0,onChange:l}),x=P===void 0,S=v===void 0,j=x&&(!p||S),g=P??n,C=v??r,[y,I]=s.useState(g.replace("#","").toUpperCase()),[A,k]=s.useState(C);s.useEffect(()=>{I(g.replace("#","").toUpperCase())},[g]),s.useEffect(()=>{k(C)},[C]);const T=a=>{if(a.length===9){const f=a.slice(0,7).toUpperCase(),m=a.slice(7,9),E=re(m);b(f),p&&h(E)}else b(a.toUpperCase())},O=()=>{const a=ae(C);return`${g}${a}`.toUpperCase()},_=a=>{I(a.currentTarget.value.toUpperCase())},L=()=>{let a=y.toUpperCase();a&&!a.startsWith("#")&&(a=`#${a}`),/^#[0-9A-F]{6}$/i.test(a)&&a!==g?b(a):I(g.replace("#","").toUpperCase())},F=a=>{k(a)},V=()=>{const a=typeof A=="string"?parseFloat(A):A;if(isNaN(a))k(C);else{const f=Math.min(100,Math.max(0,a));f!==C&&h(f)}},X=()=>{b(void 0),p&&h(void 0)},d=o.jsxs(e.Group,{gap:4,wrap:"nowrap",children:[o.jsxs(e.Group,{gap:0,children:[o.jsxs(q,{children:[o.jsx(q.Trigger,{children:o.jsx(e.ActionIcon,{variant:"filled",size:24,radius:0,style:{backgroundColor:"var(--mantine-color-default)",borderRadius:"4px 0 0 4px"},"aria-label":"Color swatch",children:o.jsx(e.ColorSwatch,{color:g,size:14,radius:2,style:{border:"1px solid var(--mantine-color-default-border)"}})})}),o.jsx(q.Panel,{width:220,header:{variant:"title",title:u??"Color"},placement:"bottom",alignment:"start",gap:4,children:o.jsx(q.Content,{children:o.jsx(e.ColorPicker,{format:"hexa",value:O(),onChange:T,swatches:[...ye]})})})]}),o.jsx(e.TextInput,{value:y,onChange:_,onBlur:L,"aria-label":"Color hex value","data-is-default":x?"true":"false",w:72,styles:{input:{borderRadius:p?0:"0 4px 4px 0",fontFamily:"monospace",textTransform:"uppercase",...x?{fontStyle:"italic",color:"var(--mantine-color-dimmed)"}:{}}}}),p&&o.jsxs(o.Fragment,{children:[o.jsx(e.Box,{style:{width:1,height:24,backgroundColor:"var(--mantine-color-default-border)"}}),o.jsx(e.NumberInput,{value:A,onChange:F,onBlur:V,min:0,max:100,hideControls:!0,suffix:"%","aria-label":"Opacity","data-is-default":S?"true":"false",w:54,styles:{input:{borderRadius:"0 4px 4px 0",textAlign:"right",...S?{fontStyle:"italic",color:"var(--mantine-color-dimmed)"}:{}}}})]})]}),!j&&o.jsx(e.ActionIcon,{variant:"subtle",size:"xs",c:"dimmed","aria-label":`Reset ${u??"color"} to default`,onClick:X,children:o.jsx(D.X,{size:12})})]});return u?o.jsxs(e.Stack,{gap:0,children:[o.jsx(e.Text,{size:"xs",c:"dimmed",mb:1,lh:1.2,children:u}),d]}):d}function Lt({label:t,actions:n,children:i,bleed:r}){const c=r?"calc(-1 * var(--mantine-spacing-sm) - 1px)":void 0;return o.jsxs(e.Box,{children:[o.jsx(e.Divider,{color:"var(--mantine-color-default-border)",mt:8,mb:0,mx:c}),o.jsxs(e.Group,{justify:"space-between",py:8,px:8,children:[o.jsx(e.Text,{size:"xs",fw:500,lh:1.2,children:t}),n&&o.jsx(e.Group,{gap:4,children:n})]}),o.jsx(e.Stack,{gap:0,px:8,children:i})]})}function Gt({label:t,defaultOpen:n=!0,children:i,hasConfiguredValues:r=!1}){const[c,{toggle:l}]=B.useDisclosure(n),u=p=>{(p.key==="Enter"||p.key===" ")&&(p.preventDefault(),l())};return o.jsxs(e.Box,{children:[o.jsx(e.Divider,{color:"var(--mantine-color-default-border)",mt:8,mb:0,mx:8}),o.jsx(e.Group,{justify:"space-between",py:8,px:8,style:{cursor:"pointer"},onClick:l,role:"button",tabIndex:0,"aria-expanded":c,"aria-label":c?`Collapse ${t}`:`Expand ${t}`,onKeyDown:u,children:o.jsxs(e.Group,{gap:4,children:[o.jsx(e.ActionIcon,{variant:"subtle",size:"xs",c:"dimmed",tabIndex:-1,"aria-hidden":"true",children:c?o.jsx(D.ChevronDown,{size:12}):o.jsx(D.ChevronRight,{size:12})}),o.jsx(e.Text,{size:"xs",fw:500,lh:1.2,children:t}),r&&o.jsx(e.Box,{"aria-label":`${t} has configured values`,style:{width:6,height:6,borderRadius:"50%",backgroundColor:"var(--mantine-color-blue-5)",marginLeft:4}})]})}),o.jsx(e.Collapse,{in:c,children:o.jsx(e.Stack,{gap:0,children:i})})]})}function Ut({label:t,defaultOpen:n=!1,children:i}){const[r,{toggle:c}]=B.useDisclosure(n),l=u=>{(u.key==="Enter"||u.key===" ")&&(u.preventDefault(),c())};return o.jsxs(e.Box,{children:[o.jsxs(e.Group,{gap:4,py:4,style:{cursor:"pointer"},onClick:c,role:"button",tabIndex:0,"aria-expanded":r,"aria-label":r?`Collapse ${t}`:`Expand ${t}`,onKeyDown:l,children:[o.jsx(e.ActionIcon,{variant:"subtle",size:"xs",c:"dimmed",tabIndex:-1,"aria-hidden":"true",children:r?o.jsx(D.ChevronDown,{size:10}):o.jsx(D.ChevronRight,{size:10})}),o.jsx(e.Text,{size:"xs",c:"dimmed",lh:1.2,children:t})]}),o.jsx(e.Collapse,{in:r,children:o.jsx(e.Box,{pl:"md",children:o.jsx(e.Stack,{gap:4,children:i})})})]})}function $t(){return crypto.randomUUID().slice(0,8)}function Y(t,n){return{id:$t(),offset:t,color:n}}function ke(){return[Y(0,"#6366F1"),Y(1,"#06B6D4")]}function Xt({stops:t,defaultStops:n,direction:i,defaultDirection:r=0,showDirection:c=!0,onChange:l}){const[u,p]=B.useUncontrolled({value:t,defaultValue:n,finalValue:ke(),onChange:g=>l==null?void 0:l(g,P)}),[P,b]=B.useUncontrolled({value:i,defaultValue:r,finalValue:0,onChange:g=>l==null?void 0:l(u,g)}),v=(g,C)=>{const y=[...u];y[g]={...y[g],color:C},p(y)},h=(g,C)=>{const y=[...u];y[g]={...y[g],offset:C/100},p(y)},x=g=>{b(g)},S=()=>{if(u.length>=5)return;const g=u.length>0?(u[u.length-1].offset+1)/2:.5,C=[...u,Y(g,Z)];C.sort((y,I)=>y.offset-I.offset),p(C)},j=g=>{if(u.length<=2)return;const C=u.filter((y,I)=>I!==g);p(C)};return o.jsxs(e.Stack,{gap:"xs",children:[o.jsxs(e.Group,{justify:"space-between",align:"center",children:[o.jsx(e.Text,{size:"xs",c:"dimmed",children:"Color Stops"}),o.jsx(e.ActionIcon,{variant:"subtle",color:"gray",onClick:S,disabled:u.length>=5,"aria-label":"Add color stop",children:o.jsx(D.Plus,{size:12})})]}),u.map((g,C)=>o.jsxs(e.Group,{gap:"xs",align:"flex-end",children:[o.jsx(we,{color:g.color,defaultColor:Z,onColorChange:y=>{v(C,y??Z)},showOpacity:!1}),o.jsx(e.Box,{style:{width:"80px"},children:o.jsx(e.Slider,{min:0,max:100,value:g.offset*100,onChange:y=>{h(C,y)},label:y=>`${Math.round(y)}%`,"aria-label":`Stop ${C+1} position`})}),o.jsx(e.ActionIcon,{variant:"subtle",color:"gray",onClick:()=>{j(C)},disabled:u.length<=2,"aria-label":`Remove color stop ${C+1}`,children:o.jsx(D.Minus,{size:12})})]},g.id)),c&&o.jsxs(e.Box,{pb:"md",children:[o.jsx(e.Text,{size:"xs",c:"dimmed",mb:4,children:"Direction"}),o.jsx(e.Slider,{min:0,max:360,value:P,onChange:x,label:g=>`${g}°`,"aria-label":"Gradient direction",marks:[{value:0,label:"0°"},{value:90,label:"90°"},{value:180,label:"180°"},{value:270,label:"270°"},{value:360,label:"360°"}]})]})]})}function qt({label:t,value:n}){return o.jsxs(e.Group,{justify:"space-between",py:4,children:[o.jsx(e.Text,{size:"sm",c:"dimmed",children:t}),o.jsx(e.Text,{size:"sm",c:"var(--mantine-color-text)",fw:500,children:String(n)})]})}function Kt({label:t,value:n,defaultValue:i,onChange:r,min:c,max:l,step:u,decimalScale:p,suffix:P,hideControls:b=!0}){const[v,h]=B.useUncontrolled({value:n,defaultValue:void 0,finalValue:void 0,onChange:r}),x=v===void 0,S=v??i,j=s.useRef(!1),[g,C]=s.useState(S);s.useEffect(()=>{j.current||C(v??i),j.current=!1},[v,i]);const y=k=>{j.current=!0,C(k)},I=()=>{const k=typeof g=="string"?parseFloat(g):g;if(isNaN(k))C(v??i);else{let T=k;c!==void 0&&T<c&&(T=c),l!==void 0&&T>l&&(T=l),T!==v&&h(T),C(T)}},A=()=>{h(void 0)};return o.jsxs(e.Group,{gap:4,wrap:"nowrap",align:"flex-end",children:[o.jsx(e.NumberInput,{label:t,"aria-label":t,value:g,onChange:y,onBlur:I,min:c,max:l,step:u,decimalScale:p,suffix:P,hideControls:b,"data-is-default":x?"true":"false",styles:{input:x?{fontStyle:"italic",color:"var(--mantine-color-dimmed)"}:void 0},style:{flex:1}}),!x&&o.jsx(e.ActionIcon,{variant:"subtle",size:"xs",c:"dimmed","aria-label":`Reset ${t} to default`,onClick:A,style:{marginBottom:2},children:o.jsx(D.X,{size:12})})]})}function Wt({label:t,value:n,defaultValue:i,options:r,onChange:c}){const[l,u]=B.useUncontrolled({value:n,defaultValue:void 0,finalValue:void 0,onChange:c}),p=l===void 0,P=l??i,b=h=>{h!==null&&u(h)},v=()=>{u(void 0)};return o.jsxs(e.Group,{gap:4,wrap:"nowrap",align:"flex-end",children:[o.jsx(e.Select,{label:t,"aria-label":t,value:P,onChange:b,data:r,rightSection:o.jsx(D.ChevronDown,{size:14}),rightSectionPointerEvents:"none","data-is-default":p?"true":"false",allowDeselect:!1,styles:{input:p?{fontStyle:"italic",color:"var(--mantine-color-dimmed)"}:void 0},style:{flex:1}}),!p&&o.jsx(e.ActionIcon,{variant:"subtle",size:"xs",c:"dimmed","aria-label":`Reset ${t} to default`,onClick:v,style:{marginBottom:2},children:o.jsx(D.X,{size:12})})]})}function Zt({label:t,checked:n,defaultChecked:i,onChange:r,children:c}){const[l,u]=B.useUncontrolled({value:n,defaultValue:i,finalValue:!1,onChange:r});return o.jsxs(e.Stack,{gap:4,children:[o.jsx(e.Checkbox,{label:t,checked:l,onChange:p=>{u(p.currentTarget.checked)}}),l&&o.jsx(e.Box,{"data-testid":"toggle-with-content-children",pl:"md",children:o.jsx(e.Stack,{gap:4,children:c})})]})}function Yt(t="dark"){return e.useComputedColorScheme(t)}const Jt={xs:e.rem(4),sm:e.rem(8),md:e.rem(16),lg:e.rem(24),xl:e.rem(32)},Qt={HEIGHT:24,FONT_SIZE:11,CONTROL_PADDING:8,SECTION_GAP:4},eo="0.1.0";exports.COMPACT_SIZING=Qt;exports.CompactColorInput=we;exports.ControlGroup=Lt;exports.ControlSection=Gt;exports.ControlSubGroup=Ut;exports.DEFAULT_GRADIENT_STOP_COLOR=Z;exports.GradientEditor=Xt;exports.MANTINE_SPACING=Jt;exports.MAX_ALPHA_HEX=ne;exports.MAX_OPACITY_PERCENT=se;exports.POPOUT_GAP=Pe;exports.POPOUT_NESTED_GAP=nt;exports.POPOUT_Z_INDEX_BASE=te;exports.Popout=q;exports.PopoutButton=Mt;exports.PopoutManager=Ht;exports.SWATCH_COLORS_HEXA=ye;exports.StatRow=qt;exports.StyleNumberInput=Kt;exports.StyleSelect=Wt;exports.ToggleWithContent=Zt;exports.VERSION=eo;exports.compactColors=Ce;exports.compactDarkColors=ve;exports.compactTheme=Ct;exports.compactThemeOverride=Se;exports.createColorStop=Y;exports.createDefaultGradientStops=ke;exports.isValidHex=yt;exports.opacityToAlphaHex=ae;exports.parseAlphaFromHexa=re;exports.parseHexaColor=Pt;exports.toHexaColor=St;exports.useActualColorScheme=Yt;
|
package/dist/index.d.ts
CHANGED
|
@@ -24,6 +24,33 @@ export declare interface ColorStop {
|
|
|
24
24
|
color: string;
|
|
25
25
|
}
|
|
26
26
|
|
|
27
|
+
/**
|
|
28
|
+
* Compact theme sizing constants.
|
|
29
|
+
* These values represent the standard sizing used throughout the compact theme
|
|
30
|
+
* for consistent component dimensions. Use these when creating custom components
|
|
31
|
+
* that need to match the compact theme's sizing.
|
|
32
|
+
* @example
|
|
33
|
+
* ```tsx
|
|
34
|
+
* import { COMPACT_SIZING } from '@graphty/compact-mantine';
|
|
35
|
+
*
|
|
36
|
+
* const MyComponent = () => (
|
|
37
|
+
* <div style={{ height: COMPACT_SIZING.HEIGHT, fontSize: COMPACT_SIZING.FONT_SIZE }}>
|
|
38
|
+
* Custom compact component
|
|
39
|
+
* </div>
|
|
40
|
+
* );
|
|
41
|
+
* ```
|
|
42
|
+
*/
|
|
43
|
+
export declare const COMPACT_SIZING: {
|
|
44
|
+
/** Standard compact component height (inputs, buttons, icons) in pixels */
|
|
45
|
+
readonly HEIGHT: 24;
|
|
46
|
+
/** Standard compact font size in pixels */
|
|
47
|
+
readonly FONT_SIZE: 11;
|
|
48
|
+
/** Standard padding for control elements in pixels */
|
|
49
|
+
readonly CONTROL_PADDING: 8;
|
|
50
|
+
/** Gap between items in sections/lists in pixels */
|
|
51
|
+
readonly SECTION_GAP: 4;
|
|
52
|
+
};
|
|
53
|
+
|
|
27
54
|
/**
|
|
28
55
|
* Compact color input with optional opacity support.
|
|
29
56
|
* Supports both controlled and uncontrolled modes.
|
|
@@ -988,15 +1015,10 @@ export declare interface StyleSelectProps {
|
|
|
988
1015
|
onChange?: (value: string | undefined) => void;
|
|
989
1016
|
}
|
|
990
1017
|
|
|
991
|
-
/**
|
|
992
|
-
* Standard color swatches for color pickers throughout the application.
|
|
993
|
-
* Used by CompactColorInput and GradientEditor.
|
|
994
|
-
*/
|
|
995
|
-
export declare const SWATCH_COLORS: readonly ["#5B8FF9", "#FF6B6B", "#61D095", "#F7B731", "#9B59B6"];
|
|
996
|
-
|
|
997
1018
|
/**
|
|
998
1019
|
* Swatches with alpha channel for HEXA color pickers.
|
|
999
1020
|
* Includes both fully opaque (FF) and semi-transparent (80) variants.
|
|
1021
|
+
* Used by CompactColorInput for color picker swatches.
|
|
1000
1022
|
*/
|
|
1001
1023
|
export declare const SWATCH_COLORS_HEXA: readonly ["#5B8FF9FF", "#FF6B6BFF", "#61D095FF", "#F7B731FF", "#9B59B6FF", "#5B8FF980", "#FF6B6B80", "#61D09580", "#F7B73180", "#9B59B680"];
|
|
1002
1024
|
|
|
@@ -1043,9 +1065,17 @@ export declare function toHexaColor(hex: string, opacity: number): string;
|
|
|
1043
1065
|
/**
|
|
1044
1066
|
* Hook to get the actual resolved color scheme.
|
|
1045
1067
|
* Resolves "auto" to the actual light/dark value based on system preference.
|
|
1046
|
-
* @
|
|
1068
|
+
* @param fallback - Fallback color scheme when system preference cannot be determined.
|
|
1069
|
+
* Defaults to "dark" for consistency with existing behavior.
|
|
1070
|
+
* @returns "light" | "dark" - The resolved color scheme
|
|
1071
|
+
* @example
|
|
1072
|
+
* // Use default fallback (dark)
|
|
1073
|
+
* const scheme = useActualColorScheme();
|
|
1074
|
+
* @example
|
|
1075
|
+
* // Use custom fallback
|
|
1076
|
+
* const scheme = useActualColorScheme("light");
|
|
1047
1077
|
*/
|
|
1048
|
-
export declare function useActualColorScheme(): "light" | "dark";
|
|
1078
|
+
export declare function useActualColorScheme(fallback?: "light" | "dark"): "light" | "dark";
|
|
1049
1079
|
|
|
1050
1080
|
export declare const VERSION = "0.1.0";
|
|
1051
1081
|
|