@salty-css/react 0.0.1-alpha.225 → 0.0.1-alpha.227

package/README.md

@@ -19,7 +19,7 @@ Is there anything saltier than CSS in frontend web development? Salty CSS is bui
 Fastest way to get started with any framework is
 
 ```bash
-npx salty-css init [directory]
+npx salty-css init
 ```
 
 Other guides:
@@ -40,6 +40,10 @@ Other guides:
 2. Salty CSS components created with styled function can extend non Salty CSS components (`export const CustomLink = styled(NextJSLink, { ... });`) but those components must take in `className` prop for styles to apply.
 3. Among common types like `string` and `number`, CSS-in-JS properties in Salty CSS do support `functions` and `promises` as values (`styled('span', { base: { color: async () => 'red' } });`) but running asynchronous tasks or importing heavy 3rd party libraries into `*.css.ts` or `*.css.tsx` files can cause longer build times.
 
+## Get support
+
+To get help with problems, [Join Salty CSS Discord server](https://discord.gg/R6kr4KxMhP).
+
 ## API
 
 ### Component styling
@@ -88,6 +92,7 @@ export const Component = styled('div', {
     // Add additional default props for the component (eg, id and other html element attributes)
   },
   passProps: true, // Pass variant props to the rendered element / parent component (default: false)
+  priority: 1, // Override automatic priotity layer with a custom value (0-8), higher is considered more important
 });
 ```
 

package/class-name-client.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=t=>{const e=new String(t);return Object.assign(e,{get isClassName(){return!0}}),e};exports.className=s;

package/class-name-client.d.ts

@@ -0,0 +1,3 @@
+export declare const className: (className: string) => string & {
+    isClassName: boolean;
+};

package/class-name-client.js

@@ -0,0 +1,11 @@
+const e = (t) => {
+  const s = new String(t);
+  return Object.assign(s, {
+    get isClassName() {
+      return !0;
+    }
+  }), s;
+};
+export {
+  e as className
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salty-css/react",
-  "version": "0.0.1-alpha.225",
+  "version": "0.0.1-alpha.227",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "typings": "./dist/index.d.ts",
@@ -44,6 +44,10 @@
       "import": "./class-name.js",
       "require": "./class-name.cjs"
     },
+    "./class-name-client": {
+      "import": "./class-name-client.js",
+      "require": "./class-name-client.cjs"
+    },
     "./keyframes": {
       "import": "./keyframes.js",
       "require": "./keyframes.cjs"
@@ -62,7 +66,7 @@
     }
   },
   "dependencies": {
-    "@salty-css/core": "^0.0.1-alpha.225",
+    "@salty-css/core": "^0.0.1-alpha.227",
     "clsx": ">=2.x",
     "react": ">=19.x || >=18.3.x"
   }

package/styled.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("./styles-generator-CD8r4Qz6.cjs"),g=require("./element-factory-DjYdX8Jd.cjs");class h extends m.StylesGenerator{constructor(e,t){super(t),this.tagName=e,this._params=t}get priority(){var e;return typeof this.tagName=="function"||typeof this.tagName=="object"?(((e=this.tagName.generator)==null?void 0:e.priority)||0)+1:0}get clientProps(){const{element:e,variants:t={},compoundVariants:a=[],defaultVariants:d={},defaultProps:l={},passProps:u}=this.params,{callerName:y,isProduction:f}=this.buildContext,o=new Set([]),i=s=>{const r=d[s];r!==void 0?o.add(`${s}=${String(r)}`):o.add(s)};Object.keys(t).forEach(i),a.map(s=>Object.keys(s).forEach(i));const c=new Set([]);if(this.params.base){const s=JSON.stringify(this.params.base).match(/\{props\.([\w\d]+)\}/gi);s&&s.forEach(r=>{const p=r.replace(/\{props\.([\w\d]+)\}/gi,"$1");p&&c.add(p)})}return{element:e,variantKeys:[...o],propValueKeys:[...c],passProps:u,defaultProps:l,attr:{"data-component-name":f?void 0:y}}}}const b=(n,e)=>{const t=new h(n,e),a=g.elementFactory(n,t.cssClassName,t.clientProps,{"data-unoptimized-client-component":!0});return Object.assign(a,{generator:t}),a};exports.styled=b;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("./styles-generator-CD8r4Qz6.cjs"),h=require("./element-factory-DjYdX8Jd.cjs");class g extends m.StylesGenerator{constructor(e,t){super(t),this.tagName=e,this._params=t}get priority(){var e;return this.params.priority?this.params.priority:typeof this.tagName=="function"||typeof this.tagName=="object"?(((e=this.tagName.generator)==null?void 0:e.priority)||0)+1:0}get clientProps(){const{element:e,variants:t={},compoundVariants:s=[],defaultVariants:d={},defaultProps:l={},passProps:u}=this.params,{callerName:y,isProduction:f}=this.buildContext,o=new Set([]),i=r=>{const a=d[r];a!==void 0?o.add(`${r}=${String(a)}`):o.add(r)};Object.keys(t).forEach(i),s.map(r=>Object.keys(r).forEach(i));const c=new Set([]);if(this.params.base){const r=JSON.stringify(this.params.base).match(/\{props\.([\w\d]+)\}/gi);r&&r.forEach(a=>{const p=a.replace(/\{props\.([\w\d]+)\}/gi,"$1");p&&c.add(p)})}return{element:e,variantKeys:[...o],propValueKeys:[...c],passProps:u,defaultProps:l,attr:{"data-component-name":f?void 0:y}}}}const b=(n,e)=>{const t=new g(n,e),s=h.elementFactory(n,t.cssClassName,t.clientProps,{"data-unoptimized-client-component":!0});return Object.assign(s,{generator:t}),s};exports.styled=b;

package/styled.js

@@ -6,19 +6,19 @@ class g extends y {
   }
   get priority() {
     var e;
-    return typeof this.tagName == "function" || typeof this.tagName == "object" ? (((e = this.tagName.generator) == null ? void 0 : e.priority) || 0) + 1 : 0;
+    return this.params.priority ? this.params.priority : typeof this.tagName == "function" || typeof this.tagName == "object" ? (((e = this.tagName.generator) == null ? void 0 : e.priority) || 0) + 1 : 0;
   }
   get clientProps() {
-    const { element: e, variants: t = {}, compoundVariants: s = [], defaultVariants: d = {}, defaultProps: l = {}, passProps: f } = this.params, { callerName: m, isProduction: u } = this.buildContext, o = /* @__PURE__ */ new Set([]), i = (a) => {
-      const r = d[a];
-      r !== void 0 ? o.add(`${a}=${String(r)}`) : o.add(a);
+    const { element: e, variants: t = {}, compoundVariants: r = [], defaultVariants: d = {}, defaultProps: m = {}, passProps: f } = this.params, { callerName: l, isProduction: u } = this.buildContext, o = /* @__PURE__ */ new Set([]), i = (a) => {
+      const s = d[a];
+      s !== void 0 ? o.add(`${a}=${String(s)}`) : o.add(a);
     };
-    Object.keys(t).forEach(i), s.map((a) => Object.keys(a).forEach(i));
+    Object.keys(t).forEach(i), r.map((a) => Object.keys(a).forEach(i));
     const c = /* @__PURE__ */ new Set([]);
     if (this.params.base) {
       const a = JSON.stringify(this.params.base).match(/\{props\.([\w\d]+)\}/gi);
-      a && a.forEach((r) => {
-        const p = r.replace(/\{props\.([\w\d]+)\}/gi, "$1");
+      a && a.forEach((s) => {
+        const p = s.replace(/\{props\.([\w\d]+)\}/gi, "$1");
         p && c.add(p);
       });
     }
@@ -27,20 +27,20 @@ class g extends y {
       variantKeys: [...o],
       propValueKeys: [...c],
       passProps: f,
-      defaultProps: l,
+      defaultProps: m,
       attr: {
-        "data-component-name": u ? void 0 : m
+        "data-component-name": u ? void 0 : l
       }
     };
   }
 }
 const v = (n, e) => {
-  const t = new g(n, e), s = h(n, t.cssClassName, t.clientProps, {
+  const t = new g(n, e), r = h(n, t.cssClassName, t.clientProps, {
     "data-unoptimized-client-component": !0
   });
-  return Object.assign(s, {
+  return Object.assign(r, {
     generator: t
-  }), s;
+  }), r;
 };
 export {
   v as styled