@salty-css/react 0.0.1-alpha.126 → 0.0.1-alpha.128

package/README.md

@@ -1,4 +1,4 @@
-![Bannter](https://raw.githubusercontent.com/gist/tremppu/ef2b867907cbf262ab7373f41558a403/raw/a2137de136ee2296e386682beb4487bba0f58a2f/salty-logo-svg-dvd.svg)
+![Salty CSS Banner](https://raw.githubusercontent.com/gist/tremppu/ef2b867907cbf262ab7373f41558a403/raw/a2137de136ee2296e386682beb4487bba0f58a2f/salty-logo-svg-dvd.svg)
 
 # Salty CSS - CSS-in-JS library that is kinda sweet
 
@@ -19,7 +19,9 @@ Fastest way to get started with any framework is `npx salty-css init [directory]
 - Next.js → [Next.js guide](#nextjs) + [Next.js example app](https://github.com/margarita-form/salty-css-website)
 - React + Vite → [React + Vite guide](#react--vite) + [React example code](#code-examples)
 - React + Webpack → Guide coming soon
- ## Useful commands
+
+## Useful commands
+
 - Create component: `npx salty-css generate [filePath]`
 - Build: `npx salty-css build [directory]`
 - Update Salty CSS packages: `npx salty-css up`
@@ -61,8 +63,6 @@ In your existing repository you can use `npx salty-css [command]` to initialize
 - Generate component → `npx salty-css update [version]` - Update @salty-css packages in your repository. Default version is "latest". Additional options like `--dir`, `--tag`, `--name` and `--className` are also supported.
 - Build files → `npx salty-css build [directory]` - Compile Salty CSS related files in your project. This should not be needed if you are using tools like Next.js or Vite
 
-
-
 ## Usage
 
 ### Next.js
@@ -118,7 +118,7 @@ And note: steps 2 & 3 are just to show how get new components up and running, st
 
 [Check out react example code](#code-examples)
 
-----
+---
 
 ### Create components
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salty-css/react",
-  "version": "0.0.1-alpha.126",
+  "version": "0.0.1-alpha.128",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "typings": "./dist/index.d.ts",
@@ -46,7 +46,7 @@
     }
   },
   "dependencies": {
-    "@salty-css/core": "^0.0.1-alpha.126",
+    "@salty-css/core": "^0.0.1-alpha.128",
     "clsx": ">=2.x",
     "react": ">=19.x || >=18.3.x"
   }

package/styled.cjs

@@ -1 +1 @@
-"use strict";var y=Object.defineProperty;var g=(s,t,e)=>t in s?y(s,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):s[t]=e;var c=(s,t,e)=>g(s,typeof t!="symbol"?t+"":t,e);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("./parse-styles-CyIjlKB3.cjs"),f=require("./parse-tokens-p68muVgG.cjs"),N=require("./element-factory-D4kpeFoW.cjs"),_=s=>Object.keys(s);class b{constructor(t,e){c(this,"_isProd");c(this,"_callerName");c(this,"_context");this.tagName=t,this.params=e}get hash(){return d.toHash(this.params.base||this.params)}get priority(){var t;return typeof this.tagName=="function"||typeof this.tagName=="object"?(((t=this.tagName.generator)==null?void 0:t.priority)||0)+1:0}get classNames(){const t=[this.hash],{className:e}=this.params;return e&&t.push(e),t.join(" ")}get cssClassName(){return this.hash}get cssDisplayNameVar(){return`--${this.hash}-display-name: ${this._callerName};`}get cssFileName(){return this._callerName?`c_${f.dashCase(this._callerName)}-${this.hash}-${this.priority}.css`:`${this.hash}-${this.priority}.css`}get templateKeys(){var t;return(t=this._context)!=null&&t.config.templates?_(this._context.config.templates):[]}get css(){var o;const{base:t={},variants:e={},compoundVariants:a=[]}=this.params,i={...t,variants:e,compoundVariants:a};return d.parseStyles(i,`.${this.cssClassName}`,this.priority,(o=this._context)==null?void 0:o.config)}get props(){const{element:t,variants:e={},compoundVariants:a=[],defaultVariants:i={},defaultProps:o={},passProps:u}=this.params,h=new Set([]),p=r=>{const n=i[r];n!==void 0?h.add(`${r}=${String(n)}`):h.add(r)};Object.keys(e).forEach(p),a.map(r=>Object.keys(r).forEach(p));const l=new Set([]),m=JSON.stringify(this.params.base).match(/\{props\.([\w\d]+)\}/gi);return m&&m.forEach(r=>{const n=r.replace(/\{props\.([\w\d]+)\}/gi,"$1");n&&l.add(n)}),{element:t,variantKeys:[...h],propValueKeys:[...l],passProps:u,defaultProps:o,attr:{"data-component-name":this._isProd?void 0:this._callerName}}}_withBuildContext(t){this._context=t;const{name:e,config:a,prod:i}=t;return this._isProd=i,this._callerName=e,this}}const $=(s,t)=>{const e=new b(s,t),a=N.elementFactory(s,e.cssClassName,e.props,{"data-unoptimized-client-component":!0});return Object.assign(a,{generator:e}),a};exports.styled=$;
+"use strict";var y=Object.defineProperty;var g=(e,t,s)=>t in e?y(e,t,{enumerable:!0,configurable:!0,writable:!0,value:s}):e[t]=s;var c=(e,t,s)=>g(e,typeof t!="symbol"?t+"":t,s);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("./parse-styles-CyIjlKB3.cjs"),f=require("./parse-tokens-p68muVgG.cjs"),N=require("./element-factory-D4kpeFoW.cjs"),_=e=>Object.keys(e);class b{constructor(t,s){c(this,"_isProd");c(this,"_callerName");c(this,"_context");this.tagName=t,this.params=s}get hash(){return d.toHash(this.params.base||this.params)}get priority(){var t;return typeof this.tagName=="function"||typeof this.tagName=="object"?(((t=this.tagName.generator)==null?void 0:t.priority)||0)+1:0}get classNames(){const t=[this.hash],{className:s}=this.params;return s&&t.push(s),t.join(" ")}get cssClassName(){return this.hash}get cssDisplayNameVar(){return`--${this.hash}-display-name: ${this._callerName};`}get cssFileName(){return this._callerName?`c_${f.dashCase(this._callerName)}-${this.hash}-${this.priority}.css`:`${this.hash}-${this.priority}.css`}get templateKeys(){var t;return(t=this._context)!=null&&t.config.templates?_(this._context.config.templates):[]}get css(){var n;const{base:t={},variants:s={},compoundVariants:r=[]}=this.params,i={...t,variants:s,compoundVariants:r};return d.parseStyles(i,`.${this.cssClassName}`,this.priority,(n=this._context)==null?void 0:n.config)}get props(){const{element:t,variants:s={},compoundVariants:r=[],defaultVariants:i={},defaultProps:n={},passProps:u}=this.params,h=new Set([]),p=a=>{const o=i[a];o!==void 0?h.add(`${a}=${String(o)}`):h.add(a)};Object.keys(s).forEach(p),r.map(a=>Object.keys(a).forEach(p));const l=new Set([]);if(this.params.base){const a=JSON.stringify(this.params.base).match(/\{props\.([\w\d]+)\}/gi);a&&a.forEach(o=>{const m=o.replace(/\{props\.([\w\d]+)\}/gi,"$1");m&&l.add(m)})}return{element:t,variantKeys:[...h],propValueKeys:[...l],passProps:u,defaultProps:n,attr:{"data-component-name":this._isProd?void 0:this._callerName}}}_withBuildContext(t){this._context=t;const{name:s,config:r,prod:i}=t;return this._isProd=i,this._callerName=s,this}}const $=(e,t)=>{const s=new b(e,t),r=N.elementFactory(e,s.cssClassName,s.props,{"data-unoptimized-client-component":!0});return Object.assign(r,{generator:s}),r};exports.styled=$;

package/styled.js

@@ -37,26 +37,30 @@ class b {
     return (t = this._context) != null && t.config.templates ? $(this._context.config.templates) : [];
   }
   get css() {
-    var o;
-    const { base: t = {}, variants: s = {}, compoundVariants: a = [] } = this.params, i = { ...t, variants: s, compoundVariants: a };
-    return g(i, `.${this.cssClassName}`, this.priority, (o = this._context) == null ? void 0 : o.config);
+    var n;
+    const { base: t = {}, variants: s = {}, compoundVariants: r = [] } = this.params, i = { ...t, variants: s, compoundVariants: r };
+    return g(i, `.${this.cssClassName}`, this.priority, (n = this._context) == null ? void 0 : n.config);
   }
   get props() {
-    const { element: t, variants: s = {}, compoundVariants: a = [], defaultVariants: i = {}, defaultProps: o = {}, passProps: d } = this.params, h = /* @__PURE__ */ new Set([]), p = (r) => {
-      const n = i[r];
-      n !== void 0 ? h.add(`${r}=${String(n)}`) : h.add(r);
+    const { element: t, variants: s = {}, compoundVariants: r = [], defaultVariants: i = {}, defaultProps: n = {}, passProps: d } = this.params, h = /* @__PURE__ */ new Set([]), p = (a) => {
+      const o = i[a];
+      o !== void 0 ? h.add(`${a}=${String(o)}`) : h.add(a);
     };
-    Object.keys(s).forEach(p), a.map((r) => Object.keys(r).forEach(p));
-    const m = /* @__PURE__ */ new Set([]), l = JSON.stringify(this.params.base).match(/\{props\.([\w\d]+)\}/gi);
-    return l && l.forEach((r) => {
-      const n = r.replace(/\{props\.([\w\d]+)\}/gi, "$1");
-      n && m.add(n);
-    }), {
+    Object.keys(s).forEach(p), r.map((a) => Object.keys(a).forEach(p));
+    const m = /* @__PURE__ */ new Set([]);
+    if (this.params.base) {
+      const a = JSON.stringify(this.params.base).match(/\{props\.([\w\d]+)\}/gi);
+      a && a.forEach((o) => {
+        const l = o.replace(/\{props\.([\w\d]+)\}/gi, "$1");
+        l && m.add(l);
+      });
+    }
+    return {
       element: t,
       variantKeys: [...h],
       propValueKeys: [...m],
       passProps: d,
-      defaultProps: o,
+      defaultProps: n,
       attr: {
         "data-component-name": this._isProd ? void 0 : this._callerName
       }
@@ -64,17 +68,17 @@ class b {
   }
   _withBuildContext(t) {
     this._context = t;
-    const { name: s, config: a, prod: i } = t;
+    const { name: s, config: r, prod: i } = t;
     return this._isProd = i, this._callerName = s, this;
   }
 }
 const j = (e, t) => {
-  const s = new b(e, t), a = _(e, s.cssClassName, s.props, {
+  const s = new b(e, t), r = _(e, s.cssClassName, s.props, {
     "data-unoptimized-client-component": !0
   });
-  return Object.assign(a, {
+  return Object.assign(r, {
     generator: s
-  }), a;
+  }), r;
 };
 export {
   j as styled