@salty-css/react 0.0.1-alpha.252 → 0.0.1-alpha.254

package/README.md

@@ -242,7 +242,7 @@ Example usage:
 styled('span', {
   base: {
     // Use of static font family variable
-    fontFamily: '{colors.fontFamily.heading}',
+    fontFamily: '{fontFamily.heading}',
     // Use of responsive font size variable
     fontSize: '{fontSize.heading.regular}',
     // Use of conditional theme text color variable

package/class-name-client.cjs

@@ -1 +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;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=t=>{const s=new String(t);return Object.assign(s,{get isClassName(){return!0},variant:(n,r)=>{const a=`${n}-${r}`,c=`${t} ${a}`;return e(c)}}),s};exports.className=e;

package/class-name-client.d.ts

@@ -1,3 +1,7 @@
-export declare const className: (className: string) => string & {
+interface ClassNameMethods {
     isClassName: boolean;
-};
+    variant: (name: string, value: string) => string & ClassNameFunction;
+}
+type ClassNameFunction = string & ClassNameMethods;
+export declare const className: (classNameStr: string) => ClassNameFunction;
+export {};

package/class-name-client.js

@@ -1,11 +1,15 @@
-const e = (t) => {
-  const s = new String(t);
-  return Object.assign(s, {
+const c = (s) => {
+  const t = new String(s);
+  return Object.assign(t, {
     get isClassName() {
       return !0;
+    },
+    variant: (n, r) => {
+      const e = `${n}-${r}`, a = `${s} ${e}`;
+      return c(a);
     }
-  }), s;
+  }), t;
 };
 export {
-  e as className
+  c as className
 };

package/class-name.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./styles-generator-BYrIpvu6.cjs");class a extends r.StylesGenerator{constructor(e){super(e),this._params=e}}const n=s=>{const e=new a(s),t=new String(e.cssClassName);return Object.assign(t,{get isClassName(){return!0},generator:e}),t};exports.className=n;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("./styles-generator-BYrIpvu6.cjs");class u extends i.StylesGenerator{constructor(s){super(s),this._params=s}}const m=t=>{const s=new u(t),r=a=>{const e=new String(a);return Object.assign(e,{get isClassName(){return!0},variant:(n,c)=>{const o=`${n}-${c}`,l=`${e} ${o}`;return r(l)},generator:s}),e};return r(s.cssClassName)};exports.className=m;

package/class-name.d.ts

@@ -1,6 +1,10 @@
 import { StyledParams } from '@salty-css/core/types';
 import { ClassNameGenerator } from '@salty-css/core/generators';
-export declare const className: <const STYLE_PARAMS extends StyledParams>(params: STYLE_PARAMS) => string & {
-    isClassName: boolean;
+interface ClassNameMethods<STYLE_PARAMS extends StyledParams> {
     generator: ClassNameGenerator<STYLE_PARAMS>;
-};
+    isClassName: boolean;
+    variant: (name: string, value: string) => string & ClassNameFunction<STYLE_PARAMS>;
+}
+type ClassNameFunction<STYLE_PARAMS extends StyledParams> = string & ClassNameMethods<STYLE_PARAMS>;
+export declare const className: <const STYLE_PARAMS extends StyledParams>(params: STYLE_PARAMS) => ClassNameFunction<STYLE_PARAMS>;
+export {};

package/class-name.js

@@ -1,18 +1,25 @@
-import { S as r } from "./styles-generator-CwRnWDqg.js";
-class a extends r {
+import { S as i } from "./styles-generator-CwRnWDqg.js";
+class m extends i {
   constructor(s) {
     super(s), this._params = s;
   }
 }
-const o = (e) => {
-  const s = new a(e), t = new String(s.cssClassName);
-  return Object.assign(t, {
-    get isClassName() {
-      return !0;
-    },
-    generator: s
-  }), t;
+const C = (e) => {
+  const s = new m(e), r = (a) => {
+    const t = new String(a);
+    return Object.assign(t, {
+      get isClassName() {
+        return !0;
+      },
+      variant: (n, o) => {
+        const c = `${n}-${o}`, l = `${t} ${c}`;
+        return r(l);
+      },
+      generator: s
+    }), t;
+  };
+  return r(s.cssClassName);
 };
 export {
-  o as className
+  C as className
 };

package/package.json

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