bernova 1.7.5 → 1.7.7

package/dist/src/lib/generateCss/helpers/classnames/handlerRegister.utils.js

@@ -1 +1 @@
-const{simplifyName:e}=require("../../../simplifyName/simplifyName.utils"),o=({register:o,prefix:r})=>{const c=new Set,t=({rg:o,space:s=2,lv:l=1})=>{const n=" ".repeat(s);return Object.entries(o).reduce((o,[p,a])=>{const d=p.replace(`${r}-`,"");if("object"==typeof a){const e=1===l,r=e?d.toUpperCase():d;o.prov.doc+=`${n}${r}: {\n`,o.prov.declare+=`${n}${r}: {\n`,o.comp.simple+=o.comp.simple.length?` | '${r}'`:`'${r}'`,o.comp.object+=e?`${n}${r}: '${r}',\n`:"";const c=s+2,p=l+1,{prov:{doc:$,declare:i},tools:{doc:v,declare:m}}=t({rg:a,space:c,lv:p});o.prov.doc+=$,o.prov.declare+=i,o.prov.doc+=`${n}},\n`,o.prov.declare+=`${n}},\n`,o.tools.doc+=v,o.tools.declare+=m}else if("boolean"==typeof a&&a){const r=e(d);c.has(r)||(c.add(r),o.tools.doc+=`  ${r}: '${d}',\n`,o.tools.declare+=`  ${d}: string,\n`);const t=d.split("__").at(-1);o.prov.doc+=`${n}${t}: '${d}',\n`,o.prov.declare+=`${n}${t}: string,\n`}else if("string"==typeof a){const t=e(a).replace(`${r}_`,"");c.has(t)||(c.add(t),o.tools.doc+=`  ${t}: '${a}',\n`,o.tools.declare+=`  ${t}: string,\n`);const s=d.split("__").at(-1);o.prov.doc+=`${n}${s}: '${a}',\n`,o.prov.declare+=`${n}${s}: string,\n`}else"function"==typeof a&&("dynamic_values"===d?o.prov.doc+=`${n}${d}: ${a.toString()},\n`:"dynamic_values_type"===d&&(o.prov.declare+=`${n}dynamic_values: ${a()},\n`));return o},{comp:{simple:"",object:""},prov:{doc:"",declare:""},tools:{doc:"",declare:""}})};return t({rg:o})};module.exports={handlerRegister:o};
+const{simplifyName:e}=require("../../../simplifyName/simplifyName.utils"),o=["$boolean$","$number$","$string$","$bigint$","$symbol$","$undefined$","$null$"],l=e=>{if(/^Symbol\.for\(['"](.+)['"]\)$/.test(e)){const o=e.match(/^Symbol\.for\(['"](.+)['"]\)$/);return{vl:Symbol.for(o[1]),tp:"symbol"}}return/^-?\d+n$/.test(e)?{vl:BigInt(e.slice(0,-1)),tp:"bigint"}:isNaN(e)||isNaN(parseFloat(e))?"true"===e?{vl:!0,tp:"boolean"}:"false"===e?{vl:!1,tp:"boolean"}:"null"===e?{vl:null,tp:"null"}:"undefined"===e?{vl:void 0,tp:"undefined"}:o.includes(e)?{vl:"''",tp:e.replaceAll("$","")}:{vl:`'${e}'`,tp:"string"}:{vl:Number(e),tp:"number"}},t=({register:o,prefix:t})=>{const r=new Set,n=({rg:o,space:c=2,lv:s=1})=>{const $=" ".repeat(c);return Object.entries(o).reduce((o,[p,a])=>{const d=p.replace(`${t}-`,"");if("object"==typeof a){const e=1===s,l=e?d.toUpperCase():d;o.prov.doc+=`${$}${l}: {\n`,o.prov.declare+=`${$}${l}: {\n`,o.comp.simple+=o.comp.simple.length?` | '${l}'`:`'${l}'`,o.comp.object+=e?`${$}${l}: '${l}',\n`:"";const t=c+2,r=s+1,{prov:{doc:p,declare:i},tools:{doc:v,declare:m}}=n({rg:a,space:t,lv:r});o.prov.doc+=p,o.prov.declare+=i,o.prov.doc+=`${$}},\n`,o.prov.declare+=`${$}},\n`,o.tools.doc+=v,o.tools.declare+=m}else if("boolean"==typeof a&&a){const l=e(d);r.has(l)||(r.add(l),o.tools.doc+=`  ${l}: '${d}',\n`,o.tools.declare+=`  ${d}: string,\n`);const t=d.split("__").at(-1);o.prov.doc+=`${$}${t}: '${d}',\n`,o.prov.declare+=`${$}${t}: string,\n`}else if("string"==typeof a){const{vl:n,tp:c}=l(a),s=e(a).replace(`${t}_`,"");r.has(s)||(r.add(s),o.tools.doc+=`  ${s}: ${n},\n`,o.tools.declare+=`  ${s}: ${c},\n`);const p=d.split("__").at(-1);o.prov.doc+=`${$}${p}: ${n},\n`,o.prov.declare+=`${$}${p}: ${c},\n`}else"function"==typeof a&&("dynamic_values"===d?o.prov.doc+=`${$}${d}: ${a.toString()},\n`:"dynamic_values_type"===d&&(o.prov.declare+=`${$}dynamic_values: ${a()},\n`));return o},{comp:{simple:"",object:""},prov:{doc:"",declare:""},tools:{doc:"",declare:""}})};return n({rg:o})};module.exports={handlerRegister:t};

package/dist/src/lib/generateCss/helpers/generateCssStyles.utils.js

@@ -1 +1 @@
-const{formatRuleName:e,setForeignRegister:r,pseudoHandler:s,foreignHandler:t,attributeHandler:a,advancedSelectorHandler:i,separateStyles:n,extractValues:l,mediaQueriesHandler:o,generateMediaQueries:u,handlerRegister:c,setDynamicRegister:d,processDynamicProps:p}=require("./index.js"),g=({source:g,mediaConfig:m,prefix:f})=>{let y="",R={};const $={},h=f?`${f}-`:"",b=({source:u,parentRule:c,theRule:g})=>{const{styles:f,lib:{$dynamicValues:S,...x},other:N}=n(u),j=Object.entries(f).length>0,D=Object.entries(N).length>0,O=Object.entries(x).length>0,V=S?p(S):void 0,Q=e({theRule:g,parentRule:c,register:R,hasStyles:j,prefix:h});if(j&&(y+=`.${Q} { ${l({styles:f,dynamicValues:V})} }\n`),O){const{$pseudoClasses:e,$pseudoElements:n,$mediaQueries:l,$attributes:u,$advancedSelectors:c,$foreign:p}=x;if(Object.entries(N).length&&b({source:N,parentRule:Q}),e&&s({pseudoData:e,ruleName:Q,processSource:b}),n&&s({pseudoData:n,ruleName:Q,processSource:b}),l&&m&&o({config:m,mediaQueries:l,parentRule:Q,theRule:g,mediaRegister:$}),u&&a({attributes:u,ruleName:Q,processSource:b}),c&&i(c,Q,b),p){const e=t({foreign:p,prefix:h}),s=Q.replace(h,"");r({ruleName:s,foreignRegister:e,register:R})}V&&d({dynamicValues:V,register:R,ruleName:Q,prefix:h})}if(D)for(const[u,f]of Object.entries(N))if("object"==typeof f){const{$pseudoClasses:S,$pseudoElements:x,$mediaQueries:N,$attributes:j,$advancedSelectors:D,$foreign:O,$dynamicValues:V,...Q}=f,{styles:v,other:H}=n(Q),C=Object.entries(v).length>0,E=V?p(V):void 0,k=e({key:u,theRule:g,parentRule:c,register:R,hasStyles:C,prefix:h});if(C&&(y+=`.${k} { ${l({styles:v,dynamicValues:E})} }\n`),Object.entries(H).length&&b({source:H,parentRule:k}),S&&s({pseudoData:S,ruleName:k,processSource:b}),x&&s({pseudoData:x,ruleName:k,processSource:b}),N&&m&&o({config:m,mediaQueries:N,parentRule:k,theRule:g,mediaRegister:$}),j&&a({attributes:j,ruleName:k,processSource:b}),D&&i(D,k,b),O){const e=t({foreign:O,prefix:h}),s=k.replace(h,"");r({ruleName:s,foreignRegister:e,register:R})}E&&d({dynamicValues:E,register:R,ruleName:k,prefix:h})}};b({source:g});const S=c({register:R,prefix:f}),x=u($);return{styles:y.concat(x),stylesDocs:S}};module.exports={generateCssStyles:g};
+const{formatRuleName:e,setForeignRegister:r,pseudoHandler:s,foreignHandler:t,attributeHandler:a,advancedSelectorHandler:i,separateStyles:l,extractValues:n,mediaQueriesHandler:o,generateMediaQueries:u,handlerRegister:c,setDynamicRegister:d,processDynamicProps:p}=require("./index.js"),g=({source:g,mediaConfig:m,prefix:f})=>{let $="",y={};const R={},h=f?`${f}-`:"",b=({source:u,parentRule:c,theRule:g})=>{const{styles:f,lib:{$dynamicValues:S,$literals:x,...N},other:j}=l(u),D=Object.entries(f).length>0,O=Object.entries(j).length>0,V=Object.entries(N).length>0,Q=S?p(S):void 0,v=e({theRule:g,parentRule:c,register:y,hasStyles:D,prefix:h,literals:x});if(D&&($+=`.${v} { ${n({styles:f,dynamicValues:Q})} }\n`),V){const{$pseudoClasses:e,$pseudoElements:l,$mediaQueries:n,$attributes:u,$advancedSelectors:c,$foreign:p}=N;if(Object.entries(j).length&&b({source:j,parentRule:v}),e&&s({pseudoData:e,ruleName:v,processSource:b}),l&&s({pseudoData:l,ruleName:v,processSource:b}),n&&m&&o({config:m,mediaQueries:n,parentRule:v,theRule:g,mediaRegister:R}),u&&a({attributes:u,ruleName:v,processSource:b}),c&&i(c,v,b),p){const e=t({foreign:p,prefix:h}),s=v.replace(h,"");r({ruleName:s,foreignRegister:e,register:y})}Q&&d({dynamicValues:Q,register:y,ruleName:v,prefix:h})}if(O)for(const[u,f]of Object.entries(j))if("object"==typeof f){const{$pseudoClasses:S,$pseudoElements:x,$mediaQueries:N,$attributes:j,$advancedSelectors:D,$foreign:O,$dynamicValues:V,$literals:Q,...v}=f,{styles:H,other:C}=l(v),E=Object.entries(H).length>0,k=V?p(V):void 0,q=e({key:u,theRule:g,parentRule:c,register:y,hasStyles:E,prefix:h,literals:Q});if(E&&($+=`.${q} { ${n({styles:H,dynamicValues:k})} }\n`),Object.entries(C).length&&b({source:C,parentRule:q}),S&&s({pseudoData:S,ruleName:q,processSource:b}),x&&s({pseudoData:x,ruleName:q,processSource:b}),N&&m&&o({config:m,mediaQueries:N,parentRule:q,theRule:g,mediaRegister:R}),j&&a({attributes:j,ruleName:q,processSource:b}),D&&i(D,q,b),O){const e=t({foreign:O,prefix:h}),s=q.replace(h,"");r({ruleName:s,foreignRegister:e,register:y})}k&&d({dynamicValues:k,register:y,ruleName:q,prefix:h})}};b({source:g});const S=c({register:y,prefix:f}),x=u(R);return{styles:$.concat(x),stylesDocs:S}};module.exports={generateCssStyles:g};

package/dist/src/lib/generateCss/helpers/rulename/formatRuleName.utils.js

@@ -1 +1 @@
-const{formattedStatKey:e}=require("../utils"),t=({register:t,component:n,variant:r,mainComponent:i,hasStyles:o,prefix:a})=>{if(i in t||(t[i]={}),n in t[i]||(t[i][n]=!!o&&`${a}${n}`),r){const o=`$_${e(r)}`;if(o in t[i]||(t[i][o]={}),!(n in t[i][o])){const e=!!t[i][n];t[i][o][n]=e?`${a}${n} ${a}${n}--${r}`:`${a}${n}--${r}`}}},n=({parentRule:e,key:t,prefix:n})=>{const[r,i]=e.split("--");return{mainComponent:r,variant:i&&i.length&&i.replace(/\[.*?\]/g,""),lowerKey:!!t&&t.length&&t.toLocaleLowerCase()}},r=({ruleName:t,foreignRegister:r,register:i})=>{const{mainComponent:o,variant:a}=n({parentRule:t});if(o in i||(i[o]={}),a){const t=`$_${e(a)}`;t in i[o]||(i[o][t]={}),i[o][t]={...i[o][t],...r}}else i[o]={...i[o],...r}},i=({key:e="",parentRule:r,theRule:i,hasStyles:o,prefix:a,register:s={}})=>{let l="";if(i)l=i;else if(r){const{mainComponent:i,variant:p,lowerKey:$}=n({parentRule:r,key:e}),m=i.replace(a,"");e.startsWith("_")?(l=p?`${i}_${$}--${p}`:`${i}_${$}`,t({register:s,mainComponent:m,component:`${m}_${$}`,variant:p,hasStyles:o,prefix:a})):$&&(l=`${i}--${$}`,t({register:s,mainComponent:m,component:m,variant:$,hasStyles:o,prefix:a}))}else{const n=e.toLocaleLowerCase().replace(/\[.*?\]/g,"");l=`${a}${n}`,e.length&&t({register:s,component:n,mainComponent:n,hasStyles:o,prefix:a})}return l};module.exports={formatRuleName:i,setForeignRegister:r};
+const{formattedStatKey:e}=require("../utils"),t=({register:t,component:n,variant:r,mainComponent:i,hasStyles:o,prefix:a,literals:s})=>{if(i in t||(t[i]={}),n in t[i]||(t[i][n]=!!o&&`${a}${n}`),r){const o=`$_${e(r)}`;if(o in t[i]||(t[i][o]={}),!(n in t[i][o])){const e=!!t[i][n];t[i][o][n]=e?`${a}${n} ${a}${n}--${r}`:`${a}${n}--${r}`}}s&&Object.entries(s).forEach(([n,o])=>{const a=String(o);if(r){const s=`$_${e(r)}`;if(t[i][s][n]=a,!(n in t[i])){const e=null===o?"$null$":`$${String(typeof o)}$`;t[i][n]=e}}else t[i][n]=a})},n=({parentRule:e,key:t,prefix:n})=>{const[r,i]=e.split("--");return{mainComponent:r,variant:i&&i.length&&i.replace(/\[.*?\]/g,""),lowerKey:!!t&&t.length&&t.toLocaleLowerCase()}},r=({ruleName:t,foreignRegister:r,register:i})=>{const{mainComponent:o,variant:a}=n({parentRule:t});if(o in i||(i[o]={}),a){const t=`$_${e(a)}`;t in i[o]||(i[o][t]={}),i[o][t]={...i[o][t],...r}}else i[o]={...i[o],...r}},i=({key:e="",parentRule:r,theRule:i,hasStyles:o,prefix:a,register:s={},literals:l})=>{let $="";if(i)$=i;else if(r){const{mainComponent:i,variant:p,lowerKey:m}=n({parentRule:r,key:e}),c=i.replace(a,"");e.startsWith("_")?($=p?`${i}_${m}--${p}`:`${i}_${m}`,t({register:s,mainComponent:c,component:`${c}_${m}`,variant:p,hasStyles:o,prefix:a,literals:l})):m&&($=`${i}--${m}`,t({register:s,mainComponent:c,component:c,variant:m,hasStyles:o,prefix:a,literals:l}))}else{const n=e.toLocaleLowerCase().replace(/\[.*?\]/g,"");$=`${a}${n}`,e.length&&t({register:s,component:n,mainComponent:n,hasStyles:o,prefix:a,literals:l})}return $};module.exports={formatRuleName:i,setForeignRegister:r};

package/dist/src/lib/generateProvider/template/providerTemplate-link.js

@@ -1 +1,170 @@
-import{cssThemes as e,cssClasses as t,cssVars as s,cssAvailableComponents as n,cssGlobalStyles as i,cssMediaQueries as h}from"./stats/stats";export class $_Provider_${#e;#t;#s;#n;#i;#h;#r;#l;#o;#m=(e,t)=>{if("undefined"==typeof document)return;let s=document.getElementById(t);s||(s=document.createElement("link"),s.id=t,s.rel="stylesheet",document.head.appendChild(s));const n=document.location.origin,i=new URL(e,n).href;s.href=i};#a=e=>{const{css:t,foreign:s}=e,n=s?.before||[],i=s?.after||[];n.forEach((e,t)=>{const s=`${this.#l}-foreign-before-${t+1}`;this.#m(e,s)}),this.#m(t,this.#l),i.forEach((e,t)=>{const s=`${this.#l}-foreign-after-${t+1}`;this.#m(e,s)})};#c=()=>{"undefined"!=typeof document&&document.querySelectorAll(`link[id^="${this.#l}"]`).forEach(e=>e.remove())};constructor({linkId:r,jsInCss:l}={}){this.#t=e,this.#s=s,this.#n=t,this.#i=n,this.#h=i,this.#r=h,this.#l=r||"kb-styled-link",this.#e=Object.keys(e)[0],this.#o=!!l,this.getComponentStyles=this.getComponentStyles.bind(this),"undefined"!=typeof window&&"undefined"!=typeof document&&this.#o&&(this.#c(),this.#a(this.#t[this.#e]))}get themeSelected(){return this.#e}set themeSelected(e){if(!(e in this.#t))throw new Error(`${e} is not exists`);this.#o&&(this.#c(),this.#a(this.#t[e])),this.#e=e}get allThemesNames(){return Object.keys(this.#t)}get allThemes(){return this.#t}get variables(){return this.#s[this.#e]}get classNames(){return this.#n[this.#e]}get components(){return this.#i[this.#e]}get globalStyles(){return this.#h[this.#e]}get mediaQueries(){return this.#r[this.#e]}getComponentStyles({variant:e,component:t,additionalClassNames:s}){const n=this.#n[this.#e][t.toLocaleUpperCase()];if(!n)return{};const i={},h=!!e&&`$_${e.toLocaleLowerCase().replace(/-/g,"_")}`;if(h&&h in n){const e=n[h];Object.entries(e).forEach(([e,t])=>{e in i||(i[e]=t)})}return Object.entries(n).forEach(([e,t])=>{e.startsWith("$_")||e in i||(i[e]=t)}),s&&Object.keys(s).length&&Object.entries(s).forEach(([e,t])=>{e in i||(i[e]=""),i[e]+=` ${t}`}),i}}
+import {
+  cssThemes,
+  cssClasses,
+  cssVars,
+  cssAvailableComponents,
+  cssGlobalStyles,
+  cssMediaQueries,
+} from './stats/stats';
+
+export class $_Provider_$ {
+  #currentTheme;
+  #themes;
+  #themesVariables;
+  #themesClassNames;
+  #themesComponents;
+  #themesGlobalStyles;
+  #themesMediaQueries;
+  #linkId;
+  #jsInCss;
+  /* Bernova provider methods */
+  #linkBuilder = (css, id) => {
+    if (typeof document === 'undefined') return;
+    let linkElement = document.getElementById(id);
+    if (!linkElement) {
+      linkElement = document.createElement('link');
+      linkElement.id = id;
+      linkElement.rel = 'stylesheet';
+      document.head.appendChild(linkElement);
+    }
+    const baseUrl = document.location.origin;
+    const href = new URL(css, baseUrl).href;
+    linkElement.href = href;
+  };
+  #handlerThemes = (data) => {
+    const { css, foreign } = data;
+    const beforeFiles = foreign?.before || [];
+    const afterFiles = foreign?.after || [];
+    //* set the lower priority foreign themes
+    beforeFiles.forEach((url, idx) => {
+      const id = `${this.#linkId}-foreign-before-${idx + 1}`;
+      this.#linkBuilder(url, id);
+    });
+    //* set main theme
+    this.#linkBuilder(css, this.#linkId);
+    //* set the higher priority foreign themes
+    afterFiles.forEach((url, idx) => {
+      const id = `${this.#linkId}-foreign-after-${idx + 1}`;
+      this.#linkBuilder(url, id);
+    });
+  };
+  #cleanUpLinks = () => {
+    if (typeof document === 'undefined') return;
+    const links = document.querySelectorAll(`link[id^="${this.#linkId}"]`);
+    links.forEach((link) => link.remove());
+  };
+  /* Bernova provider methods */
+
+  constructor({ linkId, jsInCss } = {}) {
+    this.#themes = cssThemes;
+    this.#themesVariables = cssVars;
+    this.#themesClassNames = cssClasses;
+    this.#themesComponents = cssAvailableComponents;
+    this.#themesGlobalStyles = cssGlobalStyles;
+    this.#themesMediaQueries = cssMediaQueries;
+    this.#linkId = linkId || 'kb-styled-link';
+    this.#currentTheme = Object.keys(cssThemes)[0];
+    this.#jsInCss = !!jsInCss;
+    this.getComponentStyles = this.getComponentStyles.bind(this);
+
+    if (
+      typeof window !== 'undefined' &&
+      typeof document !== 'undefined' &&
+      this.#jsInCss
+    ) {
+      this.#cleanUpLinks();
+      this.#handlerThemes(this.#themes[this.#currentTheme]);
+    }
+  }
+  // ? getters and setters
+  //* theme selected
+  get themeSelected() {
+    return this.#currentTheme;
+  }
+  set themeSelected(themeName) {
+    if (themeName in this.#themes) {
+      if (this.#jsInCss) {
+        this.#cleanUpLinks();
+        this.#handlerThemes(this.#themes[themeName]);
+      }
+      this.#currentTheme = themeName;
+    } else {
+      throw new Error(`${themeName} is not exists`);
+    }
+  }
+  //* themes
+  get allThemesNames() {
+    return Object.keys(this.#themes);
+  }
+  get allThemes() {
+    return this.#themes;
+  }
+  //* variables
+  get variables() {
+    return this.#themesVariables[this.#currentTheme];
+  }
+  //* classNames
+  get classNames() {
+    return this.#themesClassNames[this.#currentTheme];
+  }
+  //* components
+  get components() {
+    return this.#themesComponents[this.#currentTheme];
+  }
+  //* global styles
+  get globalStyles() {
+    return this.#themesGlobalStyles[this.#currentTheme];
+  }
+  //* media queries
+  get mediaQueries() {
+    return this.#themesMediaQueries[this.#currentTheme];
+  }
+  //? methods
+  getComponentStyles({ variant, component, additionalClassNames }) {
+    const THEME = this.#themesClassNames[this.#currentTheme];
+    const upperComponent = component.toLocaleUpperCase();
+    const COMPONENT = THEME[upperComponent];
+
+    if (!COMPONENT) return {};
+
+    const structure = {};
+    const startV = '$_';
+    const componentVariant = (() => {
+      if (!!variant) {
+        const lowerVariant = variant.toLocaleLowerCase().replace(/-/g, '_');
+        return `${startV}${lowerVariant}`;
+      } else {
+        return false;
+      }
+    })();
+    if (componentVariant && componentVariant in COMPONENT) {
+      const variantFragment = COMPONENT[componentVariant];
+      Object.entries(variantFragment).forEach(([key, value]) => {
+        if (!(key in structure)) {
+          structure[key] = value;
+        }
+      });
+    }
+    Object.entries(COMPONENT).forEach(([key, value]) => {
+      if (key.startsWith(startV)) return;
+      if (!(key in structure) && value) {
+        structure[key] = value;
+      }
+    });
+    if (!!additionalClassNames && Object.keys(additionalClassNames).length) {
+      Object.entries(additionalClassNames).forEach(([key, value]) => {
+        if (!(key in structure)) {
+          structure[key] = value;
+        } else if (value) {
+          const existingValue = structure[key].split(' ');
+          const newValue = value.split(' ');
+          const combinedValues = Array.from(
+            new Set([...existingValue, ...newValue]),
+          );
+          structure[key] = combinedValues.join(' ');
+        }
+      });
+    }
+    return structure;
+  }
+}

package/dist/src/lib/generateProvider/template/providerTemplate-style.js

@@ -1 +1,155 @@
-import{cssThemes as e,cssClasses as t,cssVars as s,cssAvailableComponents as n,cssGlobalStyles as i,cssMediaQueries as h}from"./stats/stats";export class $_Provider_${#e;#t;#s;#n;#i;#h;#r;#m;#l;#a=(e,t)=>{if("undefined"==typeof document)return;let s=document.getElementById(t);s||(s=document.createElement("style"),s.id=t,s.type="text/css",document.head.appendChild(s)),s.innerHTML=e};#o=e=>{const{css:t}=e;this.#a(t,this.#m)};#c=()=>{if("undefined"==typeof document)return;const e=document.getElementById(this.#m);e&&e.remove()};constructor({linkId:r,jsInCss:m}={}){this.#t=e,this.#s=s,this.#n=t,this.#i=n,this.#h=i,this.#r=h,this.#m=r||"kb-styled-link",this.#e=Object.keys(e)[0],this.#l=!!m,this.getComponentStyles=this.getComponentStyles.bind(this),"undefined"!=typeof window&&"undefined"!=typeof document&&this.#l&&(this.#c(),this.#o(this.#t[this.#e]))}get themeSelected(){return this.#e}set themeSelected(e){if(!(e in this.#t))throw new Error(`${e} is not exists`);this.#l&&(this.#c(),this.#o(this.#t[e])),this.#e=e}get allThemesNames(){return Object.keys(this.#t)}get allThemes(){return this.#t}get variables(){return this.#s[this.#e]}get classNames(){return this.#n[this.#e]}get components(){return this.#i[this.#e]}get globalStyles(){return this.#h[this.#e]}get mediaQueries(){return this.#r[this.#e]}getComponentStyles({variant:e,component:t,additionalClassNames:s}){const n=this.#n[this.#e][t.toLocaleUpperCase()];if(!n)return{};const i={},h=!!e&&`$_${e.toLocaleLowerCase().replace(/-/g,"_")}`;if(h&&h in n){const e=n[h];Object.entries(e).forEach(([e,t])=>{e in i||(i[e]=t)})}return Object.entries(n).forEach(([e,t])=>{e.startsWith("$_")||e in i||(i[e]=t)}),s&&Object.keys(s).length&&Object.entries(s).forEach(([e,t])=>{e in i||(i[e]=""),i[e]+=` ${t}`}),i}}
+import {
+  cssThemes,
+  cssClasses,
+  cssVars,
+  cssAvailableComponents,
+  cssGlobalStyles,
+  cssMediaQueries,
+} from './stats/stats';
+
+export class $_Provider_$ {
+  #currentTheme;
+  #themes;
+  #themesVariables;
+  #themesClassNames;
+  #themesComponents;
+  #themesGlobalStyles;
+  #themesMediaQueries;
+  #linkId;
+  #jsInCss;
+  /* Bernova provider methods */
+  #linkBuilder = (css, id) => {
+    if (typeof document === 'undefined') return;
+    let styleElement = document.getElementById(id);
+    if (!styleElement) {
+      styleElement = document.createElement('style');
+      styleElement.id = id;
+      styleElement.type = 'text/css';
+      document.head.appendChild(styleElement);
+    }
+    styleElement.innerHTML = css;
+  };
+  #handlerThemes = (data) => {
+    const { css } = data;
+    this.#linkBuilder(css, this.#linkId);
+  };
+  #cleanUpLinks = () => {
+    if (typeof document === 'undefined') return;
+    const style = document.getElementById(this.#linkId);
+    if (style) style.remove();
+  };
+  /* Bernova provider methods */
+
+  constructor({ linkId, jsInCss } = {}) {
+    this.#themes = cssThemes;
+    this.#themesVariables = cssVars;
+    this.#themesClassNames = cssClasses;
+    this.#themesComponents = cssAvailableComponents;
+    this.#themesGlobalStyles = cssGlobalStyles;
+    this.#themesMediaQueries = cssMediaQueries;
+    this.#linkId = linkId || 'kb-styled-link';
+    this.#currentTheme = Object.keys(cssThemes)[0];
+    this.#jsInCss = !!jsInCss;
+    this.getComponentStyles = this.getComponentStyles.bind(this);
+
+    if (
+      typeof window !== 'undefined' &&
+      typeof document !== 'undefined' &&
+      this.#jsInCss
+    ) {
+      this.#cleanUpLinks();
+      this.#handlerThemes(this.#themes[this.#currentTheme]);
+    }
+  }
+  // ? getters and setters
+  //* theme selected
+  get themeSelected() {
+    return this.#currentTheme;
+  }
+  set themeSelected(themeName) {
+    if (themeName in this.#themes) {
+      if (this.#jsInCss) {
+        this.#cleanUpLinks();
+        this.#handlerThemes(this.#themes[themeName]);
+      }
+      this.#currentTheme = themeName;
+    } else {
+      throw new Error(`${themeName} is not exists`);
+    }
+  }
+  //* themes
+  get allThemesNames() {
+    return Object.keys(this.#themes);
+  }
+  get allThemes() {
+    return this.#themes;
+  }
+  //* variables
+  get variables() {
+    return this.#themesVariables[this.#currentTheme];
+  }
+  //* classNames
+  get classNames() {
+    return this.#themesClassNames[this.#currentTheme];
+  }
+  //* components
+  get components() {
+    return this.#themesComponents[this.#currentTheme];
+  }
+  //* global styles
+  get globalStyles() {
+    return this.#themesGlobalStyles[this.#currentTheme];
+  }
+  //* media queries
+  get mediaQueries() {
+    return this.#themesMediaQueries[this.#currentTheme];
+  }
+  //? methods
+  getComponentStyles({ variant, component, additionalClassNames }) {
+    const THEME = this.#themesClassNames[this.#currentTheme];
+    const upperComponent = component.toLocaleUpperCase();
+    const COMPONENT = THEME[upperComponent];
+
+    if (!COMPONENT) return {};
+
+    const structure = {};
+    const startV = '$_';
+    const componentVariant = (() => {
+      if (!!variant) {
+        const lowerVariant = variant.toLocaleLowerCase().replace(/-/g, '_');
+        return `${startV}${lowerVariant}`;
+      } else {
+        return false;
+      }
+    })();
+    if (componentVariant && componentVariant in COMPONENT) {
+      const variantFragment = COMPONENT[componentVariant];
+      Object.entries(variantFragment).forEach(([key, value]) => {
+        if (!(key in structure)) {
+          structure[key] = value;
+        }
+      });
+    }
+    Object.entries(COMPONENT).forEach(([key, value]) => {
+      if (key.startsWith(startV)) return;
+      if (!(key in structure) && value) {
+        structure[key] = value;
+      }
+    });
+    if (!!additionalClassNames && Object.keys(additionalClassNames).length) {
+      Object.entries(additionalClassNames).forEach(([key, value]) => {
+        if (!(key in structure)) {
+          structure[key] = value;
+        } else if (value) {
+          const existingValue = structure[key].split(' ');
+          const newValue = value.split(' ');
+          const combinedValues = Array.from(
+            new Set([...existingValue, ...newValue]),
+          );
+          structure[key] = combinedValues.join(' ');
+        }
+      });
+    }
+    return structure;
+  }
+}

package/dist/src/lib/typingStyles/typingStyles.utils.js

@@ -1 +1 @@
-const{cssProps:e,cssPseudoClasses:s,cssPseudoElements:n,cssAdvancedSelectors:t}=require("../../constants"),r=({object:e,type:s})=>Object.keys(e).reduce((e,n)=>e+`  ${n}?: ${s};\n`,""),$=({advancedSelectors:e,type:s})=>Object.keys(e).reduce((e,n,t)=>e+`${t>0?" |":""} { ${n}?: ${s}; }\n`,""),p=({mediaConfig:e,type:s})=>e&&Array.isArray(e)?e.reduce((e,n)=>e+`    '${n.name}'?: ${s};\n`,""):"",y=({mediaConfig:y})=>{const o="CssLibPropsType",i=Array.isArray(y)&&y.length>0,a="CssPropsType",c="CssPseudoClassesType",d="CssPseudoElementsType",u="CssAdvancedSelectorsType",g="CssMediaQueriesType",C="CssForeignType",l=`${o} & { $target?: string; }`,b="CssLibPseudoClassesType",x="CssLibPseudoElementsType",m="CssLibAdvancedSelectorsType",T="CssLibAttributesType",k="CssLibMediaQueriesType",P="CssForeignLibType",v="CssDynamicValuesType",A=`export type ${o} = ${a} & ${b} & ${x} & ${m} & ${v} & ${T}${i?` & ${k}`:""} & ${P};\n`;return`\nexport type ${a} = {\n${r({object:e,type:"string"})}}\n\nexport type ${c} = {\n${r({object:s,type:`${c} | ${d} | ${l}`})}}\n\nexport type ${d} = {\n${r({object:n,type:`${d} | ${c} | ${o}`})}}\n\nexport type ${u} = \n${$({advancedSelectors:t,type:l})}\n\nexport type ${g} = ${a} & { $type?: string; $values?: { [key: string]: string }; }\n\nexport type ${C} = { [key:string]: { component: object; variant?: string | unknown; name: string; } }\n\nexport type ${b} = {\n  $pseudoClasses?: ${c} \n}\n\nexport type ${x} = {\n  $pseudoElements?: ${d} \n}\n\nexport type ${v} = {\n  $dynamicValues?: string[]; \n}\n\nexport type ${m} = {\n  $advancedSelectors?: ${u}[] \n}\n\nexport type ${T} = { $attributes?: { [key: string]: ${o} } | { [key: string]: { [key: string]: ${o} } } }\n\n${i?`export type ${k} = {\n  $mediaQueries?: {\n    [key: string]: ${g}\n  } | {\n${p({mediaConfig:y,type:o})}  }\n}\n`:""}\nexport type ${P} = {\n  $foreign?: ${C} \n}\n\n${A}\n  `};module.exports={typingStyles:y};
+const{cssProps:e,cssPseudoClasses:n,cssPseudoElements:s,cssAdvancedSelectors:t}=require("../../constants"),r=({object:e,type:n})=>Object.keys(e).reduce((e,s)=>e+`  ${s}?: ${n};\n`,""),$=({advancedSelectors:e,type:n})=>Object.keys(e).reduce((e,s,t)=>e+`${t>0?" |":""} { ${s}?: ${n}; }\n`,""),p=({mediaConfig:e,type:n})=>e&&Array.isArray(e)?e.reduce((e,s)=>e+`    '${s.name}'?: ${n};\n`,""):"",y=({mediaConfig:y})=>{const o="CssLibPropsType",i=Array.isArray(y)&&y.length>0,a="CssPropsType",d="CssPseudoClassesType",c="CssPseudoElementsType",l="CssAdvancedSelectorsType",u="CssMediaQueriesType",g="CssForeignType",C="CssLiteralsType",b=`${o} & { $target?: string; }`,x="CssLibPseudoClassesType",m="CssLibPseudoElementsType",T="CssLibAdvancedSelectorsType",k="CssLibAttributesType",L="CssLibMediaQueriesType",P="CssForeignLibType",v="CssDynamicValuesType",A="CssLibLiteralsType",j=`export type ${o} = ${a} & ${x} & ${m} & ${T} & ${v} & ${k}${i?` & ${L}`:""} & ${P} & ${A};\n`;return`\nexport type ${a} = {\n${r({object:e,type:"string"})}}\n\nexport type ${d} = {\n${r({object:n,type:`${d} | ${c} | ${b}`})}}\n\nexport type ${c} = {\n${r({object:s,type:`${c} | ${d} | ${o}`})}}\n\nexport type ${l} = \n${$({advancedSelectors:t,type:b})}\n\nexport type ${u} = ${a} & { $type?: string; $values?: { [key: string]: string; }; }\n\nexport type ${g} = { [key:string]: { component: object; variant?: string | unknown; name: string; } }\n\nexport type ${C} = { [key: string]: string | number | boolean | null | undefined | bigint | symbol; }\n\nexport type ${x} = {\n  $pseudoClasses?: ${d} \n}\n\nexport type ${m} = {\n  $pseudoElements?: ${c} \n}\n\nexport type ${v} = {\n  $dynamicValues?: string[]; \n}\n\nexport type ${T} = {\n  $advancedSelectors?: ${l}[] \n}\n\nexport type ${k} = { $attributes?: { [key: string]: ${o} } | { [key: string]: { [key: string]: ${o} } } }\n\n${i?`export type ${L} = {\n  $mediaQueries?: {\n    [key: string]: ${u}\n  } | {\n${p({mediaConfig:y,type:o})}  }\n}\n`:""}\nexport type ${P} = {\n  $foreign?: ${g} \n}\n\nexport type ${A} = {\n  $literals?: ${C}; \n}\n\n${j}\n  `};module.exports={typingStyles:y};

package/dist/types/lib/generateCss/helpers/rulename/formatRuleName.utils.d.ts

@@ -1,10 +1,11 @@
-export function formatRuleName({ key, parentRule, theRule, hasStyles, prefix, register, }: {
+export function formatRuleName({ key, parentRule, theRule, hasStyles, prefix, register, literals, }: {
     key?: string;
     parentRule: any;
     theRule: any;
     hasStyles: any;
     prefix: any;
     register?: {};
+    literals: any;
 }): string;
 export function setForeignRegister({ ruleName, foreignRegister, register }: {
     ruleName: any;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bernova",
-  "version": "1.7.5",
+  "version": "1.7.7",
   "description": "The best way to write CSS with Javascript syntax",
   "main": "./dist/src/index.js",
   "types": "./dist/src/index.d.ts",

package/src/lib/generateCss/helpers/classnames/handlerRegister.utils.js

@@ -7,6 +7,45 @@
 
 const { simplifyName } = require('../../../simplifyName/simplifyName.utils');
 
+/**
+ * List of primitive value indicators for special string processing
+ */
+const primitiveValues = [
+  '$boolean$',
+  '$number$',
+  '$string$',
+  '$bigint$',
+  '$symbol$',
+  '$undefined$',
+  '$null$',
+];
+/**
+ * Processes a string value and determines its type
+ * @param {string} str - The input string to process
+ * @returns {Object} - An object containing the processed value and its type
+ */
+const processStringValue = (str) => {
+  if (/^Symbol\.for\(['"](.+)['"]\)$/.test(str)) {
+    const match = str.match(/^Symbol\.for\(['"](.+)['"]\)$/);
+    return { vl: Symbol.for(match[1]), tp: 'symbol' };
+  } else if (/^-?\d+n$/.test(str)) {
+    return { vl: BigInt(str.slice(0, -1)), tp: 'bigint' }; // remove the 'n' and convert to BigInt
+  } else if (!isNaN(str) && !isNaN(parseFloat(str))) {
+    return { vl: Number(str), tp: 'number' };
+  } else if (str === 'true') {
+    return { vl: true, tp: 'boolean' };
+  } else if (str === 'false') {
+    return { vl: false, tp: 'boolean' };
+  } else if (str === 'null') {
+    return { vl: null, tp: 'null' };
+  } else if (str === 'undefined') {
+    return { vl: undefined, tp: 'undefined' };
+  } else if (primitiveValues.includes(str)) {
+    return { vl: `''`, tp: str.replaceAll('$', '') };
+  }
+  return { vl: `'${str}'`, tp: 'string' };
+};
+
 /**
  * Handles the CSS register to generate provider documentation and tools
  * Recursively processes nested component structures and creates exports
@@ -84,20 +123,21 @@ const handlerRegister = ({ register, prefix }) => {
           acc.prov.doc += `${currentSpace}${provKey}: '${component}',\n`;
           acc.prov.declare += `${currentSpace}${provKey}: string,\n`;
         } else if (typeof value === 'string') {
-          // Handle string mappings (class name aliases)
+          //? Handle string mappings (class name aliases)
 
-          // Generate tools documentation from string value
+          const { vl, tp } = processStringValue(value);
+          //* Generate tools documentation from string value
           const compFromValue = simplifyName(value).replace(`${prefix}_`, '');
           if (!componentsRegistered.has(compFromValue)) {
             componentsRegistered.add(compFromValue);
-            acc.tools.doc += `  ${compFromValue}: '${value}',\n`;
-            acc.tools.declare += `  ${compFromValue}: string,\n`;
+            acc.tools.doc += `  ${compFromValue}: ${vl},\n`;
+            acc.tools.declare += `  ${compFromValue}: ${tp},\n`;
           }
 
-          // Generate provider documentation with string value
+          //* Generate provider documentation with string value
           const provKey = component.split('__').at(-1);
-          acc.prov.doc += `${currentSpace}${provKey}: '${value}',\n`;
-          acc.prov.declare += `${currentSpace}${provKey}: string,\n`;
+          acc.prov.doc += `${currentSpace}${provKey}: ${vl},\n`;
+          acc.prov.declare += `${currentSpace}${provKey}: ${tp},\n`;
         } else if (typeof value === 'function') {
           // Handle dynamic value functions (special cases for type generation)
           if (component === 'dynamic_values') {
@@ -113,7 +153,7 @@ const handlerRegister = ({ register, prefix }) => {
         comp: { simple: '', object: '' }, // Component type definitions
         prov: { doc: '', declare: '' }, // Provider documentation and types
         tools: { doc: '', declare: '' }, // Tools utilities and types
-      }
+      },
     );
   };
 

package/src/lib/generateCss/helpers/generateCssStyles.utils.js

@@ -59,7 +59,7 @@ const generateCssStyles = ({ source, mediaConfig, prefix }) => {
   }) => {
     const {
       styles,
-      lib: { $dynamicValues, ...lib },
+      lib: { $dynamicValues, $literals, ...lib },
       other,
     } = separateStyles(source);
     const hasStyles = Object.entries(styles).length > 0;
@@ -76,6 +76,7 @@ const generateCssStyles = ({ source, mediaConfig, prefix }) => {
       register,
       hasStyles,
       prefix: prefixed,
+      literals: $literals,
     });
 
     if (hasStyles) {
@@ -150,6 +151,7 @@ const generateCssStyles = ({ source, mediaConfig, prefix }) => {
             $advancedSelectors,
             $foreign,
             $dynamicValues,
+            $literals,
             ...css
           } = value;
 
@@ -167,6 +169,7 @@ const generateCssStyles = ({ source, mediaConfig, prefix }) => {
             register,
             hasStyles,
             prefix: prefixed,
+            literals: $literals,
           });
 
           if (hasStyles) {
@@ -212,7 +215,7 @@ const generateCssStyles = ({ source, mediaConfig, prefix }) => {
             advancedSelectorHandler(
               $advancedSelectors,
               ruleName,
-              processSource
+              processSource,
             );
           }
           if ($foreign) {

package/src/lib/generateCss/helpers/rulename/formatRuleName.utils.js

@@ -25,6 +25,7 @@ const setRegister = ({
   mainComponent,
   hasStyles,
   prefix,
+  literals,
 }) => {
   // Initialize main component in register if not exists
   if (!(mainComponent in register)) {
@@ -53,6 +54,26 @@ const setRegister = ({
         : `${prefix}${component}--${variant}`; // Variant only
     }
   }
+
+  // Handle literals registration if provided
+  if (literals) {
+    Object.entries(literals).forEach(([literalKey, literalValue]) => {
+      const lValue = String(literalValue);
+      if (!!variant) {
+        const v = `$_${formattedStatKey(variant)}`;
+        register[mainComponent][v][literalKey] = lValue;
+        if (!(literalKey in register[mainComponent])) {
+          const lValueType =
+            literalValue === null
+              ? '$null$'
+              : `$${String(typeof literalValue)}$`;
+          register[mainComponent][literalKey] = lValueType;
+        }
+      } else {
+        register[mainComponent][literalKey] = lValue;
+      }
+    });
+  }
 };
 
 const getRuleNameSlices = ({ parentRule, key, prefix }) => {
@@ -101,6 +122,7 @@ const formatRuleName = ({
   hasStyles,
   prefix,
   register = {},
+  literals,
 }) => {
   let className = '';
   // Use theRule directly if provided (for pseudo-classes, selectors, etc.)
@@ -119,6 +141,7 @@ const formatRuleName = ({
         mainComponent: cleanKey,
         hasStyles,
         prefix,
+        literals,
       });
     }
   } else {
@@ -142,6 +165,7 @@ const formatRuleName = ({
         variant,
         hasStyles,
         prefix,
+        literals,
       });
     } else if (lowerKey) {
       className = `${mainComponent}--${lowerKey}`;
@@ -153,6 +177,7 @@ const formatRuleName = ({
         variant: lowerKey,
         hasStyles,
         prefix,
+        literals,
       });
     }
   }

package/src/lib/generateProvider/template/providerTemplate-link.js

@@ -147,16 +147,22 @@ export class $_Provider_$ {
     }
     Object.entries(COMPONENT).forEach(([key, value]) => {
       if (key.startsWith(startV)) return;
-      if (!(key in structure)) {
+      if (!(key in structure) && value) {
         structure[key] = value;
       }
     });
     if (!!additionalClassNames && Object.keys(additionalClassNames).length) {
       Object.entries(additionalClassNames).forEach(([key, value]) => {
         if (!(key in structure)) {
-          structure[key] = '';
+          structure[key] = value;
+        } else if (value) {
+          const existingValue = structure[key].split(' ');
+          const newValue = value.split(' ');
+          const combinedValues = Array.from(
+            new Set([...existingValue, ...newValue]),
+          );
+          structure[key] = combinedValues.join(' ');
         }
-        structure[key] += ` ${value}`;
       });
     }
     return structure;

package/src/lib/generateProvider/template/providerTemplate-style.js

@@ -132,16 +132,22 @@ export class $_Provider_$ {
     }
     Object.entries(COMPONENT).forEach(([key, value]) => {
       if (key.startsWith(startV)) return;
-      if (!(key in structure)) {
+      if (!(key in structure) && value) {
         structure[key] = value;
       }
     });
     if (!!additionalClassNames && Object.keys(additionalClassNames).length) {
       Object.entries(additionalClassNames).forEach(([key, value]) => {
         if (!(key in structure)) {
-          structure[key] = '';
+          structure[key] = value;
+        } else if (value) {
+          const existingValue = structure[key].split(' ');
+          const newValue = value.split(' ');
+          const combinedValues = Array.from(
+            new Set([...existingValue, ...newValue]),
+          );
+          structure[key] = combinedValues.join(' ');
         }
-        structure[key] += ` ${value}`;
       });
     }
     return structure;