@maximeij/react-csstick/lib/react-csstick.umd.cjs

CSS Stick figures and comics

(function(v,O){typeof exports=="object"&&typeof module<"u"?O(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],O):(v=typeof globalThis<"u"?globalThis:v||self,O(v["React-CSStick"]={},v.React))})(this,function(v,O){"use strict";var V={exports:{}},W={};/**
 * @license React
 * react-jsx-runtime.production.js
 *
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */var ne;function xe(){if(ne)return W;ne=1;var t=Symbol.for("react.transitional.element"),s=Symbol.for("react.fragment");function a(c,n,o){var i=null;if(o!==void 0&&(i=""+o),n.key!==void 0&&(i=""+n.key),"key"in n){o={};for(var u in n)u!=="key"&&(o[u]=n[u])}else o=n;return n=o.ref,{$$typeof:t,type:c,key:i,ref:n!==void 0?n:null,props:o}}return W.Fragment=s,W.jsx=a,W.jsxs=a,W}var H={};/**
 * @license React
 * react-jsx-runtime.development.js
 *
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */var oe;function Ce(){return oe||(oe=1,process.env.NODE_ENV!=="production"&&function(){function t(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===N?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case j:return"Fragment";case x:return"Profiler";case p:return"StrictMode";case Y:return"Suspense";case X:return"SuspenseList";case U:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case P:return"Portal";case g:return(e.displayName||"Context")+".Provider";case f:return(e._context.displayName||"Context")+".Consumer";case Z:var r=e.render;return e=e.displayName,e||(e=r.displayName||r.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case w:return r=e.displayName||null,r!==null?r:t(e.type)||"Memo";case I:r=e._payload,e=e._init;try{return t(e(r))}catch{}}return null}function s(e){return""+e}function a(e){try{s(e);var r=!1}catch{r=!0}if(r){r=console;var l=r.error,m=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return l.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",m),s(e)}}function c(e){if(e===j)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===I)return"<...>";try{var r=t(e);return r?"<"+r+">":"<...>"}catch{return"<...>"}}function n(){var e=Q.A;return e===null?null:e.getOwner()}function o(){return Error("react-stack-top-frame")}function i(e){if(ke.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function u(e,r){function l(){ve||(ve=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",r))}l.isReactWarning=!0,Object.defineProperty(e,"key",{get:l,configurable:!0})}function d(){var e=t(this.type);return Ee[e]||(Ee[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function E(e,r,l,m,A,C,ee,te){return l=C.ref,e={$$typeof:R,type:e,key:r,props:C,_owner:A},(l!==void 0?l:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:d}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:ee}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:te}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function T(e,r,l,m,A,C,ee,te){var b=r.children;if(b!==void 0)if(m)if(He(b)){for(m=0;m<b.length;m++)k(b[m]);Object.freeze&&Object.freeze(b)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else k(b);if(ke.call(r,"key")){b=t(e);var F=Object.keys(r).filter(function(Ue){return Ue!=="key"});m=0<F.length?"{key: someKey, "+F.join(": ..., ")+": ...}":"{key: someKey}",Pe[b+m]||(F=0<F.length?"{"+F.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
  let props = %s;
  <%s {...props} />
React keys must be passed directly to JSX without using spread:
  let props = %s;
  <%s key={someKey} {...props} />`,m,b,F,b),Pe[b+m]=!0)}if(b=null,l!==void 0&&(a(l),b=""+l),i(r)&&(a(r.key),b=""+r.key),"key"in r){l={};for(var re in r)re!=="key"&&(l[re]=r[re])}else l=r;return b&&u(l,typeof e=="function"?e.displayName||e.name||"Unknown":e),E(e,b,C,A,n(),l,ee,te)}function k(e){typeof e=="object"&&e!==null&&e.$$typeof===R&&e._store&&(e._store.validated=1)}var h=O,R=Symbol.for("react.transitional.element"),P=Symbol.for("react.portal"),j=Symbol.for("react.fragment"),p=Symbol.for("react.strict_mode"),x=Symbol.for("react.profiler"),f=Symbol.for("react.consumer"),g=Symbol.for("react.context"),Z=Symbol.for("react.forward_ref"),Y=Symbol.for("react.suspense"),X=Symbol.for("react.suspense_list"),w=Symbol.for("react.memo"),I=Symbol.for("react.lazy"),U=Symbol.for("react.activity"),N=Symbol.for("react.client.reference"),Q=h.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,ke=Object.prototype.hasOwnProperty,He=Array.isArray,K=console.createTask?console.createTask:function(){return null};h={"react-stack-bottom-frame":function(e){return e()}};var ve,Ee={},Te=h["react-stack-bottom-frame"].bind(h,o)(),Re=K(c(o)),Pe={};H.Fragment=j,H.jsx=function(e,r,l,m,A){var C=1e4>Q.recentlyCreatedOwnerStacks++;return T(e,r,l,!1,m,A,C?Error("react-stack-top-frame"):Te,C?K(c(e)):Re)},H.jsxs=function(e,r,l,m,A){var C=1e4>Q.recentlyCreatedOwnerStacks++;return T(e,r,l,!0,m,A,C?Error("react-stack-top-frame"):Te,C?K(c(e)):Re)}}()),H}var se;function Oe(){return se||(se=1,process.env.NODE_ENV==="production"?V.exports=xe():V.exports=Ce()),V.exports}var ce=Oe();const S=ce.jsx,J=ce.jsxs;function q(t){const s=a=>{const{onClick:c}=a,n=O.useRef(null);return c?S("span",{onClick:i=>{i.preventDefault(),i.stopPropagation(),c&&c(n)},ref:n,children:S(t,{...a})}):S(t,{...a})};return s.displayName=`clickable(${t.displayName||t.name||"Component"})`,s}const ae="3rem",B={childProps:[],type:"text",bgColor:"transparent",color:"#888888",coord:{x:"0",y:"0"},dimensions:{width:ae,height:ae,thickness:"2px"},id:"",lineStyle:"",onClick:()=>null,text:"",font:"Comic Sans MS, Comic Sans, cursive",fontSize:"1.5rem",fontWeight:"normal",borderColor:"transparent",borderRadius:"40%"},je=Object.freeze(Object.defineProperty({__proto__:null,Default:B},Symbol.toStringTag,{value:"Module"})),le=(t,s)=>`calc(${t} * ${s})`,$=(t,s)=>`calc(${t} / ${s||1})`,y=t=>`calc(100% - var(--${t}))`,we=t=>`${t??0}deg`,G=t=>{const{bgColor:s,color:a,width:c,height:n,thickness:o}=t;return{"--w":c,"--h":n,"--t":o,"--c":a,"--bgc":s}},ie=(t,s)=>{const a=typeof t=="number"?[t]:t.slice(0,3),c={};return a.forEach((n,o)=>{const i=`--${s}-${o}`;c[i]=we(n)}),c},ue=t=>{const{bgColor:s,color:a,width:c,height:n,thickness:o,base:i,coord:u,offsets:d}=t;return{...G({bgColor:s,color:a,width:c,height:n,thickness:o}),...ie(i??0,"base"),top:`calc(${(u==null?void 0:u.y)??0} - ${(d==null?void 0:d.y)??"0%"})`,left:`calc(${(u==null?void 0:u.x)??0} - ${(d==null?void 0:d.x)??"0%"})`}},Ne=t=>{const{font:s,fontSize:a,fontWeight:c,borderColor:n,borderRadius:o}=t;return{"--f":s,"--fs":a,"--fw":c,"--bc":n,"--br":o}},Ae=t=>t,de=q((t=B)=>{const{id:s,font:a,fontSize:c,fontWeight:n,bgColor:o,borderColor:i,borderRadius:u,color:d,dimensions:E,coord:T,text:k}=t,{width:h,height:R,thickness:P}={...B.dimensions,...E},j=ue({width:h,height:R,thickness:P,bgColor:o,color:d,coord:T}),p=Ne({font:a,fontSize:c,fontWeight:n,borderColor:i,borderRadius:u}),x={...j,...p};return S("div",{className:"bubble",style:x,id:s||void 0,children:S("div",{className:"text",children:k??""})})}),$e=Object.freeze(Object.defineProperty({__proto__:null,TextBubblePresets:je,default:de},Symbol.toStringTag,{value:"Module"})),fe="12rem",D={default:{angle:[10,0,-180]},armPoint:{angle:[75,15]},armHip:{angle:[75,-85,10]},armHeadHold:{angle:[110,80,-30]},legHalfSquat:{angle:[50,-50,90]}},_={childProps:[],children:[],bgColor:"transparent",color:"#888888",coord:{x:"0",y:"0"},customPos:{limbs:{base:[10,0,-180]}},dimensions:{width:fe,height:fe,thickness:"2px"},id:"",lineStyle:"",onClick:()=>null,posId:"default",type:"stick"},me={default:_.customPos,custom:{},panik:{limbs:{..._.customPos.limbs,arms:{left:D.armHeadHold,right:D.armHeadHold},legs:{left:D.legHalfSquat,right:D.legHalfSquat}},offsets:{x:"0px",y:"calc(var(--h) / -14)"}},pointL:{limbs:{..._.customPos.limbs,arms:{left:D.armPoint}}},pointR:{limbs:{..._.customPos.limbs,arms:{right:D.armPoint}}},sitL:{limbs:{..._.customPos.limbs,legs:{left:{angle:90},right:{angle:90}}},offsets:{x:"0px",y:"-3rem"}},walkL:{},walkR:{}},De=Object.freeze(Object.defineProperty({__proto__:null,Default:_,LimbAnglePresets:D,Positions:me},Symbol.toStringTag,{value:"Module"})),be=(t=_)=>{const{id:s,bgColor:a,color:c,posId:n,customPos:o,dimensions:i,coord:u,childProps:d,lineStyle:E,onClick:T}=t,k=n==="custom"&&o,{limbs:h,offsets:R}=k?o:me[n??"custom"],{width:P,height:j,thickness:p}={..._.dimensions,...i},{base:x=0,arms:f,legs:g}={..._.customPos.limbs,...h},Z=ue({width:P,height:j,thickness:p,bgColor:a,color:c,base:x,offsets:R,coord:u}),Y=w=>{const I=w==null?void 0:w.angle,U={},N=I?ie(I,"angle"):{};return S("div",{style:{...U,...N},children:S("div",{children:S("div",{})})})},X=E==="sketch"&&p?Ae({"--t":le(p,1.75)}):{};return J("div",{className:`${E??""} stick`,style:Z,id:s||void 0,children:[S("div",{className:"head"}),J("div",{className:"body",style:X,children:[J("div",{className:"arms",children:[Y(f==null?void 0:f.left),Y(f==null?void 0:f.right)]}),J("div",{className:"legs",children:[Y(g==null?void 0:g.left),Y(g==null?void 0:g.right)]})]}),d==null?void 0:d.map((w,I)=>{const{type:U}=w;let N=null;switch(U){case"stick":N=be;return;case"text":N=de;break}return N&&O.createElement(N,{onClick:T,...w,key:`stickchild-${I}`})})]})},he=q(be),Ie=Object.freeze(Object.defineProperty({__proto__:null,StickPresets:De,default:he},Symbol.toStringTag,{value:"Module"})),pe="50vmin",Se={childProps:[],color:_.color,type:"comic",bgColor:"transparent",coord:{x:"0",y:"0"},dimensions:{width:pe,height:pe,thickness:_.dimensions.thickness},id:"",lineStyle:"",onClick:()=>null,scenes:[],layout:[]},Me=Object.freeze(Object.defineProperty({__proto__:null,Default:Se},Symbol.toStringTag,{value:"Module"})),_e="100%",ge={childProps:[],type:"scene",bgColor:"transparent",coord:{x:"0",y:"0"},color:_.color,dimensions:{width:_e,height:_e,thickness:_.dimensions.thickness},id:"",lineStyle:"",onClick:()=>null,sticks:[]},M="h",z="w",L="0%",ze={C:{x:$(y(z),2),y:$(y(M),2)},SW:{x:L,y:y(M)},W:{x:L,y:$(y(M),2)},NW:{x:L,y:L},N:{x:$(y(z),2),y:L},NE:{x:y(z),y:L},E:{x:y(z),y:$(y(M),2)},SE:{x:y(z),y:y(M)},S:{x:$(y(z),2),y:y(M)}},Le=Object.freeze(Object.defineProperty({__proto__:null,Default:ge,Directions:ze},Symbol.toStringTag,{value:"Module"})),ye=q(({id:t="scene",bgColor:s,childProps:a,color:c,dimensions:n,lineStyle:o,sticks:i,onClick:u})=>{const{width:d,height:E,thickness:T}=n??ge.dimensions,k=G({width:d,height:E,thickness:T,bgColor:s,color:c});return S("div",{className:`${o??""} scene`,style:k,id:t||void 0,children:[...a??[],...i??[]].filter(({type:h})=>h==="stick").map((h,R)=>{const P={bgColor:s,color:c,lineStyle:o,...h};return O.createElement(he,{...P,onClick:u,key:`stick-${R}-${P.id}`})})})}),Ye=Object.freeze(Object.defineProperty({__proto__:null,ScenePresets:Le,default:ye},Symbol.toStringTag,{value:"Module"})),Fe=q(({id:t="comic",bgColor:s,childProps:a,color:c,dimensions:n,layout:o,lineStyle:i,onClick:u,scenes:d})=>{const{width:E,height:T,thickness:k}=n??Se.dimensions,h=G({width:E,height:T,thickness:k,bgColor:s,color:c}),R=O.useMemo(()=>{const P=o.map(p=>{const x=p.reduce((f,g)=>f+g,0);return p.map(f=>f/(x||1))}).flat(),j=a==null?void 0:a.filter(({type:p})=>p==="scene");return S("div",{className:"row",children:P.map((p,x)=>{const f=[...j??[],...d??[]][x],g=f?{bgColor:s,color:c,lineStyle:i,...f,dimensions:{thickness:k,...f.dimensions,width:le("100%",p),height:$((n==null?void 0:n.height)??"",o.length||1)}}:void 0;return g&&S(ye,{onClick:u,...g},`scene-${x}`)})})},[n==null?void 0:n.height,o,d]);return S("div",{className:`${i??""} comic`,style:h,id:t||void 0,children:R})}),We=Object.freeze(Object.defineProperty({__proto__:null,ComicPresets:Me,default:Fe},Symbol.toStringTag,{value:"Module"}));v.Comic=We,v.Scene=Ye,v.Stick=Ie,v.TextBubble=$e,Object.defineProperty(v,Symbol.toStringTag,{value:"Module"})});