@animus-ui/core 0.0.1-alpha.0

package/dist/index.esm.js

@@ -0,0 +1 @@
+import{pick as r,isEmpty as e,isObject as o,set as t,mapValues as p,omit as s,intersection as i,get as a,merge 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=(r,e)=>{const o=Object.keys(r),t=Object.keys(e);return r=>{const e=[];return o.forEach((o=>{r[o]&&e.push(`${o}-${r[o]}`)})),t.forEach((o=>{r[o]&&e.push(o)})),e}},h=(r,e)=>{const o={},t={};return Object.entries(r).forEach((([r,p])=>{(e.includes(r)?t:o)[r]=p})),[o,t]},f=(o,t,p,s)=>{const{base:i}=t,{parser:a,getMediaSelectors:n,getActiveOverrides:d}=s,{theme:c}=p,l=Object.values(r(t,d(p))),y=n(p),[g,u]=h(a({...i,theme:c},!0),y);for(const r in g)o[r]=g[r];l.forEach((r=>{((r={},o,t,p,s,i)=>{const[a,n]=h(p({...r,theme:s},!0),i);for(const r in a)o[r]=a[r];i.forEach((r=>{const o=n[r];if(!o||e(o))return;t[r]||(t[r]={});const p=t[r];for(const r in o)p[r]=o[r]}))})(r,o,u,a,c,y)})),y.forEach((r=>{const t=u[r];e(t)||(o[r]=t)}))},R=(r,e={},p={},s={},i={})=>{const a=((r={},e={},p={},s)=>{const i={};return Object.entries(r).forEach((([r,e])=>{!s.includes(r)&&o(e)?t(i,[r,"base"],e):t(i,["primary","base",r],e)})),Object.entries(e).forEach((([r,{variants:e}])=>{Object.entries(e).forEach((([e,p])=>{const a=`${r}-${e}`;Object.entries(p).forEach((([r,e])=>{!s.includes(r)&&o(e)?t(i,[r,a],e):t(i,["primary",a,r],e)}))}))})),Object.entries(p).forEach((([r,e])=>{Object.entries(e).forEach((([e,p])=>{!s.includes(e)&&o(p)?t(i,[e,r],p):t(i,["primary",r,e],p)}))})),i})(e,p,s,r.propNames),n={parser:r,getMediaSelectors:({theme:r})=>["xs","sm","md","lg","xl"].map((e=>r?.breakpoints[e])),getActiveOverrides:m(p,s)};return e=>{const{vars:o}=e,t={...o};return Object.entries(a).forEach((([r,o={}])=>{"primary"===r?f(t,o,e,n):(t[r]={},f(t[r],o,e,n))})),f(t,{base:r(e)},e,n),t}},w=["border","borderTop","borderBottom","borderLeft","borderRight","borderWidth","borderStyle","borderColor","background","flex","margin","padding","transition","gap","grid","gridArea","gridColumn","gridRow","gridTemplate","overflow","transition"],x=-1,C=1,S=1,v=(r,e)=>r<e?x:e<r?C:S,T=["_","xs","sm","md","lg","xl"],j=r=>`@media screen and (min-width: ${r}px)`,O={xs:480,sm:768,md:1024,lg:1200,xl:1440},B=(r,e,o,t,p)=>{const s=a(o,e);switch(typeof s){case"string":case"number":case"function":return Object.assign(r,t.styleFn(s,e,o));case"object":if(!p.mediaQueries)return;if(d=s,Array.isArray(d))return n(r,((r,e,o,t)=>{const p={},{styleFn:s,prop:i}=o,[a,...n]=r;return a&&Object.assign(p,s(a,i,e)),n.forEach(((r,o)=>{const a=t[o];a&&void 0!==r&&Object.assign(p,{[a]:s(r,i,e)})})),p})(s,o,t,p.mediaQueries.array));if(s&&(r=>i(Object.keys(r),T).length>0)(s))return n(r,((r,e,o,t)=>{const p={},{styleFn:s,prop:i}=o,{_:a,...n}=r;return a&&Object.assign(p,s(a,i,e)),Object.keys(t).forEach((r=>{const o=n[r];void 0!==o&&Object.assign(p,{[t[r]]:s(o,i,e)})})),p})(s,o,t,p.mediaQueries.map))}var d};function k(r){const e=(r=>Object.keys(r).sort(((e,o)=>{const{[e]:t,[o]:p}=r,{property:s,properties:i=[]}=t,{property:a,properties:n=[]}=p,d=w.includes(s),c=w.includes(a);if(d&&c){const r=i.length,e=n.length;if(s!==a)return v(w.indexOf(s),w.indexOf(a));if(s===a){if(0===r)return x;if(0===e)return C}return v(e,r)}return d?x:c?C:S})))(r),o={mediaQueries:null};return Object.assign(((t,i=!1)=>{const n={},{theme:d}=t;return o.mediaQueries||(o.mediaQueries=(r=>{if(void 0===r)return null;const{xs:e,sm:o,md:t,lg:s,xl:i}=r??{};return{map:p(r,j),array:[e,o,t,s,i].map(j)}})(d?.breakpoints??O)),i?Object.keys(t).forEach((e=>{const p=r[e];p?B(n,e,t,p,o):"theme"!==e&&Object.assign(n,{[e]:a(t,e)})})):e.forEach((e=>{const p=r[e];B(n,e,t,p,o)})),null!==o.mediaQueries?((r,e)=>{const o=s(r,e);return e.forEach((e=>{r[e]&&(o[e]=r[e])})),o})(n,o.mediaQueries.array):n}),{propNames:e,config:r})}function W(r,e){const{transform:t=y,property:p,properties:s=[p],scale:i}=e,n=(r=>d(r)?(e,o)=>a(o,["theme",r,e]):c(r)?r=>r:o(r)?e=>a(r,e):()=>{})(i),g=void 0===i||c(i);return{...e,prop:r,styleFn:(r,e,o)=>{const p={};if(l(r))return p;let i,a,d=!1;switch(typeof r){case"number":case"string":a=n(r,o),d=void 0!==a||g,i=a??r;break;case"function":o.theme&&(i=r(o.theme));break;default:return p}return s.forEach((r=>{let e=i;switch(d&&!l(e)&&(e=t(e,r,o)),typeof e){case"number":case"string":return p[r]=e;case"object":return Object.assign(p,e)}})),p}}}function L(r){const e={};for(const o in r)"string"==typeof o&&(e[o]=W(o,r[o]));return k(e)}class A{props={};parser={};groups=[];base={};statesConfig={};variants={};constructor(r,e,o,t,p,s){this.props=r,this.parser=e,this.groups=s,this.base=o,this.statesConfig=p,this.variants=t}asComponent(r){const e=R(this.parser,this.base,this.variants,this.statesConfig,{});return u(r)(e)}build(){return R(this.parser,this.base,this.variants,this.statesConfig,{})}}class E extends A{constructor(r,e,o,t,p,s){super(r,e,o,t,p,s)}customProps(r){const e={...this.props.props,...r},o=L(e);return new A({...this.props,props:e},o,this.base,this.variants,this.statesConfig,this.groups)}}class G extends E{constructor(r,e,o,t,p){super(r,e,o,t,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,o,t){super(r,e,o,t,{})}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,n(this.variants,{[e]:r}))}}class F extends ${constructor(r,e,o){super(r,e,o,{})}variant(r){const e=r.prop||"variant";return new $(this.props,this.parser,this.base,n(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 o={[r]:Object.keys(e)};return new H({...this.#r,...e},{...this.#e,...o})}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,o,t]=X.exec(r)||[];if(void 0===e)return r;const p=parseFloat(o);return t?`${p}${t}`: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`:a(D,r,r)})`},N=(r,e)=>{const o=M(r);return e>1?`repeat(${e}, ${o})`:o},_=r=>{const e=r.split(":");let o=["",0],t="";for(let r=0;r<e.length+1;r+=1){const p=t.length>0?" ":"",s=e[r];o?.[0]!==s?(o[0].length&&(t+=p+N(...o)),s&&(o=[s,1])):o[1]+=1}return t},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"}},or={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},tr={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",tr).addGroup("background",{background:{property:"background"},backgroundImage:{property:"backgroundImage"},backgroundSize:{property:"backgroundSize"},backgroundRepeat:{property:"backgroundRepeat"},backgroundPosition:{property:"backgroundPosition"}}).addGroup("layout",or).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"},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};

package/dist/internal/compose.d.ts

@@ -0,0 +1,2 @@
+import { AbstractParser, Compose } from '../types/config';
+export declare function compose<Args extends AbstractParser[]>(...parsers: Args): import("../types/config").Parser<Compose<Args>>;

package/dist/internal/create.d.ts

@@ -0,0 +1,2 @@
+import { Prop, TransformerMap } from '../types/config';
+export declare function create<Config extends Record<string, Prop>>(config: Config): import("../types/config").Parser<TransformerMap<Config>>;

package/dist/internal/createCss.d.ts

@@ -0,0 +1,2 @@
+import { CSS, Parser, Prop, TransformerMap } from '../types/config';
+export declare function createCss<Config extends Record<string, Prop>, P extends Parser<TransformerMap<Config>>>(config: Config): CSS<P>;

package/dist/internal/createStates.d.ts

@@ -0,0 +1,2 @@
+import { Parser, Prop, States, TransformerMap } from '../types/config';
+export declare function createStates<Config extends Record<string, Prop>, P extends Parser<TransformerMap<Config>>>(config: Config): States<P>;

package/dist/internal/createVariant.d.ts

@@ -0,0 +1,2 @@
+import { Parser, Prop, TransformerMap, Variant } from '../types/config';
+export declare function createVariant<Config extends Record<string, Prop>, P extends Parser<TransformerMap<Config>>>(config: Config): Variant<P>;

package/dist/props/baseConfig.d.ts

@@ -0,0 +1,586 @@
+export declare const color: {
+    readonly color: {
+        readonly property: "color";
+        readonly scale: "colors";
+    };
+    readonly textColor: {
+        readonly property: "color";
+        readonly scale: "colors";
+    };
+    readonly bg: {
+        readonly property: "backgroundColor";
+        readonly scale: "colors";
+    };
+    readonly borderColor: {
+        readonly property: "borderColor";
+        readonly scale: "colors";
+    };
+    readonly borderColorX: {
+        readonly property: "borderColor";
+        readonly properties: readonly ["borderLeftColor", "borderRightColor"];
+        readonly scale: "colors";
+    };
+    readonly borderColorY: {
+        readonly property: "borderColor";
+        readonly properties: readonly ["borderTopColor", "borderBottomColor"];
+        readonly scale: "colors";
+    };
+    readonly borderColorLeft: {
+        readonly property: "borderLeftColor";
+        readonly scale: "colors";
+    };
+    readonly borderColorRight: {
+        readonly property: "borderRightColor";
+        readonly scale: "colors";
+    };
+    readonly borderColorTop: {
+        readonly property: "borderTopColor";
+        readonly scale: "colors";
+    };
+    readonly borderColorBottom: {
+        readonly property: "borderBottomColor";
+        readonly scale: "colors";
+    };
+};
+export declare const border: {
+    readonly border: {
+        readonly property: "border";
+        readonly scale: "borders";
+    };
+    readonly borderX: {
+        readonly property: "border";
+        readonly properties: readonly ["borderLeft", "borderRight"];
+        readonly scale: "borders";
+    };
+    readonly borderY: {
+        readonly property: "border";
+        readonly properties: readonly ["borderTop", "borderBottom"];
+        readonly scale: "borders";
+    };
+    readonly borderTop: {
+        readonly property: "borderTop";
+        readonly scale: "borders";
+    };
+    readonly borderRight: {
+        readonly property: "borderRight";
+        readonly scale: "borders";
+    };
+    readonly borderBottom: {
+        readonly property: "borderBottom";
+        readonly scale: "borders";
+    };
+    readonly borderLeft: {
+        readonly property: "borderLeft";
+        readonly scale: "borders";
+    };
+    readonly borderWidth: {
+        readonly property: "borderWidth";
+    };
+    readonly borderWidthX: {
+        readonly property: "borderWidth";
+        readonly properties: readonly ["borderLeftWidth", "borderRightWidth"];
+    };
+    readonly borderWidthY: {
+        readonly property: "borderWidth";
+        readonly properties: readonly ["borderTopWidth", "borderBottomWidth"];
+    };
+    readonly borderWidthLeft: {
+        readonly property: "borderLeftWidth";
+    };
+    readonly borderWidthRight: {
+        readonly property: "borderRightWidth";
+    };
+    readonly borderWidthTop: {
+        readonly property: "borderTopWidth";
+    };
+    readonly borderWidthBottom: {
+        readonly property: "borderBottomWidth";
+    };
+    readonly borderRadius: {
+        readonly property: "borderRadius";
+        readonly scale: "radii";
+    };
+    readonly borderRadiusLeft: {
+        readonly property: "borderRadius";
+        readonly properties: readonly ["borderTopLeftRadius", "borderBottomLeftRadius"];
+        readonly scale: "radii";
+    };
+    readonly borderRadiusTop: {
+        readonly property: "borderRadius";
+        readonly properties: readonly ["borderTopLeftRadius", "borderTopRightRadius"];
+        readonly scale: "radii";
+    };
+    readonly borderRadiusBottom: {
+        readonly property: "borderRadius";
+        readonly properties: readonly ["borderBottomLeftRadius", "borderBottomRightRadius"];
+        readonly scale: "radii";
+    };
+    readonly borderRadiusRight: {
+        readonly property: "borderRadius";
+        readonly properties: readonly ["borderTopRightRadius", "borderBottomRightRadius"];
+        readonly scale: "radii";
+    };
+    readonly borderRadiusTopLeft: {
+        readonly property: "borderTopLeftRadius";
+        readonly scale: "radii";
+    };
+    readonly borderRadiusTopRight: {
+        readonly property: "borderTopRightRadius";
+        readonly scale: "radii";
+    };
+    readonly borderRadiusBottomRight: {
+        readonly property: "borderBottomRightRadius";
+        readonly scale: "radii";
+    };
+    readonly borderRadiusBottomLeft: {
+        readonly property: "borderBottomLeftRadius";
+        readonly scale: "radii";
+    };
+    readonly borderStyle: {
+        readonly property: "borderStyle";
+    };
+    readonly borderStyleX: {
+        readonly property: "borderStyle";
+        readonly properties: readonly ["borderLeftStyle", "borderRightStyle"];
+    };
+    readonly borderStyleY: {
+        readonly property: "borderStyle";
+        readonly properties: readonly ["borderTopStyle", "borderBottomStyle"];
+    };
+    readonly borderStyleLeft: {
+        readonly property: "borderLeftStyle";
+    };
+    readonly borderStyleRight: {
+        readonly property: "borderRightStyle";
+    };
+    readonly borderStyleTop: {
+        readonly property: "borderTopStyle";
+    };
+    readonly borderStyleBottom: {
+        readonly property: "borderBottomStyle";
+    };
+};
+export declare const flex: {
+    readonly flexBasis: {
+        readonly property: "flexBasis";
+    };
+    readonly flexShrink: {
+        readonly property: "flexShrink";
+    };
+    readonly flexGrow: {
+        readonly property: "flexGrow";
+    };
+    readonly order: {
+        readonly property: "order";
+    };
+    readonly justifySelf: {
+        readonly property: "justifySelf";
+    };
+    readonly alignSelf: {
+        readonly property: "alignSelf";
+    };
+    readonly gridArea: {
+        readonly property: "gridArea";
+    };
+    readonly area: {
+        readonly property: "gridArea";
+    };
+    readonly justifyContent: {
+        readonly property: "justifyContent";
+    };
+    readonly justifyItems: {
+        readonly property: "justifyItems";
+    };
+    readonly alignItems: {
+        readonly property: "alignItems";
+    };
+    readonly alignContent: {
+        readonly property: "alignContent";
+    };
+    readonly flexDirection: {
+        readonly property: "flexDirection";
+    };
+    readonly flexWrap: {
+        readonly property: "flexWrap";
+    };
+    readonly flex: {
+        readonly property: "flex";
+    };
+};
+export declare const grid: {
+    readonly gridColumn: {
+        readonly property: "gridColumn";
+    };
+    readonly gridRow: {
+        readonly property: "gridRow";
+    };
+    readonly gridColumnStart: {
+        readonly property: "gridColumnStart";
+    };
+    readonly gridRowStart: {
+        readonly property: "gridRowStart";
+    };
+    readonly gridColumnEnd: {
+        readonly property: "gridColumnEnd";
+    };
+    readonly gridRowEnd: {
+        readonly property: "gridRowEnd";
+    };
+    readonly justifySelf: {
+        readonly property: "justifySelf";
+    };
+    readonly alignSelf: {
+        readonly property: "alignSelf";
+    };
+    readonly gridArea: {
+        readonly property: "gridArea";
+    };
+    readonly area: {
+        readonly property: "gridArea";
+    };
+    readonly justifyContent: {
+        readonly property: "justifyContent";
+    };
+    readonly justifyItems: {
+        readonly property: "justifyItems";
+    };
+    readonly alignItems: {
+        readonly property: "alignItems";
+    };
+    readonly alignContent: {
+        readonly property: "alignContent";
+    };
+    readonly gridAutoColumns: {
+        readonly property: "gridAutoColumns";
+    };
+    readonly gridAutoRows: {
+        readonly property: "gridAutoRows";
+    };
+    readonly gridTemplateColumns: {
+        readonly property: "gridTemplateColumns";
+    };
+    readonly gridTemplateRows: {
+        readonly property: "gridTemplateRows";
+    };
+    readonly gridTemplateAreas: {
+        readonly property: "gridTemplateAreas";
+    };
+    readonly gridAutoFlow: {
+        readonly property: "gridAutoFlow";
+    };
+    readonly gap: {
+        readonly property: "gap";
+        readonly scale: "spacing";
+    };
+    readonly rowGap: {
+        readonly property: "rowGap";
+        readonly scale: "spacing";
+    };
+    readonly columnGap: {
+        readonly property: "columnGap";
+        readonly scale: "spacing";
+    };
+    readonly flow: {
+        readonly property: "gridAutoFlow";
+        readonly scale: {
+            readonly row: "row";
+            readonly column: "column";
+            readonly dense: "dense";
+            readonly 'column-dense': "column dense";
+            readonly 'row-dense': "row dense";
+        };
+    };
+    readonly cols: {
+        readonly property: "gridTemplateColumns";
+        readonly transform: (val: string | number) => string;
+        readonly scale: readonly (string | number)[] & {
+            length: 0;
+        };
+    };
+    readonly rows: {
+        readonly property: "gridTemplateRows";
+        readonly transform: (val: string | number) => string;
+        readonly scale: readonly (string | number)[] & {
+            length: 0;
+        };
+    };
+    readonly autoRows: {
+        readonly property: "gridAutoRows";
+        readonly transform: (item: string) => string;
+    };
+    readonly autoCols: {
+        readonly property: "gridAutoColumns";
+        readonly transform: (item: string) => string;
+    };
+    readonly alignAll: {
+        readonly property: "justifyContent";
+        readonly properties: readonly ["justifyContent", "alignItems"];
+    };
+};
+export declare const background: {
+    readonly background: {
+        readonly property: "background";
+    };
+    readonly backgroundImage: {
+        readonly property: "backgroundImage";
+    };
+    readonly backgroundSize: {
+        readonly property: "backgroundSize";
+    };
+    readonly backgroundRepeat: {
+        readonly property: "backgroundRepeat";
+    };
+    readonly backgroundPosition: {
+        readonly property: "backgroundPosition";
+    };
+};
+export declare const positioning: {
+    readonly position: {
+        readonly property: "position";
+    };
+    readonly inset: {
+        readonly property: "inset";
+        readonly properties: readonly ["top", "right", "bottom", "left"];
+        readonly transform: (value: string | number) => string | 0;
+    };
+    readonly top: {
+        readonly property: "top";
+        readonly transform: (value: string | number) => string | 0;
+    };
+    readonly right: {
+        readonly property: "right";
+        readonly transform: (value: string | number) => string | 0;
+    };
+    readonly bottom: {
+        readonly property: "bottom";
+        readonly transform: (value: string | number) => string | 0;
+    };
+    readonly left: {
+        readonly property: "left";
+        readonly transform: (value: string | number) => string | 0;
+    };
+    readonly zIndex: {
+        readonly property: "zIndex";
+    };
+    readonly opacity: {
+        readonly property: "opacity";
+    };
+};
+export declare const shadows: {
+    readonly boxShadow: {
+        readonly property: "boxShadow";
+    };
+    readonly textShadow: {
+        readonly property: "textShadow";
+    };
+};
+export declare const layout: {
+    readonly flexBasis: {
+        readonly property: "flexBasis";
+    };
+    readonly flexShrink: {
+        readonly property: "flexShrink";
+    };
+    readonly flexGrow: {
+        readonly property: "flexGrow";
+    };
+    readonly order: {
+        readonly property: "order";
+    };
+    readonly gridColumn: {
+        readonly property: "gridColumn";
+    };
+    readonly gridRow: {
+        readonly property: "gridRow";
+    };
+    readonly gridColumnStart: {
+        readonly property: "gridColumnStart";
+    };
+    readonly gridRowStart: {
+        readonly property: "gridRowStart";
+    };
+    readonly gridColumnEnd: {
+        readonly property: "gridColumnEnd";
+    };
+    readonly gridRowEnd: {
+        readonly property: "gridRowEnd";
+    };
+    readonly justifySelf: {
+        readonly property: "justifySelf";
+    };
+    readonly alignSelf: {
+        readonly property: "alignSelf";
+    };
+    readonly gridArea: {
+        readonly property: "gridArea";
+    };
+    readonly area: {
+        readonly property: "gridArea";
+    };
+    readonly display: {
+        readonly property: "display";
+    };
+    readonly overflow: {
+        readonly property: "overflow";
+    };
+    readonly overflowX: {
+        readonly property: "overflowX";
+    };
+    readonly overflowY: {
+        readonly property: "overflowY";
+    };
+    readonly size: {
+        readonly property: "width";
+        readonly properties: readonly ["width", "height"];
+        readonly transform: (value: string | number) => string | 0;
+    };
+    readonly width: {
+        readonly property: "width";
+        readonly transform: (value: string | number) => string | 0;
+    };
+    readonly minWidth: {
+        readonly property: "minWidth";
+        readonly transform: (value: string | number) => string | 0;
+    };
+    readonly maxWidth: {
+        readonly property: "maxWidth";
+        readonly transform: (value: string | number) => string | 0;
+    };
+    readonly height: {
+        readonly property: "height";
+        readonly transform: (value: string | number) => string | 0;
+    };
+    readonly minHeight: {
+        readonly property: "minHeight";
+        readonly transform: (value: string | number) => string | 0;
+    };
+    readonly maxHeight: {
+        readonly property: "maxHeight";
+        readonly transform: (value: string | number) => string | 0;
+    };
+    readonly verticalAlign: {
+        readonly property: "verticalAlign";
+    };
+};
+export declare const typography: {
+    readonly fontFamily: {
+        readonly property: "fontFamily";
+        readonly scale: "fontFamily";
+    };
+    readonly fontWeight: {
+        readonly property: "fontWeight";
+        readonly scale: {
+            readonly 400: 400;
+            readonly 600: 600;
+            readonly 700: 700;
+        };
+    };
+    readonly lineHeight: {
+        readonly property: "lineHeight";
+        readonly scale: "lineHeight";
+        readonly lineHeight: readonly [1, 1.5];
+    };
+    readonly fontSize: {
+        readonly property: "fontSize";
+        readonly scale: {
+            readonly 64: 64;
+            readonly 44: 44;
+            readonly 34: 34;
+            readonly 26: 26;
+            readonly 22: 22;
+            readonly 20: 20;
+            readonly 18: 18;
+            readonly 16: 16;
+            readonly 14: 14;
+        };
+    };
+    readonly letterSpacing: {
+        readonly property: "letterSpacing";
+    };
+    readonly textAlign: {
+        readonly property: "textAlign";
+    };
+    readonly fontStyle: {
+        readonly property: "fontStyle";
+    };
+    readonly textDecoration: {
+        readonly property: "textDecoration";
+    };
+    readonly textTransform: {
+        readonly property: "textTransform";
+    };
+    readonly whiteSpace: {
+        readonly property: "whiteSpace";
+    };
+};
+export declare const space: {
+    readonly p: {
+        readonly property: "padding";
+        readonly scale: "spacing";
+    };
+    readonly px: {
+        readonly property: "padding";
+        readonly properties: readonly ["paddingLeft", "paddingRight"];
+        readonly scale: "spacing";
+    };
+    readonly py: {
+        readonly property: "padding";
+        readonly properties: readonly ["paddingTop", "paddingBottom"];
+        readonly scale: "spacing";
+    };
+    readonly pt: {
+        readonly property: "paddingTop";
+        readonly scale: "spacing";
+    };
+    readonly pb: {
+        readonly property: "paddingBottom";
+        readonly scale: "spacing";
+    };
+    readonly pr: {
+        readonly property: "paddingRight";
+        readonly scale: "spacing";
+    };
+    readonly pl: {
+        readonly property: "paddingLeft";
+        readonly scale: "spacing";
+    };
+    readonly m: {
+        readonly property: "margin";
+        readonly scale: "spacing";
+    };
+    readonly mx: {
+        readonly property: "margin";
+        readonly properties: readonly ["marginLeft", "marginRight"];
+        readonly scale: "spacing";
+    };
+    readonly my: {
+        readonly property: "margin";
+        readonly properties: readonly ["marginTop", "marginBottom"];
+        readonly scale: "spacing";
+    };
+    readonly mt: {
+        readonly property: "marginTop";
+        readonly scale: "spacing";
+    };
+    readonly mb: {
+        readonly property: "marginBottom";
+        readonly scale: "spacing";
+    };
+    readonly mr: {
+        readonly property: "marginRight";
+        readonly scale: "spacing";
+    };
+    readonly ml: {
+        readonly property: "marginLeft";
+        readonly scale: "spacing";
+    };
+};
+export declare const mode: {
+    readonly mode: {
+        readonly property: "none";
+        readonly scale: "mode";
+    };
+    readonly vars: {
+        readonly property: "variables";
+    };
+};

package/dist/props/baseScales.d.ts

@@ -0,0 +1,51 @@
+export declare const baseScales: {
+    readonly spacing: {
+        readonly 0: 0;
+        readonly 4: 4;
+        readonly 8: 8;
+        readonly 12: 12;
+        readonly 16: 16;
+        readonly 24: 24;
+        readonly 32: 32;
+        readonly 40: 40;
+        readonly 48: 48;
+        readonly 64: 64;
+        readonly 96: 96;
+    };
+    readonly fontSize: {
+        readonly 64: 64;
+        readonly 44: 44;
+        readonly 34: 34;
+        readonly 26: 26;
+        readonly 22: 22;
+        readonly 20: 20;
+        readonly 18: 18;
+        readonly 16: 16;
+        readonly 14: 14;
+    };
+    readonly lineHeight: {
+        readonly base: 1.5;
+        readonly title: 1;
+    };
+    readonly fontWeight: {
+        readonly 400: 400;
+        readonly 600: 600;
+        readonly 700: 700;
+    };
+    readonly fontFamily: {
+        readonly base: "sans-serif";
+        readonly title: "Lato, sans-serif";
+        readonly mono: "monospace";
+    };
+    readonly radii: {
+        readonly 2: 2;
+        readonly 4: 4;
+        readonly 6: 6;
+        readonly 8: 8;
+    };
+    readonly borders: {
+        readonly 1: "1px solid currentColor";
+        readonly 2: "2px solid currentColor";
+        readonly 4: "4px solid currentColor";
+    };
+};

package/dist/scales/createScale.d.ts

@@ -0,0 +1,3 @@
+export declare const createScale: <T extends string | number>() => readonly T[] & {
+    length: 0;
+};