@streamlinedfi/div 0.2.5 → 0.2.6

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.
Files changed (7) hide show
  1. package/dist/index.cjs +3 -3
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.mjs +2 -2
  4. package/dist/index.mjs.map +1 -1
  5. package/dist/metafile-cjs.json +1 -1
  6. package/dist/metafile-esm.json +1 -1
  7. package/package.json +1 -1
package/dist/index.cjs CHANGED
@@ -1,4 +1,4 @@
1
- "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }var _styledcomponents = require('styled-components'); var _styledcomponents2 = _interopRequireDefault(_styledcomponents);var{entries:D}=Object,p=e=>e.charAt(0).toUpperCase()+e.slice(1),P=(e="")=>_nullishCoalesce(_optionalChain([e, 'access', _2 => _2.match, 'call', _3 => _3(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g), 'optionalAccess', _4 => _4.map, 'call', _5 => _5(t=>t.toLowerCase()), 'optionalAccess', _6 => _6.join, 'call', _7 => _7("-")]), () => (""));function s(e,t){return/(px|%)$/.test(e)||typeof e=="string"||e===0?e:t.spacing(e)}function o(e){return typeof e=="number"?`${e}px`:e}function a(e,t,...i){let r;for(let l=0;l<i.length;l++){let m=i[l];if(t){let g=e[`$${t}$${m}`];if(g){r=g;break}}let u=e[`$${m}`];if(u){r=u;break}}return r}function d(e,t,...i){return!!a(e,t,...i)}var R={};function S(e,t){if(R[t])return R[t];let i={};return D(e).forEach(([r,l])=>{r.split("|").forEach(m=>{i[m]=l})}),R[t]=i,i}var w=null;function W(e){return w||(w=new RegExp(`^\\$(${e.Breakpoints.keys.join("|")})(\\$.*)`),w)}function z(e,t){if(e){if([100,200,300,400,500,600,700,800,900].includes(e))return`color: ${t[`fill${e}`]};`;if(typeof e=="string")return t[e]?`color: ${t[e]};`:`color: ${e};`}return""}var F=e=>typeof e=="number"?`${e}px`:e;var{fromEntries:O}=Object,I=O(["display","align","vAlign","alignItems","alignContent","alignSelf","justifyContent","justifySelf","flexDirection","flexBasis","flexWrap","pointerEvents","cursor","position","opacity","backgroundColor","backgroundImage","backgroundSize","backgroundPosition","backgroundRepeat","transform","transformOrigin","textDecoration","textWrap","animation","fontWeight","gap","gridTemplateColumns","gridTemplateRows","wordBreak","whiteSpace","textOverflow","overflow","overflowX","overflowY","textAlign","transitionDelay","filter","listStyle","objectFit","objectPosition","willChange","boxSizing"].map(e=>[e,1])),M={inline:"display: inline",block:"display: block",flex:`
1
+ "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }var _styledcomponents = require('styled-components');var{entries:D}=Object,p=e=>e.charAt(0).toUpperCase()+e.slice(1),P=(e="")=>_nullishCoalesce(_optionalChain([e, 'access', _2 => _2.match, 'call', _3 => _3(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g), 'optionalAccess', _4 => _4.map, 'call', _5 => _5(t=>t.toLowerCase()), 'optionalAccess', _6 => _6.join, 'call', _7 => _7("-")]), () => (""));function s(e,t){return/(px|%)$/.test(e)||typeof e=="string"||e===0?e:t.spacing(e)}function o(e){return typeof e=="number"?`${e}px`:e}function a(e,t,...i){let r;for(let l=0;l<i.length;l++){let m=i[l];if(t){let g=e[`$${t}$${m}`];if(g){r=g;break}}let u=e[`$${m}`];if(u){r=u;break}}return r}function d(e,t,...i){return!!a(e,t,...i)}var R={};function S(e,t){if(R[t])return R[t];let i={};return D(e).forEach(([r,l])=>{r.split("|").forEach(m=>{i[m]=l})}),R[t]=i,i}var w=null;function W(e){return w||(w=new RegExp(`^\\$(${e.Breakpoints.keys.join("|")})(\\$.*)`),w)}function z(e,t){if(e){if([100,200,300,400,500,600,700,800,900].includes(e))return`color: ${t[`fill${e}`]};`;if(typeof e=="string")return t[e]?`color: ${t[e]};`:`color: ${e};`}return""}var F=e=>typeof e=="number"?`${e}px`:e;var{fromEntries:O}=Object,I=O(["display","align","vAlign","alignItems","alignContent","alignSelf","justifyContent","justifySelf","flexDirection","flexBasis","flexWrap","pointerEvents","cursor","position","opacity","backgroundColor","backgroundImage","backgroundSize","backgroundPosition","backgroundRepeat","transform","transformOrigin","textDecoration","textWrap","animation","fontWeight","gap","gridTemplateColumns","gridTemplateRows","wordBreak","whiteSpace","textOverflow","overflow","overflowX","overflowY","textAlign","transitionDelay","filter","listStyle","objectFit","objectPosition","willChange","boxSizing"].map(e=>[e,1])),M={inline:"display: inline",block:"display: block",flex:`
2
2
  display: flex;
3
3
  width: 100%;
4
4
  `,autoFlex:`
@@ -44,7 +44,7 @@
44
44
  border-top-right-radius: ${o(i[1])};
45
45
  border-bottom-right-radius: ${o(i[2])};
46
46
  border-bottom-left-radius: ${o(i[3])};
47
- `:`border-radius: ${o(i)}`}},borderTopLeftRadius:{css:"border-top-left-radius",format:o},borderTopRightRadius:{css:"border-top-right-radius",format:o},borderBottomRightRadius:{css:"border-bottom-right-radius",format:o},borderBottomLeftRadius:{css:"border-bottom-left-radius",format:o},borderColor:{css:"border-color",withTheme:!0},borderImage:{css:"border-image",withTheme:!0},...[["border","border"],["borderTop","border-top"],["borderRight","border-right"],["borderBottom","border-bottom"],["borderLeft","border-left"]].reduce((e,[t,i])=>({...e,[t]:{css:(r,l,m)=>{let u=a(r,l,_optionalChain([m, 'optionalAccess', _8 => _8.length])?[t,...m].join("$"):t),g=typeof u=="function"?u(r.theme):u;return/^\d/.test(g)?`${i}: ${g}`:`${i}: 1px solid ${g}`}}}),{}),transition:(e,t)=>{let i=a(e,t,"transition");return typeof i=="string"?`transition: ${i}`:"transition: all .2s"},"boxShadow|shadow":{css:"box-shadow",withTheme:!0},textShadow:{css:"text-shadow",withTheme:!0},color:{css:"color",withTheme:!0},fill:{css:"fill",withTheme:!0},fontSize:{css:"font-size",format:o},outline:{css:"outline",withTheme:!0}};var{keys:G}=Object;function T(e,t,i="div"){let r="",l=S(t,i),m=W(e.theme),u=-1,g=G(e);for(;++u<g.length;){let x=g[u];if(/^\$/.test(x)){let b=e[x];if(b!==!1){let H=x.match(m)||[],[,$,X]=H,C=(X||x).slice(1).split("$"),k=C[0],c=C.slice(1),B=l[k]||I[k]&&P(k);if(B){let f=B,j=f.withTheme&&typeof b=="function"?b(e.theme):b,Y=f.format?f.format(j,e.theme):j,h="";typeof f=="string"?h=f:typeof f=="function"?h=f(e,$,c):typeof f.css=="function"?h=f.css(e,$,c):h=f.css;let n="",v=h.match(/:/g);v&&v.length>1?n=h:v===null?n=`${h}: ${Y};`:n=`${h.replace(/;$/,"")};`,c.includes("important")&&(n=n.replace(/;/g," !important;")),c.includes("hover")&&!c.includes("focus")&&(n=`&:hover,&:focus { ${n} }`),c.includes("hover")&&c.includes("focus")&&(n=`&:hover { ${n} }`),c.includes("focus")&&(n=`&:focus { ${n} }`),c.includes("active")&&(n=`&:active { ${n} }`),c.includes("last")&&(n=`&:last-child { ${n} }`),c.includes("odd")&&(n=`&:nth-child(odd) { ${n} }`),c.includes("even")&&(n=`&:nth-child(even) { ${n} }`),$&&(n=`${e.theme.Breakpoints.getCssMedia(e.theme.Breakpoints[p($)])} { ${n} }`),r+=n}}}}return r}var y=e=>T(e,M),Z=_styledcomponents2.default.div`
47
+ `:`border-radius: ${o(i)}`}},borderTopLeftRadius:{css:"border-top-left-radius",format:o},borderTopRightRadius:{css:"border-top-right-radius",format:o},borderBottomRightRadius:{css:"border-bottom-right-radius",format:o},borderBottomLeftRadius:{css:"border-bottom-left-radius",format:o},borderColor:{css:"border-color",withTheme:!0},borderImage:{css:"border-image",withTheme:!0},...[["border","border"],["borderTop","border-top"],["borderRight","border-right"],["borderBottom","border-bottom"],["borderLeft","border-left"]].reduce((e,[t,i])=>({...e,[t]:{css:(r,l,m)=>{let u=a(r,l,_optionalChain([m, 'optionalAccess', _8 => _8.length])?[t,...m].join("$"):t),g=typeof u=="function"?u(r.theme):u;return/^\d/.test(g)?`${i}: ${g}`:`${i}: 1px solid ${g}`}}}),{}),transition:(e,t)=>{let i=a(e,t,"transition");return typeof i=="string"?`transition: ${i}`:"transition: all .2s"},"boxShadow|shadow":{css:"box-shadow",withTheme:!0},textShadow:{css:"text-shadow",withTheme:!0},color:{css:"color",withTheme:!0},fill:{css:"fill",withTheme:!0},fontSize:{css:"font-size",format:o},outline:{css:"outline",withTheme:!0}};var{keys:G}=Object;function T(e,t,i="div"){let r="",l=S(t,i),m=W(e.theme),u=-1,g=G(e);for(;++u<g.length;){let x=g[u];if(/^\$/.test(x)){let b=e[x];if(b!==!1){let H=x.match(m)||[],[,$,X]=H,C=(X||x).slice(1).split("$"),k=C[0],c=C.slice(1),B=l[k]||I[k]&&P(k);if(B){let f=B,j=f.withTheme&&typeof b=="function"?b(e.theme):b,Y=f.format?f.format(j,e.theme):j,h="";typeof f=="string"?h=f:typeof f=="function"?h=f(e,$,c):typeof f.css=="function"?h=f.css(e,$,c):h=f.css;let n="",v=h.match(/:/g);v&&v.length>1?n=h:v===null?n=`${h}: ${Y};`:n=`${h.replace(/;$/,"")};`,c.includes("important")&&(n=n.replace(/;/g," !important;")),c.includes("hover")&&!c.includes("focus")&&(n=`&:hover,&:focus { ${n} }`),c.includes("hover")&&c.includes("focus")&&(n=`&:hover { ${n} }`),c.includes("focus")&&(n=`&:focus { ${n} }`),c.includes("active")&&(n=`&:active { ${n} }`),c.includes("last")&&(n=`&:last-child { ${n} }`),c.includes("odd")&&(n=`&:nth-child(odd) { ${n} }`),c.includes("even")&&(n=`&:nth-child(even) { ${n} }`),$&&(n=`${e.theme.Breakpoints.getCssMedia(e.theme.Breakpoints[p($)])} { ${n} }`),r+=n}}}}return r}var y=e=>T(e,M),Z=_styledcomponents.styled.div`
48
48
  ${e=>y(e)}
49
49
  `,A= exports.Div =Z;var N={weight:"font-weight",size:{css:"font-size",format:F},color:{css:(e,t,i)=>{let r=i.includes("hover")?e.$color$hover:e.$color;return z(r,e.theme)}},tnum:'font-feature-settings: "tnum";letter-spacing:-0.04em;',breakWord:"word-break: break-word;",noBreak:"white-space: nowrap;",uppercase:"text-transform: uppercase;",serif:'font-family: "Times New Roman", Times, serif',"spacing|letterSpacing":"letter-spacing",left:"text-align: left;",right:"text-align: right;",center:"text-align: center;",lineThrough:"text-decoration: line-through",linearGradient:e=>`
50
50
  -webkit-text-fill-color: transparent;
@@ -57,7 +57,7 @@
57
57
  overflow: hidden;
58
58
  text-overflow: ellipsis;
59
59
  max-width: 100%;
60
- `,underline:"text-decoration: underline;"},q=_styledcomponents2.default.p`
60
+ `,underline:"text-decoration: underline;"},q=_styledcomponents.styled.p`
61
61
  ${e=>y(e)}
62
62
  ${e=>T(e,N,"text")}
