effcss 4.5.1 → 4.6.1

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/README.md CHANGED
@@ -23,7 +23,7 @@ EffCSS is a self-confident CSS-in-JS library based only on the browser APIs. Use
23
23
  - zero-dependency,
24
24
  - framework agnostic,
25
25
  - selectors isolation and minification out of the box,
26
- - BEM based stylesheet types,
26
+ - flexible stylesheets types that can suggest available selectors (BEM and Atomic CSS compatible),
27
27
  - compatible with any rendering (CSR, SSR, SSG).
28
28
 
29
29
  ## Links
@@ -98,28 +98,27 @@ Each CSS stylesheet corresponds to a single `Stylesheet maker`. `Stylesheet make
98
98
  import { useRef } from 'react';
99
99
  import { IStyleProvider, TStyleSheetMaker } from 'effcss';
100
100
 
101
- // you can describe your styles using BEM notation
101
+ // you can describe your styles
102
102
  // so that other people can use them via TypeScript generics
103
103
  export type TCardMaker = {
104
104
  /**
105
- * Card block
105
+ * Font-size utility
106
+ */
107
+ fsz: 16 | 20 | 24;
108
+ /**
109
+ * Card scope
106
110
  */
107
111
  card: {
108
112
  /**
109
- * Card modifiers
113
+ * Card border radius
110
114
  */
111
- '': {
112
- /**
113
- * Card border radius
114
- */
115
- rounded: '';
116
- /**
117
- * Card height
118
- */
119
- h: 'full' | 'half';
120
- };
115
+ rounded: '';
116
+ /**
117
+ * Card height
118
+ */
119
+ h: 'full' | 'half';
121
120
  /**
122
- * Card logo
121
+ * Card logo scope
123
122
  */
124
123
  logo: {
125
124
  /**
@@ -128,7 +127,7 @@ export type TCardMaker = {
128
127
  w: 's' | 'l';
129
128
  },
130
129
  /**
131
- * Card footer
130
+ * Card footer scope
132
131
  */
133
132
  footer: {
134
133
  /**
@@ -143,9 +142,9 @@ export type TCardMaker = {
143
142
  };
144
143
  }
145
144
 
146
- const myStyleSheetMaker: TStyleSheetMaker = ({ bem, pseudo, at: { keyframes }, merge, palette, coef, size, units: {px} }) = {
145
+ const myStyleSheetMaker: TStyleSheetMaker = ({ select, pseudo, at: { keyframes, property }, merge, palette, coef, size, units: {px} }) = {
147
146
  // specify selector variants via generic
148
- const selector = bem<TCardMaker>;
147
+ const selector = select<TCardMaker>;
149
148
  // create property with unique identifier
150
149
  const widthProperty = property({
151
150
  ini: px(200),
@@ -179,18 +178,19 @@ const myStyleSheetMaker: TStyleSheetMaker = ({ bem, pseudo, at: { keyframes }, m
179
178
  return {
180
179
  ...sizeProperty,
181
180
  ...spin,
181
+ [selector('fsz:16')]: { ... },
182
182
  [selector('card')]: { ... },
183
183
  [selector('card.logo')]: cardLogoStyles,
184
- [selector('card.logo.w.s')]: {
184
+ [selector('card.logo.w:s')]: {
185
185
  ...widthProperty(px(100))
186
186
  },
187
- [selector('card.logo.w.l')]: widthProperty(px(300)),
188
- [selector('card..rounded')]: { ... },
189
- [selector('card..h.full')]: { ... },
187
+ [selector('card.logo.w:l')]: widthProperty(px(300)),
188
+ [selector('card.rounded:')]: { ... },
189
+ [selector('card.h:full')]: { ... },
190
190
  [selector('card.footer')]: { ... },
191
- [selector('card.footer.visible')]: { ... },
191
+ [selector('card.footer.visible:')]: { ... },
192
192
  ...each(coef.short, (k, v) => ({
193
- [selector(`card.footer.sz.${k}`)]: {
193
+ [selector(`card.footer.sz:${k}`)]: {
194
194
  height: size(v)
195
195
  }
196
196
  }))
@@ -203,13 +203,14 @@ export const App = (props: {
203
203
  const { css } = props;
204
204
  const stylesRef = useRef();
205
205
  if (!stylesRef.current) {
206
- const [card] = css.use(myStyleSheetMaker)<TCardMaker>;
206
+ const [card] = css.use(myStyleSheetMaker);
207
207
  // thanks to the TCardMaker type,
208
208
  // you don't need to look at the implementation - just create the necessary attributes
209
209
  stylesRef.current = {
210
- card: card('card..rounded'),
211
- // element with modifiers
212
- footer: card({
210
+ // apply list of selectors
211
+ card: card.list<TCardMaker>('card.rounded:', 'fsz:24'),
212
+ // apply object with selectors
213
+ footer: card.obj<TCardMaker>({
213
214
  card: {
214
215
  footer: {
215
216
  visible: '',
package/dist/index.js CHANGED
@@ -1,7 +1,7 @@
1
1
  /*
2
- * EffCSS v4.5.1
2
+ * EffCSS v4.6.1
3
3
  * {@link https://sourcecraft.dev/msabitov/effcss}
4
4
  * Copyright (c) Marat Sabitov
5
5
  * @license Apache-2.0
6
6
  */
7
- function e(e,t){var s={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(s[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(n=Object.getOwnPropertySymbols(e);r<n.length;r++)t.indexOf(n[r])<0&&Object.prototype.propertyIsEnumerable.call(e,n[r])&&(s[n[r]]=e[n[r]])}return s}"function"==typeof SuppressedError&&SuppressedError;const t=(e,t,s)=>Object.entries(e).reduce(t,s),s=(e,t)=>{return`${s=e,s.replace(/[A-Z]/g,(e=>"-"+e.toLowerCase()))}:${""+t};`;var s},n=Symbol("noParse"),r=(e,i,a)=>{var o,l,c;let u=""+e;return null==i?"":Array.isArray(i)?i.map((e=>s(u,e))).join(""):"object"!=typeof i||i.hasOwnProperty(n)?""===i?u+";":s(u,i):(!a||(null===(o=a.startsWith)||void 0===o?void 0:o.call(a,"@"))||(null===(l=u.startsWith)||void 0===l?void 0:l.call(u,"&"))||(null===(c=u.startsWith)||void 0===c?void 0:c.call(u,"@"))?"":"&")+u+`{${t(i,((e,t)=>e+r(...t,u)),"")}}`},i="@layer",a="@starting-style",o=e=>`(${e})`,l=e=>"string"==typeof e,c={and:(...e)=>Object.defineProperties({type:"and",value:e},{toString:{value:()=>e.filter(Boolean).map((e=>{const t=p(e);return"object"==typeof e&&"or"===e.type?o(t):t})).join(" and ")}}),or:(...e)=>Object.defineProperties({type:"or",value:e},{toString:{value:()=>e.filter(Boolean).map((e=>p(e))).join(" or ")}}),not:e=>"object"==typeof e&&"not"===e.type?e.value[0]:Object.defineProperties({type:"not",value:[e]},{toString:{value:()=>`not (${p(e,!0)})`}})},u=e=>{const t=t=>({toString:()=>`(min-${e}:${l(t)?t:t+"rem"})`}),s=t=>({toString:()=>`(max-${e}:${l(t)?t:t+"rem"})`}),n=(e,n)=>({toString:()=>`${t(e)} and ${s(n)}`});return{up:t,down:s,between:n,only:e=>n(e,e)}},h=u("width"),g=u("height"),m=u("inline-size"),d=u("block-size"),p=(e,t)=>e?"string"==typeof e?e.includes("(")||t?e:o(e):e+"":"",b=(e={})=>{const{type:t,condition:s}=e,n=p(s),r="object"==typeof s&&"or"===s.type,i=`@media${t?" "+t:""}${t&&n?" and":""}${n?" "+(t&&r?o(n):n):""}`;return Object.defineProperties((e=>({[i]:e})),{all:{get:()=>b({condition:s,type:"all"})},print:{get:()=>b({condition:s,type:"print"})},screen:{get:()=>b({condition:s,type:"screen"})},where:{value:e=>b({condition:e,type:t})},toString:{value:()=>i}})},$=b({}),f=({condition:e}={})=>{const t=p(e),s="@supports"+(t?" "+t:"");return Object.defineProperties((e=>({[s]:e})),{where:{value:e=>f({condition:e})},toString:{value:()=>s}})},y=f(),v=e=>({[a]:e});v.toString=a;const j=e=>{const{root:t="",limit:s="",mode:n=[!1,!1]}=e,r=`@scope ${t?`(${t}${n[0]?" > *":""})`:""}${t&&s?" ":""}${s?`to (${s}${n[1]?" > *":""})`:""}`;return Object.defineProperties((e=>({[r]:e})),{limit:{value:e=>j({root:t,limit:e,mode:n})},root:{value:e=>j({root:e,limit:s,mode:n})},both:{value:()=>j({root:t,limit:s,mode:[!1,!0]})},none:{value:()=>j({root:t,limit:s,mode:[!0,!1]})},low:{value:()=>j({root:t,limit:s,mode:[!0,!0]})},high:{value:()=>j({root:t,limit:s,mode:[!1,!1]})},toString:{value:()=>r}})},O=j({}),x=(e,t)=>`calc(${e} * 1${t})`,w=e=>x(e,"px"),S=e=>x(e,"vh"),k=e=>x(e,"vw"),_=e=>x(e,"vmin"),A=e=>x(e,"vmax"),z=e=>x(e,"em"),C=e=>x(e,"rem"),P=e=>x(e,"deg"),q=e=>x(e,"rad"),T=e=>x(e,"rad"),E=e=>x(e,"ms"),N=e=>x(e,"s"),M=e=>x(e,"%"),R=e=>x(e,"cqw"),B=e=>x(e,"cqh"),I=e=>x(e,"cqi"),W=e=>x(e,"cqb"),V=e=>x(e,"cqmin"),J=e=>x(e,"cqmax"),L=Object.fromEntries,H=Object.entries,D=":first-",K=":last-",U=":only-",F="child",Z=":nth-",G="of-type",Q=Z+F,X=":focus",Y="valid",ee="in"+Y,te=":user-",se={r:":root",h:":hover",f:X,fv:X+"-visible",a:":active",v:":visited",val:":"+Y,inv:":"+ee,uval:te+Y,uinv:te+ee,e:":empty",d:":disabled",rq:":required",o:":optional",m:":modal",l:":link",ph:":placeholder",ch:":checked",po:":popover-open",fc:D+F,lc:K+F,oc:U+F,odd:Q+"(odd)",even:Q+"(even)",ft:D+G,lt:K+G,ot:U+G,bef:"::before",aft:"::after",bd:"::backdrop"},ne={has:":has",not:":not",is:":is",wh:":where",st:":state",nthc:Q,ntho:Z+G,dir:":dir",lang:":lang"},re=e=>`oklch(${e})`,ie=e=>re(`from ${e}`),ae=(e,t=.1)=>ie(`${e} calc(l + ${t}) c h / alpha`),oe=(e,t=.1)=>ie(`${e} calc(l - ${t}) c h / alpha`),le=(e,t=.1)=>ie(`${e} l c h / calc(alpha + ${t})`),ce=(e,t=.1)=>ie(`${e} l c h / calc(alpha - ${t})`),ue=(e,t=.04)=>ie(`${e} l calc(c + ${t}) h / alpha`),he=(e,t=.04)=>ie(`${e} l calc(c - ${t}) h / alpha`),ge=(e,t=30)=>ie(`${e} l c calc(h${"number"==typeof t?t>0?" + "+t:" - "+-t:t}) / alpha`),me=e=>{const t=e("color");return{root:e=>e?ie(t+` ${e.l||"l"} ${e.c||"c"} ${e.h||"h"} / ${e.a||"1"}`):t,oklch:re,lighten:ae,darken:oe,saturate:ue,desaturate:he,fadein:le,fadeout:ce,spin:ge}},de=e=>{class t{constructor(e={}){this.state={l:"l",c:"base",h:"pri",a:1,m:"bg"},Object.assign(this,{[n]:!0}),this.state=Object.assign(this.state,e)}get xs(){return new t(Object.assign(Object.assign({},this.state),{l:"xs"}))}get s(){return new t(Object.assign(Object.assign({},this.state),{l:"s"}))}get m(){return new t(Object.assign(Object.assign({},this.state),{l:"m"}))}get l(){return new t(Object.assign(Object.assign({},this.state),{l:"l"}))}get xl(){return new t(Object.assign(Object.assign({},this.state),{l:"xl"}))}get lightness(){return{xs:this.xs,s:this.s,m:this.m,l:this.l,xl:this.xl}}get gray(){return new t(Object.assign(Object.assign({},this.state),{c:"gray"}))}get pale(){return new t(Object.assign(Object.assign({},this.state),{c:"pale"}))}get base(){return new t(Object.assign(Object.assign({},this.state),{c:"base"}))}get rich(){return new t(Object.assign(Object.assign({},this.state),{c:"rich"}))}get chroma(){return{gray:this.gray,pale:this.pale,base:this.base,rich:this.rich}}get pri(){return new t(Object.assign(Object.assign({},this.state),{h:"pri"}))}get sec(){return new t(Object.assign(Object.assign({},this.state),{h:"sec"}))}get suc(){return new t(Object.assign(Object.assign({},this.state),{h:"suc"}))}get inf(){return new t(Object.assign(Object.assign({},this.state),{h:"inf"}))}get war(){return new t(Object.assign(Object.assign({},this.state),{h:"war"}))}get dan(){return new t(Object.assign(Object.assign({},this.state),{h:"dan"}))}get hue(){return{pri:this.pri,sec:this.sec,suc:this.suc,inf:this.inf,war:this.war,dan:this.dan}}alpha(e=1){return new t(Object.assign(Object.assign({},this.state),{a:e}))}get bg(){return new t(Object.assign(Object.assign({},this.state),{m:"bg"}))}get fg(){return new t(Object.assign(Object.assign({},this.state),{m:"fg"}))}toString(){const{l:t,c:s,h:n,a:r,m:i}=this.state;return`oklch(${e(`lightness.${i}.${t}`)} ${e(`chroma.${i}.${s}`)} ${e(`hue.${n}`)} / ${r})`}}return new t},pe="coef",be=e=>{class t{constructor(e={}){this.state={center:8},this.state=Object.assign(this.state,e)}get min(){return e(`${pe}.${this.state.center-4}`)}get xxs(){return e(`${pe}.${this.state.center-3}`)}get xs(){return e(`${pe}.${this.state.center-2}`)}get s(){return e(`${pe}.${this.state.center-1}`)}get m(){return e(`${pe}.${this.state.center}`)}get l(){return e(`${pe}.${this.state.center+1}`)}get xl(){return e(`${pe}.${this.state.center+2}`)}get xxl(){return e(`${pe}.${this.state.center+3}`)}get max(){return e(`${pe}.${this.state.center+4}`)}get $xxs(){return new t({center:4})}get $xs(){return new t({center:8})}get $s(){return new t({center:12})}get $m(){return new t({center:16})}get $l(){return new t({center:20})}get $xl(){return new t({center:24})}get $xxl(){return new t({center:28})}get short(){return{s:this.s,m:this.m,l:this.l}}get base(){return Object.assign(Object.assign({xs:this.xs},this.short),{xl:this.xl})}get long(){return Object.assign(Object.assign({xxs:this.xxs},this.base),{xxl:this.xxl})}get full(){return Object.assign(Object.assign({min:this.min},this.long),{max:this.max})}get main(){return{min:this.min,m:this.m,max:this.max}}get sparse(){return{min:this.min,xs:this.xs,m:this.m,xl:this.xl,max:this.max}}}return new t},$e=Object.assign,fe=Object.entries,ye=Array.isArray,ve=e=>"object"==typeof e,je=(e,t)=>Array.from(Array(e).entries()).reduce(((e,[s])=>$e(e,t(s+1))),{}),Oe=(e,t)=>fe(e).reduce(((e,[s,n])=>$e(e,t(s,n))),{}),xe=(e,t,s={})=>e?t:s,we=(...e)=>e.join("-"),Se=(...e)=>e.join(),ke=(...e)=>e.join(" "),_e=(e,...t)=>t.length?t.reduce(((e,t)=>(t&&e&&ve(t)&&fe(t).forEach((([t,s])=>{s&&ve(s)&&e[t]?ye(e[t])&&ye(s)?e[t]=[...e[t],...s]:_e(e[t],s||{}):e[t]=s})),e)),e):e,Ae=Object.assign(L(H(se).map((([e,t])=>{function s(e=""){return e+t}return s.toString=()=>t,[e,s]}))),L(H(ne).map((([e,t])=>{function s(e,s=""){return s+t+`(${e})`}return s.toString=()=>t,[e,s]})))),ze={px:w,vh:S,vw:k,vmin:_,vmax:A,em:z,rem:C,deg:P,rad:q,turn:T,ms:E,s:N,pc:M,cqw:R,cqh:B,cqb:W,cqi:I,cqmin:V,cqmax:J},Ce=e=>1!==e?e+" * ":"",Pe=e=>{const{scope:s,globalKey:a}=e,o=s(a).varExp,l=(e=1)=>ze.ms(Ce(e)+o("time")),u=(e=1)=>ze.deg(Ce(e)+o("angle")),b=(e=1)=>ze.px(Ce(e)+o("size")),f=e=>e?`cubic-bezier(${e.x1||0},${e.y1||0},${e.x2||1},${e.y2||1})`:o("easing");return{compile:({key:e,maker:a})=>{const j=s(e),x=j.selector,w=(e=>{const t={cp:1,lay:1,kf:1,cq:1},s=(r={})=>{const{scroll:i,type:a,name:o,condition:l}=r,c=p(l),u=`@container${o?" "+o:""}${c?" "+c:""}`;return Object.defineProperties((e=>({[u]:e})),{container:{value:(o||"none")+" / "+(a&&i?`${a} scroll-state`:i?"scroll-state":a||"normal"),enumerable:!0},named:{get:()=>s({scroll:i,condition:l,name:o||e.name(["cq",t.cq++]),type:a})},size:{get:()=>s({name:o,scroll:i,condition:l,type:"size"})},isize:{get:()=>s({name:o,scroll:i,condition:l,type:"inline-size"})},scroll:{get:()=>s({name:o,scroll:!0,condition:l,type:a})},where:{value:e=>s({name:o,scroll:i,condition:e,type:a})},[n]:{value:!0},toString:{value:()=>u}})},r=({name:s}={})=>{const n=`${i}${s?" "+s:""}`,a=e=>({[n]:e});return a.toString=()=>n,Object.defineProperties(a,{named:{get:()=>r({name:s||e.name(["lay",t.lay++])})},list:{value:(...e)=>({[i+(e.map((e=>(e+"").split(i)[1])).filter(Boolean).join(",")||s)]:""})}})};return{layer:r(),supports:y,keyframes:s=>{const r=e.name(["kf",t.kf++]),i="@keyframes "+r;return Object.defineProperties((e=>{if(!e)return{animationName:r};const{dur:t,tf:s,del:n,ic:i,dir:a,ps:o,fm:l}=e;return{animation:[t,s,n,i,a,o,l,r].filter(Boolean).join(" ")}}),{[i]:{value:s,enumerable:!0},toString:{value:()=>r},[n]:{value:!0}})},property:(s={})=>{const{syn:r='"*"',inh:i=!0,ini:a,def:o}=s,l="--"+e.name(["cp",t.cp++]),c=`var(${l}${void 0!==o?","+o:""})`,u="@property "+l;return Object.defineProperties((e=>({[l]:e})),{[u]:{value:{syntax:r,inherits:i,initialValue:a},enumerable:!0},toString:{value:()=>c},fallback:{value:e=>`var(${l},${e})`},[n]:{value:!0}})},scope:O,media:$,container:s({}),startingStyle:v,$logic:c,$width:h,$height:g,$block:d,$inline:m}})(j),S=a({dash:we,comma:Se,space:ke,range:je,each:Oe,when:xe,merge:_e,themeVar:o,size:b,time:l,angle:u,easing:f,bem:x,pseudo:Ae,color:me(o),palette:de(o),coef:be(o),units:ze,at:w});return"string"==typeof S?S:(e=>t(e,((e,t)=>e+r(...t)),""))(S)}}},qe=Symbol("effcss-stylesheet");class Te{constructor(){this.disabled=!1,this.cssRules=[]}replaceSync(e){e&&(this.cssRules=[{cssText:e}])}}function Ee({initStyles:e,emulate:t}={}){const s={};null==e||e.forEach((e=>{var t;const n=null===(t=null==e?void 0:e.dataset)||void 0===t?void 0:t.effcss;n&&(s[n]=e)}));let n={},r={},i=[],a=[];const o=(e,t)=>t.hasOwnProperty(qe)?t:Object.defineProperties(t,{[qe]:{value:e}}),l=e=>{var t;return e.adoptedStyleSheets=[...(null===(t=e.adoptedStyleSheets)||void 0===t?void 0:t.length)?[...e.adoptedStyleSheets].filter((e=>!e.hasOwnProperty(qe))):[],...i]},c=()=>{a=a.reduce(((e,t)=>{const s=t.deref();return s&&(l(s),e.push(t)),e}),[])},u=e=>e?n[e]:void 0,h=(e,t)=>{if(!n[e]){n[e]=o(e,t),i.push(n[e]);const r=s[e];return r&&(r.disabled=!0),c(),!0}};return{get:u,all:()=>n,add:h,status:e=>{const t=u(e);return!(null==t?void 0:t.disabled)},on:(...e)=>{e.forEach((e=>{const t=u(e);t&&(t.disabled=!1)})),c()},off:(...e)=>{e.forEach((e=>{const t=u(e);t&&(t.disabled=!0)})),c()},remove:e=>{const t=u(e);if(!t)return;const s=(a=t,i.findIndex((e=>e===a)));var a;return s>-1&&(i.splice(s,1),delete n[e],delete r[e]),c(),!0},removeAll:()=>(i.splice(0),n={},r={},c(),!0),pack:(e,s)=>{let r=n[e]||(!t&&globalThis.CSSStyleSheet?new globalThis.CSSStyleSheet:new Te);return r.replaceSync(s),r=o(e,r),!!r.cssRules.length&&h(e,r)},register:e=>{a.findIndex((t=>t.deref()===e))>=0||(a.push(new WeakRef(e)),l(e))},unregister:e=>{const t=a.findIndex((t=>t.deref()===e));t>=0&&a.splice(t,1)},hydrate:e=>s[e]&&!s[e].disabled&&s[e].textContent||void 0}}const Ne=({prefix:e})=>{let t=0;return{get initial(){return e+0},get current(){return e+t},next(){return t++,this.current}}},Me=({prefix:e})=>{const t=new Set,s=new Map,n=Ne({prefix:e});return{use(e){let r=this.key(e);return r||(r=n.current,t.add(r),s.set(e,r),n.next(),r)},remake(e,t){const n=s.get(t);return n?(s.delete(t),s.set(e,n),n):this.use(e)},key:e=>e?s.get(e)||"":n.initial,get keys(){return[...t]},get makers(){return Object.fromEntries(s.entries().map((([e,t])=>[t,e])))}}},Re=void 0,Be=Object.entries,Ie=Object.defineProperties,We=e=>"string"==typeof e,Ve=e=>null!==e&&"object"==typeof e,Je=e=>e.split("."),Le=(e,t)=>Be(e).reduce(((e,[s,n])=>{if(Ve(n)){const r=Be(n);r.length?e.push(...r.reduce(((e,[n,r])=>{if((e=>null!==e&&e!==Re)(n)&&t&&e.push([s,n,Re,Re]),Ve(r)){const t=Be(r);t.length&&e.push(...t.reduce(((e,[t,r])=>{const i=typeof r;return"string"!==i&&"number"!==i||e.push([s,n,t,r]),e}),[]))}return e}),[])):e.push([s,Re,Re,Re])}return e}),[]),He=(e,t,s,n)=>""+(((e,t)=>`${e||""}${t?"__"+t:""}`)(e,t)+(s?"_"+s:"")+(s&&n?"_"+n:""))||"_",De=(e,t)=>"."+(t?e+(t.startsWith("_")?"":"-")+t:e),Ke=(e,t)=>`[data-${e}${t?`~="${t}"`:""}]`;const Ue=e=>e||"",Fe=Object.assign,Ze=Object.entries,Ge="theme",Qe="delete",Xe="update",Ye="$light",et="$dark",tt="lightness",st="chroma",nt=e=>Number((.1*184+.9*e).toFixed(2)),rt={time:200,size:16,angle:30,color:"#2192a7",easing:"linear",coef:{0:0,1:.0625,2:.125,3:.25,4:.5,5:.75,6:.875,7:.9375,8:1,9:1.0625,10:1.125,11:1.25,12:1.5,13:1.75,14:1.875,15:1.9375,16:2,17:2.5,18:4,19:5,20:7.5,21:10,22:12,23:15,24:16,25:20,26:28,27:36,28:48,29:64,30:80,31:120,32:150},hue:{pri:184,sec:290,suc:nt(142),inf:nt(264),war:nt(109),dan:nt(29)},[Ye]:{[tt]:{bg:{xl:.98,l:.93,m:.88,s:.83,xs:.78},fg:{xl:0,l:.12,m:.24,s:.36,xs:.48}},[st]:{bg:{gray:0,pale:.01,base:.04,rich:.7},fg:{gray:0,pale:.07,base:.11,rich:.15}}},[et]:{[tt]:{bg:{xl:.24,l:.3,m:.36,s:.42,xs:.48},fg:{xl:.98,l:.93,m:.86,s:.79,xs:.72}},[st]:{bg:{pale:.02,base:.06,rich:.1},fg:{pale:.06,base:.1,rich:.14}}}},it=({provider:t,init:s,scope:n,onChange:r})=>{const i={"":rt},a=[],o=t=>{var{$light:s={},$dark:r={}}=t,i=e(t,["$light","$dark"]);function a(e,t=[]){return Ze(e).reduce(((e,[s,r])=>r&&"object"==typeof r?Fe(e,a(r,[...t,s])):(e[n.varName([...t,s])]=r,e)),{})}return Object.assign(Object.assign({},a(i)),{[Ye]:a(s),[et]:a(r)})},l={get:(e="")=>i[e],add(e,t){i[t]||(i[t]=_e({[Ye]:{},[et]:{}},e),a.push({type:"add",payload:{params:e,name:t}}),null==r||r())},delete(e){e&&i[e]&&(this.current===e&&this.switch(),delete i[e],a.push({type:Qe,payload:{name:e}}),null==r||r())},update(e,t=""){i[t]&&(i[t]=_e({[Ye]:{},[et]:{}},i[t],e),a.push({type:Xe,payload:{params:e,name:t}}),null==r||r())},switch(e=""){i[e]&&t.setAttribute(Ge,e)},vars(e=""){const t=this.get(e);return t?o(t):{[Ye]:{},[et]:{}}},makeThemeVars:o,get list(){const t=e(i,[""]);return Object.keys(t)},get current(){return t.getAttribute(Ge)||""},get all(){return i},get actions(){return a}};return null==s||s.forEach((({type:e,payload:t})=>{switch(e){case"add":l.add(t.params,t.name);break;case Qe:l.delete(t.name);break;case Xe:l.update(t.params,t.name)}})),l},at="effcss",ot=at+"-provider",lt=at+"-override",ct="script",ut="style",ht="size",gt="time",mt="angle",dt="color",pt="easing",bt=at+"changes",$t="data-"+at,ft="prefers-color-scheme",yt=`${ft}: light`,vt=`${ft}: dark`,jt={mode:"a",pre:"f"},Ot=e=>"boolean"==typeof e,xt=(e,t)=>{const s=((e,t)=>e.getAttribute(t)||jt[t])(e,t);return(e=>"string"==typeof e?Number(e):null)(s)},wt=(e,t,s)=>null===s?e.removeAttribute(t):e.setAttribute(t,s+""),St=e=>`:root:has([is=${ot}]${e?`[${e}]`:""})`,kt=e=>Object.entries(e).reduce(((e,[t,s])=>e+t+":"+s+";"),""),_t=({theme:t,attrs:s,scope:n})=>({bem:r,each:i,themeVar:a,merge:o,pseudo:{r:l},at:{media:c},units:{px:u}})=>{const h=s.size,g=s.time,m=s.angle,d=s.color,p=s.easing,b=t.vars(),{$dark:$={},$light:f={}}=b,y=e(b,["$dark","$light"]);return o({[St()]:Object.assign(Object.assign(Object.assign(Object.assign({},y),c.where(yt)(f)),c.where(vt)($)),{[l()]:{fontSize:u(a("size"))}})},i(t.list,((s,n)=>{const i=t.vars(n),{$dark:a={},$light:o={}}=i,l=e(i,["$dark","$light"]),u=Object.assign(Object.assign(Object.assign({},l),c.where(yt)(o)),c.where(vt)(a));return{[St(`theme=${s}`)]:u,[r(`..theme.${s}`)]:u}})),h&&{[St(ht)]:{[n.varName(ht)]:h}},g&&{[St(gt)]:{[n.varName(gt)]:g}},m&&{[St(mt)]:{[n.varName(mt)]:m}},d&&{[St(dt)]:{[n.varName(dt)]:d}},p&&{[St(pt)]:{[n.varName(pt)]:p}})},At=(e,t)=>({set(s){wt(e,t,s)},get:()=>xt(e,t)}),zt=(e,t)=>({set(s){wt(e,t,s)},get:()=>e.getAttribute(t)}),Ct=(e,{initStyles:t,emulate:s,onChange:n,globalMaker:r,noscript:i})=>{let a;e.textContent&&(a=JSON.parse(e.textContent)),Object.defineProperties(e,{pre:{get:()=>e.getAttribute("pre")||"f"},mode:{get:()=>e.getAttribute("mode")||"a"},min:{get:()=>""===e.getAttribute("min")},size:At(e,ht),time:At(e,gt),angle:At(e,mt),color:zt(e,dt),easing:zt(e,pt)});const o=Me({prefix:e.pre}),l=((e={})=>{const{mode:t,min:s,dict:n={}}=e;let r;r="a"===t?Ke:De;const i=e=>{let s=0,n=Ue,a=Ue;const o=i.dict;o&&(o[e]||(o[e]={}),n=t=>{var n;return null!==(n=o[e][t])&&void 0!==n?n:o[e][t]=(s++).toString(36)},a=t=>o[e][t]);let l=t=>[e,...We(t)?t.split("."):t].filter(Boolean).join("-"),c="class",u=t=>t?e+(t.startsWith("_")?"":"-")+t:void 0===t?void 0:e;"a"===t&&(c="data-"+e,u=Ue);const h=e=>"--"+l(We(e)?e.split("."):e),g=e=>{if(void 0===e)return function(e){const t=({b:s,e:n,m:r})=>({b:e=>t({b:e,e:"",m:{}}),e:e=>t({b:s,e:e,m:{}}),m:(e={})=>t({b:s,e:n,m:e}),get $(){return e({[s]:{[n]:r}})}});return t({b:"",e:"",m:{}})}(g);let t,s,n,r,i="";const o=We(e);return i=o||Array.isArray(e)?[...(o?[e]:e).reduce(((e,i)=>([t,s,n,r]=Je(i),e.add(u(a(He(t,s)))),n&&e.add(u(a(He(t,s,n,r)))),e)),new Set).values()].join(" "):e&&Le(e,!0).map((([e,t,s,n])=>u(a(He(e,t,s,n))))).join(" "),Ie({[c]:i},{toString:{value:()=>`${c}="${i}"`},$:{value:i}})};return{selector:t=>{const[s,i,a,o]=Je(t);return r(e,n(He(s,i,a,o)))},attr:g,name:l,varName:h,varExp:(e,t)=>`var(${h(e)}${void 0!==t?","+t:""})`}};return s&&(i.dict=n),i})({mode:e.mode,min:e.min,dict:null==a?void 0:a.dict}),c=l(o.key()),u=Pe({scope:l,globalKey:o.key()}),h=Ee({initStyles:t,emulate:s});e.theme=it({provider:e,init:null==a?void 0:a.theme,onChange:n,scope:c});const g=(({scope:e,collector:t,manager:s,processor:n,globalMaker:r})=>{const i=e=>"string"==typeof e?e:t.key(e),a=s=>e(s||t.key()).attr,o=(e,t)=>n.compile({key:t,maker:e}),l=e=>{let n=t.use(e);return s&&!s.get(n)&&s.pack(n,s.hydrate(n)||o(e,n)),a(n)},c=(...e)=>0===e.length?[l(r)]:e.map((e=>l(e)));return{use:c,remake:(e,n)=>{let r=t.key(n||e);return s&&s.get(r)?(n&&t.remake(e,n),s.pack(r,s.hydrate(r)||o(e,r)),a(r)):c(e)[0]},css:o,status:e=>{const t=i(e);return!!t&&s.status(t)},on:(...e)=>s.on(...e.map(i)),off:(...e)=>s.off(...e.map(i)),stylesheets:(e=t.keys)=>e.map((e=>s.get(i(e))))}})({scope:l,processor:u,manager:h,collector:o,globalMaker:r});Object.defineProperties(e,{_c:{value:o},_s:{value:l},_p:{value:u},_m:{value:h},toString:{value:()=>{const t=Object.assign({},h.all()),s=Object.entries(t).filter((([e,t])=>!t.disabled)).map((([e,t])=>`<style ${$t}="${e}">${[...t.cssRules].map((e=>e.cssText)).join("")}</style>`)).join("");let n=ut,r="";const a={is:ot,min:e.getAttribute("min"),mode:e.getAttribute("mode"),size:e.getAttribute(ht),time:e.getAttribute(gt),angle:e.getAttribute(mt),color:e.getAttribute(dt),easing:e.getAttribute(pt)};if(!i){n=ct,a.type="application/json";const t={theme:e.theme.actions};e.min&&o.keys.length>1&&(t.dict=l.dict),r=JSON.stringify(t)}return s+`<${n} ${Object.entries(a).map((([e,t])=>null!=t&&t!==jt[e]?""===t?e:`${e}="${t}"`:"")).filter(Boolean).join(" ")}${e.theme.current?` theme="${e.theme.current}"`:""}>${r}</${n}>`}}}),Object.assign(e,g)},Pt=Symbol(ot),qt=[ht,gt,mt,dt,pt],Tt=new Set(qt),Et=()=>null===globalThis||void 0===globalThis?void 0:globalThis.document.querySelector(`[is=${ot}]`);const Nt=(e={})=>{let{noscript:t,attrs:s={}}=e,{mode:n=jt.mode,min:r,pre:i=jt.prefix,size:a=null,time:o=null,angle:l=null,color:c=null,easing:u=null}=s;return new class{get tagName(){return""}get textContent(){return""}getAttribute(e){const t=this.attributes[e];return null!=t?Ot(t)?"":t+"":null}setAttribute(e,t){this.attributes[e]=t+"",Tt.has(e)&&this._customize()}removeAttribute(e){delete this.attributes[e]}get makers(){return this._c.makers}constructor(){this.attributes={size:a?a+"":null,time:o?o+"":null,angle:l?l+"":null,color:c||null,easing:u||null,pre:i,mode:n,min:r?"":null},this._customize=()=>{const e=this.size,t=this.time,s=this.angle,n=this.color,r=this.easing,i=_t({theme:this.theme,attrs:{size:e,time:t,angle:s,color:n,easing:r},scope:this._s(this._c.key())});this.remake(i,this._),this._=i},Ct(this,{emulate:!0,onChange:this._customize,globalMaker:this._,noscript:t}),this._customize()}}},Mt=(t={})=>{const{emulate:s,global:n}=t,r=e(t,["emulate","global"]),i=null===globalThis||void 0===globalThis?void 0:globalThis.document;let a;const o=globalThis[Pt];if(n&&o)a=o;else if(i&&!s){void 0===Mt.isDefined&&(Mt.isDefined=function(){const t=globalThis.document,s=globalThis.customElements;if(null==s?void 0:s.get(ot))return!1;{class n extends HTMLScriptElement{constructor(){super(...arguments),this._customize=()=>{const e=this.size,t=this.time,s=this.angle,n=this.color,r=this.easing,i=_t({theme:this.theme,attrs:{size:e,time:t,angle:s,color:n,easing:r},scope:this._s(this._c.key())});this.remake(i,this._),this._=i}}static get observedAttributes(){return qt}get makers(){return this._c.makers}attributeChangedCallback(){this.isConnected&&this._customize()}connectedCallback(){Ct(this,{initStyles:[...t.querySelectorAll(ut+`[${$t}]`)],onChange:this._customize,globalMaker:this._}),this._customize();const e=this;this._n={set adoptedStyleSheets(t){e.dispatchEvent(new CustomEvent(bt,{detail:{styles:t},bubbles:!0}))}},this._m.register(this._n),this._m.register(t)}}s.define(ot,n,{extends:ct});class r extends HTMLElement{static get observedAttributes(){return["values"]}_customize(){const t=Et();if(this.shadowRoot&&t){const s=this.getAttribute("values"),n=new CSSStyleSheet;if(s){const r=t.theme.makeThemeVars(JSON.parse(decodeURIComponent(s))),{$dark:i={},$light:a={}}=r,o=e(r,["$dark","$light"]);n.replaceSync(`:host{display:contents;${kt(o)}}@media(${yt}){:host{${kt(a)}}}@media(${vt}){:host{${kt(i)}}}`)}else n.replaceSync(":host{display:contents;}");this.shadowRoot.adoptedStyleSheets=[n]}}attributeChangedCallback(){this.isConnected&&this._customize()}connectedCallback(){this.attachShadow({mode:"open"}).innerHTML="<slot></slot>",this._customize()}}return s.define(lt,r),!0}}());const t=Et();if(t)a=t;else{const e=i.createElement(ct,{is:ot});e.setAttribute("is",ot);const t=null==r?void 0:r.attrs;t&&Object.entries(t).map((([t,s])=>s&&jt[t]!==s&&e.setAttribute(t,Ot(s)?"":s+""))),i.head.appendChild(e),a=e}}else a=Nt(r);return n&&!o&&(globalThis[Pt]=a),a},Rt=e=>encodeURIComponent(JSON.stringify(e));export{jt as DEFAULT_ATTRS,ot as TAG_NAME,lt as TAG_NAME_OVERRIDE,Rt as prepareOverrideValues,Mt as useStyleProvider};
7
+ const e=(e,t,r)=>Object.entries(e).reduce(t,r),t=(e,t)=>{return`${r=e,r.replace(/[A-Z]/g,(e=>"-"+e.toLowerCase()))}:${""+t};`;var r},r=Symbol("noParse"),s=(n,i,a)=>{let o=""+n;return null==i?"":Array.isArray(i)?i.map((e=>t(o,e))).join(""):"object"!=typeof i||i.hasOwnProperty(r)?""===i?o+";":t(o,i):(!a||a.startsWith?.("@")||o.startsWith?.("&")||o.startsWith?.("@")?"":"&")+o+`{${e(i,((e,t)=>e+s(...t,o)),"")}}`},n="@layer",i="@starting-style",a=e=>`(${e})`,o=e=>"string"==typeof e,l={and:(...e)=>Object.defineProperties({type:"and",value:e},{toString:{value:()=>e.filter(Boolean).map((e=>{const t=g(e);return"object"==typeof e&&"or"===e.type?a(t):t})).join(" and ")}}),or:(...e)=>Object.defineProperties({type:"or",value:e},{toString:{value:()=>e.filter(Boolean).map((e=>g(e))).join(" or ")}}),not:e=>"object"==typeof e&&"not"===e.type?e.value[0]:Object.defineProperties({type:"not",value:[e]},{toString:{value:()=>`not (${g(e,!0)})`}})},c=e=>{const t=t=>({toString:()=>`(min-${e}:${o(t)?t:t+"rem"})`}),r=t=>({toString:()=>`(max-${e}:${o(t)?t:t+"rem"})`}),s=(e,s)=>({toString:()=>`${t(e)} and ${r(s)}`});return{up:t,down:r,between:s,only:e=>s(e,e)}},u=c("width"),h=c("height"),m=c("inline-size"),d=c("block-size"),g=(e,t)=>e?"string"==typeof e?e.includes("(")||t?e:a(e):e+"":"",p=(e={})=>{const{type:t,condition:r}=e,s=g(r),n="object"==typeof r&&"or"===r.type,i=`@media${t?" "+t:""}${t&&s?" and":""}${s?" "+(t&&n?a(s):s):""}`;return Object.defineProperties((e=>({[i]:e})),{all:{get:()=>p({condition:r,type:"all"})},print:{get:()=>p({condition:r,type:"print"})},screen:{get:()=>p({condition:r,type:"screen"})},where:{value:e=>p({condition:e,type:t})},toString:{value:()=>i}})},b=p({}),$=({condition:e}={})=>{const t=g(e),r="@supports"+(t?" "+t:"");return Object.defineProperties((e=>({[r]:e})),{where:{value:e=>$({condition:e})},toString:{value:()=>r}})},f=$(),y=e=>({[i]:e});y.toString=i;const v=e=>{const{root:t="",limit:r="",mode:s=[!1,!1]}=e,n=`@scope ${t?`(${t}${s[0]?" > *":""})`:""}${t&&r?" ":""}${r?`to (${r}${s[1]?" > *":""})`:""}`;return Object.defineProperties((e=>({[n]:e})),{limit:{value:e=>v({root:t,limit:e,mode:s})},root:{value:e=>v({root:e,limit:r,mode:s})},both:{value:()=>v({root:t,limit:r,mode:[!1,!0]})},none:{value:()=>v({root:t,limit:r,mode:[!0,!1]})},low:{value:()=>v({root:t,limit:r,mode:[!0,!0]})},high:{value:()=>v({root:t,limit:r,mode:[!1,!1]})},toString:{value:()=>n}})},x=v({}),w=(e,t)=>`calc(${e} * 1${t})`,S=e=>w(e,"px"),k=e=>w(e,"vh"),j=e=>w(e,"vw"),_=e=>w(e,"vmin"),O=e=>w(e,"vmax"),A=e=>w(e,"em"),z=e=>w(e,"rem"),C=e=>w(e,"deg"),q=e=>w(e,"rad"),P=e=>w(e,"rad"),E=e=>w(e,"ms"),N=e=>w(e,"s"),T=e=>w(e,"%"),M=e=>w(e,"cqw"),R=e=>w(e,"cqh"),B=e=>w(e,"cqi"),W=e=>w(e,"cqb"),I=e=>w(e,"cqmin"),V=e=>w(e,"cqmax"),J=Object.fromEntries,L=Object.entries,H=":first-",D=":last-",K=":only-",U="child",F=":nth-",Z="of-type",G=F+U,Q=":focus",X="valid",Y="in"+X,ee=":user-",te={r:":root",h:":hover",f:Q,fv:Q+"-visible",a:":active",v:":visited",val:":"+X,inv:":"+Y,uval:ee+X,uinv:ee+Y,e:":empty",d:":disabled",rq:":required",o:":optional",m:":modal",l:":link",ph:":placeholder",ch:":checked",po:":popover-open",fc:H+U,lc:D+U,oc:K+U,odd:G+"(odd)",even:G+"(even)",ft:H+Z,lt:D+Z,ot:K+Z,bef:"::before",aft:"::after",bd:"::backdrop"},re={has:":has",not:":not",is:":is",wh:":where",st:":state",nthc:G,ntho:F+Z,dir:":dir",lang:":lang"},se=e=>`oklch(${e})`,ne=e=>se(`from ${e}`),ie=(e,t=.1)=>ne(`${e} calc(l + ${t}) c h / alpha`),ae=(e,t=.1)=>ne(`${e} calc(l - ${t}) c h / alpha`),oe=(e,t=.1)=>ne(`${e} l c h / calc(alpha + ${t})`),le=(e,t=.1)=>ne(`${e} l c h / calc(alpha - ${t})`),ce=(e,t=.04)=>ne(`${e} l calc(c + ${t}) h / alpha`),ue=(e,t=.04)=>ne(`${e} l calc(c - ${t}) h / alpha`),he=(e,t=30)=>ne(`${e} l c calc(h${"number"==typeof t?t>0?" + "+t:" - "+-t:t}) / alpha`),me=e=>{const t=e("color");return{root:e=>e?ne(t+` ${e.l||"l"} ${e.c||"c"} ${e.h||"h"} / ${e.a||"1"}`):t,oklch:se,lighten:ie,darken:ae,saturate:ce,desaturate:ue,fadein:oe,fadeout:le,spin:he}},de=e=>{class t{state={l:"l",c:"base",h:"pri",a:"1",m:"bg"};constructor(e={}){Object.assign(this,{[r]:!0}),this.state=Object.assign(this.state,e)}get xs(){return new t({...this.state,l:"xs"})}get s(){return new t({...this.state,l:"s"})}get m(){return new t({...this.state,l:"m"})}get l(){return new t({...this.state,l:"l"})}get xl(){return new t({...this.state,l:"xl"})}get lightness(){return{xs:this.xs,s:this.s,m:this.m,l:this.l,xl:this.xl}}get gray(){return new t({...this.state,c:"gray"})}get pale(){return new t({...this.state,c:"pale"})}get base(){return new t({...this.state,c:"base"})}get rich(){return new t({...this.state,c:"rich"})}get chroma(){return{gray:this.gray,pale:this.pale,base:this.base,rich:this.rich}}get pri(){return new t({...this.state,h:"pri"})}get sec(){return new t({...this.state,h:"sec"})}get suc(){return new t({...this.state,h:"suc"})}get inf(){return new t({...this.state,h:"inf"})}get war(){return new t({...this.state,h:"war"})}get dan(){return new t({...this.state,h:"dan"})}get hue(){return{pri:this.pri,sec:this.sec,suc:this.suc,inf:this.inf,war:this.war,dan:this.dan}}alpha(e=1){return new t({...this.state,a:e+""})}get bg(){return new t({...this.state,m:"bg"})}get fg(){return new t({...this.state,m:"fg"})}toString(){const{l:t,c:r,h:s,a:n,m:i}=this.state;return`oklch(${e(`lightness.${i}.${t}`)} ${e(`chroma.${i}.${r}`)} ${e(`hue.${s}`)} / ${n})`}}return new t},ge="coef",pe=e=>{class t{state={center:8};constructor(e={}){this.state=Object.assign(this.state,e)}get min(){return e(`${ge}.${this.state.center-4}`)}get xxs(){return e(`${ge}.${this.state.center-3}`)}get xs(){return e(`${ge}.${this.state.center-2}`)}get s(){return e(`${ge}.${this.state.center-1}`)}get m(){return e(`${ge}.${this.state.center}`)}get l(){return e(`${ge}.${this.state.center+1}`)}get xl(){return e(`${ge}.${this.state.center+2}`)}get xxl(){return e(`${ge}.${this.state.center+3}`)}get max(){return e(`${ge}.${this.state.center+4}`)}get $xxs(){return new t({center:4})}get $xs(){return new t({center:8})}get $s(){return new t({center:12})}get $m(){return new t({center:16})}get $l(){return new t({center:20})}get $xl(){return new t({center:24})}get $xxl(){return new t({center:28})}get short(){return{s:this.s,m:this.m,l:this.l}}get base(){return{xs:this.xs,...this.short,xl:this.xl}}get long(){return{xxs:this.xxs,...this.base,xxl:this.xxl}}get full(){return{min:this.min,...this.long,max:this.max}}get main(){return{min:this.min,m:this.m,max:this.max}}get sparse(){return{min:this.min,xs:this.xs,m:this.m,xl:this.xl,max:this.max}}}return new t},be=Object.assign,$e=Object.entries,fe=Array.isArray,ye=e=>"object"==typeof e,ve=(e,t)=>Array.from(Array(e).entries()).reduce(((e,[r])=>be(e,t(r+1))),{}),xe=(e,t)=>$e(e).reduce(((e,[r,s])=>be(e,t(r,s))),{}),we=(e,t,r={})=>e?t:r,Se=(...e)=>e.join("-"),ke=(...e)=>e.join(),je=(...e)=>e.join(" "),_e=(e,...t)=>t.length?t.reduce(((e,t)=>(t&&e&&ye(t)&&$e(t).forEach((([t,r])=>{r&&ye(r)&&e[t]?fe(e[t])&&fe(r)?e[t]=[...e[t],...r]:_e(e[t],r||{}):e[t]=r})),e)),e):e,Oe=Object.assign(J(L(te).map((([e,t])=>{function r(e=""){return e+t}return r.toString=()=>t,[e,r]}))),J(L(re).map((([e,t])=>{function r(e,r=""){return r+t+`(${e})`}return r.toString=()=>t,[e,r]})))),Ae={px:S,vh:k,vw:j,vmin:_,vmax:O,em:A,rem:z,deg:C,rad:q,turn:P,ms:E,s:N,pc:T,cqw:M,cqh:R,cqb:W,cqi:B,cqmin:I,cqmax:V},ze=e=>1!==e?e+" * ":"",Ce=t=>{const{scope:i,globalKey:a}=t,o=i(a).varExp,c=(e=1)=>Ae.ms(ze(e)+o("time")),p=(e=1)=>Ae.deg(ze(e)+o("angle")),$=(e=1)=>Ae.px(ze(e)+o("size")),v=e=>e?`cubic-bezier(${e.x1||0},${e.y1||0},${e.x2||1},${e.y2||1})`:o("easing");return{compile:({key:t,maker:a})=>{const w=i(t),S=w.selector,k=w.select,j=(e=>{const t={cp:1,lay:1,kf:1,cq:1},s=(n={})=>{const{scroll:i,type:a,name:o,condition:l}=n,c=g(l),u=`@container${o?" "+o:""}${c?" "+c:""}`;return Object.defineProperties((e=>({[u]:e})),{container:{value:(o||"none")+" / "+(a&&i?`${a} scroll-state`:i?"scroll-state":a||"normal"),enumerable:!0},named:{get:()=>s({scroll:i,condition:l,name:o||e.name(["cq",t.cq++]),type:a})},size:{get:()=>s({name:o,scroll:i,condition:l,type:"size"})},isize:{get:()=>s({name:o,scroll:i,condition:l,type:"inline-size"})},scroll:{get:()=>s({name:o,scroll:!0,condition:l,type:a})},where:{value:e=>s({name:o,scroll:i,condition:e,type:a})},[r]:{value:!0},toString:{value:()=>u}})},i=({name:r}={})=>{const s=`${n}${r?" "+r:""}`,a=e=>({[s]:e});return a.toString=()=>s,Object.defineProperties(a,{named:{get:()=>i({name:r||e.name(["lay",t.lay++])})},list:{value:(...e)=>({[n+(e.map((e=>(e+"").split(n)[1])).filter(Boolean).join(",")||r)]:""})}})};return{layer:i(),supports:f,keyframes:s=>{const n=e.name(["kf",t.kf++]),i="@keyframes "+n;return Object.defineProperties((e=>{if(!e)return{animationName:n};const{dur:t,tf:r,del:s,ic:i,dir:a,ps:o,fm:l}=e;return{animation:[t,r,s,i,a,o,l,n].filter(Boolean).join(" ")}}),{[i]:{value:s,enumerable:!0},toString:{value:()=>n},[r]:{value:!0}})},property:(s={})=>{let n,i,a='"*"',o=!0;"object"==typeof s?({syn:a=a,inh:o=o,ini:n,def:i}=s):(i=s,n=s,o=!1);const l="--"+e.name(["cp",t.cp++]),c=`var(${l}${void 0!==i?","+i:""})`,u="@property "+l;return Object.defineProperties((e=>({[l]:e})),{[u]:{value:{syntax:a,inherits:o,initialValue:n},enumerable:!0},toString:{value:()=>c},fallback:{value:e=>`var(${l},${e})`},[r]:{value:!0}})},scope:x,media:b,container:s({}),startingStyle:y,$logic:l,$width:u,$height:h,$block:d,$inline:m}})(w),_=a({dash:Se,comma:ke,space:je,range:ve,each:xe,when:we,merge:_e,themeVar:o,size:$,time:c,angle:p,easing:v,bem:S,select:k,pseudo:Oe,color:me(o),palette:de(o),coef:pe(o),units:Ae,at:j});return"string"==typeof _?_:(t=>e(t,((e,t)=>e+s(...t)),""))(_)}}},qe=Symbol("effcss-stylesheet");class Pe{disabled=!1;cssRules=[];replaceSync(e){e&&(this.cssRules=[{cssText:e}])}}function Ee({initStyles:e,emulate:t}={}){const r={};e?.forEach((e=>{const t=e?.dataset?.effcss;t&&(r[t]=e)}));let s={},n={},i=[],a=[];const o=(e,t)=>t.hasOwnProperty(qe)?t:Object.defineProperties(t,{[qe]:{value:e}}),l=e=>e.adoptedStyleSheets=[...e.adoptedStyleSheets?.length?[...e.adoptedStyleSheets].filter((e=>!e.hasOwnProperty(qe))):[],...i],c=()=>{a=a.reduce(((e,t)=>{const r=t.deref();return r&&(l(r),e.push(t)),e}),[])},u=e=>e?s[e]:void 0,h=(e,t)=>{if(!s[e]){s[e]=o(e,t),i.push(s[e]);const n=r[e];return n&&(n.disabled=!0),c(),!0}};return{get:u,all:()=>s,add:h,status:e=>{const t=u(e);return!t?.disabled},on:(...e)=>{e.forEach((e=>{const t=u(e);t&&(t.disabled=!1)})),c()},off:(...e)=>{e.forEach((e=>{const t=u(e);t&&(t.disabled=!0)})),c()},remove:e=>{const t=u(e);if(!t)return;const r=(a=t,i.findIndex((e=>e===a)));var a;return r>-1&&(i.splice(r,1),delete s[e],delete n[e]),c(),!0},removeAll:()=>(i.splice(0),s={},n={},c(),!0),pack:(e,r)=>{let n=s[e]||(!t&&globalThis.CSSStyleSheet?new globalThis.CSSStyleSheet:new Pe);return n.replaceSync(r),n=o(e,n),!!n.cssRules.length&&h(e,n)},register:e=>{a.findIndex((t=>t.deref()===e))>=0||(a.push(new WeakRef(e)),l(e))},unregister:e=>{const t=a.findIndex((t=>t.deref()===e));t>=0&&a.splice(t,1)},hydrate:e=>r[e]&&!r[e].disabled&&r[e].textContent||void 0}}const Ne=({prefix:e})=>{let t=0;return{get initial(){return e+0},get current(){return e+t},next(){return t++,this.current}}},Te=({prefix:e})=>{const t=new Set,r=new Map,s=Ne({prefix:e});return{use(e){let n=this.key(e);return n||(n=s.current,t.add(n),r.set(e,n),s.next(),n)},remake(e,t){const s=r.get(t);return s?(r.delete(t),r.set(e,s),s):this.use(e)},key:e=>e?r.get(e)||"":s.initial,get keys(){return[...t]},get makers(){return Object.fromEntries(r.entries().map((([e,t])=>[t,e])))}}},Me=void 0,Re=Object.entries,Be=Object.defineProperties,We=e=>"string"==typeof e,Ie=e=>null!==e&&"object"==typeof e,Ve=e=>e.split("."),Je=(e,t="")=>Re(e).reduce(((e,[r,s])=>{const n=t?`${t}-${r}`:r;return"object"==typeof s?(e.add(n),e=e.union(Je(s,n))):e.add(n+`_${s}`),e}),new Set),Le=(e,t="")=>Re(e).reduce(((e,[r,s])=>{const n=t?`${t}-${r}`:r;if("object"==typeof s){const t=Le(s,n);t.size||e.add(n),e=e.union(t)}else t&&e.add(t),e.add(n+`_${s}`);return e}),new Set),He=(e,t)=>Re(e).reduce(((e,[r,s])=>{if(Ie(s)){const n=Re(s);n.length?e.push(...n.reduce(((e,[s,n])=>{if((e=>null!==e&&e!==Me)(s)&&t&&e.push([r,s,Me,Me]),Ie(n)){const t=Re(n);t.length&&e.push(...t.reduce(((e,[t,n])=>{const i=typeof n;return"string"!==i&&"number"!==i||e.push([r,s,t,n]),e}),[]))}return e}),[])):e.push([r,Me,Me,Me])}return e}),[]),De=(e,t,r,s)=>""+(((e,t)=>`${e||""}${t?"__"+t:""}`)(e,t)+(r?"_"+r:"")+(r&&s?"_"+s:""))||"_",Ke=(e,t)=>"."+(t?e+(t.startsWith("_")?"":"-")+t:e),Ue=(e,t)=>`[data-${e}${t?`~="${t}"`:""}]`;const Fe=e=>e||"",Ze=Object.assign,Ge=Object.entries,Qe="theme",Xe="delete",Ye="update",et="$light",tt="$dark",rt="lightness",st="chroma",nt=e=>Number((.1*184+.9*e).toFixed(2)),it={time:200,size:16,angle:30,color:"#2192a7",easing:"linear",coef:{0:0,1:.0625,2:.125,3:.25,4:.5,5:.75,6:.875,7:.9375,8:1,9:1.0625,10:1.125,11:1.25,12:1.5,13:1.75,14:1.875,15:1.9375,16:2,17:3,18:4,19:5,20:7.5,21:10,22:12,23:15,24:16,25:20,26:28,27:36,28:48,29:64,30:80,31:120,32:150},hue:{pri:184,sec:290,suc:nt(142),inf:nt(264),war:nt(109),dan:nt(29)},[et]:{[rt]:{bg:{xl:1,l:.94,m:.88,s:.83,xs:.78},fg:{xl:0,l:.12,m:.24,s:.36,xs:.48}},[st]:{bg:{gray:0,pale:.01,base:.04,rich:.7},fg:{gray:0,pale:.07,base:.11,rich:.15}}},[tt]:{[rt]:{bg:{xl:.24,l:.3,m:.36,s:.42,xs:.48},fg:{xl:1,l:.93,m:.86,s:.79,xs:.72}},[st]:{bg:{pale:.02,base:.06,rich:.1},fg:{pale:.06,base:.1,rich:.14}}}},at=({provider:e,init:t,scope:r,onChange:s})=>{const n={"":it},i=[],a=({$light:e={},$dark:t={},...s})=>{function n(e,t=[]){return Ge(e).reduce(((e,[s,i])=>i&&"object"==typeof i?Ze(e,n(i,[...t,s])):(e[r.varName([...t,s])]=i,e)),{})}return{...n(s),[et]:n(e),[tt]:n(t)}},o={get:(e="")=>n[e],add(e,t){n[t]||(n[t]=_e({[et]:{},[tt]:{}},e),i.push({type:"add",payload:{params:e,name:t}}),s?.())},delete(e){e&&n[e]&&(this.current===e&&this.switch(),delete n[e],i.push({type:Xe,payload:{name:e}}),s?.())},update(e,t=""){n[t]&&(n[t]=_e({[et]:{},[tt]:{}},n[t],e),i.push({type:Ye,payload:{params:e,name:t}}),s?.())},switch(t=""){n[t]&&e.setAttribute(Qe,t)},vars(e=""){const t=this.get(e);return t?a(t):{[et]:{},[tt]:{}}},makeThemeVars:a,get list(){const{"":e,...t}=n;return Object.keys(t)},get current(){return e.getAttribute(Qe)||""},get all(){return n},get actions(){return i}};return t?.forEach((({type:e,payload:t})=>{switch(e){case"add":o.add(t.params,t.name);break;case Xe:o.delete(t.name);break;case Ye:o.update(t.params,t.name)}})),o},ot="effcss",lt=ot+"-provider",ct=ot+"-override",ut="script",ht="style",mt="size",dt="time",gt="angle",pt="color",bt="easing",$t=ot+"changes",ft="data-"+ot,yt="prefers-color-scheme",vt=`${yt}: light`,xt=`${yt}: dark`,wt={mode:"a",pre:"f"},St=e=>"boolean"==typeof e,kt=(e,t)=>{const r=((e,t)=>e.getAttribute(t)||wt[t])(e,t);return(e=>"string"==typeof e?Number(e):null)(r)},jt=(e,t,r)=>null===r?e.removeAttribute(t):e.setAttribute(t,r+""),_t=e=>`:root:has([is=${lt}]${e?`[${e}]`:""})`,Ot=e=>Object.entries(e).reduce(((e,[t,r])=>e+t+":"+r+";"),""),At=({theme:e,attrs:t,scope:r})=>({bem:s,each:n,themeVar:i,merge:a,pseudo:{r:o},at:{media:l},units:{px:c}})=>{const u=t.size,h=t.time,m=t.angle,d=t.color,g=t.easing,{$dark:p={},$light:b={},...$}=e.vars();return a({[_t()]:{...$,...l.where(vt)(b),...l.where(xt)(p),[o()]:{fontSize:c(i("size"))}}},n(e.list,((t,r)=>{const{$dark:n={},$light:i={},...a}=e.vars(r),o={...a,...l.where(vt)(i),...l.where(xt)(n)};return{[_t(`theme=${t}`)]:o,[s(`..theme.${t}`)]:o}})),u&&{[_t(mt)]:{[r.varName(mt)]:u}},h&&{[_t(dt)]:{[r.varName(dt)]:h}},m&&{[_t(gt)]:{[r.varName(gt)]:m}},d&&{[_t(pt)]:{[r.varName(pt)]:d}},g&&{[_t(bt)]:{[r.varName(bt)]:g}})},zt=(e,t)=>({set(r){jt(e,t,r)},get:()=>kt(e,t)}),Ct=(e,t)=>({set(r){jt(e,t,r)},get:()=>e.getAttribute(t)}),qt=(e,{initStyles:t,emulate:r,onChange:s,globalMaker:n,noscript:i})=>{let a;e.textContent&&(a=JSON.parse(e.textContent)),Object.defineProperties(e,{pre:{get:()=>e.getAttribute("pre")||"f"},mode:{get:()=>e.getAttribute("mode")||"a"},min:{get:()=>""===e.getAttribute("min")},size:zt(e,mt),time:zt(e,dt),angle:zt(e,gt),color:Ct(e,pt),easing:Ct(e,bt)});const o=Te({prefix:e.pre}),l=((e={})=>{const{mode:t,min:r,dict:s={}}=e;let n;n="a"===t?Ue:Ke;const i=e=>{let r=0,s=Fe,a=Fe;const o=i.dict;o&&(o[e]||(o[e]={}),s=t=>o[e][t]??(o[e][t]=(r++).toString(36)),a=t=>o[e][t]);let l=t=>[e,...We(t)?t.split("."):t].filter(Boolean).join("-"),c="class",u=t=>t?e+(t.startsWith("_")?"":"-")+t:void 0===t?void 0:e;"a"===t&&(c="data-"+e,u=Fe);const h=e=>"--"+l(We(e)?e.split("."):e),m=e=>Be({[c]:e},{toString:{value:()=>`${c}="${e}"`},$:{value:e}}),d=e=>{if(void 0===e)return function(e){const t=({b:r,e:s,m:n})=>({b:e=>t({b:e,e:"",m:{}}),e:e=>t({b:r,e:e,m:{}}),m:(e={})=>t({b:r,e:s,m:e}),get $(){return e({[r]:{[s]:n}})}});return t({b:"",e:"",m:{}})}(d);let t,r,s,n,i="";const o=We(e);return i=o||Array.isArray(e)?[...(o?[e]:e).reduce(((e,i)=>([t,r,s,n]=Ve(i),e.add(u(a(De(t,r)))),s&&e.add(u(a(De(t,r,s,n)))),e)),new Set).values()].join(" "):e&&He(e,!0).map((([e,t,r,s])=>u(a(De(e,t,r,s))))).join(" "),m(i)};return d.list=(...e)=>{const t=[...e.reduce(((e,t)=>{const[r,s]=t.split(":");if(!r)return e;if(void 0===s)return e.add(r.replaceAll(".","-")),e;const n=r.split("."),i=n.pop(),a=n.join("-");return n.length?(e.add(a),e.add(a+`-${i}_${s}`)):e.add(`${i}_${s}`),e}),new Set).keys()].map((e=>u(a(e)))).join(" ");return m(t)},d.obj=(e,t)=>{let r=Le;"full"===t&&(r=Je);const s=[...r(e).values()].map((e=>u(a(e)))).join(" ");return m(s)},{select:t=>{const r=t.replaceAll(".","-").replace(":","_");return n(e,s(r))},selector:t=>{const[r,i,a,o]=Ve(t);return n(e,s(De(r,i,a,o)))},attr:d,name:l,varName:h,varExp:(e,t)=>`var(${h(e)}${void 0!==t?","+t:""})`}};return r&&(i.dict=s),i})({mode:e.mode,min:e.min,dict:a?.dict}),c=l(o.key()),u=Ce({scope:l,globalKey:o.key()}),h=Ee({initStyles:t,emulate:r});e.theme=at({provider:e,init:a?.theme,onChange:s,scope:c});const m=(({scope:e,collector:t,manager:r,processor:s,globalMaker:n})=>{const i=e=>"string"==typeof e?e:t.key(e),a=r=>e(r||t.key()).attr,o=(e,t)=>s.compile({key:t,maker:e}),l=e=>{let s=t.use(e);return r&&!r.get(s)&&r.pack(s,r.hydrate(s)||o(e,s)),a(s)},c=(...e)=>0===e.length?[l(n)]:e.map((e=>l(e)));return{use:c,remake:(e,s)=>{let n=t.key(s||e);return r&&r.get(n)?(s&&t.remake(e,s),r.pack(n,r.hydrate(n)||o(e,n)),a(n)):c(e)[0]},css:o,status:e=>{const t=i(e);return!!t&&r.status(t)},on:(...e)=>r.on(...e.map(i)),off:(...e)=>r.off(...e.map(i)),stylesheets:(e=t.keys)=>e.map((e=>r.get(i(e))))}})({scope:l,processor:u,manager:h,collector:o,globalMaker:n});Object.defineProperties(e,{_c:{value:o},_s:{value:l},_p:{value:u},_m:{value:h},toString:{value:()=>{const t={...h.all()},r=Object.entries(t).filter((([e,t])=>!t.disabled)).map((([e,t])=>`<style ${ft}="${e}">${[...t.cssRules].map((e=>e.cssText)).join("")}</style>`)).join("");let s=ht,n="";const a={is:lt,min:e.getAttribute("min"),mode:e.getAttribute("mode"),size:e.getAttribute(mt),time:e.getAttribute(dt),angle:e.getAttribute(gt),color:e.getAttribute(pt),easing:e.getAttribute(bt)};if(!i){s=ut,a.type="application/json";const t={theme:e.theme.actions};e.min&&o.keys.length>1&&(t.dict=l.dict),n=JSON.stringify(t)}return r+`<${s} ${Object.entries(a).map((([e,t])=>null!=t&&t!==wt[e]?""===t?e:`${e}="${t}"`:"")).filter(Boolean).join(" ")}${e.theme.current?` theme="${e.theme.current}"`:""}>${n}</${s}>`}}}),Object.assign(e,m)},Pt=Symbol(lt),Et=[mt,dt,gt,pt,bt],Nt=new Set(Et),Tt=()=>globalThis?.document.querySelector(`[is=${lt}]`);const Mt=(e={})=>{let{noscript:t,attrs:r={}}=e,{mode:s=wt.mode,min:n,pre:i=wt.prefix,size:a=null,time:o=null,angle:l=null,color:c=null,easing:u=null}=r;return new class{get tagName(){return""}get textContent(){return""}attributes={size:a?a+"":null,time:o?o+"":null,angle:l?l+"":null,color:c||null,easing:u||null,pre:i,mode:s,min:n?"":null};getAttribute(e){const t=this.attributes[e];return null!=t?St(t)?"":t+"":null}setAttribute(e,t){this.attributes[e]=t+"",Nt.has(e)&&this._customize()}removeAttribute(e){delete this.attributes[e]}theme;pre;mode;min;size;angle;time;color;easing;use;remake;css;get makers(){return this._c.makers}status;on;off;stylesheets;_c;_m;_s;_p;_;_n;_customize=()=>{const e=this.size,t=this.time,r=this.angle,s=this.color,n=this.easing,i=At({theme:this.theme,attrs:{size:e,time:t,angle:r,color:s,easing:n},scope:this._s(this._c.key())});this.remake(i,this._),this._=i};constructor(){qt(this,{emulate:!0,onChange:this._customize,globalMaker:this._,noscript:t}),this._customize()}}},Rt=(e={})=>{const{emulate:t,global:r,...s}=e,n=globalThis?.document;let i;const a=globalThis[Pt];if(r&&a)i=a;else if(n&&!t){void 0===Rt.isDefined&&(Rt.isDefined=function(){const e=globalThis.document,t=globalThis.customElements;if(t?.get(lt))return!1;{class r extends HTMLScriptElement{static get observedAttributes(){return Et}theme;pre;mode;min;size;angle;time;color;easing;use;remake;css;get makers(){return this._c.makers}status;on;off;stylesheets;_c;_m;_s;_p;_;_n;_customize=()=>{const e=this.size,t=this.time,r=this.angle,s=this.color,n=this.easing,i=At({theme:this.theme,attrs:{size:e,time:t,angle:r,color:s,easing:n},scope:this._s(this._c.key())});this.remake(i,this._),this._=i};attributeChangedCallback(){this.isConnected&&this._customize()}connectedCallback(){qt(this,{initStyles:[...e.querySelectorAll(ht+`[${ft}]`)],onChange:this._customize,globalMaker:this._}),this._customize();const t=this;this._n={set adoptedStyleSheets(e){t.dispatchEvent(new CustomEvent($t,{detail:{styles:e},bubbles:!0}))}},this._m.register(this._n),this._m.register(e)}}t.define(lt,r,{extends:ut});class s extends HTMLElement{static get observedAttributes(){return["values"]}_customize(){const e=Tt();if(this.shadowRoot&&e){const t=this.getAttribute("values"),r=new CSSStyleSheet;if(t){const{$dark:s={},$light:n={},...i}=e.theme.makeThemeVars(JSON.parse(decodeURIComponent(t)));r.replaceSync(`:host{display:contents;${Ot(i)}}@media(${vt}){:host{${Ot(n)}}}@media(${xt}){:host{${Ot(s)}}}`)}else r.replaceSync(":host{display:contents;}");this.shadowRoot.adoptedStyleSheets=[r]}}attributeChangedCallback(){this.isConnected&&this._customize()}connectedCallback(){this.attachShadow({mode:"open"}).innerHTML="<slot></slot>",this._customize()}}return t.define(ct,s),!0}}());const e=Tt();if(e)i=e;else{const e=n.createElement(ut,{is:lt});e.setAttribute("is",lt);const t=s?.attrs;t&&Object.entries(t).map((([t,r])=>r&&wt[t]!==r&&e.setAttribute(t,St(r)?"":r+""))),n.head.appendChild(e),i=e}}else i=Mt(s);return r&&!a&&(globalThis[Pt]=i),i},Bt=e=>encodeURIComponent(JSON.stringify(e));export{wt as DEFAULT_ATTRS,lt as TAG_NAME,ct as TAG_NAME_OVERRIDE,Bt as prepareOverrideValues,Rt as useStyleProvider};
@@ -1,6 +1,6 @@
1
1
  import type { TCreateScope } from '../scope';
2
2
  type TProperty = {
3
- (val: string | number | boolean): object;
3
+ (val: string | number | boolean | object): object;
4
4
  /**
5
5
  * Use property with fallback value
6
6
  */
@@ -150,7 +150,7 @@ export declare const resolveAtRules: (ctx: ReturnType<ReturnType<TCreateScope>>)
150
150
  * Scoped `@property` rule maker
151
151
  * @param config - property params
152
152
  */
153
- property: (config?: {
153
+ property: (config?: string | number | {
154
154
  /**
155
155
  * Syntax
156
156
  */
@@ -166,7 +166,7 @@ export declare const resolveAtRules: (ctx: ReturnType<ReturnType<TCreateScope>>)
166
166
  /**
167
167
  * Default value
168
168
  */
169
- def?: string | number | boolean;
169
+ def?: string | number | boolean | object;
170
170
  }) => TProperty;
171
171
  /**
172
172
  * `@scope` rule maker
@@ -4,15 +4,7 @@ export type TMainRange = 'min' | 'm' | 'max';
4
4
  export type TBaseRange = 'xs' | TShortRange | 'xl';
5
5
  export type TLongRange = 'xxs' | TBaseRange | 'xxl';
6
6
  export type TFullRange = 'min' | TLongRange | 'max';
7
- export type TSparseRange = 'min' | 'xs' | 'm' | 'xl' | 'max';
8
- export type TRangeConfig = Record<'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | 'xxl', number>;
9
- export type TCoefConfig = {
10
- $0_: TRangeConfig;
11
- $1_: TRangeConfig;
12
- $2_: TRangeConfig;
13
- $16_: TRangeConfig;
14
- max: number;
15
- };
7
+ export type TSparseRange = TMainRange | 'xs' | 'xl';
16
8
  /**
17
9
  * Coefficient generator
18
10
  * @description
@@ -1,8 +1,8 @@
1
1
  import type { TCreateScope } from '../../_provider/scope';
2
- type THue = 'pri' | 'sec' | 'suc' | 'inf' | 'war' | 'dan';
3
- type TLightness = 'xs' | 's' | 'm' | 'l' | 'xl';
4
- type TChroma = 'gray' | 'pale' | 'base' | 'rich';
5
- type TMode = 'bg' | 'fg';
2
+ export type TPaletteHue = 'pri' | 'sec' | 'suc' | 'inf' | 'war' | 'dan';
3
+ export type TPaletteLightness = 'xs' | 's' | 'm' | 'l' | 'xl';
4
+ export type TPaletteChroma = 'gray' | 'pale' | 'base' | 'rich';
5
+ export type TPaletteMode = 'bg' | 'fg';
6
6
  /**
7
7
  * Palette generator
8
8
  * @description
@@ -10,11 +10,11 @@ type TMode = 'bg' | 'fg';
10
10
  */
11
11
  export interface IPalette {
12
12
  state: {
13
- l: TLightness;
14
- c: TChroma;
15
- h: THue;
16
- a: number;
17
- m: TMode;
13
+ l: TPaletteLightness;
14
+ c: TPaletteChroma;
15
+ h: TPaletteHue;
16
+ a: string;
17
+ m: TPaletteMode;
18
18
  };
19
19
  /**
20
20
  * Returns `xs` lightness color
@@ -39,7 +39,7 @@ export interface IPalette {
39
39
  /**
40
40
  * Returns lightness color dictionary
41
41
  */
42
- get lightness(): Record<TLightness, IPalette>;
42
+ get lightness(): Record<TPaletteLightness, IPalette>;
43
43
  /**
44
44
  * Returns zero chroma color
45
45
  */
@@ -59,7 +59,7 @@ export interface IPalette {
59
59
  /**
60
60
  * Returns chroma color dictionary
61
61
  */
62
- get chroma(): Record<TChroma, IPalette>;
62
+ get chroma(): Record<TPaletteChroma, IPalette>;
63
63
  /**
64
64
  * Returns primary hue color
65
65
  */
@@ -87,11 +87,11 @@ export interface IPalette {
87
87
  /**
88
88
  * Returns hue color dictionary
89
89
  */
90
- get hue(): Record<THue, IPalette>;
90
+ get hue(): Record<TPaletteHue, IPalette>;
91
91
  /**
92
92
  * Returns specified alpha color
93
93
  */
94
- alpha(a?: number): IPalette;
94
+ alpha(a?: number | string | object): IPalette;
95
95
  /**
96
96
  * Returns background color
97
97
  */
@@ -102,4 +102,3 @@ export interface IPalette {
102
102
  get fg(): IPalette;
103
103
  }
104
104
  export declare const resolvePalette: (varExp: ReturnType<ReturnType<TCreateScope>>["varExp"]) => IPalette;
105
- export {};
@@ -13,6 +13,7 @@ type TBezier = {
13
13
  x2?: number;
14
14
  y2?: number;
15
15
  };
16
+ type TRelative = (coef?: number | string | object) => string;
16
17
  export interface IMakerParams {
17
18
  dash: typeof dash;
18
19
  comma: typeof comma;
@@ -21,6 +22,7 @@ export interface IMakerParams {
21
22
  each: typeof each;
22
23
  merge: typeof merge;
23
24
  when: typeof when;
25
+ select: TScope['select'];
24
26
  /**
25
27
  * BEM selector resolver
26
28
  */
@@ -58,15 +60,15 @@ export interface IMakerParams {
58
60
  /**
59
61
  * Scalable size value
60
62
  */
61
- size: (coef?: number | string) => string;
63
+ size: TRelative;
62
64
  /**
63
65
  * Scalable time value
64
66
  */
65
- time: (coef?: number | string) => string;
67
+ time: TRelative;
66
68
  /**
67
69
  * Scalable angle value
68
70
  */
69
- angle: (coef?: number | string) => string;
71
+ angle: TRelative;
70
72
  /**
71
73
  * Easing function
72
74
  */
@@ -17,6 +17,14 @@ type TMods<T> = T extends object ? {
17
17
  type TStringBEM<T> = TBlocks<T> | TMods<T> | TElems<T>;
18
18
  type TBEM<T> = TDeepPartial<T> | TStringBEM<T> | TStringBEM<T>[];
19
19
  type TStyleSheet = Record<string, Record<string, Record<string, string | number>>>;
20
+ type TPrimitive<T> = T extends string ? T : T extends number ? T : '';
21
+ type TModifiers<T> = T extends object ? {
22
+ [K in keyof T]: `${Exclude<K, symbol>}${T[K] extends object ? `.${TModifiers<T[K]>}` : `:${TPrimitive<T[K]>}`}`;
23
+ }[keyof T] : '';
24
+ type TNodes<T> = T extends object ? {
25
+ [K in keyof T]: T[K] extends object ? (`${Exclude<K, symbol>}` | `${Exclude<K, symbol>}.${TNodes<T[K]>}`) : never;
26
+ }[keyof T] : never;
27
+ type TSelectors<T> = TNodes<T> | TModifiers<T>;
20
28
  export type Leaves<T> = T extends object ? {
21
29
  [K in keyof T]: `${Exclude<K, symbol>}${Leaves<T[K]> extends never ? '' : `.${Leaves<T[K]>}`}`;
22
30
  }[keyof T] : never;
@@ -43,10 +51,28 @@ export type TMonoResolver<T extends TStyleSheet, B extends keyof T, E extends ke
43
51
  [key in string]: string;
44
52
  };
45
53
  };
54
+ type TStyles = {
55
+ [key in string]: string | number | Record<string, never> | TStyles;
56
+ };
57
+ type TAttrs = {
58
+ $: string;
59
+ };
60
+ type TSelect = <T extends TStyles>(value: TSelectors<T>) => string;
46
61
  type TResolveSelector = <T extends TStyleSheet>(params: TStringBEM<T>) => string;
47
62
  type TResolveAttr = {
48
63
  <T extends TStyleSheet>(params: TBEM<T>): Record<string, string>;
49
64
  <T extends TStyleSheet>(): TMonoResolver<T, "", "">;
65
+ /**
66
+ * Use list of selectors
67
+ * @param args - selectors
68
+ */
69
+ list<T extends TStyles>(...args: TSelectors<T>[]): TAttrs;
70
+ /**
71
+ * Use selectors from object
72
+ * @param arg - selectors object
73
+ * @param type - which selectors to emit. Use `full` to emit all described selectors
74
+ */
75
+ obj<T extends TStyles>(arg: TDeepPartial<T>, type?: 'full'): TAttrs;
50
76
  };
51
77
  type TParts = (string | number)[];
52
78
  export type TDefaultTheme = {
@@ -59,12 +85,16 @@ export type TDefaultTheme = {
59
85
  chroma: Record<'bg' | 'fg', Record<'pale' | 'base' | 'rich' | 'gray', number>>;
60
86
  };
61
87
  export type TScope = {
88
+ /**
89
+ * Scoped selector resolver
90
+ */
91
+ select: TSelect;
62
92
  /**
63
93
  * BEM selector resolver
64
94
  */
65
95
  selector: TResolveSelector;
66
96
  /**
67
- * BEM attribute resolver
97
+ * Attribute resolver
68
98
  */
69
99
  attr: TResolveAttr;
70
100
  /**
@@ -1,3 +1,5 @@
1
+ export type { TShortRange, TMainRange, TBaseRange, TLongRange, TFullRange, TSparseRange } from './_provider/_process/coef';
2
+ export type { TPaletteHue, TPaletteChroma, TPaletteLightness, TPaletteMode } from './_provider/_process/palette';
1
3
  import type { TProcessor } from './_provider/process';
2
4
  import type { TCollector } from './_provider/collect';
3
5
  import type { TScopeResolver } from './_provider/scope';
@@ -239,4 +241,3 @@ export declare const useStyleProvider: TUseStyleProvider;
239
241
  * @param values - CSS variables
240
242
  */
241
243
  export declare const prepareOverrideValues: (values: object) => string;
242
- export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "effcss",
3
- "version": "4.5.1",
3
+ "version": "4.6.1",
4
4
  "description": "Self-confident CSS-in-JS",
5
5
  "type": "module",
6
6
  "scripts": {