@animus-ui/core 0.1.1-beta.5 → 0.1.1-beta.9
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.
- package/CHANGELOG.md +32 -0
- package/README.md +1 -86
- package/dist/Animus.d.ts +63 -0
- package/dist/AnimusConfig.d.ts +8 -0
- package/dist/{utils/__fixtures__ → __fixtures__}/testConfig.d.ts +0 -0
- package/dist/compatTheme.d.ts +20 -0
- package/dist/config.d.ts +2193 -0
- package/dist/createAnimus.d.ts +1 -1
- package/dist/index.cjs.js +1 -1
- package/dist/index.d.ts +417 -997
- package/dist/index.esm.js +1 -1
- package/dist/legacy/compose.d.ts +2 -0
- package/dist/legacy/config.d.ts +85 -0
- package/dist/legacy/core.d.ts +12 -0
- package/dist/legacy/create.d.ts +2 -0
- package/dist/{internal → legacy}/createCss.d.ts +1 -1
- package/dist/legacy/createParser.d.ts +9 -0
- package/dist/{internal → legacy}/createStates.d.ts +1 -1
- package/dist/{styles → legacy}/createTransform.d.ts +1 -1
- package/dist/{internal → legacy}/createVariant.d.ts +1 -1
- package/dist/{utils → legacy}/responsive.d.ts +3 -2
- package/dist/properties/getStylePropNames.d.ts +1 -0
- package/dist/{utils/propNames.d.ts → properties/orderPropNames.d.ts} +1 -1
- package/dist/{utils → properties}/styledOptions.d.ts +0 -0
- package/dist/scales/lookupScaleValue.d.ts +3 -0
- package/dist/styles/createParser.d.ts +2 -2
- package/dist/styles/createPropertyStyle.d.ts +3 -0
- package/dist/styles/createStylist.d.ts +1 -1
- package/dist/styles/responsive.d.ts +14 -0
- package/dist/transforms/border.d.ts +1 -0
- package/dist/transforms/index.d.ts +2 -0
- package/dist/transforms/utils.d.ts +2 -0
- package/dist/types/config.d.ts +24 -62
- package/dist/types/properties.d.ts +4 -3
- package/dist/types/props.d.ts +1 -5
- package/dist/types/scales.d.ts +2 -0
- package/dist/types/shared.d.ts +4 -0
- package/dist/types/theme.d.ts +0 -16
- package/dist/types/utils.d.ts +1 -0
- package/package.json +5 -3
- package/dist/animusBuilder.d.ts +0 -81
- package/dist/configBuilder.d.ts +0 -11
- package/dist/deprecated/core.d.ts +0 -10
- package/dist/internal/compose.d.ts +0 -2
- package/dist/internal/create.d.ts +0 -2
- package/dist/props/baseConfig.d.ts +0 -588
- package/dist/props/baseScales.d.ts +0 -51
- package/dist/scales/createScaleLookup.d.ts +0 -5
- package/dist/utils/getStaticProperties.d.ts +0 -1
package/dist/index.esm.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{mapValues as r,omit as e,intersection as t,get as o,merge as p,pick as s,isEmpty as i,isObject as a,set as n,isString as d,isArray as c,isUndefined as l,identity as y,isNumber as g}from"lodash";import u from"@emotion/styled";const b=()=>[],m=["border","borderTop","borderBottom","borderLeft","borderRight","borderWidth","borderStyle","borderColor","background","flex","margin","padding","transition","gap","grid","gridArea","gridColumn","gridRow","gridTemplate","overflow","transition"],h=-1,f=1,R=1,w=(r,e)=>r<e?h:e<r?f:R,x=["_","xs","sm","md","lg","xl"],C=r=>`@media screen and (min-width: ${r}px)`,S={xs:480,sm:768,md:1024,lg:1200,xl:1440},v=(r,e,s,i,a)=>{const n=o(s,e);switch(typeof n){case"string":case"number":case"function":return Object.assign(r,i.styleFn(n,e,s));case"object":if(!a.mediaQueries)return;if(d=n,Array.isArray(d))return p(r,((r,e,t,o)=>{const p={},{styleFn:s,prop:i}=t,[a,...n]=r;return a&&Object.assign(p,s(a,i,e)),n.forEach(((r,t)=>{const a=o[t];a&&void 0!==r&&Object.assign(p,{[a]:s(r,i,e)})})),p})(n,s,i,a.mediaQueries.array));if(n&&(r=>t(Object.keys(r),x).length>0)(n))return p(r,((r,e,t,o)=>{const p={},{styleFn:s,prop:i}=t,{_:a,...n}=r;return a&&Object.assign(p,s(a,i,e)),Object.keys(o).forEach((r=>{const t=n[r];void 0!==t&&Object.assign(p,{[o[r]]:s(t,i,e)})})),p})(n,s,i,a.mediaQueries.map))}var d};function T(t){const p=(r=>Object.keys(r).sort(((e,t)=>{const{[e]:o,[t]:p}=r,{property:s,properties:i=[]}=o,{property:a,properties:n=[]}=p,d=m.includes(s),c=m.includes(a);if(d&&c){const r=i.length,e=n.length;if(s!==a)return w(m.indexOf(s),m.indexOf(a));if(s===a){if(0===r)return h;if(0===e)return f}return w(e,r)}return d?h:c?f:R})))(t),s={mediaQueries:null};return Object.assign(((i,a=!1)=>{const n={},{theme:d}=i;return s.mediaQueries||(s.mediaQueries=(e=>{if(void 0===e)return null;const{xs:t,sm:o,md:p,lg:s,xl:i}=e??{};return{map:r(e,C),array:[t,o,p,s,i].map(C)}})(d?.breakpoints??S)),a?Object.keys(i).forEach((r=>{const e=t[r];e?v(n,r,i,e,s):"theme"!==r&&Object.assign(n,{[r]:o(i,r)})})):p.forEach((r=>{const e=t[r];v(n,r,i,e,s)})),null!==s.mediaQueries?((r,t)=>{const o=e(r,t);return t.forEach((e=>{r[e]&&(o[e]=r[e])})),o})(n,s.mediaQueries.array):n}),{propNames:p,config:t})}const j=(r,e)=>{const t=Object.keys(r),o=Object.keys(e);return r=>{const e=[];return t.forEach((t=>{r[t]&&e.push(`${t}-${r[t]}`)})),o.forEach((t=>{r[t]&&e.push(t)})),e}},O=(r,e)=>{const t={},o={};return Object.entries(r).forEach((([r,p])=>{(e.includes(r)?o:t)[r]=p})),[t,o]},B=(r,e,t,o)=>{const{base:p}=e,{parser:a,getMediaSelectors:n,getActiveOverrides:d}=o,{theme:c}=t,l=Object.values(s(e,d(t))),y=n(t),[g,u]=O(a({...p,theme:c},!0),y);for(const e in g)r[e]=g[e];l.forEach((e=>{((r={},e,t,o,p,s)=>{const[a,n]=O(o({...r,theme:p},!0),s);for(const r in a)e[r]=a[r];s.forEach((r=>{const e=n[r];if(!e||i(e))return;t[r]||(t[r]={});const o=t[r];for(const r in e)o[r]=e[r]}))})(e,r,u,a,c,y)})),y.forEach((e=>{const t=u[e];i(t)||(r[e]=t)}))},k=(r,e={},t={},o={},p={})=>{const s=((r={},e={},t={},o)=>{const p={};return Object.entries(r).forEach((([r,e])=>{!o.includes(r)&&a(e)?n(p,[r,"base"],e):n(p,["primary","base",r],e)})),Object.entries(e).forEach((([r,{variants:e}])=>{Object.entries(e).forEach((([e,t])=>{const s=`${r}-${e}`;Object.entries(t).forEach((([r,e])=>{!o.includes(r)&&a(e)?n(p,[r,s],e):n(p,["primary",s,r],e)}))}))})),Object.entries(t).forEach((([r,e])=>{Object.entries(e).forEach((([e,t])=>{!o.includes(e)&&a(t)?n(p,[e,r],t):n(p,["primary",r,e],t)}))})),p})(e,t,o,r.propNames),i={parser:r,getMediaSelectors:({theme:r})=>{const e=r?.breakpoints??S;return["xs","sm","md","lg","xl"].map((r=>e[r]))},getActiveOverrides:j(t,o)};return e=>{const{vars:t}=e,o={...t};return Object.entries(s).forEach((([r,t={}])=>{"primary"===r?B(o,t,e,i):(o[r]={},B(o[r],t,e,i))})),B(o,{base:r(e)},e,i),o}};function W(r,e){const{transform:t=y,property:p,properties:s=[p],scale:i,variable:n}=e,g=(r=>d(r)?(e,t)=>o(t,["theme",r,e]):c(r)?r=>r:a(r)?e=>o(r,e):()=>{})(i),u=void 0===i||c(i);return{...e,prop:r,styleFn:(r,e,o)=>{const i={};if(l(r))return i;let a,d,c=!1;switch(typeof r){case"number":case"string":d=g(r,o),c=void 0!==d||u,a=d??r;break;case"function":o.theme&&(a=r(o.theme));break;default:return i}if(s.forEach((r=>{let e=a;switch(c&&!l(e)&&(e=t(e,r,o)),typeof e){case"number":case"string":return i[r]=e;case"object":return Object.assign(i,e)}})),n){let r=a;c&&!l(r)&&(r=t(r,p,o)),r&&"object"!=typeof r&&(i[n]=r)}return i}}}function L(r){const e={};for(const t in r)"string"==typeof t&&(e[t]=W(t,r[t]));return T(e)}class A{props={};parser={};groups=[];base={};statesConfig={};variants={};custom={};constructor(r,e,t,o,p,s,i){this.props=r,this.parser=e,this.groups=s,this.base=t,this.statesConfig=p,this.variants=o,this.custom=i}asComponent(r){const e=k(L({...this.parser.config,...this.custom}),this.base,this.variants,this.statesConfig,{});return u(r)(e)}build(){return k(L({...this.parser.config,...this.custom}),this.base,this.variants,this.statesConfig,{})}}class E extends A{constructor(r,e,t,o,p,s){super(r,e,t,o,p,s,{})}customProps(r){return new A(this.props,this.parser,this.base,this.variants,this.statesConfig,this.groups,r)}}class G extends E{constructor(r,e,t,o,p){super(r,e,t,o,p,[])}systemProps(r){return new E(this.props,this.parser,this.base,this.variants,this.statesConfig,Object.keys(r))}}class $ extends G{constructor(r,e,t,o){super(r,e,t,o,{})}states(r){return new G(this.props,this.parser,this.base,this.variants,r)}variant(r){const e=r.prop||"variant";return new $(this.props,this.parser,this.base,p(this.variants,{[e]:r}))}}class F extends ${constructor(r,e,t){super(r,e,t,{})}variant(r){const e=r.prop||"variant";return new $(this.props,this.parser,this.base,p(this.variants,{[e]:r}))}}class I extends F{constructor(r){super(r,L(r.props),{})}styles(r){return new F(this.props,this.parser,r)}}class H{#r={};#e={};constructor(r,e){this.#r=r||{},this.#e=e||{}}addGroup(r,e){const t={[r]:Object.keys(e)};return new H({...this.#r,...e},{...this.#e,...t})}build(){return new I({props:this.#r,groups:this.#e})}}const Q=()=>new H,z=r=>0===r?r:r<=1&&r>=-1?100*r+"%":`${r}px`,X=/(-?\d*\.?\d+)(%|\w*)/,Y=r=>{if(g(r))return z(r);if(r.includes("calc"))return r;const[e,t,o]=X.exec(r)||[];if(void 0===e)return r;const p=parseFloat(t);return o?`${p}${o}`:z(p)},D={max:"max-content",min:"min-content"},P=new RegExp(/^[0-9]*$/),M=r=>{var e;return`minmax(0, ${e=r,P.test(e)?`${r}fr`:o(D,r,r)})`},N=(r,e)=>{const t=M(r);return e>1?`repeat(${e}, ${t})`:t},_=r=>{const e=r.split(":");let t=["",0],o="";for(let r=0;r<e.length+1;r+=1){const p=o.length>0?" ":"",s=e[r];t?.[0]!==s?(t[0].length&&(o+=p+N(...t)),s&&(t=[s,1])):t[1]+=1}return o},q=r=>g(r)?N("1",r):_(r),J={justifySelf:{property:"justifySelf"},alignSelf:{property:"alignSelf"},gridArea:{property:"gridArea"},area:{property:"gridArea"}},K={justifyContent:{property:"justifyContent"},justifyItems:{property:"justifyItems"},alignItems:{property:"alignItems"},alignContent:{property:"alignContent"},...J},U={flexBasis:{property:"flexBasis"},flexShrink:{property:"flexShrink"},flexGrow:{property:"flexGrow"},order:{property:"order"}},V={flexDirection:{property:"flexDirection"},flexWrap:{property:"flexWrap"},flex:{property:"flex"},...K,...U},Z={gridColumn:{property:"gridColumn"},gridRow:{property:"gridRow"},gridColumnStart:{property:"gridColumnStart"},gridRowStart:{property:"gridRowStart"},gridColumnEnd:{property:"gridColumnEnd"},gridRowEnd:{property:"gridRowEnd"}},rr={gridAutoColumns:{property:"gridAutoColumns"},gridAutoRows:{property:"gridAutoRows"},gridTemplateColumns:{property:"gridTemplateColumns"},gridTemplateRows:{property:"gridTemplateRows"},gridTemplateAreas:{property:"gridTemplateAreas"},gridAutoFlow:{property:"gridAutoFlow"},gap:{property:"gap",scale:"spacing"},rowGap:{property:"rowGap",scale:"spacing"},columnGap:{property:"columnGap",scale:"spacing"},flow:{property:"gridAutoFlow",scale:{row:"row",column:"column",dense:"dense","column-dense":"column dense","row-dense":"row dense"}},cols:{property:"gridTemplateColumns",transform:q,scale:[]},rows:{property:"gridTemplateRows",transform:q,scale:[]},autoRows:{property:"gridAutoRows",transform:M},autoCols:{property:"gridAutoColumns",transform:M},alignAll:{property:"justifyContent",properties:["justifyContent","alignItems"]},...K,...Z},er={position:{property:"position"},inset:{property:"inset",properties:["top","right","bottom","left"],transform:Y},top:{property:"top",transform:Y},right:{property:"right",transform:Y},bottom:{property:"bottom",transform:Y},left:{property:"left",transform:Y},zIndex:{property:"zIndex"},opacity:{property:"opacity"}},tr={display:{property:"display"},overflow:{property:"overflow"},overflowX:{property:"overflowX"},overflowY:{property:"overflowY"},size:{property:"width",properties:["width","height"],transform:Y},width:{property:"width",transform:Y},minWidth:{property:"minWidth",transform:Y},maxWidth:{property:"maxWidth",transform:Y},height:{property:"height",transform:Y},minHeight:{property:"minHeight",transform:Y},maxHeight:{property:"maxHeight",transform:Y},verticalAlign:{property:"verticalAlign"},...J,...Z,...U},or={m:{property:"margin",scale:"spacing"},mx:{property:"margin",properties:["marginLeft","marginRight"],scale:"spacing"},my:{property:"margin",properties:["marginTop","marginBottom"],scale:"spacing"},mt:{property:"marginTop",scale:"spacing"},mb:{property:"marginBottom",scale:"spacing"},mr:{property:"marginRight",scale:"spacing"},ml:{property:"marginLeft",scale:"spacing"},p:{property:"padding",scale:"spacing"},px:{property:"padding",properties:["paddingLeft","paddingRight"],scale:"spacing"},py:{property:"padding",properties:["paddingTop","paddingBottom"],scale:"spacing"},pt:{property:"paddingTop",scale:"spacing"},pb:{property:"paddingBottom",scale:"spacing"},pr:{property:"paddingRight",scale:"spacing"},pl:{property:"paddingLeft",scale:"spacing"}},pr=Q().addGroup("space",or).addGroup("background",{background:{property:"background"},backgroundImage:{property:"backgroundImage"},backgroundSize:{property:"backgroundSize"},backgroundRepeat:{property:"backgroundRepeat"},backgroundPosition:{property:"backgroundPosition"}}).addGroup("layout",tr).addGroup("color",{color:{property:"color",scale:"colors"},textColor:{property:"color",scale:"colors"},bg:{property:"backgroundColor",scale:"colors"},borderColor:{property:"borderColor",scale:"colors"},borderColorX:{property:"borderColor",properties:["borderLeftColor","borderRightColor"],scale:"colors"},borderColorY:{property:"borderColor",properties:["borderTopColor","borderBottomColor"],scale:"colors"},borderColorLeft:{property:"borderLeftColor",scale:"colors"},borderColorRight:{property:"borderRightColor",scale:"colors"},borderColorTop:{property:"borderTopColor",scale:"colors"},borderColorBottom:{property:"borderBottomColor",scale:"colors"}}).addGroup("typography",{fontFamily:{property:"fontFamily",scale:"fontFamily"},fontWeight:{property:"fontWeight",scale:{400:400,600:600,700:700}},lineHeight:{property:"lineHeight",scale:"lineHeight",lineHeight:[1,1.5]},fontSize:{property:"fontSize",scale:{64:64,44:44,34:34,26:26,22:22,20:20,18:18,16:16,14:14}},letterSpacing:{property:"letterSpacing"},textAlign:{property:"textAlign"},fontStyle:{property:"fontStyle"},textDecoration:{property:"textDecoration"},textTransform:{property:"textTransform"},whiteSpace:{property:"whiteSpace"}}).addGroup("shadows",{boxShadow:{property:"boxShadow"},textShadow:{property:"textShadow"}}).addGroup("borders",{border:{property:"border",scale:"borders"},borderX:{property:"border",properties:["borderLeft","borderRight"],scale:"borders"},borderY:{property:"border",properties:["borderTop","borderBottom"],scale:"borders"},borderTop:{property:"borderTop",scale:"borders"},borderRight:{property:"borderRight",scale:"borders"},borderBottom:{property:"borderBottom",scale:"borders"},borderLeft:{property:"borderLeft",scale:"borders"},borderWidth:{property:"borderWidth"},borderWidthX:{property:"borderWidth",properties:["borderLeftWidth","borderRightWidth"]},borderWidthY:{property:"borderWidth",properties:["borderTopWidth","borderBottomWidth"]},borderWidthLeft:{property:"borderLeftWidth"},borderWidthRight:{property:"borderRightWidth"},borderWidthTop:{property:"borderTopWidth"},borderWidthBottom:{property:"borderBottomWidth"},borderRadius:{property:"borderRadius",scale:"radii"},borderRadiusLeft:{property:"borderRadius",properties:["borderTopLeftRadius","borderBottomLeftRadius"],scale:"radii"},borderRadiusTop:{property:"borderRadius",properties:["borderTopLeftRadius","borderTopRightRadius"],scale:"radii"},borderRadiusBottom:{property:"borderRadius",properties:["borderBottomLeftRadius","borderBottomRightRadius"],scale:"radii"},borderRadiusRight:{property:"borderRadius",properties:["borderTopRightRadius","borderBottomRightRadius"],scale:"radii"},borderRadiusTopLeft:{property:"borderTopLeftRadius",scale:"radii"},borderRadiusTopRight:{property:"borderTopRightRadius",scale:"radii"},borderRadiusBottomRight:{property:"borderBottomRightRadius",scale:"radii"},borderRadiusBottomLeft:{property:"borderBottomLeftRadius",scale:"radii"},borderStyle:{property:"borderStyle"},borderStyleX:{property:"borderStyle",properties:["borderLeftStyle","borderRightStyle"]},borderStyleY:{property:"borderStyle",properties:["borderTopStyle","borderBottomStyle"]},borderStyleLeft:{property:"borderLeftStyle"},borderStyleRight:{property:"borderRightStyle"},borderStyleTop:{property:"borderTopStyle"},borderStyleBottom:{property:"borderBottomStyle"}}).addGroup("positioning",er).addGroup("flex",V).addGroup("grid",rr).addGroup("mode",{mode:{property:"none",scale:"mode"}}).addGroup("vars",{vars:{property:"variables"}}),sr=pr.build();export{H as AnimusConfig,sr as animus,pr as coreConfig,Q as createAnimus,b as createScale,M as gridItem,q as gridItemRatio,_ as parseGridRatio,z as percentageOrAbsolute,N as repeatGridItem,Y as size};
|
|
1
|
+
import{isNumber as r,get as e,isArray as t,isObject as o,isString as s,isUndefined as i,identity as p,mapValues as a,omit as n,intersection as d,merge as c,pick as l,isEmpty as u,set as g,keys as y}from"lodash";import m from"@emotion/styled";const f=()=>[],b=r=>0===r?r:r<=1&&r>=-1?100*r+"%":`${r}px`,h=/(-?\d*\.?\d+)(%|\w*)/,R=e=>{if(r(e))return b(e);if(e.includes("calc"))return e;const[t,o,s]=h.exec(e)||[];if(void 0===t)return e;const i=parseFloat(o);return s?`${i}${s}`:b(i)},x={max:"max-content",min:"min-content"},w=new RegExp(/^[0-9]*$/),S=r=>{var t;return`minmax(0, ${t=r,w.test(t)?`${r}fr`:e(x,r,r)})`},v=(r,e)=>{const t=S(r);return e>1?`repeat(${e}, ${t})`:t},j=r=>{const e=r.split(":");let t=["",0],o="";for(let r=0;r<e.length+1;r+=1){const s=o.length>0?" ":"",i=e[r];t?.[0]!==i?(t[0].length&&(o+=s+v(...t)),i&&(t=[i,1])):t[1]+=1}return o},C=e=>r(e)?v("1",e):j(e),O=(r,e)=>"number"==typeof r?e(r):r,T=r=>O(r,(r=>`${r}px`)),k=r=>O(r,(r=>`${r}px solid currentColor`)),E={spacing:[0,4,8,12,16,24,32,40,48,64,96],fontSize:[64,44,34,26,22,20,18,16,14],lineHeight:{body:1.5,heading:1},fontWeight:[400,600,700],fontFamily:{body:"Verdana, sans-serif",heading:"Verdana, Lato, sans-serif",monospace:"monospace"},radii:[2,4,6,8],borders:[1,2,3],colors:{},modes:{},mode:void 0},W=(r,i,p)=>{if(t(i))return r;if(o(i))return e(i,r);if(s(i)){const o=e(p,i,e(E,i));if(!o)return;return t(o)?r:e(o,r)}},B=(r,e,o)=>{const s={},{transform:a=p,property:n,properties:d=[n],scale:c,variable:l}=o,u=void 0===c||t(c);if(i(r))return s;let g,y,m=!1;switch(typeof r){case"number":case"string":y=W(r,c,e?.theme),m=void 0!==y||u,g=y??r;break;case"function":e.theme&&(g=r(e.theme));break;default:return s}if(d.forEach((r=>{let t=g;switch(m&&!i(t)&&(t=a(t,r,e)),typeof t){case"number":case"string":return s[r]=t;case"object":return Object.assign(s,t)}})),l){let r=g;m&&!i(r)&&(r=a(r,n,e)),r&&"object"!=typeof r&&(s[l]=r)}return s},L=["border","borderTop","borderBottom","borderLeft","borderRight","borderWidth","borderStyle","borderColor","background","flex","margin","padding","transition","gap","grid","gridArea","gridColumn","gridRow","gridTemplate","overflow","transition"],A=-1,G=1,Q=1,$=(r,e)=>r<e?A:e<r?G:Q,F=r=>Object.keys(r).sort(((e,t)=>{const{[e]:o,[t]:s}=r,{property:i,properties:p=[]}=o,{property:a,properties:n=[]}=s,d=L.includes(i),c=L.includes(a);if(d&&c){const r=p.length,e=n.length;if(i!==a)return $(L.indexOf(i),L.indexOf(a));if(i===a){if(0===r)return A;if(0===e)return G}return $(e,r)}return d?A:c?G:Q})),H=["_","xs","sm","md","lg","xl"],z=r=>`@media screen and (min-width: ${r}px)`,I={xs:480,sm:768,md:1024,lg:1200,xl:1440},X=(r,t,o,s,i)=>{const p=e(o,t);switch(typeof p){case"string":case"number":case"function":return Object.assign(r,B(p,o,s));case"object":if(!i.mediaQueries)return;if(a=p,Array.isArray(a))return c(r,((r,e,t,o)=>{const s={},[i,...p]=r;return i&&Object.assign(s,B(i,e,t)),p.forEach(((r,i)=>{const p=o[i];p&&void 0!==r&&Object.assign(s,{[p]:B(r,e,t)})})),s})(p,o,s,i.mediaQueries.array));if(p&&(r=>d(Object.keys(r),H).length>0)(p))return c(r,((r,e,t,o)=>{const s={},{_:i,...p}=r;return i&&Object.assign(s,B(i,e,t)),Object.keys(o).forEach((r=>{const i=p[r];void 0!==i&&Object.assign(s,{[o[r]]:B(i,e,t)})})),s})(p,o,s,i.mediaQueries.map))}var a};function Y(r){const t=F(r),o={mediaQueries:null};return Object.assign(((s,i=!1)=>{const p={},{theme:d}=s;return null===o.mediaQueries&&(o.mediaQueries=(r=>{if(void 0===r)return null;const{xs:e,sm:t,md:o,lg:s,xl:i}=r??{};return{map:a(r,z),array:[e,t,o,s,i].map(z)}})(d?.breakpoints??I)),i?Object.keys(s).forEach((t=>{const i=r[t];i?X(p,t,s,i,o):"theme"!==t&&Object.assign(p,{[t]:e(s,t)})})):t.forEach((e=>{const t=r[e];X(p,e,s,t,o)})),null!==o.mediaQueries?((r,e)=>{const t=n(r,e);return e.forEach((e=>{r[e]&&(t[e]=r[e])})),t})(p,o.mediaQueries.array):p}),{propNames:t,config:r})}const D=(r,e)=>{const t=Object.keys(r),o=Object.keys(e);return r=>{const e=[];return t.forEach((t=>{r[t]&&e.push(`${t}-${r[t]}`)})),o.forEach((t=>{r[t]&&e.push(t)})),e}},N=(r,e)=>{const t={},o={};return Object.entries(r).forEach((([r,s])=>{(e.includes(r)?o:t)[r]=s})),[t,o]},V=(r,e,t,o)=>{const{base:s}=e,{parser:i,getMediaSelectors:p,getActiveOverrides:a}=o,{theme:n}=t,d=Object.values(l(e,a(t))),c=p(t),[g,y]=N(i({...s,theme:n},!0),c);for(const e in g)r[e]=g[e];d.forEach((e=>{((r={},e,t,o,s,i)=>{const[p,a]=N(o({...r,theme:s},!0),i);for(const r in p)e[r]=p[r];i.forEach((r=>{const e=a[r];if(!e||u(e))return;t[r]||(t[r]={});const o=t[r];for(const r in e)o[r]=e[r]}))})(e,r,y,i,n,c)})),c.forEach((e=>{const t=y[e];u(t)||(r[e]=t)}))},_=(r,e={},t={},s={})=>{const i=((r={},e={},t={},s)=>{const i={};return Object.entries(r).forEach((([r,e])=>{!s.includes(r)&&o(e)?g(i,[r,"base"],e):g(i,["primary","base",r],e)})),Object.entries(e).forEach((([r,{variants:e}])=>{Object.entries(e).forEach((([e,t])=>{const p=`${r}-${e}`;Object.entries(t).forEach((([r,e])=>{!s.includes(r)&&o(e)?g(i,[r,p],e):g(i,["primary",p,r],e)}))}))})),Object.entries(t).forEach((([r,e])=>{Object.entries(e).forEach((([e,t])=>{!s.includes(e)&&o(t)?g(i,[e,r],t):g(i,["primary",r,e],t)}))})),i})(e,t,s,r.propNames),p={parser:r,getMediaSelectors:({theme:r})=>{const e=r?.breakpoints??I;return["xs","sm","md","lg","xl"].map((r=>e[r]))},getActiveOverrides:D(t,s)};return e=>{const{vars:t}=e,o={...t};return Object.entries(i).forEach((([r,t={}])=>{"primary"===r?V(o,t,e,p):(o[r]={},V(o[r],t,e,p))})),V(o,{base:r(e)},e,p),o}};class M{propRegistry={};groupRegistry={};parser={};baseStyles={};statesConfig={};variants={};activeGroups={};custom={};constructor(r,e,t,o,s,i,p,a){this.propRegistry=r,this.groupRegistry=e,this.parser=t,this.baseStyles=o,this.variants=s,this.statesConfig=i,this.activeGroups=p,this.custom=a}asComponent(r){const e=_(Y({...this.parser.config,...this.custom}),this.baseStyles,this.variants,this.statesConfig);return m(r)(e)}build(){return _(Y({...this.parser.config,...this.custom}),this.baseStyles,this.variants,this.statesConfig)}}class P extends M{constructor(r,e,t,o,s,i,p){super(r,e,t,o,s,i,p,{})}props(r){return new M(this.propRegistry,this.groupRegistry,this.parser,this.baseStyles,this.variants,this.statesConfig,this.activeGroups,r)}}class q extends P{constructor(r,e,t,o,s,i){super(r,e,t,o,s,i,{})}groups(r){return new P(this.propRegistry,this.groupRegistry,this.parser,this.baseStyles,this.variants,this.statesConfig,r)}}class J extends q{constructor(r,e,t,o,s){super(r,e,t,o,s,{})}states(r){return new q(this.propRegistry,this.groupRegistry,this.parser,this.baseStyles,this.variants,r)}variant(r){const e=r.prop||"variant";return new J(this.propRegistry,this.groupRegistry,this.parser,this.baseStyles,c(this.variants,{[e]:r}))}}class K extends J{constructor(r,e,t,o){super(r,e,t,o,{})}variant(r){const e=r.prop||"variant";return new J(this.propRegistry,this.groupRegistry,this.parser,this.baseStyles,c(this.variants,{[e]:r}))}}class U extends K{constructor(r,e){super(r,e,Y(r),{})}styles(r){return new K(this.propRegistry,this.groupRegistry,this.parser,r)}}class Z{#r={};#e={};constructor(r,e){this.#r=r||{},this.#e=e||{}}addGroup(r,e){const t={[r]:Object.keys(e)};return new Z({...this.#r,...e},{...this.#e,...t})}build(){const r=this.#r,e=this.#e;return new U(r,e)}}const rr=()=>new Z,er={border:{property:"border",scale:"borders",transform:k},borderX:{property:"border",properties:["borderLeft","borderRight"],scale:"borders",transform:k},borderY:{property:"border",properties:["borderTop","borderBottom"],scale:"borders",transform:k},borderTop:{property:"borderTop",scale:"borders",transform:k},borderRight:{property:"borderRight",scale:"borders",transform:k},borderBottom:{property:"borderBottom",scale:"borders",transform:k},borderLeft:{property:"borderLeft",scale:"borders",transform:k},borderWidth:{property:"borderWidth"},borderWidthX:{property:"borderWidth",properties:["borderLeftWidth","borderRightWidth"]},borderWidthY:{property:"borderWidth",properties:["borderTopWidth","borderBottomWidth"]},borderWidthLeft:{property:"borderLeftWidth"},borderWidthRight:{property:"borderRightWidth"},borderWidthTop:{property:"borderTopWidth"},borderWidthBottom:{property:"borderBottomWidth"},borderRadius:{property:"borderRadius",scale:"radii",transform:T},borderRadiusLeft:{property:"borderRadius",properties:["borderTopLeftRadius","borderBottomLeftRadius"],scale:"radii",transform:T},borderRadiusTop:{property:"borderRadius",properties:["borderTopLeftRadius","borderTopRightRadius"],scale:"radii",transform:T},borderRadiusBottom:{property:"borderRadius",properties:["borderBottomLeftRadius","borderBottomRightRadius"],scale:"radii",transform:T},borderRadiusRight:{property:"borderRadius",properties:["borderTopRightRadius","borderBottomRightRadius"],scale:"radii",transform:T},borderRadiusTopLeft:{property:"borderTopLeftRadius",scale:"radii",transform:T},borderRadiusTopRight:{property:"borderTopRightRadius",scale:"radii",transform:T},borderRadiusBottomRight:{property:"borderBottomRightRadius",scale:"radii",transform:T},borderRadiusBottomLeft:{property:"borderBottomLeftRadius",scale:"radii",transform:T},borderStyle:{property:"borderStyle"},borderStyleX:{property:"borderStyle",properties:["borderLeftStyle","borderRightStyle"]},borderStyleY:{property:"borderStyle",properties:["borderTopStyle","borderBottomStyle"]},borderStyleLeft:{property:"borderLeftStyle"},borderStyleRight:{property:"borderRightStyle"},borderStyleTop:{property:"borderTopStyle"},borderStyleBottom:{property:"borderBottomStyle"}},tr={gap:{property:"gap",scale:"spacing"},rowGap:{property:"rowGap",scale:"spacing"},columnGap:{property:"columnGap",scale:"spacing"}},or={justifySelf:{property:"justifySelf"},alignSelf:{property:"alignSelf"},gridArea:{property:"gridArea"},area:{property:"gridArea"}},sr={justifyContent:{property:"justifyContent"},justifyItems:{property:"justifyItems"},alignItems:{property:"alignItems"},alignContent:{property:"alignContent"},...or},ir={flexBasis:{property:"flexBasis"},flexShrink:{property:"flexShrink"},flexGrow:{property:"flexGrow"},order:{property:"order"}},pr={flexDirection:{property:"flexDirection"},flexWrap:{property:"flexWrap"},flex:{property:"flex"},...sr,...ir,...tr},ar={gridColumn:{property:"gridColumn"},gridRow:{property:"gridRow"},gridColumnStart:{property:"gridColumnStart"},gridRowStart:{property:"gridRowStart"},gridColumnEnd:{property:"gridColumnEnd"},gridRowEnd:{property:"gridRowEnd"}},nr={gridAutoColumns:{property:"gridAutoColumns"},gridAutoRows:{property:"gridAutoRows"},gridTemplateColumns:{property:"gridTemplateColumns"},gridTemplateRows:{property:"gridTemplateRows"},gridTemplateAreas:{property:"gridTemplateAreas"},gridAutoFlow:{property:"gridAutoFlow"},flow:{property:"gridAutoFlow",scale:[]},cols:{property:"gridTemplateColumns",transform:C,scale:[]},rows:{property:"gridTemplateRows",transform:C,scale:[]},autoRows:{property:"gridAutoRows",transform:S},autoCols:{property:"gridAutoColumns",transform:S},alignAll:{property:"justifyContent",properties:["justifyContent","alignItems"]},...sr,...ar,...tr},dr={position:{property:"position"},inset:{property:"inset",properties:["top","right","bottom","left"],transform:R},top:{property:"top",transform:R},right:{property:"right",transform:R},bottom:{property:"bottom",transform:R},left:{property:"left",transform:R},zIndex:{property:"zIndex"},opacity:{property:"opacity"}},cr={display:{property:"display"},overflow:{property:"overflow"},overflowX:{property:"overflowX"},overflowY:{property:"overflowY"},size:{property:"width",properties:["width","height"],transform:R},width:{property:"width",transform:R},minWidth:{property:"minWidth",transform:R},maxWidth:{property:"maxWidth",transform:R},height:{property:"height",transform:R},minHeight:{property:"minHeight",transform:R},maxHeight:{property:"maxHeight",transform:R},verticalAlign:{property:"verticalAlign"},...or,...ar,...ir},lr={m:{property:"margin",scale:"spacing"},mx:{property:"margin",properties:["marginLeft","marginRight"],scale:"spacing"},my:{property:"margin",properties:["marginTop","marginBottom"],scale:"spacing"},mt:{property:"marginTop",scale:"spacing"},mb:{property:"marginBottom",scale:"spacing"},mr:{property:"marginRight",scale:"spacing"},ml:{property:"marginLeft",scale:"spacing"},p:{property:"padding",scale:"spacing"},px:{property:"padding",properties:["paddingLeft","paddingRight"],scale:"spacing"},py:{property:"padding",properties:["paddingTop","paddingBottom"],scale:"spacing"},pt:{property:"paddingTop",scale:"spacing"},pb:{property:"paddingBottom",scale:"spacing"},pr:{property:"paddingRight",scale:"spacing"},pl:{property:"paddingLeft",scale:"spacing"}},ur=rr().addGroup("flex",pr).addGroup("grid",nr).addGroup("mode",{mode:{property:"none",scale:"mode"}}).addGroup("vars",{vars:{property:"variables"}}).addGroup("space",lr).addGroup("color",{color:{property:"color",scale:"colors"},textColor:{property:"color",scale:"colors"},bg:{property:"backgroundColor",scale:"colors"},borderColor:{property:"borderColor",scale:"colors"},borderColorX:{property:"borderColor",properties:["borderLeftColor","borderRightColor"],scale:"colors"},borderColorY:{property:"borderColor",properties:["borderTopColor","borderBottomColor"],scale:"colors"},borderColorLeft:{property:"borderLeftColor",scale:"colors"},borderColorRight:{property:"borderRightColor",scale:"colors"},borderColorTop:{property:"borderTopColor",scale:"colors"},borderColorBottom:{property:"borderBottomColor",scale:"colors"}}).addGroup("layout",cr).addGroup("borders",er).addGroup("shadows",{boxShadow:{property:"boxShadow"},textShadow:{property:"textShadow"}}).addGroup("background",{background:{property:"background"},backgroundImage:{property:"backgroundImage"},backgroundSize:{property:"backgroundSize"},backgroundRepeat:{property:"backgroundRepeat"},backgroundPosition:{property:"backgroundPosition"}}).addGroup("typography",{fontFamily:{property:"fontFamily",scale:"fontFamily"},fontWeight:{property:"fontWeight",scale:"fontWeight"},lineHeight:{property:"lineHeight",scale:"lineHeight",lineHeight:"lineHeight"},fontSize:{property:"fontSize",scale:"fontSize"},letterSpacing:{property:"letterSpacing"},textAlign:{property:"textAlign"},fontStyle:{property:"fontStyle"},textDecoration:{property:"textDecoration"},textTransform:{property:"textTransform"},whiteSpace:{property:"whiteSpace"}}).addGroup("positioning",dr);ur.build();const gr=(r,e)=>l(r,y(r).filter((r=>!e.includes(r)))),yr=["_","xs","sm","md","lg","xl"],mr=r=>`@media screen and (min-width: ${r}px)`,fr={xs:480,sm:768,md:1024,lg:1200,xl:1440},br=(r,t,o,s,i)=>{const p=e(o,t);switch(typeof p){case"string":case"number":case"function":return Object.assign(r,s.styleFn(p,t,o));case"object":if(!i.mediaQueries)return;if(a=p,Array.isArray(a))return c(r,((r,e,t,o)=>{const s={},{styleFn:i,prop:p}=t,[a,...n]=r;return a&&Object.assign(s,i(a,p,e)),n.forEach(((r,t)=>{const a=o[t];a&&void 0!==r&&Object.assign(s,{[a]:i(r,p,e)})})),s})(p,o,s,i.mediaQueries.array));if(p&&(r=>d(Object.keys(r),yr).length>0)(p))return c(r,((r,e,t,o)=>{const s={},{styleFn:i,prop:p}=t,{_:a,...n}=r;return a&&Object.assign(s,i(a,p,e)),Object.keys(o).forEach((r=>{const t=n[r];void 0!==t&&Object.assign(s,{[o[r]]:i(t,p,e)})})),s})(p,o,s,i.mediaQueries.map))}var a};function hr(r){const t=F(r),o={mediaQueries:null};return Object.assign(((s,i=!1)=>{const p={},{theme:d}=s;return null===o.mediaQueries&&(o.mediaQueries=(r=>{if(void 0===r)return null;const{xs:e,sm:t,md:o,lg:s,xl:i}=r??{};return{map:a(r,mr),array:[e,t,o,s,i].map(mr)}})(d?.breakpoints??fr)),i?Object.keys(s).forEach((t=>{const i=r[t];i?br(p,t,s,i,o):"theme"!==t&&Object.assign(p,{[t]:e(s,t)})})):t.forEach((e=>{const t=r[e];br(p,e,s,t,o)})),null!==o.mediaQueries?((r,e)=>{const t=n(r,e);return e.forEach((e=>{r[e]&&(t[e]=r[e])})),t})(p,o.mediaQueries.array):p}),{propNames:t,config:r})}function Rr(r,e){const{transform:o=p,property:s,properties:a=[s],scale:n,variable:d}=e,c=void 0===n||t(n);return{...e,prop:r,styleFn:(r,e,t)=>{const p={};if(i(r))return p;let l,u,g=!1;switch(typeof r){case"number":case"string":u=W(r,n,t.theme),g=void 0!==u||c,l=u??r;break;case"function":t.theme&&(l=r(t.theme));break;default:return p}if(a.forEach((r=>{let e=l;switch(g&&!i(e)&&(e=o(e,r,t)),typeof e){case"number":case"string":return p[r]=e;case"object":return Object.assign(p,e)}})),d){let r=l;g&&!i(r)&&(r=o(r,s,t)),r&&"object"!=typeof r&&(p[d]=r)}return p}}}function xr(r){const e={};for(const t in r)"string"==typeof t&&(e[t]=Rr(t,r[t]));return hr(e)}function wr(r){const e=xr(r),t=e.propNames;return r=>{let s;const i=Object.keys(r).filter((e=>!t.includes(e)&&o(r[e]))),p=gr(r,["theme",...i,...t]);return({theme:o})=>{if(s)return s;const a=e({...r,theme:o});return i.forEach((s=>{const i=r[s]??{};a[s]={...gr(i,t),...e({...i,theme:o})}})),s={...p,...a},s}}}const Sr={compose:function(...r){return hr(r.reduce(((r,e)=>({...r,...e.config})),{}))},create:xr,createCss:wr,createVariant:function(r){const e=wr(r);return({prop:r="variant",defaultVariant:t,base:o={},variants:s})=>{const i=e(o),p={};return Object.keys(s).forEach((r=>{const t=r,o=s[t];p[t]=e(o)})),e=>{const{[r]:o=t}=e,s={};return o?c(s,i(e),p?.[o]?.(e)):s}}},createStates:function(r){const e=wr(r);return r=>{const t=Object.keys(r),o={};return t.forEach((t=>{const s=t,i=r[s];o[s]=e(i)})),r=>{const e={};return t.forEach((t=>{c(e,r[t]&&o[t](r))})),e}}}},vr=ur.build();export{Z as AnimusConfig,vr as animus,Sr as animusProps,k as borderShorthand,E as compatTheme,ur as config,rr as createAnimus,f as createScale,S as gridItem,C as gridItemRatio,T as numberToPx,O as numberToTemplate,j as parseGridRatio,b as percentageOrAbsolute,v as repeatGridItem,R as size};
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
import { Theme } from '@emotion/react';
|
|
2
|
+
import { DefaultCSSPropertyValue, PropertyTypes } from '../types/properties';
|
|
3
|
+
import { CSSObject } from '../types/shared';
|
|
4
|
+
import { AbstractProps, CSSPropMap, CSSProps, ResponsiveProp, ThemeProps } from '../types/props';
|
|
5
|
+
import { AllUnionKeys, Key, KeyFromUnion } from '../types/utils';
|
|
6
|
+
export declare type MapScale = Record<string | number, string | number>;
|
|
7
|
+
export declare type ArrayScale = readonly (string | number | CSSObject)[] & {
|
|
8
|
+
length: 0;
|
|
9
|
+
};
|
|
10
|
+
export interface BaseProperty {
|
|
11
|
+
property: keyof PropertyTypes;
|
|
12
|
+
properties?: readonly (keyof PropertyTypes)[];
|
|
13
|
+
}
|
|
14
|
+
export interface Prop extends BaseProperty {
|
|
15
|
+
scale?: keyof Theme | MapScale | ArrayScale;
|
|
16
|
+
variable?: string;
|
|
17
|
+
transform?: (val: string | number, prop?: string, props?: AbstractProps) => string | number | CSSObject;
|
|
18
|
+
}
|
|
19
|
+
export interface AbstractPropTransformer extends Prop {
|
|
20
|
+
prop: string;
|
|
21
|
+
styleFn: (value: unknown, prop: string, props: AbstractProps) => CSSObject;
|
|
22
|
+
}
|
|
23
|
+
export interface AbstractParser {
|
|
24
|
+
(props: AbstractProps, orderProps?: boolean): CSSObject;
|
|
25
|
+
propNames: string[];
|
|
26
|
+
config: Record<string, AbstractPropTransformer>;
|
|
27
|
+
}
|
|
28
|
+
export declare type PropertyValues<Property extends keyof PropertyTypes, All extends boolean = false> = Exclude<PropertyTypes<All extends true ? DefaultCSSPropertyValue : never>[Property], All extends true ? never : object | any[]>;
|
|
29
|
+
export declare type ScaleValue<Config extends Prop> = Config['scale'] extends keyof Theme ? keyof Theme[Config['scale']] | PropertyValues<Config['property']> : Config['scale'] extends MapScale ? keyof Config['scale'] | PropertyValues<Config['property']> : Config['scale'] extends ArrayScale ? Config['scale'][number] | PropertyValues<Config['property']> : PropertyValues<Config['property'], true>;
|
|
30
|
+
/**
|
|
31
|
+
* Value or something
|
|
32
|
+
*/
|
|
33
|
+
export declare type Scale<Config extends Prop> = ResponsiveProp<ScaleValue<Config> | ((theme: Theme) => ScaleValue<Config>)>;
|
|
34
|
+
export interface TransformFn<P extends string, Config extends Prop> {
|
|
35
|
+
(value: Scale<Config> | Scale<Config>, prop: P, props: ThemeProps<{
|
|
36
|
+
[K in P]?: Scale<Config>;
|
|
37
|
+
}>): CSSObject;
|
|
38
|
+
}
|
|
39
|
+
export interface PropTransformer<P extends string, C extends Prop> extends AbstractPropTransformer, Prop {
|
|
40
|
+
prop: P;
|
|
41
|
+
styleFn: TransformFn<P, C>;
|
|
42
|
+
}
|
|
43
|
+
export declare type TransformerMap<Config extends Record<string, Prop>> = {
|
|
44
|
+
[P in Key<keyof Config>]: PropTransformer<Key<P>, Config[P]>;
|
|
45
|
+
};
|
|
46
|
+
export interface Parser<Config extends Record<string, AbstractPropTransformer>> {
|
|
47
|
+
(props: ParserProps<Config>, orderProps?: boolean): CSSObject;
|
|
48
|
+
propNames: (keyof Config)[];
|
|
49
|
+
config: Config;
|
|
50
|
+
}
|
|
51
|
+
export declare type Compose<Args extends AbstractParser[]> = {
|
|
52
|
+
[K in AllUnionKeys<Args[number]['config']>]: KeyFromUnion<Args[number]['config'], K>;
|
|
53
|
+
};
|
|
54
|
+
export interface Variant<P extends AbstractParser> {
|
|
55
|
+
<Keys extends keyof Props, Base extends AbstractProps, Props extends Record<Keys, AbstractProps>, PropKey extends Readonly<string> = 'variant'>(options: {
|
|
56
|
+
prop?: PropKey;
|
|
57
|
+
defaultVariant?: keyof Props;
|
|
58
|
+
base?: CSSProps<Base, SystemProps<P>>;
|
|
59
|
+
variants: CSSPropMap<Props, SystemProps<P>>;
|
|
60
|
+
}): (props: VariantProps<PropKey, Keys | false> & ThemeProps) => CSSObject;
|
|
61
|
+
}
|
|
62
|
+
export interface States<P extends AbstractParser> {
|
|
63
|
+
<Props extends Record<string, AbstractProps>>(states: CSSPropMap<Props, SystemProps<P>>): (props: Partial<Record<keyof Props, boolean>> & ThemeProps) => CSSObject;
|
|
64
|
+
}
|
|
65
|
+
export interface CSS<P extends AbstractParser> {
|
|
66
|
+
<Props extends AbstractProps>(config: CSSProps<Props, SystemProps<P>>): (props: ThemeProps) => CSSObject;
|
|
67
|
+
}
|
|
68
|
+
export declare type ParserProps<Config extends Record<string, AbstractPropTransformer>> = ThemeProps<{
|
|
69
|
+
[P in keyof Config]?: Parameters<Config[P]['styleFn']>[2][Config[P]['prop']];
|
|
70
|
+
}>;
|
|
71
|
+
export declare type SystemProps<P extends AbstractParser> = {
|
|
72
|
+
[K in keyof Omit<Parameters<P>[0], 'theme'>]: Omit<Parameters<P>[0], 'theme'>[K];
|
|
73
|
+
};
|
|
74
|
+
export declare type VariantProps<T extends string, V> = {
|
|
75
|
+
[Key in T]?: V;
|
|
76
|
+
};
|
|
77
|
+
export declare type Arg<T extends (...args: any) => any> = Parameters<T>[0];
|
|
78
|
+
export interface PropConfig {
|
|
79
|
+
props: {
|
|
80
|
+
[i: string]: Prop;
|
|
81
|
+
};
|
|
82
|
+
groups: {
|
|
83
|
+
[i: string]: (string | symbol | number)[];
|
|
84
|
+
};
|
|
85
|
+
}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { createCss } from './createCss';
|
|
2
|
+
import { createVariant } from './createVariant';
|
|
3
|
+
import { create } from './create';
|
|
4
|
+
import { compose } from './compose';
|
|
5
|
+
import { createStates } from './createStates';
|
|
6
|
+
export declare const animusProps: {
|
|
7
|
+
compose: typeof compose;
|
|
8
|
+
create: typeof create;
|
|
9
|
+
createCss: typeof createCss;
|
|
10
|
+
createVariant: typeof createVariant;
|
|
11
|
+
createStates: typeof createStates;
|
|
12
|
+
};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { CSS, Parser, Prop, TransformerMap } from '
|
|
1
|
+
import { CSS, Parser, Prop, TransformerMap } from './config';
|
|
2
2
|
export declare function createCss<Config extends Record<string, Prop>, P extends Parser<TransformerMap<Config>>>(config: Config): CSS<P>;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { AbstractPropTransformer, Parser } from './config';
|
|
2
|
+
export declare const defaultBreakpoints: {
|
|
3
|
+
xs: number;
|
|
4
|
+
sm: number;
|
|
5
|
+
md: number;
|
|
6
|
+
lg: number;
|
|
7
|
+
xl: number;
|
|
8
|
+
};
|
|
9
|
+
export declare function createParser<Config extends Record<string, AbstractPropTransformer>>(config: Config): Parser<Config>;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { Parser, Prop, States, TransformerMap } from '
|
|
1
|
+
import { Parser, Prop, States, TransformerMap } from './config';
|
|
2
2
|
export declare function createStates<Config extends Record<string, Prop>, P extends Parser<TransformerMap<Config>>>(config: Config): States<P>;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { Prop, PropTransformer } from '
|
|
1
|
+
import { Prop, PropTransformer } from './config';
|
|
2
2
|
export declare function createTransform<P extends string, Config extends Prop>(prop: P, config: Config): PropTransformer<P, Config>;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { Parser, Prop, TransformerMap, Variant } from '
|
|
1
|
+
import { Parser, Prop, TransformerMap, Variant } from './config';
|
|
2
2
|
export declare function createVariant<Config extends Record<string, Prop>, P extends Parser<TransformerMap<Config>>>(config: Config): Variant<P>;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import { AbstractPropTransformer } from '
|
|
2
|
-
import {
|
|
1
|
+
import { AbstractPropTransformer } from './config';
|
|
2
|
+
import { CSSObject } from '../types/shared';
|
|
3
|
+
import { MediaQueryCache, MediaQueryMap, ThemeProps } from '../types/props';
|
|
3
4
|
import { Breakpoints } from '../types/theme';
|
|
4
5
|
export declare const createMediaQueries: (breakpoints?: Breakpoints | undefined) => MediaQueryCache | null;
|
|
5
6
|
export declare const isMediaArray: (val: unknown) => val is (string | number)[];
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const getStylePropNames: (props: Record<string, any>, filteredKeys: string[]) => Pick<Record<string, any>, string>;
|
|
File without changes
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { Parser, Prop } from '../types/config';
|
|
2
2
|
export declare const defaultBreakpoints: {
|
|
3
3
|
xs: number;
|
|
4
4
|
sm: number;
|
|
@@ -6,4 +6,4 @@ export declare const defaultBreakpoints: {
|
|
|
6
6
|
lg: number;
|
|
7
7
|
xl: number;
|
|
8
8
|
};
|
|
9
|
-
export declare function createParser<Config extends Record<string,
|
|
9
|
+
export declare function createParser<Config extends Record<string, Prop>>(config: Config): Parser<Config>;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { AbstractParser } from '../types/config';
|
|
2
|
-
export declare const createStylist: (parser: AbstractParser, base?: Record<string, any>, variants?: Record<string, any>, states?: Record<string, any
|
|
2
|
+
export declare const createStylist: (parser: AbstractParser, base?: Record<string, any>, variants?: Record<string, any>, states?: Record<string, any>) => (props: any) => any;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { Prop } from '../types/config';
|
|
2
|
+
import { MediaQueryCache, MediaQueryMap, ThemeProps } from '../types/props';
|
|
3
|
+
import { Breakpoints } from '../types/theme';
|
|
4
|
+
import { CSSObject } from '../types/shared';
|
|
5
|
+
export declare const createMediaQueries: (breakpoints?: Breakpoints | undefined) => MediaQueryCache | null;
|
|
6
|
+
export declare const isMediaArray: (val: unknown) => val is (string | number)[];
|
|
7
|
+
export declare const isMediaMap: (val: object) => val is MediaQueryMap<string | number>;
|
|
8
|
+
interface ResponsiveParser<Bp extends MediaQueryMap<string | number> | (string | number)[]> {
|
|
9
|
+
<C extends Prop>(value: Bp, props: ThemeProps, config: C, breakpoints: Bp): CSSObject;
|
|
10
|
+
}
|
|
11
|
+
export declare const objectParser: ResponsiveParser<MediaQueryMap<string | number>>;
|
|
12
|
+
export declare const arrayParser: ResponsiveParser<(string | number)[]>;
|
|
13
|
+
export declare const orderBreakpoints: (styles: CSSObject, breakpoints: string[]) => CSSObject;
|
|
14
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const borderShorthand: (val: string | number) => string;
|
package/dist/types/config.d.ts
CHANGED
|
@@ -1,82 +1,44 @@
|
|
|
1
1
|
import { Theme } from '@emotion/react';
|
|
2
|
-
import {
|
|
2
|
+
import { CSSObject } from './shared';
|
|
3
3
|
import { DefaultCSSPropertyValue, PropertyTypes } from './properties';
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
length: 0;
|
|
9
|
-
};
|
|
4
|
+
import { CSSProps, CSSPropMap, AbstractProps, ResponsiveProp, ThemeProps } from './props';
|
|
5
|
+
import { Arg } from '..';
|
|
6
|
+
import { ArrayScale, MapScale } from './scales';
|
|
7
|
+
import { CompatTheme } from '../compatTheme';
|
|
10
8
|
export interface BaseProperty {
|
|
11
9
|
property: keyof PropertyTypes;
|
|
12
10
|
properties?: readonly (keyof PropertyTypes)[];
|
|
13
11
|
}
|
|
14
12
|
export interface Prop extends BaseProperty {
|
|
15
|
-
scale?: keyof Theme | keyof
|
|
13
|
+
scale?: keyof Theme | keyof CompatTheme | MapScale | ArrayScale;
|
|
16
14
|
variable?: string;
|
|
17
15
|
transform?: (val: string | number, prop?: string, props?: AbstractProps) => string | number | CSSObject;
|
|
18
16
|
}
|
|
19
|
-
export interface AbstractPropTransformer extends Prop {
|
|
20
|
-
prop: string;
|
|
21
|
-
styleFn: (value: unknown, prop: string, props: AbstractProps) => CSSObject;
|
|
22
|
-
}
|
|
23
17
|
export interface AbstractParser {
|
|
24
18
|
(props: AbstractProps, orderProps?: boolean): CSSObject;
|
|
25
19
|
propNames: string[];
|
|
26
|
-
config: Record<string,
|
|
20
|
+
config: Record<string, Prop>;
|
|
27
21
|
}
|
|
28
|
-
|
|
29
|
-
export declare type
|
|
22
|
+
declare type IsEmpty<T> = [] extends T ? true : false | {} extends T ? true : false;
|
|
23
|
+
export declare type PropertyValues<Property extends Prop, IncludeGlobals = false> = Exclude<PropertyTypes<IncludeGlobals extends true ? DefaultCSSPropertyValue : never>[Property['property']], IncludeGlobals extends true ? never : object | any[]>;
|
|
24
|
+
declare type CompatValue<Key extends keyof CompatTheme> = CompatTheme[Key] extends MapScale ? keyof CompatTheme[Key] : CompatTheme[Key] extends ArrayScale ? CompatTheme[Key][number] : never;
|
|
25
|
+
export declare type ScaleValue<Config extends Prop> = Config['scale'] extends keyof Theme ? keyof Theme[Config['scale']] | PropertyValues<Config, IsEmpty<Theme[Config['scale']]>> : Config['scale'] extends MapScale ? keyof Config['scale'] | PropertyValues<Config, IsEmpty<Config['scale']>> : Config['scale'] extends ArrayScale ? Config['scale'][number] | PropertyValues<Config, IsEmpty<Config['scale']>> : Config['scale'] extends keyof CompatTheme ? CompatValue<Config['scale']> | PropertyValues<Config, IsEmpty<CompatTheme[Config['scale']]>> : PropertyValues<Config, true>;
|
|
30
26
|
export declare type Scale<Config extends Prop> = ResponsiveProp<ScaleValue<Config> | ((theme: Theme) => ScaleValue<Config>)>;
|
|
31
|
-
export
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
}
|
|
36
|
-
export interface PropTransformer<P extends string, C extends Prop> extends AbstractPropTransformer, Prop {
|
|
37
|
-
prop: P;
|
|
38
|
-
styleFn: TransformFn<P, C>;
|
|
39
|
-
}
|
|
40
|
-
export declare type TransformerMap<Config extends Record<string, Prop>> = {
|
|
41
|
-
[P in Key<keyof Config>]: PropTransformer<Key<P>, Config[P]>;
|
|
42
|
-
};
|
|
43
|
-
export interface Parser<Config extends Record<string, AbstractPropTransformer>> {
|
|
27
|
+
export declare type ParserProps<Config extends Record<string, Prop>> = ThemeProps<{
|
|
28
|
+
[P in keyof Config]?: Scale<Config[P]>;
|
|
29
|
+
}>;
|
|
30
|
+
export interface Parser<Config extends Record<string, Prop>> {
|
|
44
31
|
(props: ParserProps<Config>, orderProps?: boolean): CSSObject;
|
|
45
|
-
propNames:
|
|
32
|
+
propNames: Extract<keyof Config, string>[];
|
|
46
33
|
config: Config;
|
|
47
34
|
}
|
|
48
|
-
export declare type
|
|
49
|
-
[K in
|
|
50
|
-
};
|
|
51
|
-
export interface Variant<P extends AbstractParser> {
|
|
52
|
-
<Keys extends keyof Props, Base extends AbstractProps, Props extends Record<Keys, AbstractProps>, PropKey extends Readonly<string> = 'variant'>(options: {
|
|
53
|
-
prop?: PropKey;
|
|
54
|
-
defaultVariant?: keyof Props;
|
|
55
|
-
base?: CSSProps<Base, SystemProps<P>>;
|
|
56
|
-
variants: CSSPropMap<Props, SystemProps<P>>;
|
|
57
|
-
}): (props: VariantProps<PropKey, Keys | false> & ThemeProps) => CSSObject;
|
|
58
|
-
}
|
|
59
|
-
export interface States<P extends AbstractParser> {
|
|
60
|
-
<Props extends Record<string, AbstractProps>>(states: CSSPropMap<Props, SystemProps<P>>): (props: Partial<Record<keyof Props, boolean>> & ThemeProps) => CSSObject;
|
|
61
|
-
}
|
|
62
|
-
export interface CSS<P extends AbstractParser> {
|
|
63
|
-
<Props extends AbstractProps>(config: CSSProps<Props, SystemProps<P>>): (props: ThemeProps) => CSSObject;
|
|
64
|
-
}
|
|
65
|
-
export declare type ParserProps<Config extends Record<string, AbstractPropTransformer>> = ThemeProps<{
|
|
66
|
-
[P in keyof Config]?: Parameters<Config[P]['styleFn']>[2][Config[P]['prop']];
|
|
67
|
-
}>;
|
|
68
|
-
export declare type SystemProps<P extends AbstractParser> = {
|
|
69
|
-
[K in keyof Omit<Parameters<P>[0], 'theme'>]: Omit<Parameters<P>[0], 'theme'>[K];
|
|
70
|
-
};
|
|
71
|
-
export declare type VariantProps<T extends string, V> = {
|
|
72
|
-
[Key in T]?: V;
|
|
35
|
+
export declare type SystemProps<P extends AbstractParser, SafeProps = Omit<Arg<P>, 'theme'>> = {
|
|
36
|
+
[K in keyof SafeProps]: SafeProps[K];
|
|
73
37
|
};
|
|
74
|
-
export
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
groups: {
|
|
80
|
-
[i: string]: (string | symbol | number)[];
|
|
81
|
-
};
|
|
38
|
+
export interface VariantConfig {
|
|
39
|
+
prop?: any;
|
|
40
|
+
defaultVariant?: any;
|
|
41
|
+
base?: CSSProps<AbstractProps, SystemProps<AbstractParser>>;
|
|
42
|
+
variants: CSSPropMap<AbstractProps, SystemProps<AbstractParser>>;
|
|
82
43
|
}
|
|
44
|
+
export {};
|
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
import { Globals, StandardProperties, VendorProperties } from 'csstype';
|
|
2
|
-
import { CSSObject } from '
|
|
2
|
+
import { CSSObject, NarrowPrimitive } from './shared';
|
|
3
3
|
declare type ColorProperties = 'color' | `${string}Color`;
|
|
4
4
|
declare type ColorGlobals = {
|
|
5
|
-
[K in Extract<keyof StandardProperties, ColorProperties>]?: Globals | 'currentColor' | 'transparent' |
|
|
5
|
+
[K in Extract<keyof StandardProperties, ColorProperties>]?: Globals | 'currentColor' | 'transparent' | NarrowPrimitive<string>;
|
|
6
6
|
};
|
|
7
7
|
declare type SizeProperties = 'left' | 'right' | 'top' | 'bottom' | 'inset' | 'width' | 'height' | `${string}${'Width' | 'Height'}`;
|
|
8
|
+
declare type SizeValues = `${number}${'px' | 'rem' | 'vh' | 'vw' | 'vmax' | 'vmin' | '%'}` | `calc(${any})`;
|
|
8
9
|
declare type SizeGlobals = {
|
|
9
|
-
[K in Extract<keyof StandardProperties, SizeProperties>]?: StandardProperties[K] |
|
|
10
|
+
[K in Extract<keyof StandardProperties, SizeProperties>]?: StandardProperties[K] | SizeValues | NarrowPrimitive<number>;
|
|
10
11
|
};
|
|
11
12
|
/** This is a placeholder type for CSS properties that may not have any specific global values (outlineOffset).
|
|
12
13
|
* (string & {}) will allow strings but not generalize the union type to just a string if other string literals exist in the union.
|
package/dist/types/props.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { Theme } from '@emotion/react';
|
|
2
|
-
import { AbstractParser, Scale } from '
|
|
2
|
+
import { AbstractParser, Scale } from '../legacy/config';
|
|
3
3
|
import { CSSPropertyTypes } from './properties';
|
|
4
4
|
export declare type AbstractProps = ThemeProps<Record<string, unknown>>;
|
|
5
5
|
interface MediaQueryByKey<T = string> {
|
|
@@ -33,15 +33,11 @@ export interface MediaQueryMap<T> {
|
|
|
33
33
|
xl?: T;
|
|
34
34
|
}
|
|
35
35
|
export declare type ResponsiveProp<T> = T | MediaQueryMap<T> | MediaQueryArray<T>;
|
|
36
|
-
export interface CSSObject {
|
|
37
|
-
[key: string]: string | number | CSSObject | undefined;
|
|
38
|
-
}
|
|
39
36
|
export declare type CSSPropMap<Props, System> = {
|
|
40
37
|
[K in keyof Props]?: CSSProps<Props[K], System>;
|
|
41
38
|
};
|
|
42
39
|
export declare type CSSProps<Props, System> = {
|
|
43
40
|
[K in keyof Props]?: K extends keyof System ? System[K] : K extends keyof CSSPropertyTypes ? CSSPropertyTypes[K] : Omit<CSSPropertyTypes, keyof System> & Omit<System, 'theme'>;
|
|
44
41
|
};
|
|
45
|
-
export declare type StyleProps<T extends (args: AbstractProps) => CSSObject> = Parameters<T>[0];
|
|
46
42
|
export declare type ScaleValue<P extends AbstractParser, Prop extends keyof P['config']> = Scale<P['config'][Prop]>;
|
|
47
43
|
export {};
|
package/dist/types/theme.d.ts
CHANGED
|
@@ -11,22 +11,6 @@ export interface BaseTheme {
|
|
|
11
11
|
export interface AbstractTheme extends BaseTheme {
|
|
12
12
|
readonly [key: string]: any;
|
|
13
13
|
}
|
|
14
|
-
export interface InteropTheme extends BaseTheme {
|
|
15
|
-
colors: {};
|
|
16
|
-
radii: {};
|
|
17
|
-
borders: {};
|
|
18
|
-
fontSize: {};
|
|
19
|
-
letterSpacing: {};
|
|
20
|
-
fontFamily: {};
|
|
21
|
-
fontWeight: {};
|
|
22
|
-
spacing: {};
|
|
23
|
-
lineHeight: {};
|
|
24
|
-
modes: {
|
|
25
|
-
dark: {};
|
|
26
|
-
light: {};
|
|
27
|
-
};
|
|
28
|
-
mode: 'dark' | 'light';
|
|
29
|
-
}
|
|
30
14
|
declare module '@emotion/react' {
|
|
31
15
|
interface Theme extends BaseTheme {
|
|
32
16
|
}
|
package/dist/types/utils.d.ts
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
export declare type Arg<T extends (...args: any) => any> = Parameters<T>[0];
|
|
1
2
|
export declare type AllUnionKeys<T> = T extends any ? keyof T : never;
|
|
2
3
|
export declare type KeyFromUnion<T, K> = T extends any ? K extends keyof T ? T[K] : never : never;
|
|
3
4
|
export declare type Key<T> = T extends string ? T : never;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@animus-ui/core",
|
|
3
3
|
"description": "Constraint based CSS in JS Foundations",
|
|
4
|
-
"version": "0.1.1-beta.
|
|
4
|
+
"version": "0.1.1-beta.9",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"emotion",
|
|
7
7
|
"css",
|
|
@@ -23,9 +23,11 @@
|
|
|
23
23
|
"scripts": {
|
|
24
24
|
"build:clean": "rm -rf ./dist",
|
|
25
25
|
"build": "yarn build:clean && rollup -c",
|
|
26
|
-
"lernaBuildTask": "yarn build"
|
|
26
|
+
"lernaBuildTask": "yarn build",
|
|
27
|
+
"compile": "tsc --noEmit"
|
|
27
28
|
},
|
|
28
29
|
"peerDependencies": {
|
|
30
|
+
"@emotion/is-prop-valid": "^1.1.1",
|
|
29
31
|
"@emotion/react": ">=11.0.0",
|
|
30
32
|
"@emotion/styled": ">=11.0.0",
|
|
31
33
|
"lodash": "*",
|
|
@@ -34,5 +36,5 @@
|
|
|
34
36
|
"dependencies": {
|
|
35
37
|
"csstype": "^3.0.7"
|
|
36
38
|
},
|
|
37
|
-
"gitHead": "
|
|
39
|
+
"gitHead": "4eb343b48a448f4e19eb2f2b96c66c9a64d60019"
|
|
38
40
|
}
|