@jengaui/core
Version:
Jenga UI Core component in React
263 lines (256 loc) • 13.5 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
var react = require('react');
var S = require('styled-components');
var tastycss = require('tastycss');
var jsxRuntime = require('react/jsx-runtime');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var S__default = /*#__PURE__*/_interopDefaultLegacy(S);
var M={inline:"block","inline-grid":"grid","inline-flex":"flex"},I={block:"inline-block",grid:"inline-grid",flex:"inline-flex"},C=S__default["default"].div(({css:t})=>t);function E(t,o){let{as:n,styles:i,breakpoints:c,block:g,mods:p,inline:h,isHidden:m,isDisabled:d,qa:x,qaVal:u,css:l,element:w,...f}=t,r={...i};g&&(r.display=typeof r.display=="string"?M[r.display||"inline"]:"block"),h&&(r.display=typeof r.display=="string"?I[r.display||"block"]:"inline-block");let y=react.useContext(tastycss.BreakpointsContext),k=tastycss.pointsToZones(c||y);return l=`${l??""}${tastycss.renderStyles(r,k)}`,p&&Object.assign(f,tastycss.modAttrs(p)),jsxRuntime.jsx(C,{as:n,"data-element":w,"data-qa":x,"data-qaval":u,...f,ref:o,hidden:m,disabled:d,css:l})}var Q=react.forwardRef(E);var G=tastycss.tasty({styled:{display:"block"}}),nt=react.forwardRef(function(o,n){let i=tastycss.extractStyles(o,tastycss.CONTAINER_STYLES);return jsxRuntime.jsx(G,{...tastycss.filterBaseProps(o,{eventProps:!0}),ref:n,styles:i})});var s={pink:"255, 100, 146","pink-02":"255, 131, 168",purple:"122, 119, 255","purple-text":"102, 93, 232","purple-01":"122, 119, 255","purple-02":"149, 146, 255","purple-03":"175, 173, 255","purple-04":"202, 201, 255",text:"91, 92, 125",dark:"20, 20, 70","dark-01":"20, 20, 70","dark-02":"67, 67, 107","dark-03":"114, 114, 144","dark-04":"161, 161, 181","dark-05":"213, 213, 226","grey-light":"248, 248, 249",light:"246, 246, 248",white:"255, 255, 255",black:"0, 0, 0","danger-text":"227, 0, 42",danger:"255, 55, 73","light-grey":"248, 248, 249",success:"49, 195, 124","success-text":"48, 166, 102",note:"251, 188, 5"};function e(t,o=1){return `rgba(${s[t]}, ${o})`}var a={"font-size":"14px","line-height":"20px","input-font-size":"14px","input-line-height":"20px","input-letter-spacing":"0.02em","disabled-opacity":".4",gap:"8px","outline-width":"calc(1rem / 16 * 3)","border-width":"1px",radius:"4px","leaf-sharp-radius":"0px",transition:"120ms","clear-color":"transparent","border-color":e("dark",.1),"shadow-color":e("dark-03",.1),"draft-color":e("dark",.2),"minor-color":e("dark",.65),"success-bg-color":"rgba(41, 190, 110, .1)","note-bg-color":e("note",.1),"note-text-color":e("note",1),"danger-bg-color":e("danger",.05),"danger-bg-hover-color":e("danger",.1),"primary-1":e("purple",.9),"primary-2":e("purple",.8),"primary-3":e("purple",.7),"primary-4":e("purple",.6),"primary-5":e("purple",.5),"primary-6":e("purple",.4),"primary-7":e("purple",.3),"primary-8":e("purple",.2),"primary-9":e("purple",.1),"primary-10":e("purple",0),"dark-75-color":e("dark",.75),"primary-color":e("purple"),"pink-8-color":e("pink",.2),"pink-9-color":e("pink",.1),"disabled-color":e("dark-01",.25),"disabled-text-color":e("dark-01",.25),"disabled-bg":e("dark-05",.2),"disabled-bg-color":e("dark-05",.2),"max-content-width":"1440px","topbar-height":"48px","devmodebar-height":"54px","sidebar-width":"200px","border-radius-base":"4px","text-font-size":"14px","text-line-height":"20px","text-letter-spacing":"0.02em","h1-font-size":"36px","h1-line-height":"44px","h1-letter-spacing":"-0.01em","h1-font-weight":"700","h2-font-size":"24px","h2-line-height":"36px","h2-letter-spacing":"0em","h2-font-weight":"700","h3-font-size":"20px","h3-line-height":"28px","h3-letter-spacing":"0em","h3-font-weight":"700","h4-font-size":"18px","h4-line-height":"24px","h4-letter-spacing":"0.01em","h4-font-weight":"700","h5-font-size":"16px","h5-line-height":"22px","h5-letter-spacing":"0.02em","h5-font-weight":"700","h5s-font-size":"16px","h5s-line-height":"22px","h5s-letter-spacing":"0.02em","h5s-font-weight":"600","h5m-font-size":"16px","h5m-line-height":"22px","h5m-letter-spacing":"0.02em","h5m-font-weight":"500","h6-font-size":"14px","h6-line-height":"20px","h6-letter-spacing":"0","h6-font-weight":"700","t1-font-size":"18px","t1-line-height":"24px","t1-letter-spacing":"0","t1-font-weight":"400","t2-font-size":"16px","t2-line-height":"22px","t2-letter-spacing":"0.01em","t2-font-weight":"400","t2m-font-size":"16px","t2m-line-height":"22px","t2m-letter-spacing":"0.005em","t2m-font-weight":"500","t3-font-size":"14px","t3-line-height":"20px","t3-letter-spacing":"0.02em","t3-font-weight":"400","t3m-font-size":"14px","t3m-line-height":"20px","t3m-letter-spacing":"0.015em","t3m-font-weight":"500","t3s-font-size":"14px","t3s-line-height":"20px","t3s-letter-spacing":"0.015em","t3s-font-weight":"600","t4-font-size":"12px","t4-line-height":"18px","t4-letter-spacing":"0.025em","t4-font-weight":"400","t4m-font-size":"12px","t4m-line-height":"18px","t4m-letter-spacing":"0.02em","t4m-font-weight":"500","p1-font-size":"18px","p1-line-height":"28px","p1-letter-spacing":"0","p1-font-weight":"400","p2-font-size":"16px","p2-line-height":"24px","p2-letter-spacing":"0.01em","p2-font-weight":"400","p3-font-size":"14px","p3-line-height":"22px","p3-letter-spacing":"0.02em","p3-font-weight":"400","p4-font-size":"12px","p4-line-height":"20px","p4-letter-spacing":"0.025em","p4-font-weight":"400","c1-font-size":"14px","c1-line-height":"20px","c1-letter-spacing":"0.015em","c1-font-weight":"500","c1-text-transform":"uppercase","c2-font-size":"12px","c2-line-height":"18px","c2-letter-spacing":"0.02em","c2-font-weight":"500","c2-text-transform":"uppercase","tag-font-size":"12px","tag-line-height":"12px","tag-letter-spacing":"0.02em","tag-font-weight":"500","strong-font-size":"inherit","strong-line-height":"inherit","strong-letter-spacing":"inherit","strong-font-family":"inherit","strong-font-style":"inherit","strong-font-weight":"var(--bold-font-weight, var(--default-bold-font-weight, 700))","em-font-size":"inherit","em-line-height":"inherit","em-letter-spacing":"inherit","em-font-family":"inherit","em-font-style":"italic","em-font-weight":"inherit","default-font-size":"var(--t3-font-size)","default-line-height":"var(--t3-line-height)","default-letter-spacing":"var(--t3-letter-spacing)","default-font-weight":"var(--t3-font-weight)","default-bold-font-weight":"700","scrollbar-width":"1.5x","scrollbar-outline-width":"1ow","scrollbar-radius":"1.5r","scrollbar-thumb-color":"rgba(var(--text-color-rgb), .5)","scrollbar-outline-color":"var(--clear-color)","scrollbar-bg-color":"var(--grey-light-color)","scrollbar-corner-color":"var(--clear-color)"};Object.keys(s).forEach(t=>{a[`${t}-color`]=e(t),a[`${t}-color-rgb`]=s[t];});var L={"background-color":"white !important","font-family":"var(--font)","-webkit-font-smoothing":"antialiased","-moz-osx-font-smoothing":"grayscale",margin:"0",padding:"0",color:"rgba(20, 20, 70, .75)","font-size":"14px","line-height":"20px","letter-spacing":"0.02em","font-weight":"400"},H=({publicUrl:t=""})=>`
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(${t}/fonts/Inter-Regular.woff2) format('woff2'),
url(${t}/fonts/Inter-Regular.woff) format('woff');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(${t}/fonts/Inter-Medium.woff2) format('woff2'),
url(${t}/fonts/Inter-Medium.woff) format('woff');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(${t}/fonts/Inter-SemiBold.woff2) format('woff2'),
url(${t}/fonts/Inter-SemiBold.woff) format('woff');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(${t}/fonts/Inter-Bold.woff2) format('woff2'),
url(${t}/fonts/Inter-Bold.woff) format('woff');
}
@font-face {
font-family: 'Source Code Pro';
src: url('${t}/fonts/SourceCodePro-Regular.woff2') format('woff2'),
url('${t}/fonts/SourceCodePro-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(${t}/fonts/JetBrainsMono-Regular.woff2) format('woff2'),
url(${t}/fonts/JetBrainsMono-Regular.woff) format('woff');
}
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(${t}/fonts/JetBrainsMono-Bold.woff2) format('woff2'),
url(${t}/fonts/JetBrainsMono-Bold.woff) format('woff');
}
`,_=S.createGlobalStyle`
body {
${({applyLegacyTokens:t})=>t?Object.entries(a).map(([o,n])=>`--${o}: ${n};`).join(`
`):""}
${({bodyStyles:t})=>Object.entries({...L,...t}).map(([o,n])=>`${o}: ${n};`).join(`
`)}
}
html {
--font: ${({font:t})=>t||"Inter"}, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
--monospace-font: ${({monospaceFont:t})=>`${t?`${t}, `:""}Menlo, Monaco, Consolas, 'Courier New', monospace;}`}
.jenga-notification-container {
min-width: 288px;
max-width: 340px;
width: calc(100vw - 32px);
position: fixed;
top: 32px;
right: 16px;
z-index: 999999;
}
.jenga-notifications {
display: grid;
grid-auto-flow: row;
grid-template-columns: 1fr;
}
.jenga-notification-enter {
opacity: 0;
max-height: 0px;
margin-bottom: 0px;
transform: translate(100%, 0);
}
.jenga-notification-enter-active {
opacity: 1;
max-height: 56px;
margin-bottom: 8px;
transform: translate(0, 0);
transition: all 300ms ease-in;
& > * {
margin-bottom: 0px;
}
}
.jenga-notification-exit {
opacity: 1;
margin-bottom: 8px;
max-height: 56px;
transform: translate(0, 0);
}
.jenga-notification-exit-active {
opacity: 0;
max-height: 0px;
margin-bottom: 0px;
transform: translate(100%, 0);
transition: all 300ms ease-in;
& > * {
margin-bottom: 0px;
}
}
b, strong {
font-weight: var(--bold-font-weight, 700);
}
[type=reset], [type=submit], button, html [type=button] {
-webkit-appearance: none;
}
code {
font-family: var(--monospace-font);
}
${({fonts:t,publicUrl:o})=>t===!1?"":H({publicUrl:o})}
// Prism Code
code[class*="language-"],
pre[class*="language-"] {
color: var(--dark-color);
background: none;
font-family: "Source Code Pro", Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
text-align: left;
font-weight: normal;
font-size: 14px;
line-height: 20px;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
border-radius: 4px;
border: none;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
text-shadow: none;
/*background: #b3d4fc;*/
}
pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
code[class*="language-"]::selection, code[class*="language-"] ::selection {
text-shadow: none;
/*background: #b3d4fc;*/
}
@media print {
code[class*="language-"],
pre[class*="language-"] {
text-shadow: none;
}
}
/* Code blocks */
pre[class*="language-"] {
overflow: auto;
}
:not(pre) > code[class*="language-"],
pre[class*="language-"] {
background: transparent;
}
/* Inline code */
:not(pre) > code[class*="language-"] {
border-radius: .3em;
white-space: normal;
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: var(--dark-04-color);
}
.token.keyword,
.token.tag,
.token.operator,
.token.punctuation {
color: #993388;
}
.namespace {
opacity: .7;
}
.token.property,
.token.boolean,
.token.constant,
.token.symbol,
.token.deleted {
color: var(--pink-color);
}
.token.entity,
.token.number {
color: #30A666;
}
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
color: var(--purple-text-color);
}
.token.url,
.language-css .token.string,
.style .token.string {
color: var(--dark-color);
}
.token.atrule,
.token.attr-value {
color: var(--dark-color);
}
.token.atrule,
.token.keyword {
font-weight: 500;
}
.token.function,
.token.class-name {
color: var(--pink-color);
}
.token.regex,
.token.important,
.token.variable {
color: var(--pink-color);
}
.token.important,
.token.bold {
font-weight: bold;
}
.token.italic {
font-style: italic;
}
.token.entity {
cursor: help;
}
`;var q={success:{fill:"#success-bg",color:"#success-text",border:"#success.40"},danger:{fill:"#danger-bg",color:"#danger-text",border:"#danger.40"},note:{fill:"#note-bg",color:"#note-text",border:"#note.40"},disabled:{fill:"#dark.10",color:"#dark.40",border:"#dark.20"}};
exports.Base = Q;
exports.Block = nt;
exports.GlobalStyles = _;
exports.THEMES = q;
exports.TOKENS = a;