@salty-css/react 0.0.1-alpha.125 → 0.0.1-alpha.127

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.125",
+  "version": "0.0.1-alpha.127",
   "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.125",
+    "@salty-css/core": "^0.0.1-alpha.127",
     "clsx": ">=2.x",
     "react": ">=19.x || >=18.3.x"
   }

package/styled.cjs

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

package/styled.js

@@ -1,19 +1,19 @@
-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 o = (e, t, s) => g(e, typeof t != "symbol" ? t + "" : t, s);
-import { t as N, p as _ } from "./parse-styles-CjyvxVJD.js";
-import { d as $ } from "./parse-tokens-YUi047xd.js";
-import { e as b } from "./element-factory-C7JVLDq7.js";
-const x = (e) => Object.keys(e);
-class V {
+var u = Object.defineProperty;
+var f = (e, t, s) => t in e ? u(e, t, { enumerable: !0, configurable: !0, writable: !0, value: s }) : e[t] = s;
+var c = (e, t, s) => f(e, typeof t != "symbol" ? t + "" : t, s);
+import { t as y, p as g } from "./parse-styles-CjyvxVJD.js";
+import { d as N } from "./parse-tokens-YUi047xd.js";
+import { e as _ } from "./element-factory-C7JVLDq7.js";
+const $ = (e) => Object.keys(e);
+class b {
   constructor(t, s) {
-    o(this, "_isProd");
-    o(this, "_callerName");
-    o(this, "_context");
+    c(this, "_isProd");
+    c(this, "_callerName");
+    c(this, "_context");
     this.tagName = t, this.params = s;
   }
   get hash() {
-    return N(this.params.base || this.params);
+    return y(this.params.base || this.params);
   }
   get priority() {
     var t;
@@ -30,33 +30,33 @@ class V {
     return `--${this.hash}-display-name: ${this._callerName};`;
   }
   get cssFileName() {
-    return this._callerName ? `c_${$(this._callerName)}-${this.hash}-${this.priority}.css` : `${this.hash}-${this.priority}.css`;
+    return this._callerName ? `c_${N(this._callerName)}-${this.hash}-${this.priority}.css` : `${this.hash}-${this.priority}.css`;
   }
   get templateKeys() {
     var t;
-    return (t = this._context) != null && t.config.templates ? x(this._context.config.templates) : [];
+    return (t = this._context) != null && t.config.templates ? $(this._context.config.templates) : [];
   }
   get css() {
-    var n;
+    var o;
     const { base: t = {}, variants: s = {}, compoundVariants: a = [] } = this.params, i = { ...t, variants: s, compoundVariants: a };
-    return _(i, `.${this.cssClassName}`, this.priority, (n = this._context) == null ? void 0 : n.config);
+    return g(i, `.${this.cssClassName}`, this.priority, (o = this._context) == null ? void 0 : o.config);
   }
   get props() {
-    const { element: t, variants: s = {}, compoundVariants: a = [], defaultVariants: i = {}, defaultProps: n = {}, passProps: u } = this.params, c = /* @__PURE__ */ new Set([]), p = (r) => {
-      const h = i[r];
-      h !== void 0 ? c.add(`${r}=${String(h)}`) : c.add(r);
+    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);
     };
     Object.keys(s).forEach(p), a.map((r) => Object.keys(r).forEach(p));
-    const m = /* @__PURE__ */ new Set([]), l = /\{props\.([\w\d]+)\}/gi.exec(JSON.stringify(this.params.base));
-    return l && l.forEach((r, h, f) => {
-      const d = f.at(1);
-      d && m.add(d);
+    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);
     }), {
       element: t,
-      variantKeys: [...c],
+      variantKeys: [...h],
       propValueKeys: [...m],
-      passProps: u,
-      defaultProps: n,
+      passProps: d,
+      defaultProps: o,
       attr: {
         "data-component-name": this._isProd ? void 0 : this._callerName
       }
@@ -68,8 +68,8 @@ class V {
     return this._isProd = i, this._callerName = s, this;
   }
 }
-const C = (e, t) => {
-  const s = new V(e, t), a = b(e, s.cssClassName, s.props, {
+const j = (e, t) => {
+  const s = new b(e, t), a = _(e, s.cssClassName, s.props, {
     "data-unoptimized-client-component": !0
   });
   return Object.assign(a, {
@@ -77,5 +77,5 @@ const C = (e, t) => {
   }), a;
 };
 export {
-  C as styled
+  j as styled
 };