UNPKG

nes-ui-react

Version:

A design system that paints the web in 8 bits.

5 lines (3 loc) 13.8 kB
import { createElement, Fragment as ReactFragment } from 'react'; var g=(e,t,r,n=!1)=>{let s=!1;new MutationObserver(i=>{for(let a of i)if(a.type==="attributes"&&a.attributeName==="class"){let c=a.target.classList.contains(t);s!==c&&(s=c,r(c))}}).observe(e,{attributes:!0}),n&&r(e.classList.contains(t))};var d="nes-ui-dark-mode",Ae=()=>typeof document<"u"&&document.documentElement.classList.contains(d),v=e=>{document.documentElement.classList.toggle(d,e);try{localStorage.setItem(d,e?"true":"false")}catch{}},I=()=>{let e=!!window.matchMedia("(prefers-color-scheme: dark)"),t=!1;try{t=localStorage.getItem(d)!==null}catch{}let r=!1;return t?r=localStorage.getItem(d)==="true":r=e,r},S=(e,t=!0)=>{g(document.documentElement,d,e,t)};var m=(e,...t)=>{let r={...e};return t.forEach(n=>{delete r[n]}),r};import{jsx as K}from"react/jsx-runtime";var W=["transparent","dense"],we=e=>K("a",{...m(e,...W),className:`nes-ui-anchor ${e.className?e.className:""}${e.transparent?" nes-ui-is-transparent":""}${e.dense?" nes-ui-is-dense":""}`,style:{...e.style,visibility:e.name?"hidden":e.style?.visibility||"inherit"},children:e.children});var x=(o=>(o.primary="#209cee",o.success="#92cc41",o.warning="#f7d51d",o.error="#e76e55",o.disabled="#888",o.black="#000",o.dark="#212529",o.white="#fff",o.color00="#59595f",o.color01="#00008f",o.color02="#18008f",o.color03="#3f0077",o.color04="#550055",o.color05="#550011",o.color06="#550000",o.color07="#442200",o.color08="#333300",o.color09="#113300",o.color0A="#003311",o.color0B="#004444",o.color0C="#004466",o.color0D="#000000",o.color0E="#080808",o.color0F="#080808",o.color10="#aaaaaa",o.color11="#0044dd",o.color12="#5511ee",o.color13="#7700ee",o.color14="#9900bb",o.color15="#aa0055",o.color16="#993300",o.color17="#884400",o.color18="#666600",o.color19="#336600",o.color1A="#006600",o.color1B="#006655",o.color1C="#005588",o.color1D="#080808",o.color1E="#080808",o.color1F="#080808",o.color20="#eeeeee",o.color21="#4488ff",o.color22="#7777ff",o.color23="#9944ff",o.color24="#bb44ee",o.color25="#cc5599",o.color26="#dd6644",o.color27="#cc8800",o.color28="#bbaa00",o.color29="#77bb00",o.color2A="#22bb22",o.color2B="#22bb77",o.color2C="#22bbcc",o.color2D="#444444",o.color2E="#080808",o.color2F="#080808",o.color30="#eeeeee",o.color31="#99ccff",o.color32="#aaaaff",o.color33="#bb99ff",o.color34="#dd99ff",o.color35="#ee99dd",o.color36="#eeaaaa",o.color37="#eebb99",o.color38="#eedd88",o.color39="#bbdd88",o.color3A="#99dd99",o.color3B="#99ddbb",o.color3C="#99ddee",o.color3D="#aaaaaa",o.color3E="#080808",o.color3F="#080808",o))(x||{}),Ke=Object.keys(x).sort(),p=e=>e.startsWith("#")?e:x[e];import{jsx as u,jsxs as O}from"react/jsx-runtime";var qe=e=>u("span",{id:e.id,className:`nes-ui-badge ${e.className||""}`,style:{...e.style,backgroundColor:e.backgroundColor?p(e.backgroundColor):"inherit"},children:u("span",{className:`nes-ui-is-${e.backgroundColor}`,style:{color:e.color},children:e.text})}),_e=(e={backgroundColorLeft:"black",backgroundColor:"success",textLeft:"left",text:"right"})=>O("span",{id:e.id,className:`nes-ui-badge nes-ui-is-split ${e.className||""}`,style:e.style,children:[u("span",{className:`nes-ui-is-${e.backgroundColorLeft||"dark"}`,style:{color:e.colorLeft||"#fff"},children:e.textLeft}),u("span",{className:`nes-ui-is-${e.backgroundColor}`,style:{color:e.color||"#000"},children:e.text})]});import{jsx as U}from"react/jsx-runtime";var Je=({id:e,style:t,children:r,className:n,shadow:s,backgroundColor:l})=>U("p",{id:e,style:{...t,backgroundColor:l||""},className:`nes-ui-block-text ${s&&"nes-ui-is-shadow"} ${n||""}`,children:r});import{useCallback as V}from"react";import{jsx as N,jsxs as q}from"react/jsx-runtime";var f=e=>{let t=V(r=>{e.onChange&&e.onChange(r.target.checked,r)},[e.onChange]);return q("label",{className:`nes-ui-is-${e.type}`,children:[N("input",{id:e.id,type:e.type,className:`nes-ui-${e.type} ${e.disabled?"nes-ui-is-disabled":""} ${e.className?e.className:""}`,disabled:e.disabled,name:e.name,style:e.style,value:e.value,checked:!!e.checked,onChange:e.disabled?()=>{}:t}),N("span",{children:e.label})]})};import{jsx as Y}from"react/jsx-runtime";var _=(e,t)=>{if(t)return t;switch(e){case"small":return"2em";case"medium":return"4em";case"large":return"8em";default:return"0.5em"}},b=({height:e,size:t,style:r,id:n})=>Y("div",{id:n,style:{...r,height:_(t||"small",e)}});import{jsx as $}from"react/jsx-runtime";var G=["fontColor","borderInverted","size","color","isIconButton"],k=e=>$("div",{style:e.style,className:`${e.isIconButton?"nes-ui-icon-button-wrapper":"nes-ui-button-wrapper"} ${e.borderInverted?"nes-ui-border-inverted":""} ${e.className?e.className:""}`,children:$("button",{style:{color:p(e.fontColor||e.style?.color||"inherit")},...m(e,...G,"style"),className:`${e.isIconButton?"nes-ui-icon-btn":"nes-ui-btn"} nes-ui-btn-${e.color||"normal"} nes-ui-is-size-${e.size||"medium"} ${e.disabled&&"nes-ui-btn-disabled"}`,onClick:e.disabled?()=>{}:e.onClick,children:e.children})});import{jsx as J}from"react/jsx-runtime";var mo=e=>J(f,{...e,type:"checkbox"});import{jsx as Q}from"react/jsx-runtime";var fo=({children:e,style:t,type:r,className:n,id:s})=>Q("div",{id:s,className:`nes-ui-col-${r} ${n||""}`,style:t,children:e});import{jsx as j,jsxs as ee}from"react/jsx-runtime";var X={marginLeft:"auto",marginRight:"auto"},Z={marginLeft:"auto",marginRight:0},bo=({id:e,title:t,children:r,style:n,roundedCorners:s,align:l,alignTitle:i,className:a})=>ee("section",{id:e,className:`nes-ui-container ${t?"nes-ui-with-title":""} ${s?"nes-ui-is-rounded":""} ${l?"nes-ui-is-"+l:""} ${a||""}`,style:n,children:[t&&j("h3",{className:"nes-ui-title",style:{...n,...i==="center"?X:i==="right"?Z:{}},children:t}),r]});import{jsx as oe}from"react/jsx-runtime";var go=({id:e,style:t,className:r,children:n})=>oe("footer",{id:e,className:`nes-ui-footer ${r||""}`,style:t,children:n});import{jsx as te}from"react/jsx-runtime";var So=({id:e,style:t,className:r,children:n})=>te("header",{id:e,className:`nes-ui-header ${r||""}`,style:t,children:n});import{jsx as re}from"react/jsx-runtime";var B=({id:e,children:t,style:r,color:n,size:s,className:l,centered:i,heading:a})=>re("p",{id:e,className:`nes-ui-text nes-ui-is-${a?"":"disabled"} nes-ui-is-${a?"heading-":""} nes-ui-is-${s||"medium"} ${l||""}`,style:{...r,textAlign:i?"center":"left",color:n||"inherit"},children:t});import{Fragment as ne,jsx as y,jsxs as se}from"react/jsx-runtime";var Lo=({id:e,children:t,style:r,color:n,size:s,centered:l,topSpacing:i,bottomSpacing:a,dense:c,className:z})=>se(ne,{children:[(typeof i>"u"||i)&&!c&&y(b,{size:"small"}),y(B,{id:e,style:{...r,paddingBottom:"0.5em",marginBottom:c?"0":"inherit",paddingTop:"0.5em",textDecoration:s==="xlarge"?"underline":"none",display:"block"},centered:l,color:n,className:z,size:s||"small",heading:!0,children:t||""}),(typeof a>"u"||a)&&!c&&y(b,{size:"small"})]});import{jsx as le}from"react/jsx-runtime";var Ao=({id:e,style:t,children:r,className:n,variant:s})=>le("div",{id:e,className:`nes-ui-hero-${s||"dash"} ${n||""}`,style:t,children:r});import{jsx as ie}from"react/jsx-runtime";var Ro=({id:e,style:t,height:r,color:n,className:s})=>ie("hr",{className:`nes-ui-hr ${s||""} nes-ui-is-${n||""}`,id:e,style:{...t,height:r}});import{jsx as ae}from"react/jsx-runtime";var Oo=e=>ae(k,{...e,isIconButton:!0,children:e.children});import{useState as ce,useEffect as de}from"react";import{jsx as T,jsxs as me}from"react/jsx-runtime";var M=e=>{let[t,r]=ce(e.value||""),n=s=>{r(s.target.value),e.onChange&&e.onChange(s.target.value,s)};return de(()=>{r(e.value||"")},[e.value]),me("div",{className:"nes-ui-field",children:[T("label",{htmlFor:e.name,children:e.label}),T("input",{id:e.id,autoComplete:e.autoComplete,type:e.type,className:`nes-ui-input ${e.disabled?"nes-ui-is-disabled":""} ${e.color?"nes-ui-is-"+e.color:"nes-ui-is-none"} ${e.className||""}`,disabled:e.disabled,name:e.name,style:e.style,value:t,onKeyUp:e.disabled?()=>{}:e.onKeyUp,onChange:e.disabled?()=>{}:n})]})};import{jsx as pe}from"react/jsx-runtime";var Qo=({...e})=>pe(M,{...e});import{jsx as C}from"react/jsx-runtime";var jo=({id:e,style:t,children:r,styleType:n,size:s})=>C("div",{className:"nes-ui-lists",children:C("ul",{id:e,className:`nes-ui-list nes-ui-is-${s||"medium"} nes-ui-is-${n||"disc"}`,style:t,children:r})});import{Fragment as ue,jsx as L,jsxs as fe}from"react/jsx-runtime";var tt=({id:e,children:t,style:r,className:n,open:s,modal:l,onClose:i})=>fe(ue,{children:[L("menu",{id:e,className:`nes-ui-menu ${n||""} ${l&&"nes-ui-is-modal"}`,style:{...r,display:s===!1?"none":"flex"},children:t}),l&&L("div",{className:"nes-ui-modal-backdrop",style:{...r,background:"transparent",display:s===!1?"none":"block"},onClick:i||(()=>{})})]});import{Fragment as F,jsx as P,jsxs as Pe}from"react/jsx-runtime";var st=({id:e,open:t,backdrop:r,children:n,style:s,className:l,onClose:i,backdropClose:a})=>Pe(F,{children:[P("dialog",{id:e,className:`nes-ui-modal nes-ui-is-rounded ${l||""}`,style:{...s,display:t?"block":"none"},children:n}),r!==!1&&P("div",{className:"nes-ui-modal-backdrop",style:{...s,display:t?"block":"none"},onClick:a!==!1&&i?i:()=>{}})]}),lt=({id:e,children:t,style:r,className:n})=>P(F,{children:P("div",{id:e,className:`nes-ui-modal-content ${n||""}`,style:r,children:t})});import{useEffect as E}from"react";import A from"react";import{jsx as D}from"react/jsx-runtime";var pt=e=>{let[t,r]=A.useState(e.inverted),[n,s]=A.useState(!1);return E(()=>{S(s)},[]),E(()=>{e.inverted?r(!0):typeof e.inverted>"u"?r(n):r(!1)},[e.inverted,n]),D("span",{id:e.id,className:`nes-ui-pixelicon nes-ui-is-size-${e.size||"medium"}`,children:D("span",{className:`${e.name} ${t?"nes-ui-is-inverted":""}`,style:e.style})})};import{jsx as xe}from"react/jsx-runtime";var Pt=({id:e,value:t,max:r,style:n,color:s})=>xe("progress",{id:e,className:`nes-ui-progress ${s&&"nes-ui-is-"+s}`,style:n,value:t,max:r});import{jsx as be}from"react/jsx-runtime";var gt=e=>be(f,{...e,type:"radio"});import{jsx as ye}from"react/jsx-runtime";var St=({id:e,children:t,style:r,className:n})=>ye("div",{id:e,className:`nes-ui-row ${n||""}`,style:r,children:t});import{useCallback as he,useEffect as ge,useState as ve}from"react";import{Fragment as Se,jsx as h,jsxs as Ne}from"react/jsx-runtime";var Ie=(e,t)=>t?e||[]:e||"",Tt=e=>{let[t,r]=ve(Ie(e.value,e.multiple||!1)),n=he(s=>{e.multiple?r([s.target.value]):r(s.target.value),typeof e.onChange=="function"&&e.onChange(s)},[e.multiple]);return ge(()=>{r(e.value)},[e.value,e.multiple]),Ne(Se,{children:[h("label",{htmlFor:e.id||e.htmlFor,children:e.label}),h("div",{className:`nes-ui-select ${e.multiple?"nes-ui-is-multiple":""} ${e.color?"nes-ui-is-"+e.color:"nes-ui-is-none"} ${e.className||""}`,children:h("select",{value:t,onChange:e.disabled?()=>{}:n,disabled:e.disabled,className:`${e.disabled?"nes-ui-is-disabled":""}`,multiple:e.multiple,required:e.required,id:e.id||e.htmlFor,children:e.children})})]})};import{jsx as $e}from"react/jsx-runtime";var Lt=({id:e,style:t,className:r,horizontal:n})=>$e("div",{id:e,className:`nes-ui-separator ${r||""} ${n&&"nes-ui-is-horizontal"}`,style:t});import{jsx as ke}from"react/jsx-runtime";var At=({id:e,style:t,className:r})=>ke("div",{id:e,className:`nes-ui-spacer ${r||""}`,style:t});import{jsx as H}from"react/jsx-runtime";var Rt=({id:e,style:t,children:r,tableStyle:n,bordered:s,centered:l,className:i})=>H("div",{className:`nes-ui-table-responsive ${i||""}`,style:t,children:H("table",{id:e,style:n,className:`nes-ui-table ${s&&"nes-ui-is-bordered"} ${l&&"nes-ui-is-centered"}`,children:r})});import{useEffect as Be,useState as Te}from"react";import{jsx as R,jsxs as Me}from"react/jsx-runtime";var Kt=e=>{let[t,r]=Te(e.value||""),n=s=>{r(s.target.value),e.onChange&&e.onChange(s.target.value,s)};return Be(()=>{r(e.value||"")},[e.value]),Me("div",{className:"nes-ui-field",children:[R("label",{htmlFor:e.name,children:e.label}),R("textarea",{id:e.id,cols:e.cols,rows:e.rows,className:`nes-ui-textarea ${e.disabled?"nes-ui-is-disabled":""} ${e.color?"nes-ui-is-"+e.color:"nes-ui-is-none"} ${e.className||""}`,disabled:e.disabled,name:e.name,style:e.style,value:t,onChange:e.disabled?()=>{}:n})]})};import{jsx as Ce}from"react/jsx-runtime";var qt="bubblePostion",_t=e=>Ce("button",{...m(e,"bubblePostion"),className:`nes-ui-toast nes-ui-from-${e.bubblePostion||"left"} ${e.onClick?"nes-ui-clickable":""} ${e.className?e.className:""}`,children:e.children});import{jsx as w}from"react/jsx-runtime";var Jt=({id:e,children:t,style:r,className:n,borderless:s,roundedCorners:l})=>w("div",{className:`nes-ui-toolbar-wrapper ${l===!1?"":"nes-ui-has-rounded-corners"}`,children:w("div",{id:e,className:`nes-ui-toolbar ${n||""} ${s?"nes-ui-is-borderless":""}`,style:r,children:t})});import{jsx as Le}from"react/jsx-runtime";var Zt=e=>{let{id:t,style:r,children:n,className:s,doubleSize:l,doubleRoundCorners:i}=e;return Le("div",{id:t,className:`nes-ui-pixel-border${l?"-2x":""}${i?"-2":""} ${s||""}`,style:r,children:n})};typeof document<"u"&&(document.documentElement.classList.toggle("nes-ui",!0),v(I()));export{we as A,W as ACustomProps,qe as Badge,_e as BadgeSplitted,Je as BlockText,f as BooleanField,b as Br,k as Button,mo as Checkbox,fo as Col,Ke as ColorPaletteNames,x as Colors,bo as Container,d as DARK_MODE_KEY,go as Footer,So as Header,Lo as Heading,Ao as Hero,Ro as Hr,Oo as IconButton,Qo as Input,jo as List,tt as Menu,st as Modal,lt as ModalContent,Zt as PixelBorder,pt as PixelIcon,Pt as Progress,gt as Radio,St as Row,Tt as Select,Lt as Separator,At as Spacer,Rt as Table,B as Text,Kt as TextArea,M as TextField,_t as Toast,qt as ToastCustomProps,Jt as Toolbar,p as getColorAsHexOrByName,Ae as isDarkModeActive,S as onDarkModeChange,I as rememberDarkModeUserSetting,v as setDarkModeActivation}; //# sourceMappingURL=index.js.map