63
63
  `,J= exports.Text =q;var{keys:Q,entries:L,fromEntries:E}=Object,_=()=>typeof window<"u"&&typeof document<"u"?document.body.clientWidth:0,K=e=>({getCssMedia:({min:t,max:i})=>t&&i?`@media (min-width: ${t}px) and (max-width: ${i}px)`:t?`@media (min-width: ${t}px)`:`@media (max-width: ${i}px)`,keys:Q(e),...E(L(e).map(([t,{min:i,max:r}])=>[p(t),{min:i,max:r}])),...E(L(e).map(([t,{min:i=0,max:r=1/0}])=>[`is${p(t)}`,(l=_())=>l!==0&&l>=i&&l<=r]))}),ee=e=>(t,i=0,r=!0)=>(t||1)*e+i+(r?"px":0);function te({theme:e,breakpoints:t,spacingUnit:i}){let r=K(t);return{theme:{...e,Breakpoints:r,spacing:ee(i)},Breakpoints:r}}var ie=te;var ye=A;exports.Div = A; exports.Text = J; exports.createUISystem = ie; exports.default = ye; exports.divMixin = y;
package/dist/index.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/Div.js","../src/utils.js","../src/rules.js","../src/Text.js","../src/createUISystem.js"],"names":["entries","upperFirst","str","kebabCase","string","x","spacing","val","theme","pixelate","fromEntries"],"mappings":"AAAA,04BAAmB,GCAb,CAAE,OAAA,CAAAA,CAAQ,CAAA,CAAI,MAAA,CAEPC,CAAAA,CAAaC,CAAAA,EAAOA,CAAAA,CAAI,MAAA,CAAO,CAAC,CAAA,CAAE,WAAA,CAAY,CAAA,CAAIA,CAAAA,CAAI,KAAA,CAAM,CAAC,CAAA,CAE7DC,CAAAA,CAAY,CAACC,CAAAA,CAAS,EAAA,CAAA,mCACjCA,CAAAA,qBACG,KAAA,mBAAM,oEAAoE,CAAA,6BACzE,GAAA,mBAAIC,CAAAA,EAAKA,CAAAA,CAAE,WAAA,CAAY,CAAC,CAAA,6BACxB,IAAA,mBAAK,GAAG,GAAA,SAAK,IAAA,CAEZ,SAASC,CAAAA,CAAQC,CAAAA,CAAKC,CAAAA,CAAO,CASlC,MARI,SAAA,CAAU,IAAA,CAAKD,CAAG,CAAA,EAIlB,OAAOA,CAAAA,EAAQ,QAAA,EAIfA,CAAAA,GAAQ,CAAA,CACHA,CAAAA,CAGFC,CAAAA,CAAM,OAAA,CAAQD,CAAG,CAC1B,CAEO,SAASE,CAAAA,CAASF,CAAAA,CAAK,CAC5B,OAAI,OAAOA,CAAAA,EAAQ,QAAA,CACV,CAAA,EAAA;AC6BH;AAAA;AAII,EAAA;AAAA;AAAA;AAIJ,EAAA;AAAA;AAYA,EAAA;AAAA;AAAA;AAIA,QAAA;AAAA;AAME,UAAA;AAgB0B,QAAA;AAWrB;AAAA;AA4BY,EAAA;AAAA;AAEgD,iBAAA;AAYhD,IAAA;AAAA;AAEkD,kBAAA;AAcpE,IAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA4CP,EAAA;AASK,oBAAA;AAIA,qBAAA;AAIoB,IAAA;AAIpB,mBAAA;AAIA,sBAAA;AAwBoB,IAAA;AAIpB,mBAAA;AAIA,oBAAA;AAIoB,IAAA;AAIpB,kBAAA;AAIA,qBAAA;AAaQ,IAAA;AACwC,kCAAA;AACC,mCAAA;AACG,sCAAA;AACD,qCAAA;AA0BxD,QAAA;AFxM0B,EAAA;AGzGf;AAQc;AAAA;AAAA;AAAA;AASvB,sCAAA;AAEQ,EAAA;AAAA;AAAA;AAAA;AAAA;AASQ,EAAA;AACQ,EAAA;AAGzB,EAAA;AC1BIG","file":"/Users/jason/Code/streamlined.fi/_div/dist/index.cjs","sourcesContent":["import styled from 'styled-components';\nimport { cssWhiteList, divRules } from './rules';\nimport {\n getMediaPropRegex,\n getRuleIndex,\n kebabCase,\n upperFirst,\n} from './utils';\n\nconst { keys } = Object;\n\n/**\n * @example\n * <Div\n * $w={690}\n * $h={420}\n * $mobile$w={320}\n * />\n */\n\nexport function renderCss(props, rules, id = 'div') {\n let css = '';\n\n const ruleIndex = getRuleIndex(rules, id);\n const mediaPropRegex = getMediaPropRegex(props.theme);\n\n let i = -1;\n const propKeys = keys(props);\n while (++i < propKeys.length) {\n const propExt = propKeys[i];\n\n if (/^\\$/.test(propExt)) {\n const value = props[propExt];\n\n if (value !== false) {\n const match = propExt.match(mediaPropRegex) || [];\n const [, media, mediaPropExt] = match;\n\n const cleanProp = (mediaPropExt || propExt).slice(1);\n const parts = cleanProp.split('$');\n const prop = parts[0];\n const extensions = parts.slice(1);\n\n const foundRule =\n ruleIndex[prop] || (cssWhiteList[prop] && kebabCase(prop));\n\n if (foundRule) {\n const config = foundRule;\n const outputValue =\n config.withTheme && typeof value === 'function'\n ? value(props.theme)\n : value;\n const formattedValue = config.format\n ? config.format(outputValue, props.theme)\n : outputValue;\n\n let ruleCss = '';\n if (typeof config === 'string') {\n ruleCss = config;\n } else if (typeof config === 'function') {\n ruleCss = config(props, media, extensions);\n } else if (typeof config.css === 'function') {\n ruleCss = config.css(props, media, extensions);\n } else {\n ruleCss = config.css;\n }\n\n let cssString = '';\n const colons = ruleCss.match(/:/g);\n if (colons && colons.length > 1) {\n cssString = ruleCss;\n } else if (colons === null) {\n cssString = `${ruleCss}: ${formattedValue};`;\n } else {\n cssString = `${ruleCss.replace(/;$/, '')};`;\n }\n\n if (extensions.includes('important')) {\n cssString = cssString.replace(/;/g, ' !important;');\n }\n\n if (extensions.includes('hover') && !extensions.includes('focus')) {\n cssString = `&:hover,&:focus { ${cssString} }`;\n }\n\n if (extensions.includes('hover') && extensions.includes('focus')) {\n cssString = `&:hover { ${cssString} }`;\n }\n\n if (extensions.includes('focus')) {\n cssString = `&:focus { ${cssString} }`;\n }\n\n if (extensions.includes('active')) {\n cssString = `&:active { ${cssString} }`;\n }\n\n if (extensions.includes('last')) {\n cssString = `&:last-child { ${cssString} }`;\n }\n\n if (extensions.includes('odd')) {\n cssString = `&:nth-child(odd) { ${cssString} }`;\n }\n\n if (extensions.includes('even')) {\n cssString = `&:nth-child(even) { ${cssString} }`;\n }\n\n if (media) {\n const cssMedia = props.theme.Breakpoints.getCssMedia(\n props.theme.Breakpoints[upperFirst(media)],\n );\n cssString = `${cssMedia} { ${cssString} }`;\n }\n\n css += cssString;\n }\n }\n }\n }\n\n return css;\n}\n\nexport const divMixin = props => renderCss(props, divRules);\n\nconst Div = styled.div`\n ${props => divMixin(props)}\n`;\n\nexport default Div;\n","const { entries } = Object;\n\nexport const upperFirst = str => str.charAt(0).toUpperCase() + str.slice(1);\n\nexport const kebabCase = (string = '') =>\n string\n .match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g)\n ?.map(x => x.toLowerCase())\n ?.join('-') ?? '';\n\nexport function spacing(val, theme) {\n if (/(px|%)$/.test(val)) {\n return val;\n }\n\n if (typeof val === 'string') {\n return val;\n }\n\n if (val === 0) {\n return val;\n }\n\n return theme.spacing(val);\n}\n\nexport function pixelate(val) {\n if (typeof val === 'number') {\n return `${val}px`;\n }\n return val;\n}\n\nexport function getPropValue(props, media, ...propKeys) {\n let value;\n for (let i = 0; i < propKeys.length; i++) {\n const key = propKeys[i];\n if (media) {\n const mediaVal = props[`$${media}$${key}`];\n if (mediaVal) {\n value = mediaVal;\n break;\n }\n }\n const val = props[`$${key}`];\n if (val) {\n value = val;\n break;\n }\n }\n\n return value;\n}\n\nexport function isPropPresent(props, media, ...propKeys) {\n return !!getPropValue(props, media, ...propKeys);\n}\n\nconst ruleIndexes = {};\nexport function getRuleIndex(rules, id) {\n if (ruleIndexes[id]) return ruleIndexes[id];\n\n const index = {};\n entries(rules).forEach(([ruleProp, config]) => {\n ruleProp.split('|').forEach(prop => {\n index[prop] = config;\n });\n });\n ruleIndexes[id] = index;\n\n return index;\n}\n\nlet mediaPropRegex = null;\nexport function getMediaPropRegex(theme) {\n if (mediaPropRegex) return mediaPropRegex;\n\n mediaPropRegex = new RegExp(\n `^\\\\$(${theme.Breakpoints.keys.join('|')})(\\\\$.*)`,\n );\n\n return mediaPropRegex;\n}\n\nexport function colorMixin(color, theme) {\n if (color) {\n if ([100, 200, 300, 400, 500, 600, 700, 800, 900].includes(color)) {\n return `color: ${theme[`fill${color}`]};`;\n }\n\n if (typeof color === 'string') {\n if (theme[color]) {\n return `color: ${theme[color]};`;\n }\n return `color: ${color};`;\n }\n }\n\n return '';\n}\n\nexport const sizeFormatter = value => {\n if (typeof value === 'number') {\n return `${value}px`;\n }\n return value;\n};\n","/* eslint-disable no-nested-ternary */\nimport { getPropValue, isPropPresent, pixelate, spacing } from './utils';\n\nconst { fromEntries } = Object;\n\nexport const cssWhiteList = fromEntries(\n [\n 'display',\n 'align',\n 'vAlign',\n 'alignItems',\n 'alignContent',\n 'alignSelf',\n 'justifyContent',\n 'justifySelf',\n 'flexDirection',\n 'flexBasis',\n 'flexWrap',\n 'pointerEvents',\n 'cursor',\n 'position',\n 'opacity',\n 'backgroundColor',\n 'backgroundImage',\n 'backgroundSize',\n 'backgroundPosition',\n 'backgroundRepeat',\n 'transform',\n 'transformOrigin',\n 'textDecoration',\n 'textWrap',\n 'animation',\n 'fontWeight',\n 'gap',\n 'gridTemplateColumns',\n 'gridTemplateRows',\n 'wordBreak',\n 'whiteSpace',\n 'textOverflow',\n 'overflow',\n 'overflowX',\n 'overflowY',\n 'textAlign',\n 'transitionDelay',\n 'filter',\n 'listStyle',\n 'objectFit',\n 'objectPosition',\n 'willChange',\n 'boxSizing',\n ].map(prop => [prop, 1]),\n);\n\n// short hand rules for the div component\nexport const divRules = {\n inline: 'display: inline',\n block: 'display: block',\n flex: `\n display: flex;\n width: 100%;\n `,\n autoFlex: `\n display: flex;\n width: auto;\n `,\n grid: `\n display: grid;\n `,\n hide: 'display: none',\n inlineBlock: 'display: inline-block',\n inlineFlex: 'display: inline-flex',\n 'column|col': 'flex-direction: column;',\n row: 'flex-direction: row;',\n spaceBetween: 'justify-content: space-between;',\n wrap: 'flex-wrap: wrap;',\n innerCenter: (props, media) =>\n isPropPresent(props, media, 'flex', 'inlineFlex')\n ? `\n justify-content: center;\n align-items: center;\n `\n : `\n text-align: center;\n ${\n isPropPresent(props, media, 'h', 'height')\n ? `line-height: ${getPropValue(props, media, 'h', 'height')};`\n : ''\n }\n `,\n innerLeft: (props, media) =>\n isPropPresent(props, media, 'flex', 'inlineFlex')\n ? isPropPresent(props, media, 'column', 'col')\n ? 'align-items: flex-start;'\n : 'justify-content: flex-start;'\n : 'text-align: left;',\n innerRight: (props, media) =>\n isPropPresent(props, media, 'flex', 'inlineFlex')\n ? isPropPresent(props, media, 'column', 'col')\n ? 'align-items: flex-end;'\n : 'justify-content: flex-end;'\n : 'text-align: right;',\n innerTop: (props, media) => {\n return isPropPresent(props, media, 'flex', 'inlineFlex')\n ? isPropPresent(props, media, 'column', 'col')\n ? 'justify-content: flex-start;'\n : 'align-items: flex-start;'\n : '';\n },\n innerBottom: (props, media) =>\n isPropPresent(props, media, 'flex', 'inlineFlex')\n ? isPropPresent(props, media, 'column', 'col')\n ? 'justify-content: flex-end;'\n : 'align-items: flex-end;'\n : '',\n outerCenter: `\n margin-left: auto;\n margin-right: auto;\n `,\n grow: {\n css: 'flex-grow',\n format: Number,\n },\n shrink: {\n css: 'flex-shrink',\n },\n 'colReverse|columnReverse': {\n css: 'flex-direction: column-reverse;',\n },\n reverse: {\n css: 'flex-direction: row-reverse;',\n },\n\n // dimensions\n 'width|w': {\n css: 'width',\n format: pixelate,\n },\n 'minWidth|minW': {\n css: 'min-width',\n format: pixelate,\n },\n 'maxWidth|maxW': {\n css: (props, media) => `\n width: 100%;\n max-width: ${pixelate(getPropValue(props, media, 'maxWidth', 'maxW'))};\n `,\n },\n 'height|h': {\n css: 'height',\n format: pixelate,\n },\n 'minHeight|minH': {\n css: 'min-height',\n format: pixelate,\n },\n 'maxHeight|maxH': {\n css: (props, media) => `\n height: 100%;\n max-height: ${pixelate(getPropValue(props, media, 'maxHeight', 'maxH'))};\n `,\n },\n 'lineHeight|lineH|lh': {\n css: 'line-height',\n format: pixelate,\n },\n pointer: 'cursor: pointer;',\n\n // position\n relative: 'position: relative',\n absolute: 'position: absolute',\n fixed: 'position: fixed',\n static: 'position: static',\n cover: `\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n `,\n 'zIndex|z': {\n css: 'z-index',\n withTheme: true,\n },\n top: {\n css: 'top',\n format: pixelate,\n },\n right: {\n css: 'right',\n format: pixelate,\n },\n bottom: {\n css: 'bottom',\n format: pixelate,\n },\n left: {\n css: 'left',\n format: pixelate,\n },\n\n 'padding|p': {\n css: 'padding',\n format: spacing,\n },\n 'paddingTop|pt': {\n css: 'padding-top',\n format: spacing,\n },\n 'paddingRight|pr': {\n css: 'padding-right',\n format: spacing,\n },\n 'paddingBottom|pb': {\n css: 'padding-bottom',\n format: spacing,\n },\n 'paddingLeft|pl': {\n css: 'padding-left',\n format: spacing,\n },\n 'paddingX|px': {\n css: (props, media) => `\n padding-left: ${spacing(\n getPropValue(props, media, 'paddingX', 'px'),\n props.theme,\n )};\n padding-right: ${spacing(\n getPropValue(props, media, 'paddingX', 'px'),\n props.theme,\n )};\n `,\n },\n 'paddingY|py': {\n css: (props, media) => `\n padding-top: ${spacing(\n getPropValue(props, media, 'paddingY', 'py'),\n props.theme,\n )};\n padding-bottom: ${spacing(\n getPropValue(props, media, 'paddingY', 'py'),\n props.theme,\n )};\n `,\n },\n 'margin|m': {\n css: 'margin',\n format: spacing,\n },\n 'marginTop|mt': {\n css: 'margin-top',\n format: spacing,\n },\n 'marginRight|mr': {\n css: 'margin-right',\n format: spacing,\n },\n 'marginBottom|mb': {\n css: 'margin-bottom',\n format: spacing,\n },\n 'marginLeft|ml': {\n css: 'margin-left',\n format: spacing,\n },\n 'marginX|mx': {\n css: (props, media) => `\n margin-left: ${spacing(\n getPropValue(props, media, 'marginX', 'mx'),\n props.theme,\n )};\n margin-right: ${spacing(\n getPropValue(props, media, 'marginX', 'mx'),\n props.theme,\n )};\n `,\n },\n 'marginY|my': {\n css: (props, media) => `\n margin-top: ${spacing(\n getPropValue(props, media, 'marginY', 'my'),\n props.theme,\n )};\n margin-bottom: ${spacing(\n getPropValue(props, media, 'marginY', 'my'),\n props.theme,\n )};\n `,\n },\n\n // style\n 'background|bg': {\n css: 'background',\n withTheme: true,\n },\n 'borderRadius|radius': {\n css: (props, media) => {\n const radius = getPropValue(props, media, 'borderRadius', 'radius');\n if (Array.isArray(radius)) {\n return `\n border-top-left-radius: ${pixelate(radius[0])};\n border-top-right-radius: ${pixelate(radius[1])};\n border-bottom-right-radius: ${pixelate(radius[2])};\n border-bottom-left-radius: ${pixelate(radius[3])};\n `;\n }\n return `border-radius: ${pixelate(radius)}`;\n },\n },\n borderTopLeftRadius: {\n css: 'border-top-left-radius',\n format: pixelate,\n },\n borderTopRightRadius: {\n css: 'border-top-right-radius',\n format: pixelate,\n },\n borderBottomRightRadius: {\n css: 'border-bottom-right-radius',\n format: pixelate,\n },\n borderBottomLeftRadius: {\n css: 'border-bottom-left-radius',\n format: pixelate,\n },\n borderColor: {\n css: 'border-color',\n withTheme: true,\n },\n borderImage: {\n css: 'border-image',\n withTheme: true,\n },\n ...[\n ['border', 'border'],\n ['borderTop', 'border-top'],\n ['borderRight', 'border-right'],\n ['borderBottom', 'border-bottom'],\n ['borderLeft', 'border-left'],\n ].reduce(\n (rules, [jsKey, cssKey]) => ({\n ...rules,\n [jsKey]: {\n css: (props, media, extensions) => {\n const propValue = getPropValue(\n props,\n media,\n extensions?.length ? [jsKey, ...extensions].join('$') : jsKey,\n );\n\n // withTheme\n const value =\n typeof propValue === 'function'\n ? propValue(props.theme)\n : propValue;\n\n if (!/^\\d/.test(value)) {\n return `${cssKey}: 1px solid ${value}`;\n }\n return `${cssKey}: ${value}`;\n },\n },\n }),\n {},\n ),\n transition: (props, media) => {\n const value = getPropValue(props, media, 'transition');\n return typeof value === 'string'\n ? `transition: ${value}`\n : 'transition: all .2s';\n },\n 'boxShadow|shadow': {\n css: 'box-shadow',\n withTheme: true,\n },\n textShadow: {\n css: 'text-shadow',\n withTheme: true,\n },\n color: {\n css: 'color',\n withTheme: true,\n },\n fill: {\n css: 'fill',\n withTheme: true,\n },\n fontSize: {\n css: 'font-size',\n format: pixelate,\n },\n outline: {\n css: 'outline',\n withTheme: true,\n },\n};\n","import styled from 'styled-components';\nimport { colorMixin, sizeFormatter } from './utils';\n\nimport { divMixin, renderCss } from './Div';\n\nconst textRules = {\n weight: 'font-weight',\n size: {\n css: 'font-size',\n format: sizeFormatter,\n },\n color: {\n css: (props, media, extensions) => {\n const color = extensions.includes('hover')\n ? props.$color$hover\n : props.$color;\n\n return colorMixin(color, props.theme);\n },\n },\n tnum: 'font-feature-settings: \"tnum\";letter-spacing:-0.04em;',\n breakWord: 'word-break: break-word;',\n noBreak: 'white-space: nowrap;',\n uppercase: 'text-transform: uppercase;',\n serif: 'font-family: \"Times New Roman\", Times, serif',\n 'spacing|letterSpacing': `letter-spacing`,\n left: 'text-align: left;',\n right: 'text-align: right;',\n center: 'text-align: center;',\n lineThrough: 'text-decoration: line-through',\n // underline: 'text-decoration: underline;',\n linearGradient: props => `\n -webkit-text-fill-color: transparent;\n text-fill-color: transparent;\n -webkit-background-clip: text;\n background-clip: text;\n background-image: linear-gradient(${\n typeof props.$linearGradient === 'function'\n ? props.$linearGradient(props.theme)\n : props.$linearGradient\n });\n `,\n ellipsis: `\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 100%;\n `,\n underline: 'text-decoration: underline;',\n};\n\nconst Text = styled.p`\n ${props => divMixin(props)}\n ${props => {\n return renderCss(props, textRules, 'text');\n }}\n`;\n\nexport default Text;\n","import { upperFirst } from './utils';\n\nconst { keys, entries, fromEntries } = Object;\n\nconst getDefaultWidth = () => {\n return typeof window !== 'undefined' && typeof document !== 'undefined'\n ? document.body.clientWidth\n : 0;\n};\n\nconst createBreakpoints = breakpoints => {\n return {\n getCssMedia: ({ min, max }) => {\n if (min && max) {\n return `@media (min-width: ${min}px) and (max-width: ${max}px)`;\n }\n\n if (min) {\n return `@media (min-width: ${min}px)`;\n }\n\n return `@media (max-width: ${max}px)`;\n },\n keys: keys(breakpoints),\n ...fromEntries(\n entries(breakpoints).map(([key, { min, max }]) => {\n return [upperFirst(key), { min, max }];\n }),\n ),\n ...fromEntries(\n entries(breakpoints).map(([key, { min = 0, max = Infinity }]) => {\n return [\n `is${upperFirst(key)}`,\n (width = getDefaultWidth()) =>\n width !== 0 && width >= min && width <= max,\n ];\n }),\n ),\n };\n};\n\nconst createSpacing = spacingUnit => (multiplier, adjuster = 0, usePx = true) =>\n (multiplier || 1) * spacingUnit + adjuster + (usePx ? 'px' : 0);\n\nfunction createUISystem({ theme, breakpoints, spacingUnit }) {\n const Breakpoints = createBreakpoints(breakpoints);\n\n return {\n theme: {\n ...theme,\n Breakpoints,\n spacing: createSpacing(spacingUnit),\n },\n Breakpoints,\n };\n}\n\nexport default createUISystem;\n"]}
1
+ {"version":3,"sources":["../src/Div.js","../src/utils.js","../src/rules.js","../src/Text.js","../src/createUISystem.js"],"names":["entries","upperFirst","str","kebabCase","string","x","spacing","val","theme","pixelate"],"mappings":"AAAA,suBAAuB,GCAjB,CAAE,OAAA,CAAAA,CAAQ,CAAA,CAAI,MAAA,CAEPC,CAAAA,CAAaC,CAAAA,EAAOA,CAAAA,CAAI,MAAA,CAAO,CAAC,CAAA,CAAE,WAAA,CAAY,CAAA,CAAIA,CAAAA,CAAI,KAAA,CAAM,CAAC,CAAA,CAE7DC,CAAAA,CAAY,CAACC,CAAAA,CAAS,EAAA,CAAA,mCACjCA,CAAAA,qBACG,KAAA,mBAAM,oEAAoE,CAAA,6BACzE,GAAA,mBAAIC,CAAAA,EAAKA,CAAAA,CAAE,WAAA,CAAY,CAAC,CAAA,6BACxB,IAAA,mBAAK,GAAG,GAAA,SAAK,IAAA,CAEZ,SAASC,CAAAA,CAAQC,CAAAA,CAAKC,CAAAA,CAAO,CASlC,MARI,SAAA,CAAU,IAAA,CAAKD,CAAG,CAAA,EAIlB,OAAOA,CAAAA,EAAQ,QAAA,EAIfA,CAAAA,GAAQ,CAAA,CACHA,CAAAA,CAGFC,CAAAA,CAAM,OAAA,CAAQD,CAAG,CAC1B,CAEO,SAASE,CAAAA,CAASF,CAAAA,CAAK,CAC5B,OAAI,OAAOA,CAAAA,EAAQ,QAAA,CACV,CAAA,EAAA;AC6BH;AAAA;AAII,EAAA;AAAA;AAAA;AAIJ,EAAA;AAAA;AAYA,EAAA;AAAA;AAAA;AAIA,QAAA;AAAA;AAME,UAAA;AAgBoC,QAAA;AAW/B;AAAA;AA4BY,EAAA;AAAA;AAEgD,iBAAA;AAYhD,IAAA;AAAA;AAEkD,kBAAA;AAcpE,IAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA6CL,EAAA;AAQG,oBAAA;AAIA,qBAAA;AAIoB,IAAA;AAIpB,mBAAA;AAIA,sBAAA;AAwBoB,IAAA;AAIpB,mBAAA;AAIA,oBAAA;AAIoB,IAAA;AAIpB,kBAAA;AAIA,qBAAA;AAaQ,IAAA;AACwC,kCAAA;AACC,mCAAA;AACG,sCAAA;AACD,qCAAA;AA2BjD,QAAA;AFzMmB,EAAA;AGzGf;AAQc;AAAA;AAAA;AAAA;AASvB,sCAAA;AAEQ,EAAA;AAAA;AAAA;AAAA;AAAA;AASQ,EAAA;AACQ,EAAA;AAGzB,EAAA;ACzB4B","file":"/Users/jason/Code/streamlined.fi/_div/dist/index.cjs","sourcesContent":["import { styled } from 'styled-components';\nimport { cssWhiteList, divRules } from './rules';\nimport {\n getMediaPropRegex,\n getRuleIndex,\n kebabCase,\n upperFirst,\n} from './utils';\n\nconst { keys } = Object;\n\n/**\n * @example\n * <Div\n * $w={690}\n * $h={420}\n * $mobile$w={320}\n * />\n */\n\nexport function renderCss(props, rules, id = 'div') {\n let css = '';\n\n const ruleIndex = getRuleIndex(rules, id);\n const mediaPropRegex = getMediaPropRegex(props.theme);\n\n let i = -1;\n const propKeys = keys(props);\n while (++i < propKeys.length) {\n const propExt = propKeys[i];\n\n if (/^\\$/.test(propExt)) {\n const value = props[propExt];\n\n if (value !== false) {\n const match = propExt.match(mediaPropRegex) || [];\n const [, media, mediaPropExt] = match;\n\n const cleanProp = (mediaPropExt || propExt).slice(1);\n const parts = cleanProp.split('$');\n const prop = parts[0];\n const extensions = parts.slice(1);\n\n const foundRule =\n ruleIndex[prop] || (cssWhiteList[prop] && kebabCase(prop));\n\n if (foundRule) {\n const config = foundRule;\n const outputValue =\n config.withTheme && typeof value === 'function'\n ? value(props.theme)\n : value;\n const formattedValue = config.format\n ? config.format(outputValue, props.theme)\n : outputValue;\n\n let ruleCss = '';\n if (typeof config === 'string') {\n ruleCss = config;\n } else if (typeof config === 'function') {\n ruleCss = config(props, media, extensions);\n } else if (typeof config.css === 'function') {\n ruleCss = config.css(props, media, extensions);\n } else {\n ruleCss = config.css;\n }\n\n let cssString = '';\n const colons = ruleCss.match(/:/g);\n if (colons && colons.length > 1) {\n cssString = ruleCss;\n } else if (colons === null) {\n cssString = `${ruleCss}: ${formattedValue};`;\n } else {\n cssString = `${ruleCss.replace(/;$/, '')};`;\n }\n\n if (extensions.includes('important')) {\n cssString = cssString.replace(/;/g, ' !important;');\n }\n\n if (extensions.includes('hover') && !extensions.includes('focus')) {\n cssString = `&:hover,&:focus { ${cssString} }`;\n }\n\n if (extensions.includes('hover') && extensions.includes('focus')) {\n cssString = `&:hover { ${cssString} }`;\n }\n\n if (extensions.includes('focus')) {\n cssString = `&:focus { ${cssString} }`;\n }\n\n if (extensions.includes('active')) {\n cssString = `&:active { ${cssString} }`;\n }\n\n if (extensions.includes('last')) {\n cssString = `&:last-child { ${cssString} }`;\n }\n\n if (extensions.includes('odd')) {\n cssString = `&:nth-child(odd) { ${cssString} }`;\n }\n\n if (extensions.includes('even')) {\n cssString = `&:nth-child(even) { ${cssString} }`;\n }\n\n if (media) {\n const cssMedia = props.theme.Breakpoints.getCssMedia(\n props.theme.Breakpoints[upperFirst(media)],\n );\n cssString = `${cssMedia} { ${cssString} }`;\n }\n\n css += cssString;\n }\n }\n }\n }\n\n return css;\n}\n\nexport const divMixin = props => renderCss(props, divRules);\n\nconst Div = styled.div`\n ${props => divMixin(props)}\n`;\n\nexport default Div;\n","const { entries } = Object;\n\nexport const upperFirst = str => str.charAt(0).toUpperCase() + str.slice(1);\n\nexport const kebabCase = (string = '') =>\n string\n .match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g)\n ?.map(x => x.toLowerCase())\n ?.join('-') ?? '';\n\nexport function spacing(val, theme) {\n if (/(px|%)$/.test(val)) {\n return val;\n }\n\n if (typeof val === 'string') {\n return val;\n }\n\n if (val === 0) {\n return val;\n }\n\n return theme.spacing(val);\n}\n\nexport function pixelate(val) {\n if (typeof val === 'number') {\n return `${val}px`;\n }\n return val;\n}\n\nexport function getPropValue(props, media, ...propKeys) {\n let value;\n for (let i = 0; i < propKeys.length; i++) {\n const key = propKeys[i];\n if (media) {\n const mediaVal = props[`$${media}$${key}`];\n if (mediaVal) {\n value = mediaVal;\n break;\n }\n }\n const val = props[`$${key}`];\n if (val) {\n value = val;\n break;\n }\n }\n\n return value;\n}\n\nexport function isPropPresent(props, media, ...propKeys) {\n return !!getPropValue(props, media, ...propKeys);\n}\n\nconst ruleIndexes = {};\nexport function getRuleIndex(rules, id) {\n if (ruleIndexes[id]) return ruleIndexes[id];\n\n const index = {};\n entries(rules).forEach(([ruleProp, config]) => {\n ruleProp.split('|').forEach(prop => {\n index[prop] = config;\n });\n });\n ruleIndexes[id] = index;\n\n return index;\n}\n\nlet mediaPropRegex = null;\nexport function getMediaPropRegex(theme) {\n if (mediaPropRegex) return mediaPropRegex;\n\n mediaPropRegex = new RegExp(\n `^\\\\$(${theme.Breakpoints.keys.join('|')})(\\\\$.*)`,\n );\n\n return mediaPropRegex;\n}\n\nexport function colorMixin(color, theme) {\n if (color) {\n if ([100, 200, 300, 400, 500, 600, 700, 800, 900].includes(color)) {\n return `color: ${theme[`fill${color}`]};`;\n }\n\n if (typeof color === 'string') {\n if (theme[color]) {\n return `color: ${theme[color]};`;\n }\n return `color: ${color};`;\n }\n }\n\n return '';\n}\n\nexport const sizeFormatter = value => {\n if (typeof value === 'number') {\n return `${value}px`;\n }\n return value;\n};\n","/* eslint-disable no-nested-ternary */\nimport { getPropValue, isPropPresent, pixelate, spacing } from './utils';\n\nconst { fromEntries } = Object;\n\nexport const cssWhiteList = fromEntries(\n [\n 'display',\n 'align',\n 'vAlign',\n 'alignItems',\n 'alignContent',\n 'alignSelf',\n 'justifyContent',\n 'justifySelf',\n 'flexDirection',\n 'flexBasis',\n 'flexWrap',\n 'pointerEvents',\n 'cursor',\n 'position',\n 'opacity',\n 'backgroundColor',\n 'backgroundImage',\n 'backgroundSize',\n 'backgroundPosition',\n 'backgroundRepeat',\n 'transform',\n 'transformOrigin',\n 'textDecoration',\n 'textWrap',\n 'animation',\n 'fontWeight',\n 'gap',\n 'gridTemplateColumns',\n 'gridTemplateRows',\n 'wordBreak',\n 'whiteSpace',\n 'textOverflow',\n 'overflow',\n 'overflowX',\n 'overflowY',\n 'textAlign',\n 'transitionDelay',\n 'filter',\n 'listStyle',\n 'objectFit',\n 'objectPosition',\n 'willChange',\n 'boxSizing',\n ].map(prop => [prop, 1]),\n);\n\n// short hand rules for the div component\nexport const divRules = {\n inline: 'display: inline',\n block: 'display: block',\n flex: `\n display: flex;\n width: 100%;\n `,\n autoFlex: `\n display: flex;\n width: auto;\n `,\n grid: `\n display: grid;\n `,\n hide: 'display: none',\n inlineBlock: 'display: inline-block',\n inlineFlex: 'display: inline-flex',\n 'column|col': 'flex-direction: column;',\n row: 'flex-direction: row;',\n spaceBetween: 'justify-content: space-between;',\n wrap: 'flex-wrap: wrap;',\n innerCenter: (props, media) =>\n isPropPresent(props, media, 'flex', 'inlineFlex')\n ? `\n justify-content: center;\n align-items: center;\n `\n : `\n text-align: center;\n ${\n isPropPresent(props, media, 'h', 'height')\n ? `line-height: ${getPropValue(props, media, 'h', 'height')};`\n : ''\n }\n `,\n innerLeft: (props, media) =>\n isPropPresent(props, media, 'flex', 'inlineFlex')\n ? isPropPresent(props, media, 'column', 'col')\n ? 'align-items: flex-start;'\n : 'justify-content: flex-start;'\n : 'text-align: left;',\n innerRight: (props, media) =>\n isPropPresent(props, media, 'flex', 'inlineFlex')\n ? isPropPresent(props, media, 'column', 'col')\n ? 'align-items: flex-end;'\n : 'justify-content: flex-end;'\n : 'text-align: right;',\n innerTop: (props, media) => {\n return isPropPresent(props, media, 'flex', 'inlineFlex')\n ? isPropPresent(props, media, 'column', 'col')\n ? 'justify-content: flex-start;'\n : 'align-items: flex-start;'\n : '';\n },\n innerBottom: (props, media) =>\n isPropPresent(props, media, 'flex', 'inlineFlex')\n ? isPropPresent(props, media, 'column', 'col')\n ? 'justify-content: flex-end;'\n : 'align-items: flex-end;'\n : '',\n outerCenter: `\n margin-left: auto;\n margin-right: auto;\n `,\n grow: {\n css: 'flex-grow',\n format: Number,\n },\n shrink: {\n css: 'flex-shrink',\n },\n 'colReverse|columnReverse': {\n css: 'flex-direction: column-reverse;',\n },\n reverse: {\n css: 'flex-direction: row-reverse;',\n },\n\n // dimensions\n 'width|w': {\n css: 'width',\n format: pixelate,\n },\n 'minWidth|minW': {\n css: 'min-width',\n format: pixelate,\n },\n 'maxWidth|maxW': {\n css: (props, media) => `\n width: 100%;\n max-width: ${pixelate(getPropValue(props, media, 'maxWidth', 'maxW'))};\n `,\n },\n 'height|h': {\n css: 'height',\n format: pixelate,\n },\n 'minHeight|minH': {\n css: 'min-height',\n format: pixelate,\n },\n 'maxHeight|maxH': {\n css: (props, media) => `\n height: 100%;\n max-height: ${pixelate(getPropValue(props, media, 'maxHeight', 'maxH'))};\n `,\n },\n 'lineHeight|lineH|lh': {\n css: 'line-height',\n format: pixelate,\n },\n pointer: 'cursor: pointer;',\n\n // position\n relative: 'position: relative',\n absolute: 'position: absolute',\n fixed: 'position: fixed',\n static: 'position: static',\n cover: `\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n `,\n 'zIndex|z': {\n css: 'z-index',\n withTheme: true,\n },\n top: {\n css: 'top',\n format: pixelate,\n },\n right: {\n css: 'right',\n format: pixelate,\n },\n bottom: {\n css: 'bottom',\n format: pixelate,\n },\n left: {\n css: 'left',\n format: pixelate,\n },\n\n 'padding|p': {\n css: 'padding',\n format: spacing,\n },\n 'paddingTop|pt': {\n css: 'padding-top',\n format: spacing,\n },\n 'paddingRight|pr': {\n css: 'padding-right',\n format: spacing,\n },\n 'paddingBottom|pb': {\n css: 'padding-bottom',\n format: spacing,\n },\n 'paddingLeft|pl': {\n css: 'padding-left',\n format: spacing,\n },\n 'paddingX|px': {\n css: (props, media) => `\n padding-left: ${spacing(\n getPropValue(props, media, 'paddingX', 'px'),\n props.theme,\n )};\n padding-right: ${spacing(\n getPropValue(props, media, 'paddingX', 'px'),\n props.theme,\n )};\n `,\n },\n 'paddingY|py': {\n css: (props, media) => `\n padding-top: ${spacing(\n getPropValue(props, media, 'paddingY', 'py'),\n props.theme,\n )};\n padding-bottom: ${spacing(\n getPropValue(props, media, 'paddingY', 'py'),\n props.theme,\n )};\n `,\n },\n 'margin|m': {\n css: 'margin',\n format: spacing,\n },\n 'marginTop|mt': {\n css: 'margin-top',\n format: spacing,\n },\n 'marginRight|mr': {\n css: 'margin-right',\n format: spacing,\n },\n 'marginBottom|mb': {\n css: 'margin-bottom',\n format: spacing,\n },\n 'marginLeft|ml': {\n css: 'margin-left',\n format: spacing,\n },\n 'marginX|mx': {\n css: (props, media) => `\n margin-left: ${spacing(\n getPropValue(props, media, 'marginX', 'mx'),\n props.theme,\n )};\n margin-right: ${spacing(\n getPropValue(props, media, 'marginX', 'mx'),\n props.theme,\n )};\n `,\n },\n 'marginY|my': {\n css: (props, media) => `\n margin-top: ${spacing(\n getPropValue(props, media, 'marginY', 'my'),\n props.theme,\n )};\n margin-bottom: ${spacing(\n getPropValue(props, media, 'marginY', 'my'),\n props.theme,\n )};\n `,\n },\n\n // style\n 'background|bg': {\n css: 'background',\n withTheme: true,\n },\n 'borderRadius|radius': {\n css: (props, media) => {\n const radius = getPropValue(props, media, 'borderRadius', 'radius');\n if (Array.isArray(radius)) {\n return `\n border-top-left-radius: ${pixelate(radius[0])};\n border-top-right-radius: ${pixelate(radius[1])};\n border-bottom-right-radius: ${pixelate(radius[2])};\n border-bottom-left-radius: ${pixelate(radius[3])};\n `;\n }\n return `border-radius: ${pixelate(radius)}`;\n },\n },\n borderTopLeftRadius: {\n css: 'border-top-left-radius',\n format: pixelate,\n },\n borderTopRightRadius: {\n css: 'border-top-right-radius',\n format: pixelate,\n },\n borderBottomRightRadius: {\n css: 'border-bottom-right-radius',\n format: pixelate,\n },\n borderBottomLeftRadius: {\n css: 'border-bottom-left-radius',\n format: pixelate,\n },\n borderColor: {\n css: 'border-color',\n withTheme: true,\n },\n borderImage: {\n css: 'border-image',\n withTheme: true,\n },\n ...[\n ['border', 'border'],\n ['borderTop', 'border-top'],\n ['borderRight', 'border-right'],\n ['borderBottom', 'border-bottom'],\n ['borderLeft', 'border-left'],\n ].reduce(\n (rules, [jsKey, cssKey]) => ({\n ...rules,\n [jsKey]: {\n css: (props, media, extensions) => {\n const propValue = getPropValue(\n props,\n media,\n extensions?.length ? [jsKey, ...extensions].join('$') : jsKey,\n );\n\n // withTheme\n const value =\n typeof propValue === 'function'\n ? propValue(props.theme)\n : propValue;\n\n if (!/^\\d/.test(value)) {\n return `${cssKey}: 1px solid ${value}`;\n }\n return `${cssKey}: ${value}`;\n },\n },\n }),\n {},\n ),\n transition: (props, media) => {\n const value = getPropValue(props, media, 'transition');\n return typeof value === 'string'\n ? `transition: ${value}`\n : 'transition: all .2s';\n },\n 'boxShadow|shadow': {\n css: 'box-shadow',\n withTheme: true,\n },\n textShadow: {\n css: 'text-shadow',\n withTheme: true,\n },\n color: {\n css: 'color',\n withTheme: true,\n },\n fill: {\n css: 'fill',\n withTheme: true,\n },\n fontSize: {\n css: 'font-size',\n format: pixelate,\n },\n outline: {\n css: 'outline',\n withTheme: true,\n },\n};\n","import { styled } from 'styled-components';\nimport { colorMixin, sizeFormatter } from './utils';\n\nimport { divMixin, renderCss } from './Div';\n\nconst textRules = {\n weight: 'font-weight',\n size: {\n css: 'font-size',\n format: sizeFormatter,\n },\n color: {\n css: (props, media, extensions) => {\n const color = extensions.includes('hover')\n ? props.$color$hover\n : props.$color;\n\n return colorMixin(color, props.theme);\n },\n },\n tnum: 'font-feature-settings: \"tnum\";letter-spacing:-0.04em;',\n breakWord: 'word-break: break-word;',\n noBreak: 'white-space: nowrap;',\n uppercase: 'text-transform: uppercase;',\n serif: 'font-family: \"Times New Roman\", Times, serif',\n 'spacing|letterSpacing': `letter-spacing`,\n left: 'text-align: left;',\n right: 'text-align: right;',\n center: 'text-align: center;',\n lineThrough: 'text-decoration: line-through',\n // underline: 'text-decoration: underline;',\n linearGradient: props => `\n -webkit-text-fill-color: transparent;\n text-fill-color: transparent;\n -webkit-background-clip: text;\n background-clip: text;\n background-image: linear-gradient(${\n typeof props.$linearGradient === 'function'\n ? props.$linearGradient(props.theme)\n : props.$linearGradient\n });\n `,\n ellipsis: `\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 100%;\n `,\n underline: 'text-decoration: underline;',\n};\n\nconst Text = styled.p`\n ${props => divMixin(props)}\n ${props => {\n return renderCss(props, textRules, 'text');\n }}\n`;\n\nexport default Text;\n","import { upperFirst } from './utils';\n\nconst { keys, entries, fromEntries } = Object;\n\nconst getDefaultWidth = () => {\n return typeof window !== 'undefined' && typeof document !== 'undefined'\n ? document.body.clientWidth\n : 0;\n};\n\nconst createBreakpoints = breakpoints => {\n return {\n getCssMedia: ({ min, max }) => {\n if (min && max) {\n return `@media (min-width: ${min}px) and (max-width: ${max}px)`;\n }\n\n if (min) {\n return `@media (min-width: ${min}px)`;\n }\n\n return `@media (max-width: ${max}px)`;\n },\n keys: keys(breakpoints),\n ...fromEntries(\n entries(breakpoints).map(([key, { min, max }]) => {\n return [upperFirst(key), { min, max }];\n }),\n ),\n ...fromEntries(\n entries(breakpoints).map(([key, { min = 0, max = Infinity }]) => {\n return [\n `is${upperFirst(key)}`,\n (width = getDefaultWidth()) =>\n width !== 0 && width >= min && width <= max,\n ];\n }),\n ),\n };\n};\n\nconst createSpacing = spacingUnit => (multiplier, adjuster = 0, usePx = true) =>\n (multiplier || 1) * spacingUnit + adjuster + (usePx ? 'px' : 0);\n\nfunction createUISystem({ theme, breakpoints, spacingUnit }) {\n const Breakpoints = createBreakpoints(breakpoints);\n\n return {\n theme: {\n ...theme,\n Breakpoints,\n spacing: createSpacing(spacingUnit),\n },\n Breakpoints,\n };\n}\n\nexport default createUISystem;\n"]}
package/dist/index.mjs CHANGED
@@ -1,4 +1,4 @@
1
- import V from"styled-components";var{entries:D}=Object,p=e=>e.charAt(0).toUpperCase()+e.slice(1),P=(e="")=>e.match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g)?.map(t=>t.toLowerCase())?.join("-")??"";function s(e,t){return/(px|%)$/.test(e)||typeof e=="string"||e===0?e:t.spacing(e)}function o(e){return typeof e=="number"?`${e}px`:e}function a(e,t,...i){let r;for(let l=0;l<i.length;l++){let m=i[l];if(t){let g=e[`$${t}$${m}`];if(g){r=g;break}}let u=e[`$${m}`];if(u){r=u;break}}return r}function d(e,t,...i){return!!a(e,t,...i)}var R={};function S(e,t){if(R[t])return R[t];let i={};return D(e).forEach(([r,l])=>{r.split("|").forEach(m=>{i[m]=l})}),R[t]=i,i}var w=null;function W(e){return w||(w=new RegExp(`^\\$(${e.Breakpoints.keys.join("|")})(\\$.*)`),w)}function z(e,t){if(e){if([100,200,300,400,500,600,700,800,900].includes(e))return`color: ${t[`fill${e}`]};`;if(typeof e=="string")return t[e]?`color: ${t[e]};`:`color: ${e};`}return""}var F=e=>typeof e=="number"?`${e}px`:e;var{fromEntries:O}=Object,I=O(["display","align","vAlign","alignItems","alignContent","alignSelf","justifyContent","justifySelf","flexDirection","flexBasis","flexWrap","pointerEvents","cursor","position","opacity","backgroundColor","backgroundImage","backgroundSize","backgroundPosition","backgroundRepeat","transform","transformOrigin","textDecoration","textWrap","animation","fontWeight","gap","gridTemplateColumns","gridTemplateRows","wordBreak","whiteSpace","textOverflow","overflow","overflowX","overflowY","textAlign","transitionDelay","filter","listStyle","objectFit","objectPosition","willChange","boxSizing"].map(e=>[e,1])),M={inline:"display: inline",block:"display: block",flex:`
1
+ import{styled as V}from"styled-components";var{entries:D}=Object,p=e=>e.charAt(0).toUpperCase()+e.slice(1),P=(e="")=>e.match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g)?.map(t=>t.toLowerCase())?.join("-")??"";function s(e,t){return/(px|%)$/.test(e)||typeof e=="string"||e===0?e:t.spacing(e)}function o(e){return typeof e=="number"?`${e}px`:e}function a(e,t,...i){let r;for(let l=0;l<i.length;l++){let m=i[l];if(t){let g=e[`$${t}$${m}`];if(g){r=g;break}}let u=e[`$${m}`];if(u){r=u;break}}return r}function d(e,t,...i){return!!a(e,t,...i)}var R={};function S(e,t){if(R[t])return R[t];let i={};return D(e).forEach(([r,l])=>{r.split("|").forEach(m=>{i[m]=l})}),R[t]=i,i}var w=null;function W(e){return w||(w=new RegExp(`^\\$(${e.Breakpoints.keys.join("|")})(\\$.*)`),w)}function z(e,t){if(e){if([100,200,300,400,500,600,700,800,900].includes(e))return`color: ${t[`fill${e}`]};`;if(typeof e=="string")return t[e]?`color: ${t[e]};`:`color: ${e};`}return""}var F=e=>typeof e=="number"?`${e}px`:e;var{fromEntries:O}=Object,I=O(["display","align","vAlign","alignItems","alignContent","alignSelf","justifyContent","justifySelf","flexDirection","flexBasis","flexWrap","pointerEvents","cursor","position","opacity","backgroundColor","backgroundImage","backgroundSize","backgroundPosition","backgroundRepeat","transform","transformOrigin","textDecoration","textWrap","animation","fontWeight","gap","gridTemplateColumns","gridTemplateRows","wordBreak","whiteSpace","textOverflow","overflow","overflowX","overflowY","textAlign","transitionDelay","filter","listStyle","objectFit","objectPosition","willChange","boxSizing"].map(e=>[e,1])),M={inline:"display: inline",block:"display: block",flex:`
2
2
  display: flex;
3
3
  width: 100%;
4
4
  `,autoFlex:`
@@ -46,7 +46,7 @@ import V from"styled-components";var{entries:D}=Object,p=e=>e.charAt(0).toUpperC
46
46
  border-bottom-left-radius: ${o(i[3])};
47
47
  `:`border-radius: ${o(i)}`}},borderTopLeftRadius:{css:"border-top-left-radius",format:o},borderTopRightRadius:{css:"border-top-right-radius",format:o},borderBottomRightRadius:{css:"border-bottom-right-radius",format:o},borderBottomLeftRadius:{css:"border-bottom-left-radius",format:o},borderColor:{css:"border-color",withTheme:!0},borderImage:{css:"border-image",withTheme:!0},...[["border","border"],["borderTop","border-top"],["borderRight","border-right"],["borderBottom","border-bottom"],["borderLeft","border-left"]].reduce((e,[t,i])=>({...e,[t]:{css:(r,l,m)=>{let u=a(r,l,m?.length?[t,...m].join("$"):t),g=typeof u=="function"?u(r.theme):u;return/^\d/.test(g)?`${i}: ${g}`:`${i}: 1px solid ${g}`}}}),{}),transition:(e,t)=>{let i=a(e,t,"transition");return typeof i=="string"?`transition: ${i}`:"transition: all .2s"},"boxShadow|shadow":{css:"box-shadow",withTheme:!0},textShadow:{css:"text-shadow",withTheme:!0},color:{css:"color",withTheme:!0},fill:{css:"fill",withTheme:!0},fontSize:{css:"font-size",format:o},outline:{css:"outline",withTheme:!0}};var{keys:G}=Object;function T(e,t,i="div"){let r="",l=S(t,i),m=W(e.theme),u=-1,g=G(e);for(;++u<g.length;){let x=g[u];if(/^\$/.test(x)){let b=e[x];if(b!==!1){let H=x.match(m)||[],[,$,X]=H,C=(X||x).slice(1).split("$"),k=C[0],c=C.slice(1),B=l[k]||I[k]&&P(k);if(B){let f=B,j=f.withTheme&&typeof b=="function"?b(e.theme):b,Y=f.format?f.format(j,e.theme):j,h="";typeof f=="string"?h=f:typeof f=="function"?h=f(e,$,c):typeof f.css=="function"?h=f.css(e,$,c):h=f.css;let n="",v=h.match(/:/g);v&&v.length>1?n=h:v===null?n=`${h}: ${Y};`:n=`${h.replace(/;$/,"")};`,c.includes("important")&&(n=n.replace(/;/g," !important;")),c.includes("hover")&&!c.includes("focus")&&(n=`&:hover,&:focus { ${n} }`),c.includes("hover")&&c.includes("focus")&&(n=`&:hover { ${n} }`),c.includes("focus")&&(n=`&:focus { ${n} }`),c.includes("active")&&(n=`&:active { ${n} }`),c.includes("last")&&(n=`&:last-child { ${n} }`),c.includes("odd")&&(n=`&:nth-child(odd) { ${n} }`),c.includes("even")&&(n=`&:nth-child(even) { ${n} }`),$&&(n=`${e.theme.Breakpoints.getCssMedia(e.theme.Breakpoints[p($)])} { ${n} }`),r+=n}}}}return r}var y=e=>T(e,M),Z=V.div`
48
48
  ${e=>y(e)}
49
- `,A=Z;import U from"styled-components";var N={weight:"font-weight",size:{css:"font-size",format:F},color:{css:(e,t,i)=>{let r=i.includes("hover")?e.$color$hover:e.$color;return z(r,e.theme)}},tnum:'font-feature-settings: "tnum";letter-spacing:-0.04em;',breakWord:"word-break: break-word;",noBreak:"white-space: nowrap;",uppercase:"text-transform: uppercase;",serif:'font-family: "Times New Roman", Times, serif',"spacing|letterSpacing":"letter-spacing",left:"text-align: left;",right:"text-align: right;",center:"text-align: center;",lineThrough:"text-decoration: line-through",linearGradient:e=>`
49
+ `,A=Z;import{styled as U}from"styled-components";var N={weight:"font-weight",size:{css:"font-size",format:F},color:{css:(e,t,i)=>{let r=i.includes("hover")?e.$color$hover:e.$color;return z(r,e.theme)}},tnum:'font-feature-settings: "tnum";letter-spacing:-0.04em;',breakWord:"word-break: break-word;",noBreak:"white-space: nowrap;",uppercase:"text-transform: uppercase;",serif:'font-family: "Times New Roman", Times, serif',"spacing|letterSpacing":"letter-spacing",left:"text-align: left;",right:"text-align: right;",center:"text-align: center;",lineThrough:"text-decoration: line-through",linearGradient:e=>`
50
50
  -webkit-text-fill-color: transparent;
51
51
  text-fill-color: transparent;
52
52
  -webkit-background-clip: text;
package/dist/index.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/Div.js","../src/utils.js","../src/rules.js","../src/Text.js","../src/createUISystem.js","../src/index.js"],"sourcesContent":["import styled from 'styled-components';\nimport { cssWhiteList, divRules } from './rules';\nimport {\n getMediaPropRegex,\n getRuleIndex,\n kebabCase,\n upperFirst,\n} from './utils';\n\nconst { keys } = Object;\n\n/**\n * @example\n * <Div\n * $w={690}\n * $h={420}\n * $mobile$w={320}\n * />\n */\n\nexport function renderCss(props, rules, id = 'div') {\n let css = '';\n\n const ruleIndex = getRuleIndex(rules, id);\n const mediaPropRegex = getMediaPropRegex(props.theme);\n\n let i = -1;\n const propKeys = keys(props);\n while (++i < propKeys.length) {\n const propExt = propKeys[i];\n\n if (/^\\$/.test(propExt)) {\n const value = props[propExt];\n\n if (value !== false) {\n const match = propExt.match(mediaPropRegex) || [];\n const [, media, mediaPropExt] = match;\n\n const cleanProp = (mediaPropExt || propExt).slice(1);\n const parts = cleanProp.split('$');\n const prop = parts[0];\n const extensions = parts.slice(1);\n\n const foundRule =\n ruleIndex[prop] || (cssWhiteList[prop] && kebabCase(prop));\n\n if (foundRule) {\n const config = foundRule;\n const outputValue =\n config.withTheme && typeof value === 'function'\n ? value(props.theme)\n : value;\n const formattedValue = config.format\n ? config.format(outputValue, props.theme)\n : outputValue;\n\n let ruleCss = '';\n if (typeof config === 'string') {\n ruleCss = config;\n } else if (typeof config === 'function') {\n ruleCss = config(props, media, extensions);\n } else if (typeof config.css === 'function') {\n ruleCss = config.css(props, media, extensions);\n } else {\n ruleCss = config.css;\n }\n\n let cssString = '';\n const colons = ruleCss.match(/:/g);\n if (colons && colons.length > 1) {\n cssString = ruleCss;\n } else if (colons === null) {\n cssString = `${ruleCss}: ${formattedValue};`;\n } else {\n cssString = `${ruleCss.replace(/;$/, '')};`;\n }\n\n if (extensions.includes('important')) {\n cssString = cssString.replace(/;/g, ' !important;');\n }\n\n if (extensions.includes('hover') && !extensions.includes('focus')) {\n cssString = `&:hover,&:focus { ${cssString} }`;\n }\n\n if (extensions.includes('hover') && extensions.includes('focus')) {\n cssString = `&:hover { ${cssString} }`;\n }\n\n if (extensions.includes('focus')) {\n cssString = `&:focus { ${cssString} }`;\n }\n\n if (extensions.includes('active')) {\n cssString = `&:active { ${cssString} }`;\n }\n\n if (extensions.includes('last')) {\n cssString = `&:last-child { ${cssString} }`;\n }\n\n if (extensions.includes('odd')) {\n cssString = `&:nth-child(odd) { ${cssString} }`;\n }\n\n if (extensions.includes('even')) {\n cssString = `&:nth-child(even) { ${cssString} }`;\n }\n\n if (media) {\n const cssMedia = props.theme.Breakpoints.getCssMedia(\n props.theme.Breakpoints[upperFirst(media)],\n );\n cssString = `${cssMedia} { ${cssString} }`;\n }\n\n css += cssString;\n }\n }\n }\n }\n\n return css;\n}\n\nexport const divMixin = props => renderCss(props, divRules);\n\nconst Div = styled.div`\n ${props => divMixin(props)}\n`;\n\nexport default Div;\n","const { entries } = Object;\n\nexport const upperFirst = str => str.charAt(0).toUpperCase() + str.slice(1);\n\nexport const kebabCase = (string = '') =>\n string\n .match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g)\n ?.map(x => x.toLowerCase())\n ?.join('-') ?? '';\n\nexport function spacing(val, theme) {\n if (/(px|%)$/.test(val)) {\n return val;\n }\n\n if (typeof val === 'string') {\n return val;\n }\n\n if (val === 0) {\n return val;\n }\n\n return theme.spacing(val);\n}\n\nexport function pixelate(val) {\n if (typeof val === 'number') {\n return `${val}px`;\n }\n return val;\n}\n\nexport function getPropValue(props, media, ...propKeys) {\n let value;\n for (let i = 0; i < propKeys.length; i++) {\n const key = propKeys[i];\n if (media) {\n const mediaVal = props[`$${media}$${key}`];\n if (mediaVal) {\n value = mediaVal;\n break;\n }\n }\n const val = props[`$${key}`];\n if (val) {\n value = val;\n break;\n }\n }\n\n return value;\n}\n\nexport function isPropPresent(props, media, ...propKeys) {\n return !!getPropValue(props, media, ...propKeys);\n}\n\nconst ruleIndexes = {};\nexport function getRuleIndex(rules, id) {\n if (ruleIndexes[id]) return ruleIndexes[id];\n\n const index = {};\n entries(rules).forEach(([ruleProp, config]) => {\n ruleProp.split('|').forEach(prop => {\n index[prop] = config;\n });\n });\n ruleIndexes[id] = index;\n\n return index;\n}\n\nlet mediaPropRegex = null;\nexport function getMediaPropRegex(theme) {\n if (mediaPropRegex) return mediaPropRegex;\n\n mediaPropRegex = new RegExp(\n `^\\\\$(${theme.Breakpoints.keys.join('|')})(\\\\$.*)`,\n );\n\n return mediaPropRegex;\n}\n\nexport function colorMixin(color, theme) {\n if (color) {\n if ([100, 200, 300, 400, 500, 600, 700, 800, 900].includes(color)) {\n return `color: ${theme[`fill${color}`]};`;\n }\n\n if (typeof color === 'string') {\n if (theme[color]) {\n return `color: ${theme[color]};`;\n }\n return `color: ${color};`;\n }\n }\n\n return '';\n}\n\nexport const sizeFormatter = value => {\n if (typeof value === 'number') {\n return `${value}px`;\n }\n return value;\n};\n","/* eslint-disable no-nested-ternary */\nimport { getPropValue, isPropPresent, pixelate, spacing } from './utils';\n\nconst { fromEntries } = Object;\n\nexport const cssWhiteList = fromEntries(\n [\n 'display',\n 'align',\n 'vAlign',\n 'alignItems',\n 'alignContent',\n 'alignSelf',\n 'justifyContent',\n 'justifySelf',\n 'flexDirection',\n 'flexBasis',\n 'flexWrap',\n 'pointerEvents',\n 'cursor',\n 'position',\n 'opacity',\n 'backgroundColor',\n 'backgroundImage',\n 'backgroundSize',\n 'backgroundPosition',\n 'backgroundRepeat',\n 'transform',\n 'transformOrigin',\n 'textDecoration',\n 'textWrap',\n 'animation',\n 'fontWeight',\n 'gap',\n 'gridTemplateColumns',\n 'gridTemplateRows',\n 'wordBreak',\n 'whiteSpace',\n 'textOverflow',\n 'overflow',\n 'overflowX',\n 'overflowY',\n 'textAlign',\n 'transitionDelay',\n 'filter',\n 'listStyle',\n 'objectFit',\n 'objectPosition',\n 'willChange',\n 'boxSizing',\n ].map(prop => [prop, 1]),\n);\n\n// short hand rules for the div component\nexport const divRules = {\n inline: 'display: inline',\n block: 'display: block',\n flex: `\n display: flex;\n width: 100%;\n `,\n autoFlex: `\n display: flex;\n width: auto;\n `,\n grid: `\n display: grid;\n `,\n hide: 'display: none',\n inlineBlock: 'display: inline-block',\n inlineFlex: 'display: inline-flex',\n 'column|col': 'flex-direction: column;',\n row: 'flex-direction: row;',\n spaceBetween: 'justify-content: space-between;',\n wrap: 'flex-wrap: wrap;',\n innerCenter: (props, media) =>\n isPropPresent(props, media, 'flex', 'inlineFlex')\n ? `\n justify-content: center;\n align-items: center;\n `\n : `\n text-align: center;\n ${\n isPropPresent(props, media, 'h', 'height')\n ? `line-height: ${getPropValue(props, media, 'h', 'height')};`\n : ''\n }\n `,\n innerLeft: (props, media) =>\n isPropPresent(props, media, 'flex', 'inlineFlex')\n ? isPropPresent(props, media, 'column', 'col')\n ? 'align-items: flex-start;'\n : 'justify-content: flex-start;'\n : 'text-align: left;',\n innerRight: (props, media) =>\n isPropPresent(props, media, 'flex', 'inlineFlex')\n ? isPropPresent(props, media, 'column', 'col')\n ? 'align-items: flex-end;'\n : 'justify-content: flex-end;'\n : 'text-align: right;',\n innerTop: (props, media) => {\n return isPropPresent(props, media, 'flex', 'inlineFlex')\n ? isPropPresent(props, media, 'column', 'col')\n ? 'justify-content: flex-start;'\n : 'align-items: flex-start;'\n : '';\n },\n innerBottom: (props, media) =>\n isPropPresent(props, media, 'flex', 'inlineFlex')\n ? isPropPresent(props, media, 'column', 'col')\n ? 'justify-content: flex-end;'\n : 'align-items: flex-end;'\n : '',\n outerCenter: `\n margin-left: auto;\n margin-right: auto;\n `,\n grow: {\n css: 'flex-grow',\n format: Number,\n },\n shrink: {\n css: 'flex-shrink',\n },\n 'colReverse|columnReverse': {\n css: 'flex-direction: column-reverse;',\n },\n reverse: {\n css: 'flex-direction: row-reverse;',\n },\n\n // dimensions\n 'width|w': {\n css: 'width',\n format: pixelate,\n },\n 'minWidth|minW': {\n css: 'min-width',\n format: pixelate,\n },\n 'maxWidth|maxW': {\n css: (props, media) => `\n width: 100%;\n max-width: ${pixelate(getPropValue(props, media, 'maxWidth', 'maxW'))};\n `,\n },\n 'height|h': {\n css: 'height',\n format: pixelate,\n },\n 'minHeight|minH': {\n css: 'min-height',\n format: pixelate,\n },\n 'maxHeight|maxH': {\n css: (props, media) => `\n height: 100%;\n max-height: ${pixelate(getPropValue(props, media, 'maxHeight', 'maxH'))};\n `,\n },\n 'lineHeight|lineH|lh': {\n css: 'line-height',\n format: pixelate,\n },\n pointer: 'cursor: pointer;',\n\n // position\n relative: 'position: relative',\n absolute: 'position: absolute',\n fixed: 'position: fixed',\n static: 'position: static',\n cover: `\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n `,\n 'zIndex|z': {\n css: 'z-index',\n withTheme: true,\n },\n top: {\n css: 'top',\n format: pixelate,\n },\n right: {\n css: 'right',\n format: pixelate,\n },\n bottom: {\n css: 'bottom',\n format: pixelate,\n },\n left: {\n css: 'left',\n format: pixelate,\n },\n\n 'padding|p': {\n css: 'padding',\n format: spacing,\n },\n 'paddingTop|pt': {\n css: 'padding-top',\n format: spacing,\n },\n 'paddingRight|pr': {\n css: 'padding-right',\n format: spacing,\n },\n 'paddingBottom|pb': {\n css: 'padding-bottom',\n format: spacing,\n },\n 'paddingLeft|pl': {\n css: 'padding-left',\n format: spacing,\n },\n 'paddingX|px': {\n css: (props, media) => `\n padding-left: ${spacing(\n getPropValue(props, media, 'paddingX', 'px'),\n props.theme,\n )};\n padding-right: ${spacing(\n getPropValue(props, media, 'paddingX', 'px'),\n props.theme,\n )};\n `,\n },\n 'paddingY|py': {\n css: (props, media) => `\n padding-top: ${spacing(\n getPropValue(props, media, 'paddingY', 'py'),\n props.theme,\n )};\n padding-bottom: ${spacing(\n getPropValue(props, media, 'paddingY', 'py'),\n props.theme,\n )};\n `,\n },\n 'margin|m': {\n css: 'margin',\n format: spacing,\n },\n 'marginTop|mt': {\n css: 'margin-top',\n format: spacing,\n },\n 'marginRight|mr': {\n css: 'margin-right',\n format: spacing,\n },\n 'marginBottom|mb': {\n css: 'margin-bottom',\n format: spacing,\n },\n 'marginLeft|ml': {\n css: 'margin-left',\n format: spacing,\n },\n 'marginX|mx': {\n css: (props, media) => `\n margin-left: ${spacing(\n getPropValue(props, media, 'marginX', 'mx'),\n props.theme,\n )};\n margin-right: ${spacing(\n getPropValue(props, media, 'marginX', 'mx'),\n props.theme,\n )};\n `,\n },\n 'marginY|my': {\n css: (props, media) => `\n margin-top: ${spacing(\n getPropValue(props, media, 'marginY', 'my'),\n props.theme,\n )};\n margin-bottom: ${spacing(\n getPropValue(props, media, 'marginY', 'my'),\n props.theme,\n )};\n `,\n },\n\n // style\n 'background|bg': {\n css: 'background',\n withTheme: true,\n },\n 'borderRadius|radius': {\n css: (props, media) => {\n const radius = getPropValue(props, media, 'borderRadius', 'radius');\n if (Array.isArray(radius)) {\n return `\n border-top-left-radius: ${pixelate(radius[0])};\n border-top-right-radius: ${pixelate(radius[1])};\n border-bottom-right-radius: ${pixelate(radius[2])};\n border-bottom-left-radius: ${pixelate(radius[3])};\n `;\n }\n return `border-radius: ${pixelate(radius)}`;\n },\n },\n borderTopLeftRadius: {\n css: 'border-top-left-radius',\n format: pixelate,\n },\n borderTopRightRadius: {\n css: 'border-top-right-radius',\n format: pixelate,\n },\n borderBottomRightRadius: {\n css: 'border-bottom-right-radius',\n format: pixelate,\n },\n borderBottomLeftRadius: {\n css: 'border-bottom-left-radius',\n format: pixelate,\n },\n borderColor: {\n css: 'border-color',\n withTheme: true,\n },\n borderImage: {\n css: 'border-image',\n withTheme: true,\n },\n ...[\n ['border', 'border'],\n ['borderTop', 'border-top'],\n ['borderRight', 'border-right'],\n ['borderBottom', 'border-bottom'],\n ['borderLeft', 'border-left'],\n ].reduce(\n (rules, [jsKey, cssKey]) => ({\n ...rules,\n [jsKey]: {\n css: (props, media, extensions) => {\n const propValue = getPropValue(\n props,\n media,\n extensions?.length ? [jsKey, ...extensions].join('$') : jsKey,\n );\n\n // withTheme\n const value =\n typeof propValue === 'function'\n ? propValue(props.theme)\n : propValue;\n\n if (!/^\\d/.test(value)) {\n return `${cssKey}: 1px solid ${value}`;\n }\n return `${cssKey}: ${value}`;\n },\n },\n }),\n {},\n ),\n transition: (props, media) => {\n const value = getPropValue(props, media, 'transition');\n return typeof value === 'string'\n ? `transition: ${value}`\n : 'transition: all .2s';\n },\n 'boxShadow|shadow': {\n css: 'box-shadow',\n withTheme: true,\n },\n textShadow: {\n css: 'text-shadow',\n withTheme: true,\n },\n color: {\n css: 'color',\n withTheme: true,\n },\n fill: {\n css: 'fill',\n withTheme: true,\n },\n fontSize: {\n css: 'font-size',\n format: pixelate,\n },\n outline: {\n css: 'outline',\n withTheme: true,\n },\n};\n","import styled from 'styled-components';\nimport { colorMixin, sizeFormatter } from './utils';\n\nimport { divMixin, renderCss } from './Div';\n\nconst textRules = {\n weight: 'font-weight',\n size: {\n css: 'font-size',\n format: sizeFormatter,\n },\n color: {\n css: (props, media, extensions) => {\n const color = extensions.includes('hover')\n ? props.$color$hover\n : props.$color;\n\n return colorMixin(color, props.theme);\n },\n },\n tnum: 'font-feature-settings: \"tnum\";letter-spacing:-0.04em;',\n breakWord: 'word-break: break-word;',\n noBreak: 'white-space: nowrap;',\n uppercase: 'text-transform: uppercase;',\n serif: 'font-family: \"Times New Roman\", Times, serif',\n 'spacing|letterSpacing': `letter-spacing`,\n left: 'text-align: left;',\n right: 'text-align: right;',\n center: 'text-align: center;',\n lineThrough: 'text-decoration: line-through',\n // underline: 'text-decoration: underline;',\n linearGradient: props => `\n -webkit-text-fill-color: transparent;\n text-fill-color: transparent;\n -webkit-background-clip: text;\n background-clip: text;\n background-image: linear-gradient(${\n typeof props.$linearGradient === 'function'\n ? props.$linearGradient(props.theme)\n : props.$linearGradient\n });\n `,\n ellipsis: `\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 100%;\n `,\n underline: 'text-decoration: underline;',\n};\n\nconst Text = styled.p`\n ${props => divMixin(props)}\n ${props => {\n return renderCss(props, textRules, 'text');\n }}\n`;\n\nexport default Text;\n","import { upperFirst } from './utils';\n\nconst { keys, entries, fromEntries } = Object;\n\nconst getDefaultWidth = () => {\n return typeof window !== 'undefined' && typeof document !== 'undefined'\n ? document.body.clientWidth\n : 0;\n};\n\nconst createBreakpoints = breakpoints => {\n return {\n getCssMedia: ({ min, max }) => {\n if (min && max) {\n return `@media (min-width: ${min}px) and (max-width: ${max}px)`;\n }\n\n if (min) {\n return `@media (min-width: ${min}px)`;\n }\n\n return `@media (max-width: ${max}px)`;\n },\n keys: keys(breakpoints),\n ...fromEntries(\n entries(breakpoints).map(([key, { min, max }]) => {\n return [upperFirst(key), { min, max }];\n }),\n ),\n ...fromEntries(\n entries(breakpoints).map(([key, { min = 0, max = Infinity }]) => {\n return [\n `is${upperFirst(key)}`,\n (width = getDefaultWidth()) =>\n width !== 0 && width >= min && width <= max,\n ];\n }),\n ),\n };\n};\n\nconst createSpacing = spacingUnit => (multiplier, adjuster = 0, usePx = true) =>\n (multiplier || 1) * spacingUnit + adjuster + (usePx ? 'px' : 0);\n\nfunction createUISystem({ theme, breakpoints, spacingUnit }) {\n const Breakpoints = createBreakpoints(breakpoints);\n\n return {\n theme: {\n ...theme,\n Breakpoints,\n spacing: createSpacing(spacingUnit),\n },\n Breakpoints,\n };\n}\n\nexport default createUISystem;\n","import Div, { divMixin } from './Div';\nimport Text from './Text';\nimport createUISystem from './createUISystem';\n\nexport default Div;\n\nexport { createUISystem, Div, divMixin, Text };\n"],"mappings":"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","names":["styled","entries","upperFirst","str","kebabCase","string","x","spacing","val","theme","pixelate","getPropValue","props","media","propKeys","value","i","key","mediaVal","isPropPresent","ruleIndexes","getRuleIndex","rules","id","index","ruleProp","config","prop","mediaPropRegex","getMediaPropRegex","colorMixin","color","sizeFormatter","fromEntries","cssWhiteList","prop","divRules","props","media","isPropPresent","getPropValue","pixelate","spacing","radius","rules","jsKey","cssKey","extensions","propValue","value","keys","renderCss","props","rules","id","css","ruleIndex","getRuleIndex","mediaPropRegex","getMediaPropRegex","i","propKeys","propExt","value","match","media","mediaPropExt","parts","prop","extensions","foundRule","cssWhiteList","kebabCase","config","outputValue","formattedValue","ruleCss","cssString","colons","upperFirst","divMixin","divRules","Div","styled","Div_default","styled","textRules","sizeFormatter","props","media","extensions","color","colorMixin","Text","styled","divMixin","renderCss","Text_default","keys","entries","fromEntries","getDefaultWidth","createBreakpoints","breakpoints","min","max","key","upperFirst","width","createSpacing","spacingUnit","multiplier","adjuster","usePx","createUISystem","theme","Breakpoints","createUISystem_default","index_default","Div_default"]}
1
+ {"version":3,"sources":["../src/Div.js","../src/utils.js","../src/rules.js","../src/Text.js","../src/createUISystem.js","../src/index.js"],"sourcesContent":["import { styled } from 'styled-components';\nimport { cssWhiteList, divRules } from './rules';\nimport {\n getMediaPropRegex,\n getRuleIndex,\n kebabCase,\n upperFirst,\n} from './utils';\n\nconst { keys } = Object;\n\n/**\n * @example\n * <Div\n * $w={690}\n * $h={420}\n * $mobile$w={320}\n * />\n */\n\nexport function renderCss(props, rules, id = 'div') {\n let css = '';\n\n const ruleIndex = getRuleIndex(rules, id);\n const mediaPropRegex = getMediaPropRegex(props.theme);\n\n let i = -1;\n const propKeys = keys(props);\n while (++i < propKeys.length) {\n const propExt = propKeys[i];\n\n if (/^\\$/.test(propExt)) {\n const value = props[propExt];\n\n if (value !== false) {\n const match = propExt.match(mediaPropRegex) || [];\n const [, media, mediaPropExt] = match;\n\n const cleanProp = (mediaPropExt || propExt).slice(1);\n const parts = cleanProp.split('$');\n const prop = parts[0];\n const extensions = parts.slice(1);\n\n const foundRule =\n ruleIndex[prop] || (cssWhiteList[prop] && kebabCase(prop));\n\n if (foundRule) {\n const config = foundRule;\n const outputValue =\n config.withTheme && typeof value === 'function'\n ? value(props.theme)\n : value;\n const formattedValue = config.format\n ? config.format(outputValue, props.theme)\n : outputValue;\n\n let ruleCss = '';\n if (typeof config === 'string') {\n ruleCss = config;\n } else if (typeof config === 'function') {\n ruleCss = config(props, media, extensions);\n } else if (typeof config.css === 'function') {\n ruleCss = config.css(props, media, extensions);\n } else {\n ruleCss = config.css;\n }\n\n let cssString = '';\n const colons = ruleCss.match(/:/g);\n if (colons && colons.length > 1) {\n cssString = ruleCss;\n } else if (colons === null) {\n cssString = `${ruleCss}: ${formattedValue};`;\n } else {\n cssString = `${ruleCss.replace(/;$/, '')};`;\n }\n\n if (extensions.includes('important')) {\n cssString = cssString.replace(/;/g, ' !important;');\n }\n\n if (extensions.includes('hover') && !extensions.includes('focus')) {\n cssString = `&:hover,&:focus { ${cssString} }`;\n }\n\n if (extensions.includes('hover') && extensions.includes('focus')) {\n cssString = `&:hover { ${cssString} }`;\n }\n\n if (extensions.includes('focus')) {\n cssString = `&:focus { ${cssString} }`;\n }\n\n if (extensions.includes('active')) {\n cssString = `&:active { ${cssString} }`;\n }\n\n if (extensions.includes('last')) {\n cssString = `&:last-child { ${cssString} }`;\n }\n\n if (extensions.includes('odd')) {\n cssString = `&:nth-child(odd) { ${cssString} }`;\n }\n\n if (extensions.includes('even')) {\n cssString = `&:nth-child(even) { ${cssString} }`;\n }\n\n if (media) {\n const cssMedia = props.theme.Breakpoints.getCssMedia(\n props.theme.Breakpoints[upperFirst(media)],\n );\n cssString = `${cssMedia} { ${cssString} }`;\n }\n\n css += cssString;\n }\n }\n }\n }\n\n return css;\n}\n\nexport const divMixin = props => renderCss(props, divRules);\n\nconst Div = styled.div`\n ${props => divMixin(props)}\n`;\n\nexport default Div;\n","const { entries } = Object;\n\nexport const upperFirst = str => str.charAt(0).toUpperCase() + str.slice(1);\n\nexport const kebabCase = (string = '') =>\n string\n .match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g)\n ?.map(x => x.toLowerCase())\n ?.join('-') ?? '';\n\nexport function spacing(val, theme) {\n if (/(px|%)$/.test(val)) {\n return val;\n }\n\n if (typeof val === 'string') {\n return val;\n }\n\n if (val === 0) {\n return val;\n }\n\n return theme.spacing(val);\n}\n\nexport function pixelate(val) {\n if (typeof val === 'number') {\n return `${val}px`;\n }\n return val;\n}\n\nexport function getPropValue(props, media, ...propKeys) {\n let value;\n for (let i = 0; i < propKeys.length; i++) {\n const key = propKeys[i];\n if (media) {\n const mediaVal = props[`$${media}$${key}`];\n if (mediaVal) {\n value = mediaVal;\n break;\n }\n }\n const val = props[`$${key}`];\n if (val) {\n value = val;\n break;\n }\n }\n\n return value;\n}\n\nexport function isPropPresent(props, media, ...propKeys) {\n return !!getPropValue(props, media, ...propKeys);\n}\n\nconst ruleIndexes = {};\nexport function getRuleIndex(rules, id) {\n if (ruleIndexes[id]) return ruleIndexes[id];\n\n const index = {};\n entries(rules).forEach(([ruleProp, config]) => {\n ruleProp.split('|').forEach(prop => {\n index[prop] = config;\n });\n });\n ruleIndexes[id] = index;\n\n return index;\n}\n\nlet mediaPropRegex = null;\nexport function getMediaPropRegex(theme) {\n if (mediaPropRegex) return mediaPropRegex;\n\n mediaPropRegex = new RegExp(\n `^\\\\$(${theme.Breakpoints.keys.join('|')})(\\\\$.*)`,\n );\n\n return mediaPropRegex;\n}\n\nexport function colorMixin(color, theme) {\n if (color) {\n if ([100, 200, 300, 400, 500, 600, 700, 800, 900].includes(color)) {\n return `color: ${theme[`fill${color}`]};`;\n }\n\n if (typeof color === 'string') {\n if (theme[color]) {\n return `color: ${theme[color]};`;\n }\n return `color: ${color};`;\n }\n }\n\n return '';\n}\n\nexport const sizeFormatter = value => {\n if (typeof value === 'number') {\n return `${value}px`;\n }\n return value;\n};\n","/* eslint-disable no-nested-ternary */\nimport { getPropValue, isPropPresent, pixelate, spacing } from './utils';\n\nconst { fromEntries } = Object;\n\nexport const cssWhiteList = fromEntries(\n [\n 'display',\n 'align',\n 'vAlign',\n 'alignItems',\n 'alignContent',\n 'alignSelf',\n 'justifyContent',\n 'justifySelf',\n 'flexDirection',\n 'flexBasis',\n 'flexWrap',\n 'pointerEvents',\n 'cursor',\n 'position',\n 'opacity',\n 'backgroundColor',\n 'backgroundImage',\n 'backgroundSize',\n 'backgroundPosition',\n 'backgroundRepeat',\n 'transform',\n 'transformOrigin',\n 'textDecoration',\n 'textWrap',\n 'animation',\n 'fontWeight',\n 'gap',\n 'gridTemplateColumns',\n 'gridTemplateRows',\n 'wordBreak',\n 'whiteSpace',\n 'textOverflow',\n 'overflow',\n 'overflowX',\n 'overflowY',\n 'textAlign',\n 'transitionDelay',\n 'filter',\n 'listStyle',\n 'objectFit',\n 'objectPosition',\n 'willChange',\n 'boxSizing',\n ].map(prop => [prop, 1]),\n);\n\n// short hand rules for the div component\nexport const divRules = {\n inline: 'display: inline',\n block: 'display: block',\n flex: `\n display: flex;\n width: 100%;\n `,\n autoFlex: `\n display: flex;\n width: auto;\n `,\n grid: `\n display: grid;\n `,\n hide: 'display: none',\n inlineBlock: 'display: inline-block',\n inlineFlex: 'display: inline-flex',\n 'column|col': 'flex-direction: column;',\n row: 'flex-direction: row;',\n spaceBetween: 'justify-content: space-between;',\n wrap: 'flex-wrap: wrap;',\n innerCenter: (props, media) =>\n isPropPresent(props, media, 'flex', 'inlineFlex')\n ? `\n justify-content: center;\n align-items: center;\n `\n : `\n text-align: center;\n ${\n isPropPresent(props, media, 'h', 'height')\n ? `line-height: ${getPropValue(props, media, 'h', 'height')};`\n : ''\n }\n `,\n innerLeft: (props, media) =>\n isPropPresent(props, media, 'flex', 'inlineFlex')\n ? isPropPresent(props, media, 'column', 'col')\n ? 'align-items: flex-start;'\n : 'justify-content: flex-start;'\n : 'text-align: left;',\n innerRight: (props, media) =>\n isPropPresent(props, media, 'flex', 'inlineFlex')\n ? isPropPresent(props, media, 'column', 'col')\n ? 'align-items: flex-end;'\n : 'justify-content: flex-end;'\n : 'text-align: right;',\n innerTop: (props, media) => {\n return isPropPresent(props, media, 'flex', 'inlineFlex')\n ? isPropPresent(props, media, 'column', 'col')\n ? 'justify-content: flex-start;'\n : 'align-items: flex-start;'\n : '';\n },\n innerBottom: (props, media) =>\n isPropPresent(props, media, 'flex', 'inlineFlex')\n ? isPropPresent(props, media, 'column', 'col')\n ? 'justify-content: flex-end;'\n : 'align-items: flex-end;'\n : '',\n outerCenter: `\n margin-left: auto;\n margin-right: auto;\n `,\n grow: {\n css: 'flex-grow',\n format: Number,\n },\n shrink: {\n css: 'flex-shrink',\n },\n 'colReverse|columnReverse': {\n css: 'flex-direction: column-reverse;',\n },\n reverse: {\n css: 'flex-direction: row-reverse;',\n },\n\n // dimensions\n 'width|w': {\n css: 'width',\n format: pixelate,\n },\n 'minWidth|minW': {\n css: 'min-width',\n format: pixelate,\n },\n 'maxWidth|maxW': {\n css: (props, media) => `\n width: 100%;\n max-width: ${pixelate(getPropValue(props, media, 'maxWidth', 'maxW'))};\n `,\n },\n 'height|h': {\n css: 'height',\n format: pixelate,\n },\n 'minHeight|minH': {\n css: 'min-height',\n format: pixelate,\n },\n 'maxHeight|maxH': {\n css: (props, media) => `\n height: 100%;\n max-height: ${pixelate(getPropValue(props, media, 'maxHeight', 'maxH'))};\n `,\n },\n 'lineHeight|lineH|lh': {\n css: 'line-height',\n format: pixelate,\n },\n pointer: 'cursor: pointer;',\n\n // position\n relative: 'position: relative',\n absolute: 'position: absolute',\n fixed: 'position: fixed',\n static: 'position: static',\n cover: `\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n `,\n 'zIndex|z': {\n css: 'z-index',\n withTheme: true,\n },\n top: {\n css: 'top',\n format: pixelate,\n },\n right: {\n css: 'right',\n format: pixelate,\n },\n bottom: {\n css: 'bottom',\n format: pixelate,\n },\n left: {\n css: 'left',\n format: pixelate,\n },\n\n 'padding|p': {\n css: 'padding',\n format: spacing,\n },\n 'paddingTop|pt': {\n css: 'padding-top',\n format: spacing,\n },\n 'paddingRight|pr': {\n css: 'padding-right',\n format: spacing,\n },\n 'paddingBottom|pb': {\n css: 'padding-bottom',\n format: spacing,\n },\n 'paddingLeft|pl': {\n css: 'padding-left',\n format: spacing,\n },\n 'paddingX|px': {\n css: (props, media) => `\n padding-left: ${spacing(\n getPropValue(props, media, 'paddingX', 'px'),\n props.theme,\n )};\n padding-right: ${spacing(\n getPropValue(props, media, 'paddingX', 'px'),\n props.theme,\n )};\n `,\n },\n 'paddingY|py': {\n css: (props, media) => `\n padding-top: ${spacing(\n getPropValue(props, media, 'paddingY', 'py'),\n props.theme,\n )};\n padding-bottom: ${spacing(\n getPropValue(props, media, 'paddingY', 'py'),\n props.theme,\n )};\n `,\n },\n 'margin|m': {\n css: 'margin',\n format: spacing,\n },\n 'marginTop|mt': {\n css: 'margin-top',\n format: spacing,\n },\n 'marginRight|mr': {\n css: 'margin-right',\n format: spacing,\n },\n 'marginBottom|mb': {\n css: 'margin-bottom',\n format: spacing,\n },\n 'marginLeft|ml': {\n css: 'margin-left',\n format: spacing,\n },\n 'marginX|mx': {\n css: (props, media) => `\n margin-left: ${spacing(\n getPropValue(props, media, 'marginX', 'mx'),\n props.theme,\n )};\n margin-right: ${spacing(\n getPropValue(props, media, 'marginX', 'mx'),\n props.theme,\n )};\n `,\n },\n 'marginY|my': {\n css: (props, media) => `\n margin-top: ${spacing(\n getPropValue(props, media, 'marginY', 'my'),\n props.theme,\n )};\n margin-bottom: ${spacing(\n getPropValue(props, media, 'marginY', 'my'),\n props.theme,\n )};\n `,\n },\n\n // style\n 'background|bg': {\n css: 'background',\n withTheme: true,\n },\n 'borderRadius|radius': {\n css: (props, media) => {\n const radius = getPropValue(props, media, 'borderRadius', 'radius');\n if (Array.isArray(radius)) {\n return `\n border-top-left-radius: ${pixelate(radius[0])};\n border-top-right-radius: ${pixelate(radius[1])};\n border-bottom-right-radius: ${pixelate(radius[2])};\n border-bottom-left-radius: ${pixelate(radius[3])};\n `;\n }\n return `border-radius: ${pixelate(radius)}`;\n },\n },\n borderTopLeftRadius: {\n css: 'border-top-left-radius',\n format: pixelate,\n },\n borderTopRightRadius: {\n css: 'border-top-right-radius',\n format: pixelate,\n },\n borderBottomRightRadius: {\n css: 'border-bottom-right-radius',\n format: pixelate,\n },\n borderBottomLeftRadius: {\n css: 'border-bottom-left-radius',\n format: pixelate,\n },\n borderColor: {\n css: 'border-color',\n withTheme: true,\n },\n borderImage: {\n css: 'border-image',\n withTheme: true,\n },\n ...[\n ['border', 'border'],\n ['borderTop', 'border-top'],\n ['borderRight', 'border-right'],\n ['borderBottom', 'border-bottom'],\n ['borderLeft', 'border-left'],\n ].reduce(\n (rules, [jsKey, cssKey]) => ({\n ...rules,\n [jsKey]: {\n css: (props, media, extensions) => {\n const propValue = getPropValue(\n props,\n media,\n extensions?.length ? [jsKey, ...extensions].join('$') : jsKey,\n );\n\n // withTheme\n const value =\n typeof propValue === 'function'\n ? propValue(props.theme)\n : propValue;\n\n if (!/^\\d/.test(value)) {\n return `${cssKey}: 1px solid ${value}`;\n }\n return `${cssKey}: ${value}`;\n },\n },\n }),\n {},\n ),\n transition: (props, media) => {\n const value = getPropValue(props, media, 'transition');\n return typeof value === 'string'\n ? `transition: ${value}`\n : 'transition: all .2s';\n },\n 'boxShadow|shadow': {\n css: 'box-shadow',\n withTheme: true,\n },\n textShadow: {\n css: 'text-shadow',\n withTheme: true,\n },\n color: {\n css: 'color',\n withTheme: true,\n },\n fill: {\n css: 'fill',\n withTheme: true,\n },\n fontSize: {\n css: 'font-size',\n format: pixelate,\n },\n outline: {\n css: 'outline',\n withTheme: true,\n },\n};\n","import { styled } from 'styled-components';\nimport { colorMixin, sizeFormatter } from './utils';\n\nimport { divMixin, renderCss } from './Div';\n\nconst textRules = {\n weight: 'font-weight',\n size: {\n css: 'font-size',\n format: sizeFormatter,\n },\n color: {\n css: (props, media, extensions) => {\n const color = extensions.includes('hover')\n ? props.$color$hover\n : props.$color;\n\n return colorMixin(color, props.theme);\n },\n },\n tnum: 'font-feature-settings: \"tnum\";letter-spacing:-0.04em;',\n breakWord: 'word-break: break-word;',\n noBreak: 'white-space: nowrap;',\n uppercase: 'text-transform: uppercase;',\n serif: 'font-family: \"Times New Roman\", Times, serif',\n 'spacing|letterSpacing': `letter-spacing`,\n left: 'text-align: left;',\n right: 'text-align: right;',\n center: 'text-align: center;',\n lineThrough: 'text-decoration: line-through',\n // underline: 'text-decoration: underline;',\n linearGradient: props => `\n -webkit-text-fill-color: transparent;\n text-fill-color: transparent;\n -webkit-background-clip: text;\n background-clip: text;\n background-image: linear-gradient(${\n typeof props.$linearGradient === 'function'\n ? props.$linearGradient(props.theme)\n : props.$linearGradient\n });\n `,\n ellipsis: `\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 100%;\n `,\n underline: 'text-decoration: underline;',\n};\n\nconst Text = styled.p`\n ${props => divMixin(props)}\n ${props => {\n return renderCss(props, textRules, 'text');\n }}\n`;\n\nexport default Text;\n","import { upperFirst } from './utils';\n\nconst { keys, entries, fromEntries } = Object;\n\nconst getDefaultWidth = () => {\n return typeof window !== 'undefined' && typeof document !== 'undefined'\n ? document.body.clientWidth\n : 0;\n};\n\nconst createBreakpoints = breakpoints => {\n return {\n getCssMedia: ({ min, max }) => {\n if (min && max) {\n return `@media (min-width: ${min}px) and (max-width: ${max}px)`;\n }\n\n if (min) {\n return `@media (min-width: ${min}px)`;\n }\n\n return `@media (max-width: ${max}px)`;\n },\n keys: keys(breakpoints),\n ...fromEntries(\n entries(breakpoints).map(([key, { min, max }]) => {\n return [upperFirst(key), { min, max }];\n }),\n ),\n ...fromEntries(\n entries(breakpoints).map(([key, { min = 0, max = Infinity }]) => {\n return [\n `is${upperFirst(key)}`,\n (width = getDefaultWidth()) =>\n width !== 0 && width >= min && width <= max,\n ];\n }),\n ),\n };\n};\n\nconst createSpacing = spacingUnit => (multiplier, adjuster = 0, usePx = true) =>\n (multiplier || 1) * spacingUnit + adjuster + (usePx ? 'px' : 0);\n\nfunction createUISystem({ theme, breakpoints, spacingUnit }) {\n const Breakpoints = createBreakpoints(breakpoints);\n\n return {\n theme: {\n ...theme,\n Breakpoints,\n spacing: createSpacing(spacingUnit),\n },\n Breakpoints,\n };\n}\n\nexport default createUISystem;\n","import Div, { divMixin } from './Div';\nimport Text from './Text';\nimport createUISystem from './createUISystem';\n\nexport default Div;\n\nexport { createUISystem, Div, divMixin, Text };\n"],"mappings":"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","names":["styled","entries","upperFirst","str","kebabCase","string","x","spacing","val","theme","pixelate","getPropValue","props","media","propKeys","value","i","key","mediaVal","isPropPresent","ruleIndexes","getRuleIndex","rules","id","index","ruleProp","config","prop","mediaPropRegex","getMediaPropRegex","colorMixin","color","sizeFormatter","fromEntries","cssWhiteList","prop","divRules","props","media","isPropPresent","getPropValue","pixelate","spacing","radius","rules","jsKey","cssKey","extensions","propValue","value","keys","renderCss","props","rules","id","css","ruleIndex","getRuleIndex","mediaPropRegex","getMediaPropRegex","i","propKeys","propExt","value","match","media","mediaPropExt","parts","prop","extensions","foundRule","cssWhiteList","kebabCase","config","outputValue","formattedValue","ruleCss","cssString","colons","upperFirst","divMixin","divRules","Div","styled","Div_default","styled","textRules","sizeFormatter","props","media","extensions","color","colorMixin","Text","styled","divMixin","renderCss","Text_default","keys","entries","fromEntries","getDefaultWidth","createBreakpoints","breakpoints","min","max","key","upperFirst","width","createSpacing","spacingUnit","multiplier","adjuster","usePx","createUISystem","theme","Breakpoints","createUISystem_default","index_default","Div_default"]}
package/dist/metafile-cjs.json CHANGED
@@ -1 +1 @@
1
- {"inputs":{"src/utils.js":{"bytes":2169,"imports":[],"format":"esm"},"src/rules.js":{"bytes":8780,"imports":[{"path":"src/utils.js","kind":"import-statement","original":"./utils"}],"format":"esm"},"src/Div.js":{"bytes":3580,"imports":[{"path":"styled-components","kind":"import-statement","external":true},{"path":"src/rules.js","kind":"import-statement","original":"./rules"},{"path":"src/utils.js","kind":"import-statement","original":"./utils"}],"format":"esm"},"src/Text.js":{"bytes":1592,"imports":[{"path":"styled-components","kind":"import-statement","external":true},{"path":"src/utils.js","kind":"import-statement","original":"./utils"},{"path":"src/Div.js","kind":"import-statement","original":"./Div"}],"format":"esm"},"src/createUISystem.js":{"bytes":1443,"imports":[{"path":"src/utils.js","kind":"import-statement","original":"./utils"}],"format":"esm"},"src/index.js":{"bytes":183,"imports":[{"path":"src/Div.js","kind":"import-statement","original":"./Div"},{"path":"src/Text.js","kind":"import-statement","original":"./Text"},{"path":"src/createUISystem.js","kind":"import-statement","original":"./createUISystem"}],"format":"esm"}},"outputs":{"dist/index.cjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":29586},"dist/index.cjs":{"imports":[{"path":"styled-components","kind":"import-statement","external":true},{"path":"styled-components","kind":"import-statement","external":true}],"exports":["Div","Text","createUISystem","default","divMixin"],"entryPoint":"src/index.js","inputs":{"src/Div.js":{"bytesInOutput":1169},"src/utils.js":{"bytesInOutput":972},"src/rules.js":{"bytesInOutput":5313},"src/Text.js":{"bytesInOutput":1060},"src/createUISystem.js":{"bytesInOutput":601},"src/index.js":{"bytesInOutput":9}},"bytes":9201}}}
1
+ {"inputs":{"src/utils.js":{"bytes":2169,"imports":[],"format":"esm"},"src/rules.js":{"bytes":8780,"imports":[{"path":"src/utils.js","kind":"import-statement","original":"./utils"}],"format":"esm"},"src/Div.js":{"bytes":3584,"imports":[{"path":"styled-components","kind":"import-statement","external":true},{"path":"src/rules.js","kind":"import-statement","original":"./rules"},{"path":"src/utils.js","kind":"import-statement","original":"./utils"}],"format":"esm"},"src/Text.js":{"bytes":1596,"imports":[{"path":"styled-components","kind":"import-statement","external":true},{"path":"src/utils.js","kind":"import-statement","original":"./utils"},{"path":"src/Div.js","kind":"import-statement","original":"./Div"}],"format":"esm"},"src/createUISystem.js":{"bytes":1443,"imports":[{"path":"src/utils.js","kind":"import-statement","original":"./utils"}],"format":"esm"},"src/index.js":{"bytes":183,"imports":[{"path":"src/Div.js","kind":"import-statement","original":"./Div"},{"path":"src/Text.js","kind":"import-statement","original":"./Text"},{"path":"src/createUISystem.js","kind":"import-statement","original":"./createUISystem"}],"format":"esm"}},"outputs":{"dist/index.cjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":29604},"dist/index.cjs":{"imports":[{"path":"styled-components","kind":"import-statement","external":true},{"path":"styled-components","kind":"import-statement","external":true}],"exports":["Div","Text","createUISystem","default","divMixin"],"entryPoint":"src/index.js","inputs":{"src/Div.js":{"bytesInOutput":1179},"src/utils.js":{"bytesInOutput":972},"src/rules.js":{"bytesInOutput":5313},"src/Text.js":{"bytesInOutput":1070},"src/createUISystem.js":{"bytesInOutput":601},"src/index.js":{"bytesInOutput":9}},"bytes":9221}}}
package/dist/metafile-esm.json CHANGED
@@ -1 +1 @@
1
- {"inputs":{"src/utils.js":{"bytes":2169,"imports":[],"format":"esm"},"src/rules.js":{"bytes":8780,"imports":[{"path":"src/utils.js","kind":"import-statement","original":"./utils"}],"format":"esm"},"src/Div.js":{"bytes":3580,"imports":[{"path":"styled-components","kind":"import-statement","external":true},{"path":"src/rules.js","kind":"import-statement","original":"./rules"},{"path":"src/utils.js","kind":"import-statement","original":"./utils"}],"format":"esm"},"src/Text.js":{"bytes":1592,"imports":[{"path":"styled-components","kind":"import-statement","external":true},{"path":"src/utils.js","kind":"import-statement","original":"./utils"},{"path":"src/Div.js","kind":"import-statement","original":"./Div"}],"format":"esm"},"src/createUISystem.js":{"bytes":1443,"imports":[{"path":"src/utils.js","kind":"import-statement","original":"./utils"}],"format":"esm"},"src/index.js":{"bytes":183,"imports":[{"path":"src/Div.js","kind":"import-statement","original":"./Div"},{"path":"src/Text.js","kind":"import-statement","original":"./Text"},{"path":"src/createUISystem.js","kind":"import-statement","original":"./createUISystem"}],"format":"esm"}},"outputs":{"dist/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":29586},"dist/index.mjs":{"imports":[{"path":"styled-components","kind":"import-statement","external":true},{"path":"styled-components","kind":"import-statement","external":true}],"exports":["Div","Text","createUISystem","default","divMixin"],"entryPoint":"src/index.js","inputs":{"src/Div.js":{"bytesInOutput":1169},"src/utils.js":{"bytesInOutput":972},"src/rules.js":{"bytesInOutput":5313},"src/Text.js":{"bytesInOutput":1060},"src/createUISystem.js":{"bytesInOutput":601},"src/index.js":{"bytesInOutput":9}},"bytes":9201}}}
1
+ {"inputs":{"src/utils.js":{"bytes":2169,"imports":[],"format":"esm"},"src/rules.js":{"bytes":8780,"imports":[{"path":"src/utils.js","kind":"import-statement","original":"./utils"}],"format":"esm"},"src/Div.js":{"bytes":3584,"imports":[{"path":"styled-components","kind":"import-statement","external":true},{"path":"src/rules.js","kind":"import-statement","original":"./rules"},{"path":"src/utils.js","kind":"import-statement","original":"./utils"}],"format":"esm"},"src/Text.js":{"bytes":1596,"imports":[{"path":"styled-components","kind":"import-statement","external":true},{"path":"src/utils.js","kind":"import-statement","original":"./utils"},{"path":"src/Div.js","kind":"import-statement","original":"./Div"}],"format":"esm"},"src/createUISystem.js":{"bytes":1443,"imports":[{"path":"src/utils.js","kind":"import-statement","original":"./utils"}],"format":"esm"},"src/index.js":{"bytes":183,"imports":[{"path":"src/Div.js","kind":"import-statement","original":"./Div"},{"path":"src/Text.js","kind":"import-statement","original":"./Text"},{"path":"src/createUISystem.js","kind":"import-statement","original":"./createUISystem"}],"format":"esm"}},"outputs":{"dist/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":29604},"dist/index.mjs":{"imports":[{"path":"styled-components","kind":"import-statement","external":true},{"path":"styled-components","kind":"import-statement","external":true}],"exports":["Div","Text","createUISystem","default","divMixin"],"entryPoint":"src/index.js","inputs":{"src/Div.js":{"bytesInOutput":1179},"src/utils.js":{"bytesInOutput":972},"src/rules.js":{"bytesInOutput":5313},"src/Text.js":{"bytesInOutput":1070},"src/createUISystem.js":{"bytesInOutput":601},"src/index.js":{"bytesInOutput":9}},"bytes":9221}}}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@streamlinedfi/div",
3
- "version": "0.2.5",
3
+ "version": "0.2.6",
4
4
  "description": "Streamlined Div is a styled-components extension of the html div for building products with speed",
5
5
  "author": "Streamlined Finance",
6
6
  "repository": {