badger-react-ui
Version:
This is a collection of React UI components using the [Badger CSS](https://abw.github.io/badger-css/) styles.
3 lines (2 loc) • 15.5 kB
JavaScript
(function(t,o){typeof exports=="object"&&typeof module<"u"?o(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],o):(t=typeof globalThis<"u"?globalThis:t||self,o(t["@abw/badger-react-ui"]={},t["react/jsx-runtime"],t.react))})(this,function(t,o,L){"use strict";const D=L.createContext();function J(n){return typeof n=="function"}function Q(n){return typeof n=="object"&&!x(n)&&!j1(n)}function x(n){return Array.isArray(n)}function j1(n){return n===null}function D1({context:n={},Implementation:e,spec:s=!1,props:c={},ref:l}){if(!s)return o.jsx(e,{...c,ref:l});let a={},r=J(s)?s(n):n[s];if(x(r)&&(e=r[0],r=r[1]),J(r)){const i=r(c,l,n);if(L.isValidElement(i))return i;Q(i)&&Object.assign(a,c,i)}else Q(r)?Object.assign(a,r,c):Object.assign(a,c);return o.jsx(e,{...a,ref:l})}const R=n=>({Context:D,Provider:({children:e,...s})=>o.jsx(D.Provider,{value:{...n,...s},children:e}),Consumer:e=>s=>o.jsx(D.Consumer,{children:c=>o.jsx(e,{...c,...s,context:c})}),Component:(e,s=e.displayName||e.name)=>L.forwardRef((c,l)=>o.jsx(D.Consumer,{children:a=>o.jsx(D1,{Implementation:e,context:a,spec:s,props:c,ref:l})}))}),n1=R(),C=n1.Component,E={angle:{spath:"M448,320L256,128L64,320"},angles:{path:"M448,256L256,64L64,256M448,448L256,256L64,448"},"angle-left":"M313,41C326,29 346,29 359,41C371,54 371,74 359,87C359,87 189,256 189,256L359,425C371,438 371,458 359,471C346,483 326,483 313,471L121,279C109,266 109,246 121,233L313,41Z","angle-right":"M199,471C186,483 166,483 153,471C141,458 141,438 153,425C153,425 323,256 323,256L153,87C141,74 141,54 153,41C166,29 186,29 199,41L391,233C403,246 403,266 391,279L199,471Z","angle-up":"M471,313C483,326 483,346 471,359C458,371 438,371 425,359C425,359 256,189 256,189L87,359C74,371 54,371 41,359C29,346 29,326 41,313L233,121C246,109 266,109 279,121L471,313Z","angle-down":"M41,199C29,186 29,166 41,153C54,141 74,141 87,153C87,153 256,323 256,323L425,153C438,141 458,141 471,153C483,166 483,186 471,199L279,391C266,403 246,403 233,391L41,199Z",at:"M256 64C150 64 64 150 64 256s86 192 192 192c18 0 32 14 32 32s-14 32-32 32C115 512 0 397 0 256S115 0 256 0S512 115 512 256v32c0 53-43 96-96 96c-29 0-56-13-73-34C320 371 290 384 256 384c-71 0-128-57-128-128s57-128 128-128c28 0 54 9 75 24c6-5 13-8 21-8c18 0 32 14 32 32v80 32c0 18 14 32 32 32s32-14 32-32V256c0-106-86-192-192-192zm64 192a64 64 0 1 0 -128 0 64 64 0 1 0 128 0z",bars:"M0 96C0 78 14 64 32 64H416c18 0 32 14 32 32s-14 32-32 32H32C14 128 0 114 0 96zM0 256c0-18 14-32 32-32H416c18 0 32 14 32 32s-14 32-32 32H32c-18 0-32-14-32-32zM448 416c0 18-14 32-32 32H32c-18 0-32-14-32-32s14-32 32-32H416c18 0 32 14 32 32z",check:"M486,91C499,104 499,127 486,140L212,422C198,435 177,435 163,422L26,281C13,267 13,245 26,231C39,217 61,217 75,231L187,347L438,91C451,77 473,77 486,91L486,91Z",checked:"M507.083,32L507.083,480C507.083,494.958 494.958,507.083 480,507.083L32,507.083C17.042,507.083 4.917,494.958 4.917,480L4.917,32C4.917,17.042 17.042,4.917 32,4.917L480,4.917C494.958,4.917 507.083,17.042 507.083,32ZM452.917,59.083L59.083,59.083L59.083,452.917L452.917,452.917L452.917,59.083ZM88.43,298.82C75.421,285.811 75.421,264.689 88.43,251.68C101.439,238.671 122.561,238.671 135.57,251.68L202,318.11L376.43,143.68C389.439,130.671 410.561,130.671 423.57,143.68C436.579,156.689 436.579,177.811 423.57,190.82L225.57,388.82C212.553,401.838 191.447,401.838 178.43,388.82L88.43,298.82Z",clipboard:"M280 64h40c35 0 64 29 64 64V448c0 35-29 64-64 64H64c-35 0-64-29-64-64V128C0 93 29 64 64 64h40 10C121 28 153 0 192 0s71 28 78 64H280zM64 112c-9 0-16 7-16 16V448c0 9 7 16 16 16H320c9 0 16-7 16-16V128c0-9-7-16-16-16H304v24c0 13-11 24-24 24H192 104c-13 0-24-11-24-24V112H64zm128-8a24 24 0 1 0 0-48 24 24 0 1 0 0 48z",github:"M256,0C115,0 0,115 0,256C0,369 73,465 175,499C188,501 193,493 193,487C193,481 192,460 192,439C128,451 111,423 106,409C103,402 91,379 80,373C71,368 58,356 80,356C100,356 114,374 119,382C142,421 179,410 194,403C196,387 203,375 210,369C153,363 93,340 93,243C93,215 103,192 120,174C117,167 108,141 122,106C122,106 144,99 193,132C213,126 235,124 257,124C278,124 300,126 321,132C370,99 391,106 391,106C405,141 396,167 394,174C410,192 420,214 420,243C420,341 360,363 303,369C312,377 320,392 320,416C320,451 320,478 320,487C320,493 325,501 338,499C439,465 512,369 512,256C512,115 397,0 256,0Z",clock:"M464 256A208 208 0 1 1 48 256a208 208 0 1 1 416 0zM0 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zM232 120V256c0 8 4 16 11 20l96 64c11 7 26 4 33-7s4-26-7-33L280 243V120c0-13-11-24-24-24s-24 11-24 24z",cross:"M456,109C470,94 470,71 456,56C441,42 418,42 403,56L256,204L109,56C94,42 71,42 56,56C42,71 42,94 56,109L204,256L56,403C42,418 42,441 56,456C71,470 94,470 109,456L256,308L403,456C418,470 441,470 456,456C470,441 470,418 456,403L308,256L456,109Z",redo:"M464 224H472c13 0 24-11 24-24V72c0-10-6-19-15-22s-19-2-26 5L413 97c-88-87-229-86-316 1c-88 88-88 229 0 317s229 88 317 0c13-13 13-33 0-45s-33-13-45 0c-63 63-164 63-226 0s-63-164 0-226c62-62 163-63 225-1L327 183c-7 7-9 17-5 26s13 15 22 15H464z",trash:"M173,33L166,46L76,46C59,46 46,59 46,76C46,93 59,106 76,106L436,106C453,106 466,93 466,76C466,59 453,46 436,46L346,46L339,33C334,22 324,16 312,16L200,16C188,16 178,22 173,33ZM436,136L76,136L96,454C97,478 117,496 141,496L371,496C395,496 415,478 416,454L436,136Z","circle-check":"M256,0C397,0 512,115 512,256C512,397 397,512 256,512C115,512 0,397 0,256C0,115 115,0 256,0ZM89,295L169,375C182,387 202,387 215,375L407,183C419,170 419,150 407,137C394,125 374,125 361,137L192,307C192,307 135,249 135,249C122,237 102,237 89,249C77,262 77,282 89,295Z","circle-exclamation":"M256,0C397,0 512,115 512,256C512,397 397,512 256,512C115,512 0,397 0,256C0,115 115,0 256,0ZM256,377C234,377 217,394 217,416C217,438 234,455 256,455C278,455 295,438 295,416C295,394 278,377 256,377ZM224,96L224,310C224,328 238,342 256,342C274,342 288,328 288,310L288,96C288,78 274,64 256,64C238,64 224,78 224,96Z","circle-info":"M256,0C397,0 512,115 512,256C512,397 397,512 256,512C115,512 0,397 0,256C0,115 115,0 256,0ZM256,134C277,134 294,117 294,96C294,75 277,58 256,58C235,58 218,75 218,96C218,117 235,134 256,134ZM224,234L224,384L182,384C164,384 150,398 150,416C150,434 164,448 182,448L330,448C348,448 362,434 362,416C362,398 348,384 330,384L288,384L288,202C288,184 274,170 256,170L212,170C194,170 180,184 180,202C180,220 194,234 212,234L224,234Z","circle-todo":"M256,0C397,0 512,115 512,256C512,397 397,512 256,512C115,512 0,397 0,256C0,115 115,0 256,0ZM227,80L227,256C227,265 231,274 239,280L351,360C364,369 382,366 392,353C401,340 398,322 385,312L285,241L285,80C285,64 272,51 256,51C240,51 227,64 227,80Z","circle-cross":"M256,0C397,0 512,115 512,256C512,397 397,512 256,512C115,512 0,397 0,256C0,115 115,0 256,0ZM211,256L121,345C109,358 109,378 121,391C134,403 154,403 167,391L256,301L345,391C358,403 378,403 391,391C403,378 403,358 391,345L301,256L391,167C403,154 403,134 391,121C378,109 358,109 345,121L256,211L167,121C154,109 134,109 121,121C109,134 109,154 121,167L211,256Z"};function e1(n,e){E[n]=e}function T1(n){Object.entries(n).forEach(([e,s])=>e1(e,s))}function T(n){return typeof n=="string"}function S1(n){return Number.isInteger(n)}function F1(n){return Array.isArray(n)}function W1(n){return typeof n=="function"}function E1(n){return typeof n=="object"&&!F1(n)&&!o1(n)}function s1(n){return n===void 0}function o1(n){return n===null}function t1(n){return!(s1(n)||o1(n))}function V1(n){return!t1(n)}function S(...n){throw new Error(n.join(""))}function z1(){return Intl.DateTimeFormat().resolvedOptions().locale}z1();const V=512,c1=V,k1=({name:n,iconData:e=E,...s})=>n?o.jsx(l1,{...s,...O1(n,e)}):o.jsx(l1,{...s}),O1=(n,e)=>{const s=e[n]||S(`Invalid icon name: ${n}`);return T(s)?{path:s,width:V,height:c1}:s},l1=({path:n,onClick:e,width:s=V,height:c=c1,style:l,className:a="",fill:r="currentColor"})=>o.jsx("svg",{"aria-hidden":"true",focusable:"false",className:`${a} icon`,style:l,role:"img",xmlns:"http://www.w3.org/2000/svg",viewBox:`0 0 ${s} ${c}`,onClick:e,children:o.jsx("path",{d:n,fill:r})}),d=C(k1,"Icon"),a1=C(({icon:n,iconClass:e,iconLeft:s,iconLeftClass:c="on-left",iconRight:l,iconRightClass:a="on-right",text:r,children:i})=>o.jsxs(o.Fragment,{children:[!!n&&o.jsx(d,{name:n,className:e,fixedWidth:!0}),!!s&&o.jsx(d,{name:s,className:c,fixedWidth:!0}),r||i,!!l&&o.jsx(d,{name:l,className:a,fixedWidth:!0})]}),"WithIcons"),r1=C(({dismissable:n,dismiss:e,revealable:s,isRevealed:c,openIcon:l="angle-down",closedIcon:a="angle-left",dismissIcon:r="circle-cross"})=>o.jsxs("div",{children:[!!n&&o.jsx(d,{name:r,fixedWidth:!0,className:"dismiss",onClick:()=>e(!0)}),!!s&&o.jsx(d,{name:c?l:a,fixedWidth:!0,className:"reveal"})]}),"AlertControls"),P1=C(({headline:n,headIcon:e,toggle:s,revealable:c=!1,controlProps:l,Controls:a=r1})=>o.jsxs("div",{className:"headline flex space",onClick:c?s:null,children:[o.jsxs("div",{children:[!!e&&o.jsx(d,{name:e,fixedWidth:!0,className:"mar-r-2"}),n]}),o.jsx(a,{...l})]}),"AlertHeadline"),i1=C(({title:n,text:e,children:s})=>o.jsxs(o.Fragment,{children:[n&&o.jsx("h3",{children:n}),e?o.jsx("p",{children:e}):s]}),"AlertContent"),_1=C(({icon:n,Content:e=i1,...s})=>o.jsxs("div",{className:"side-icon",children:[o.jsx(d,{name:n}),o.jsx("div",{className:"wide",children:o.jsx(e,{...s})})]}),"AlertIcon");function F(n){return n.split(/\s*[;&]\s*/).filter(e=>e.length>0).reduce((e,s)=>{const[c,l]=s.split(/\s*[:=]\s*/);return e[c]=s1(l)?!0:l,e},{})}const z=(n,...e)=>W1(n)?n(...e):n,k=n=>n.filter(t1).join(" "),C1=n=>Object.entries(n).filter(([,e])=>e).map(([e])=>e),O=(...n)=>k(n.flatMap(e=>E1(e)?C1(e):e)),P=n=>G(n,"border",e=>`border bdw-${e}`),_=n=>G(n,"shadow-1",e=>`shadow-${e}`),U=n=>d1(n,e=>`bdr-${e}`),d1=(n,e)=>S1(parseInt(n))?z(e,n):null,G=(n,e,s)=>n===!0?e:parseInt(n)?z(s,n):null,H="-",f1=512,h1=512,u1={x:0,y:0,size:16,flipX:!1,flipY:!1,rotate:0},M={flip:(n,e)=>{e.match(/^y$/i)?n.flipY=!n.flipY:n.flipX=!n.flipX},flipx:n=>n.flipX=!n.flipX,flipy:n=>n.flipY=!n.flipY,grow:(n,e)=>n.size+=parseInt(e),shrink:(n,e)=>n.size-=parseInt(e),left:(n,e)=>n.x-=parseInt(e),right:(n,e)=>n.x+=parseInt(e),up:(n,e)=>n.y-=parseInt(e),down:(n,e)=>n.y+=parseInt(e),rotate:(n,e)=>n.rotate+=parseInt(e)};M.flop=M.flipy,M["flip-x"]=M.flipx,M["flip-y"]=M.flipy;function L1(n,e={...u1}){const s=T(n)?F(n):n||{};return Object.entries(s).reduce((c,[l,a])=>{const r=l.toLowerCase();return(M[r]||S(`Invalid transform: ${r}`))(c,a),c},e)}const M1={width:f1,height:h1},I1=n=>{const[e,s=""]=n.split("?"),[c,...l]=e.split("."),a=c.split(H).filter(i=>i.length),r=F(s);return{dashes:a,classes:l,style:r}},y1=(n,e)=>{const s=I1(n),{dashes:c}=s;for(let l=c.length;l>0;l--){const a=c.slice(0,l).join(H);if(e[a]){s.name=c.splice(0,l).join(H);break}}return s},U1=(n,e)=>{const s=y1(n,e),{name:c,classes:l,style:a}=s;V1(c)&&S(`Invalid icon name: ${n} (no icon defined matching any subset of ${s.dashes.join(H)})`);const r=e[c]||S(`Icon not found in data: ${c}`),i=s.icon=T(r)?{...M1,path:r}:{...M1,...r};return l.length&&(i.className=k(l)),i.transform&&(i.transform=L1(i.transform)),i.style&&(i.style=T(i.style)?F(i.style):{...i.style}),Object.keys(a).length&&(i.style=Object.assign(i.style||{},a)),s},f=({title:n,headline:e,headIcon:s,type:c,size:l,color:a,stripe:r,border:i,radius:I,shadow:h,className:v,text:$,children:w,onDismiss:y,icon:g,dismissable:p=!1,revealable:u=!1,revealed:N=!1,openIcon:b,closedIcon:m,dismissIcon:W,Headline:Z=P1,Controls:B=r1,Content:A=i1,Icon:Y=_1})=>{const[j,q]=L.useState(u?N:!0),[K,q1]=L.useState(!1),K1=O("alert",c,l,a,v,{revealable:u,dismissable:p,stripe:r},j?"revealed":null,_(h),P(i),U(I)),J1=()=>q(n2=>!n2),Q1={dismissable:p,revealable:u,isRevealed:j,dismiss:()=>{q1(!0),y&&y()},openIcon:b,closedIcon:m,dismissIcon:W},B1={title:n,text:$,children:w},x1={...B1,icon:g,Content:A},R1={headline:e,headIcon:s,toggle:J1,revealable:u,controlProps:Q1,Controls:B};return K?null:o.jsxs("div",{className:K1,children:[!!e&&o.jsx(Z,{...R1}),j&&(g?o.jsx(Y,{...x1}):o.jsx(A,{...B1}))]})},g1=C(n=>o.jsx(f,{...n,type:"info"}),"Info"),p1=C(n=>o.jsx(f,{...n,type:"success"}),"Success"),b1=C(n=>o.jsx(f,{...n,type:"warning"}),"Warning"),A1=C(n=>o.jsx(f,{...n,type:"error"}),"Error");f.Info=g1,f.Success=p1,f.Warning=b1,f.Error=A1;const G1=C(f,"Alert"),H1=C(({type:n="button",size:e,color:s,className:c,disabled:l,bright:a,dark:r,outline:i,bare:I,shaded:h,shadow:v,border:$,radius:w,label:y,tooltip:g,tabIndex:p=0,icon:u,iconClass:N,iconLeft:b,iconLeftClass:m,iconRight:W,iconRightClass:Z,text:B,children:A,Content:Y=a1,...j})=>{const q=O(e,s,c,{bright:a,dark:r,outline:i,bare:I,shaded:h,icon:u},_(v),P($),U(w)),K={icon:u,iconClass:N,iconLeft:b,iconLeftClass:m,iconRight:W,iconRightClass:Z,text:B,children:A};return o.jsx("button",{className:q,"aria-label":y,tabIndex:p,type:n,disabled:l,"aria-disabled":l,"data-tooltip":g,...j,children:o.jsx(Y,{...K})})},"Button"),v1=C(({buttons:n,children:e,className:s="buttons",buttonClass:c,Button:l=H1,...a})=>o.jsx("div",{className:s,children:n?n.map((r,i)=>o.jsx(l,{className:c,...a,...r},i)):e}),"Buttons"),X=({visible:n=!1}={})=>{const[e,s]=L.useState(n);return{isVisible:e,setVisible:s,show:()=>s(!0),hide:()=>s(!1)}},X1=C(({initiallyRevealed:n=!1,open:e=n,confirmIcon:s="check",confirmText:c="Confirm",confirmColor:l="red",confirmClass:a,cancelIcon:r="cross",cancelText:i="Cancel",cancelColor:I="grey",cancelClass:h,confirm:v={iconRight:s,text:c,color:l,className:a},cancel:$={iconLeft:r,text:i,color:I,className:h},buttonsClass:w,className:y=w,buttonClass:g,onClick:p=()=>window.alert("No confirm action defined"),...u})=>{const{isVisible:N,hide:b,show:m}=X({visible:e}),Z={iconRight:s,text:c,color:l,className:a,...v,onClick:A=>{A.preventDefault(),b(),p()}},B={iconLeft:r,text:i,color:I,className:h,outline:!0,...$,onClick:b};return o.jsx(v1,{className:y,buttonClass:g,buttons:N?[B,Z]:[{...u,onClick:m}]})},"Confirm"),$1=C(({close:n,icon:e="cross",className:s="close"})=>o.jsx("div",{className:s,onClick:n,children:o.jsx(d,{name:e})}),"ModalClose"),w1=C(({title:n,header:e})=>n||e?o.jsxs("header",{children:[!!n&&o.jsx("h3",{children:n}),e]}):null,"ModalHeader"),N1=C(({footer:n})=>!!n&&o.jsx("footer",{children:n}),"ModalFooter"),m1=C(({text:n,children:e,Header:s=w1,Footer:c=N1,...l})=>o.jsxs("article",{children:[o.jsx(s,{...l}),n||e,o.jsx(c,{...l})]}),"ModalContent"),Z1=C(({ref:n,open:e,close:s,className:c,closeClass:l="close",closeIcon:a="cross",Close:r=$1,Content:i=m1,...I})=>(n||(n=L.useRef(null)),L.useEffect(()=>{const{current:h}=n;e?h.showModal():h.close()},[e]),o.jsxs("dialog",{ref:n,className:c,children:[!!s&&o.jsx(r,{close:s,icon:a,className:l}),o.jsx(i,{...I})]})),"Modal"),Y1=({open:n=!1}={})=>{const{isVisible:e,show:s,hide:c}=X({visible:n});return{show:s,hide:c,Modal:l=>o.jsx(Z1,{open:e,...l})}};t.Alert=G1,t.Button=H1,t.Buttons=v1,t.Confirm=X1,t.DASH=H,t.DEFAULT_ICON_HEIGHT=h1,t.DEFAULT_ICON_WIDTH=f1,t.Error=A1,t.Icon=d,t.IconData=E,t.Info=g1,t.Modal=Z1,t.ModalClose=$1,t.ModalContent=m1,t.ModalFooter=N1,t.ModalHeader=w1,t.ModalState=Y1,t.Success=p1,t.Theme=n1,t.Themed=C,t.Themer=R,t.VisibleState=X,t.Warning=b1,t.WithIcons=a1,t.addIcon=e1,t.addIcons=T1,t.borderClass=P,t.classInt=d1,t.classTrueInt=G,t.classes=O,t.joinClasses=k,t.maybeFunction=z,t.nullTransform=u1,t.parseAttrs=F,t.radiusClass=U,t.resolveIconData=U1,t.resolveIconName=y1,t.setKeys=C1,t.shadowClass=_,t.splitIconName=I1,t.transformData=L1,t.transformFunctions=M,Object.defineProperty(t,Symbol.toStringTag,{value:"Module"})});
//# sourceMappingURL=badger-react-ui.umd.cjs.map