@salty-css/react 0.0.1-alpha.24 → 0.0.1-alpha.240

package/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("./keyframes.cjs"),n=require("./media.cjs"),u=r=>`{${r}}`,a=(...r)=>r.flat().reduce((t,e)=>e!=null&&e._current?{...t,...e._current}:{...t,...e},{}),o=(...r)=>r.flat().reduce((t,e)=>({...t,...e._children}),{});exports.keyframes=c.keyframes;exports.MediaQueryFactory=n.MediaQueryFactory;exports.media=n.media;exports.mergeFactories=o;exports.mergeObjects=a;exports.token=u;

package/index.d.ts

@@ -0,0 +1 @@
+export * from '@salty-css/core/css';

package/index.js

@@ -0,0 +1,11 @@
+import { keyframes as f } from "./keyframes.js";
+import { MediaQueryFactory as d, media as i } from "./media.js";
+const n = (e) => `{${e}}`, o = (...e) => e.flat().reduce((t, r) => r != null && r._current ? { ...t, ...r._current } : { ...t, ...r }, {}), u = (...e) => e.flat().reduce((t, r) => ({ ...t, ...r._children }), {});
+export {
+  d as MediaQueryFactory,
+  f as keyframes,
+  i as media,
+  u as mergeFactories,
+  o as mergeObjects,
+  n as token
+};

package/keyframes.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("./parse-styles-SPT4zc_H.cjs"),b=({animationName:u,params:l,appendInitialStyles:m,...t})=>{const s=u||c.toHash(t),n=(r={})=>{const{duration:e="500ms",easing:o="ease-in-out",delay:a="0s",iterationCount:i="1",direction:S="normal",fillMode:d="forwards",playState:p="running"}={...l,...r},$=`${s} ${e} ${o} ${a} ${i} ${S} ${d} ${p}`;if(!m)return $;const g=c.parseStyles(t.from||t["0%"],"");return`${$};${g}`},y=Object.entries(t).reduce((r,[e,o])=>{const a=c.parseStyles(o,""),i=typeof e=="number"?`${e}%`:e;return`${r}${i}{${a}}`},""),f=`@keyframes ${s} {${y}}`;return Object.assign(n,{toString:n,isKeyframes:!0,animationName:s,css:f,keyframes:t}),n};exports.keyframes=b;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("./parse-styles-E95SeoXv.cjs"),w=async({animationName:l,params:u,appendInitialStyles:y,...t})=>{const e=l||i.toHash(t),r=async(n={})=>{const{duration:s="500ms",easing:o="ease-in-out",delay:c="0s",iterationCount:S="1",direction:p="normal",fillMode:g="forwards",playState:b="running"}={...u,...n},a=`${e} ${s} ${o} ${c} ${S} ${p} ${g} ${b}`;if(!y)return a;const m=t.from||t["0%"];if(!m)return a;const j=await i.parseAndJoinStyles(m,"");return`${a};${j}`},$=Object.entries(t).map(async([n,s])=>{if(!s)return"";const o=await i.parseAndJoinStyles(s,"");return`${typeof n=="number"?`${n}%`:n}{${o}}`}),d=(await Promise.all($)).join(""),f=`@keyframes ${e} {${d}}`;return Object.assign(r,{toString:r,isKeyframes:!0,animationName:e,css:f,keyframes:t}),r};exports.keyframes=w;

package/keyframes.d.ts

@@ -1,22 +1 @@
-import { CssStyles, StyleValue } from '../../core/src/types';
-type KeyframeKeys = number | 'from' | 'to' | `${number}%`;
-type Keyframes = {
-    [key in KeyframeKeys]: CssStyles;
-};
-interface KeyframesConfig {
-    animationName?: string;
-    appendInitialStyles?: boolean;
-    params?: KeyframesParams;
-}
-interface KeyframesParams {
-    duration?: string;
-    delay?: string;
-    iterationCount?: string | number;
-    easing?: StyleValue<'animationTimingFunction'>;
-    direction?: StyleValue<'animationDirection'>;
-    fillMode?: StyleValue<'animationFillMode'>;
-    playState?: StyleValue<'animationPlayState'>;
-}
-type KeyframesProps = Keyframes & KeyframesConfig;
-export declare const keyframes: ({ animationName: _name, params: _params, appendInitialStyles, ...keyframes }: KeyframesProps) => (params?: KeyframesParams) => string;
-export {};
+export * from '@salty-css/core/css/keyframes';

package/keyframes.js

@@ -1,30 +1,33 @@
-import { t as b, p as c } from "./parse-styles-T74HIH4_.js";
-const C = ({ animationName: m, params: u, appendInitialStyles: f, ...t }) => {
-  const s = m || b(t), e = (r = {}) => {
+import { t as j, p as m } from "./parse-styles-WRUkAmCD.js";
+const h = async ({ animationName: $, params: l, appendInitialStyles: u, ...t }) => {
+  const r = $ || j(t), e = async (n = {}) => {
     const {
-      duration: n = "500ms",
+      duration: s = "500ms",
       easing: o = "ease-in-out",
-      delay: a = "0s",
-      iterationCount: i = "1",
-      direction: d = "normal",
-      fillMode: y = "forwards",
-      playState: S = "running"
-    } = { ...u, ...r }, $ = `${s} ${n} ${o} ${a} ${i} ${d} ${y} ${S}`;
-    if (!f) return $;
-    const g = c(t.from || t["0%"], "");
-    return `${$};${g}`;
-  }, l = Object.entries(t).reduce((r, [n, o]) => {
-    const a = c(o, ""), i = typeof n == "number" ? `${n}%` : n;
-    return `${r}${i}{${a}}`;
-  }, ""), p = `@keyframes ${s} {${l}}`;
+      delay: i = "0s",
+      iterationCount: d = "1",
+      direction: S = "normal",
+      fillMode: g = "forwards",
+      playState: w = "running"
+    } = { ...l, ...n }, a = `${r} ${s} ${o} ${i} ${d} ${S} ${g} ${w}`;
+    if (!u) return a;
+    const c = t.from || t["0%"];
+    if (!c) return a;
+    const b = await m(c, "");
+    return `${a};${b}`;
+  }, f = Object.entries(t).map(async ([n, s]) => {
+    if (!s) return "";
+    const o = await m(s, "");
+    return `${typeof n == "number" ? `${n}%` : n}{${o}}`;
+  }), y = (await Promise.all(f)).join(""), p = `@keyframes ${r} {${y}}`;
   return Object.assign(e, {
     toString: e,
     isKeyframes: !0,
-    animationName: s,
+    animationName: r,
     css: p,
     keyframes: t
   }), e;
 };
 export {
-  C as keyframes
+  h as keyframes
 };

package/media.cjs

@@ -1 +1 @@
-"use strict";var a=Object.defineProperty;var o=(s,e,t)=>e in s?a(s,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):s[e]=t;var i=(s,e,t)=>o(s,typeof e!="symbol"?e+"":e,t);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});class r{constructor(e="@media"){i(this,"next",e=>{const t=new String(e);return Object.assign(t,{get and(){return new r(`${e} and`)},get or(){return new r(`${e},`)}}),t});this.base=e}custom(e){return this.next(`${this.base} ${e}`)}minWidth(e){const t=typeof e=="number"?`${e}px`:e,n=`${this.base} (min-width: ${t})`;return this.next(n)}maxWidth(e){const t=typeof e=="number"?`${e}px`:e,n=`${this.base} (max-width: ${t})`;return this.next(n)}minHeight(e){const t=typeof e=="number"?`${e}px`:e,n=`${this.base} (min-height: ${t})`;return this.next(n)}maxHeight(e){const t=typeof e=="number"?`${e}px`:e,n=`${this.base} (max-height: ${t})`;return this.next(n)}get portrait(){const e=`${this.base} (orientation: portrait)`;return this.next(e)}get landscape(){const e=`${this.base} (orientation: landscape)`;return this.next(e)}prefersColorScheme(e){const t=`${this.base} (prefers-color-scheme: ${e})`;return this.next(t)}get dark(){return this.prefersColorScheme("dark")}get light(){return this.prefersColorScheme("light")}get print(){const e=`${this.base} print`;return this.next(e)}get screen(){const e=`${this.base} screen`;return this.next(e)}get speech(){const e=`${this.base} speech`;return this.next(e)}get all(){const e=`${this.base} all`;return this.next(e)}get not(){const e=`${this.base} not`;return this.next(e)}get reducedMotion(){const e=`${this.base} (prefers-reduced-motion: reduce)`;return this.next(e)}}const h=new r;exports.MediaQueryFactory=r;exports.media=h;
+"use strict";var a=Object.defineProperty;var o=(s,e,t)=>e in s?a(s,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):s[e]=t;var i=(s,e,t)=>o(s,typeof e!="symbol"?e+"":e,t);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});class r{constructor(e="@media"){i(this,"next",e=>{const t=new String(e);return Object.assign(t,{get isMedia(){return!0},get and(){return new r(`${e} and`)},get or(){return new r(`${e},`)}}),t});this.base=e}custom(e){return this.next(`${this.base} ${e}`)}minWidth(e){const t=typeof e=="number"?`${e}px`:e,n=`${this.base} (min-width: ${t})`;return this.next(n)}maxWidth(e){const t=typeof e=="number"?`${e}px`:e,n=`${this.base} (max-width: ${t})`;return this.next(n)}minHeight(e){const t=typeof e=="number"?`${e}px`:e,n=`${this.base} (min-height: ${t})`;return this.next(n)}maxHeight(e){const t=typeof e=="number"?`${e}px`:e,n=`${this.base} (max-height: ${t})`;return this.next(n)}get portrait(){const e=`${this.base} (orientation: portrait)`;return this.next(e)}get landscape(){const e=`${this.base} (orientation: landscape)`;return this.next(e)}prefersColorScheme(e){const t=`${this.base} (prefers-color-scheme: ${e})`;return this.next(t)}get dark(){return this.prefersColorScheme("dark")}get light(){return this.prefersColorScheme("light")}get print(){const e=`${this.base} print`;return this.next(e)}get screen(){const e=`${this.base} screen`;return this.next(e)}get speech(){const e=`${this.base} speech`;return this.next(e)}get all(){const e=`${this.base} all`;return this.next(e)}get not(){const e=`${this.base} not`;return this.next(e)}get reducedMotion(){const e=`${this.base} (prefers-reduced-motion: reduce)`;return this.next(e)}}const u=new r;exports.MediaQueryFactory=r;exports.media=u;

package/media.d.ts

@@ -1,71 +1 @@
-import { OrNumber, OrString } from '../../core/src/types/util-types';
-export declare class MediaQueryFactory {
-    private base;
-    constructor(base?: string);
-    private next;
-    custom(value: string): string & {
-        and: MediaQueryFactory;
-        or: MediaQueryFactory;
-    };
-    minWidth(width: OrString | OrNumber): string & {
-        and: MediaQueryFactory;
-        or: MediaQueryFactory;
-    };
-    maxWidth(width: OrString | OrNumber): string & {
-        and: MediaQueryFactory;
-        or: MediaQueryFactory;
-    };
-    minHeight(height: OrString | OrNumber): string & {
-        and: MediaQueryFactory;
-        or: MediaQueryFactory;
-    };
-    maxHeight(height: OrString | OrNumber): string & {
-        and: MediaQueryFactory;
-        or: MediaQueryFactory;
-    };
-    get portrait(): string & {
-        and: MediaQueryFactory;
-        or: MediaQueryFactory;
-    };
-    get landscape(): string & {
-        and: MediaQueryFactory;
-        or: MediaQueryFactory;
-    };
-    prefersColorScheme(scheme: 'dark' | 'light' | OrString): string & {
-        and: MediaQueryFactory;
-        or: MediaQueryFactory;
-    };
-    get dark(): string & {
-        and: MediaQueryFactory;
-        or: MediaQueryFactory;
-    };
-    get light(): string & {
-        and: MediaQueryFactory;
-        or: MediaQueryFactory;
-    };
-    get print(): string & {
-        and: MediaQueryFactory;
-        or: MediaQueryFactory;
-    };
-    get screen(): string & {
-        and: MediaQueryFactory;
-        or: MediaQueryFactory;
-    };
-    get speech(): string & {
-        and: MediaQueryFactory;
-        or: MediaQueryFactory;
-    };
-    get all(): string & {
-        and: MediaQueryFactory;
-        or: MediaQueryFactory;
-    };
-    get not(): string & {
-        and: MediaQueryFactory;
-        or: MediaQueryFactory;
-    };
-    get reducedMotion(): string & {
-        and: MediaQueryFactory;
-        or: MediaQueryFactory;
-    };
-}
-export declare const media: MediaQueryFactory;
+export * from '@salty-css/core/css/media';

package/media.js

@@ -1,11 +1,14 @@
-var o = Object.defineProperty;
-var a = (s, t, e) => t in s ? o(s, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[t] = e;
-var i = (s, t, e) => a(s, typeof t != "symbol" ? t + "" : t, e);
+var a = Object.defineProperty;
+var o = (s, t, e) => t in s ? a(s, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[t] = e;
+var i = (s, t, e) => o(s, typeof t != "symbol" ? t + "" : t, e);
 class r {
   constructor(t = "@media") {
     i(this, "next", (t) => {
       const e = new String(t);
       return Object.assign(e, {
+        get isMedia() {
+          return !0;
+        },
         get and() {
           return new r(`${t} and`);
         },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salty-css/react",
-  "version": "0.0.1-alpha.24",
+  "version": "0.0.1-alpha.240",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "typings": "./dist/index.d.ts",
@@ -10,7 +10,12 @@
   "publishConfig": {
     "access": "public"
   },
-  "homepage": "https://github.com/margarita-form/salty-css",
+  "description": "React library for Salty CSS",
+  "homepage": "https://salty-css.dev/",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/margarita-form/salty-css.git"
+  },
   "bugs": {
     "url": "https://github.com/margarita-form/salty-css/issues"
   },
@@ -23,6 +28,10 @@
     "name": "react"
   },
   "exports": {
+    ".": {
+      "import": "./index.js",
+      "require": "./index.cjs"
+    },
     "./styled": {
       "import": "./styled.js",
       "require": "./styled.cjs"
@@ -31,6 +40,14 @@
       "import": "./styled-client.js",
       "require": "./styled-client.cjs"
     },
+    "./class-name": {
+      "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"
@@ -38,11 +55,19 @@
     "./media": {
       "import": "./media.js",
       "require": "./media.cjs"
+    },
+    "./config": {
+      "import": "./config.js",
+      "require": "./config.cjs"
+    },
+    "./helpers": {
+      "import": "./helpers.js",
+      "require": "./helpers.cjs"
     }
   },
   "dependencies": {
-    "@salty-css/core": "^0.0.1-alpha.24",
+    "@salty-css/core": "^0.0.1-alpha.240",
     "clsx": ">=2.x",
-    "react": ">=18.3.x"
+    "react": ">=19.x || >=18.3.x"
   }
 }

package/parse-styles-E95SeoXv.cjs

@@ -0,0 +1,5 @@
+"use strict";const N=require("./parse-tokens-DfRKmjt1.cjs"),M=e=>s=>{if(typeof s!="string"||!e)return;let t=s;const i=[];return Object.values(e).forEach(o=>{const{pattern:S,transform:$}=o;t=t.replace(S,j=>{const{value:A,css:b}=$(j);return b&&i.push(b),A})}),{transformed:t,additionalCss:i}},H=e=>String.fromCharCode(e+(e>25?39:97)),T=(e,s)=>{let t="",i;for(i=Math.abs(e);i>52;i=i/52|0)t=H(i%52)+t;return t=H(i%52)+t,t.length<s?t=t.padStart(s,"a"):t.length>s&&(t=t.slice(-s)),t},U=(e,s)=>{let t=s.length;for(;t;)e=e*33^s.charCodeAt(--t);return e},q=(e,s=5)=>{const t=U(5381,JSON.stringify(e))>>>0;return T(t,s)},Q=["top","right","bottom","left","min-width",/.*width.*/,/^[^line]*height.*/,/padding.*/,/margin.*/,/border.*/,/inset.*/,/.*radius.*/,/.*spacing.*/,/.*gap.*/,/.*indent.*/,/.*offset.*/,/.*size.*/,/.*thickness.*/,/.*font-size.*/],_=(e,s,t)=>{if(Q.some(o=>typeof o=="string"?o===e:o.test(e))){const o=(t==null?void 0:t.defaultUnit)||"px";return`${s}${o}`}return`${s}`},F=["Webkit","Moz","ms","O"],I=e=>e.startsWith("-")?e:F.some(s=>e.startsWith(s))?`-${N.dashCase(e)}`:N.dashCase(e),y=async(e,s="",t,i=!1)=>{if(!e)throw new Error("No styles provided to parseStyles function!");const o=new Set,S=Object.entries(e),$=async([p,r])=>{var C;const n=p.trim(),w=I(n),l=(d,c=";")=>`${w}:${d}${c}`,P={scope:s,config:t};if(typeof r=="function")return $([p,r(P)]);if(r instanceof Promise)return $([p,await r]);if(t!=null&&t.templates&&t.templatePaths[n])try{const[d,c]=t.templatePaths[n].split(";;"),a=await import(c),f=c.includes("salty.config"),u=f?a[d].templates:a[d],h=f?u[n]:u.params[n];if(u&&typeof h=="function"){const E=await h(r),[m]=await y(E,"");return m}}catch(d){console.error(`Error loading template "${n}" from path "${t.templatePaths[n]}"`,d);return}if(t!=null&&t.templates&&t.templates[n]){if(i)return;const c=r.split(".").reduce((a,f)=>a[f],t.templates[n]);if(c){const[a]=await y(c,"");return a}console.warn(`Template "${n}" with path of "${r}" was not found in config!`);return}if(typeof r=="object"){if(!r)return;if(r.isColor)return l(r.toString());if(n==="defaultVariants")return;if(n==="variants"){const a=Object.entries(r);for(const[f,u]of a){if(!u)return;const h=Object.entries(u);for(const[E,m]of h){if(!m)return;const x=`${s}.${f}-${E}`;(await y(m,x,t)).forEach(J=>o.add(J))}}return}if(n==="compoundVariants"){for(const a of r){const{css:f,...u}=a,h=Object.entries(u).reduce((m,[x,z])=>`${m}.${x}-${z}`,s);(await y(f,h,t)).forEach(m=>o.add(m))}return}if(n.startsWith("@")){const a=((C=t==null?void 0:t.mediaQueries)==null?void 0:C[n])||n,f=await W(r,s,t),u=`${a} { ${f} }`;o.add(u);return}const d=p.includes("&")?n.replace("&",s):n.startsWith(":")?`${s}${n}`:`${s} ${n}`;(await y(r,d,t)).forEach(a=>o.add(a));return}if(typeof r=="number"){const d=_(w,r,t);return l(d)}if(typeof r!="string")if("toString"in r)r=r.toString();else throw new Error(`Invalid value type for property ${w}`);return l(r)},j=S.map($),{modifiers:A}=t||{},b=[N.parseValueTokens(),M(A)],O=(await Promise.all(j).then(p=>Promise.all(p.map(r=>b.reduce(async(n,w)=>{const l=await n;if(!l)return l;const P=await w(l);if(!P)return l;const{transformed:C,additionalCss:d}=P;let c="";if(d)for(const a of d)c+=await W(a,"");return`${c}${C}`},Promise.resolve(r)))))).filter(p=>p!==void 0).join(`
+	`);if(!O.trim())return Array.from(o);const V=s?`${s} {
+	${O}
+}`:O;return o.has(V)?Array.from(o):[V,...o]},W=async(e,s,t,i=!1)=>(await y(e,s,t,i)).join(`
+`);exports.parseAndJoinStyles=W;exports.toHash=q;

package/parse-styles-WRUkAmCD.js

@@ -0,0 +1,145 @@
+import { d as V, a as H } from "./parse-tokens-CssTiO78.js";
+const J = (e) => (s) => {
+  if (typeof s != "string" || !e) return;
+  let t = s;
+  const i = [];
+  return Object.values(e).forEach((o) => {
+    const { pattern: j, transform: y } = o;
+    t = t.replace(j, (S) => {
+      const { value: x, css: b } = y(S);
+      return b && i.push(b), x;
+    });
+  }), { transformed: t, additionalCss: i };
+}, z = (e) => String.fromCharCode(e + (e > 25 ? 39 : 97)), Q = (e, s) => {
+  let t = "", i;
+  for (i = Math.abs(e); i > 52; i = i / 52 | 0) t = z(i % 52) + t;
+  return t = z(i % 52) + t, t.length < s ? t = t.padStart(s, "a") : t.length > s && (t = t.slice(-s)), t;
+}, T = (e, s) => {
+  let t = s.length;
+  for (; t; ) e = e * 33 ^ s.charCodeAt(--t);
+  return e;
+}, K = (e, s = 5) => {
+  const t = T(5381, JSON.stringify(e)) >>> 0;
+  return Q(t, s);
+}, _ = [
+  "top",
+  "right",
+  "bottom",
+  "left",
+  "min-width",
+  /.*width.*/,
+  /^[^line]*height.*/,
+  // Exclude line-height
+  /padding.*/,
+  /margin.*/,
+  /border.*/,
+  /inset.*/,
+  /.*radius.*/,
+  /.*spacing.*/,
+  /.*gap.*/,
+  /.*indent.*/,
+  /.*offset.*/,
+  /.*size.*/,
+  /.*thickness.*/,
+  /.*font-size.*/
+], q = (e, s, t) => {
+  if (_.some((o) => typeof o == "string" ? o === e : o.test(e))) {
+    const o = (t == null ? void 0 : t.defaultUnit) || "px";
+    return `${s}${o}`;
+  }
+  return `${s}`;
+}, F = ["Webkit", "Moz", "ms", "O"], I = (e) => e.startsWith("-") ? e : F.some((s) => e.startsWith(s)) ? `-${V(e)}` : V(e), $ = async (e, s = "", t, i = !1) => {
+  if (!e) throw new Error("No styles provided to parseStyles function!");
+  const o = /* @__PURE__ */ new Set(), j = Object.entries(e), y = async ([u, r]) => {
+    var E;
+    const n = u.trim(), w = I(n), l = (d, c = ";") => `${w}:${d}${c}`, P = { scope: s, config: t };
+    if (typeof r == "function") return y([u, r(P)]);
+    if (r instanceof Promise) return y([u, await r]);
+    if (t != null && t.templates && t.templatePaths[n])
+      try {
+        const [d, c] = t.templatePaths[n].split(";;"), a = await import(c), f = c.includes("salty.config"), p = f ? a[d].templates : a[d], h = f ? p[n] : p.params[n];
+        if (p && typeof h == "function") {
+          const C = await h(r), [m] = await $(C, "");
+          return m;
+        }
+      } catch (d) {
+        console.error(`Error loading template "${n}" from path "${t.templatePaths[n]}"`, d);
+        return;
+      }
+    if (t != null && t.templates && t.templates[n]) {
+      if (i) return;
+      const c = r.split(".").reduce((a, f) => a[f], t.templates[n]);
+      if (c) {
+        const [a] = await $(c, "");
+        return a;
+      }
+      console.warn(`Template "${n}" with path of "${r}" was not found in config!`);
+      return;
+    }
+    if (typeof r == "object") {
+      if (!r) return;
+      if (r.isColor) return l(r.toString());
+      if (n === "defaultVariants") return;
+      if (n === "variants") {
+        const a = Object.entries(r);
+        for (const [f, p] of a) {
+          if (!p) return;
+          const h = Object.entries(p);
+          for (const [C, m] of h) {
+            if (!m) return;
+            const A = `${s}.${f}-${C}`;
+            (await $(m, A, t)).forEach((U) => o.add(U));
+          }
+        }
+        return;
+      }
+      if (n === "compoundVariants") {
+        for (const a of r) {
+          const { css: f, ...p } = a, h = Object.entries(p).reduce((m, [A, W]) => `${m}.${A}-${W}`, s);
+          (await $(f, h, t)).forEach((m) => o.add(m));
+        }
+        return;
+      }
+      if (n.startsWith("@")) {
+        const a = ((E = t == null ? void 0 : t.mediaQueries) == null ? void 0 : E[n]) || n, f = await M(r, s, t), p = `${a} { ${f} }`;
+        o.add(p);
+        return;
+      }
+      const d = u.includes("&") ? n.replace("&", s) : n.startsWith(":") ? `${s}${n}` : `${s} ${n}`;
+      (await $(r, d, t)).forEach((a) => o.add(a));
+      return;
+    }
+    if (typeof r == "number") {
+      const d = q(w, r, t);
+      return l(d);
+    }
+    if (typeof r != "string")
+      if ("toString" in r) r = r.toString();
+      else throw new Error(`Invalid value type for property ${w}`);
+    return l(r);
+  }, S = j.map(y), { modifiers: x } = t || {}, b = [H(), J(x)], O = (await Promise.all(S).then((u) => Promise.all(
+    u.map((r) => b.reduce(async (n, w) => {
+      const l = await n;
+      if (!l) return l;
+      const P = await w(l);
+      if (!P) return l;
+      const { transformed: E, additionalCss: d } = P;
+      let c = "";
+      if (d)
+        for (const a of d)
+          c += await M(a, "");
+      return `${c}${E}`;
+    }, Promise.resolve(r)))
+  ))).filter((u) => u !== void 0).join(`
+	`);
+  if (!O.trim()) return Array.from(o);
+  const N = s ? `${s} {
+	${O}
+}` : O;
+  return o.has(N) ? Array.from(o) : [N, ...o];
+}, M = async (e, s, t, i = !1) => (await $(e, s, t, i)).join(`
+`);
+export {
+  M as p,
+  K as t
+};

package/parse-tokens-CssTiO78.js

@@ -0,0 +1,9 @@
+function a(e) {
+  return e ? typeof e != "string" ? a(String(e)) : e.replace(/[\s.]/g, "-").replace(/[A-Z](?:(?=[^A-Z])|[A-Z]*(?=[A-Z][^A-Z]|$))/g, (r, n) => (n > 0 ? "-" : "") + r.toLowerCase()) : "";
+}
+const s = (e) => (r) => typeof r != "string" || !/\{[^{}]+\}/g.test(r) ? void 0 : { transformed: r.replace(/\{([^{}]+)\}/g, (...t) => `var(--${a(t[1].replaceAll(".", "-"))})`) }, f = s();
+export {
+  s as a,
+  a as d,
+  f as p
+};

package/parse-tokens-DfRKmjt1.cjs

@@ -0,0 +1 @@
+"use strict";function n(e){return e?typeof e!="string"?n(String(e)):e.replace(/[\s.]/g,"-").replace(/[A-Z](?:(?=[^A-Z])|[A-Z]*(?=[A-Z][^A-Z]|$))/g,(r,a)=>(a>0?"-":"")+r.toLowerCase()):""}const s=e=>r=>typeof r!="string"||!/\{[^{}]+\}/g.test(r)?void 0:{transformed:r.replace(/\{([^{}]+)\}/g,(...t)=>`var(--${n(t[1].replaceAll(".","-"))})`)},o=s();exports.dashCase=n;exports.parseValueTokens=s;exports.parseVariableTokens=o;

package/styled-client.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./element-factory-WgNOpLmJ.cjs"),l=(e,t,n="",o)=>r.elementFactory(e,t,o,{"data-component-name":n});exports.styledClient=l;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("./element-factory-DjYdX8Jd.cjs"),n=(e,t,r)=>l.elementFactory(e,t,r);exports.styledClient=n;

package/styled-client.d.ts

@@ -1,3 +1,3 @@
-import { GeneratorProps } from '../../core/src/generator';
-import { Tag } from '../../core/src/types';
-export declare const styledClient: (tagName: Tag<any>, className: string, callerName: string | undefined, generatorProps: GeneratorProps) => import('react').ForwardRefExoticComponent<Omit<import('../../core/src/types').StyledComponentProps, "ref"> & import('react').RefAttributes<any>>;
+import { StyledGeneratorClientProps } from '@salty-css/core/generators';
+import { Tag } from '@salty-css/core/types';
+export declare const styledClient: (tagName: Tag<any>, className: string, generatorProps: StyledGeneratorClientProps) => import('react').ForwardRefExoticComponent<Omit<import('@salty-css/core/types').StyledComponentProps, "ref"> & import('react').RefAttributes<any>>;

package/styled-client.js

@@ -1,7 +1,5 @@
-import { e as r } from "./element-factory-uEk4VrqP.js";
-const m = (e, t, n = "", o) => r(e, t, o, {
-  "data-component-name": n
-});
+import { e as o } from "./element-factory-B1PSIJV4.js";
+const l = (e, t, r) => o(e, t, r);
 export {
-  m as styledClient
+  l as styledClient
 };

package/styled.cjs

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

@@ -1,5 +1,5 @@
-import { AllHTMLAttributes, ReactDOM, ReactNode } from 'react';
-import { Tag, StyledComponentProps, CreateElementProps, VariantProps, ParentComponentProps, StyledParams, ValueProps } from '../../core/src/types';
-export declare const styled: <const PROPS extends StyledComponentProps, const TAG extends Tag<Required<PROPS>>, const STYLE_PARAMS extends StyledParams>(tagName: TAG, params: STYLE_PARAMS) => ((props: (CreateElementProps & ParentComponentProps<TAG>) | (TAG extends string ? {
-    ref: any;
-} : never) | VariantProps<STYLE_PARAMS> | ValueProps | (TAG extends keyof ReactDOM ? ReactDOM[TAG] extends (...props: infer R) => any ? R[0] : TAG extends string ? AllHTMLAttributes<HTMLElement> : never : TAG extends string ? AllHTMLAttributes<HTMLElement> : never)) => ReactNode) & string;
+import { AllHTMLAttributes, JSX, ReactNode } from 'react';
+import { Tag, StyledComponentProps, CreateElementProps, VariantProps, ParentComponentProps, StyledParams, ValueProps, Merge } from '@salty-css/core/types';
+export declare const styled: <const PROPS extends StyledComponentProps, const TAG extends Tag<Required<PROPS>>, const STYLE_PARAMS extends StyledParams>(tagName: TAG, params: STYLE_PARAMS) => ((props: CreateElementProps & (TAG extends string ? {
+    ref?: any;
+} : object) & Merge<ParentComponentProps<TAG> | VariantProps<STYLE_PARAMS>> & ValueProps & Omit<TAG extends keyof JSX.IntrinsicElements ? JSX.IntrinsicElements[TAG] : TAG extends string ? AllHTMLAttributes<HTMLElement> : object, keyof CreateElementProps>) => ReactNode) & string;

package/styled.js

@@ -1,70 +1,47 @@
-var m = Object.defineProperty;
-var h = (e, t, s) => t in e ? m(e, t, { enumerable: !0, configurable: !0, writable: !0, value: s }) : e[t] = s;
-var c = (e, t, s) => h(e, typeof t != "symbol" ? t + "" : t, s);
-import { t as l, p as u } from "./parse-styles-T74HIH4_.js";
-import { e as g } from "./element-factory-uEk4VrqP.js";
-const y = (e) => Object.keys(e);
-class f {
-  constructor(t, s) {
-    c(this, "_callerName");
-    c(this, "_context");
-    this.tagName = t, this.params = s;
-  }
-  get hash() {
-    return l(this.params.base || this.params);
+import { S as y } from "./styles-generator-CFUD8Yyz.js";
+import { e as h } from "./element-factory-B1PSIJV4.js";
+class g extends y {
+  constructor(e, t) {
+    super(t), this.tagName = e, this._params = t;
   }
   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};`;
+    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 templateKeys() {
-    var t;
-    return (t = this._context) != null && t.config.templates ? y(this._context.config.templates) : [];
-  }
-  get css() {
-    var r;
-    const { base: t = {}, variants: s = {}, compoundVariants: a = [] } = this.params, n = { ...t, variants: s, compoundVariants: a };
-    return u(n, `.${this.cssClassName}`, this.priority, (r = this._context) == null ? void 0 : r.config);
-  }
-  get props() {
-    const { element: t } = this.params, s = this.params.variants ? Object.keys(this.params.variants).map((r) => {
-      var i;
-      const o = (i = this.params.defaultVariants) == null ? void 0 : i[r];
-      return o !== void 0 ? `${r}=${String(o)}` : r;
-    }) : void 0, a = /* @__PURE__ */ new Set([]), n = /\{props\.([\w\d]+)\}/gi.exec(JSON.stringify(this.params.base));
-    return n && n.forEach((r, o, i) => {
-      const p = i.at(1);
-      p && a.add(p);
-    }), {
-      element: t,
-      variantKeys: s,
-      propValueKeys: [...a]
+  get clientProps() {
+    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), 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((s) => {
+        const p = s.replace(/\{props\.([\w\d]+)\}/gi, "$1");
+        p && c.add(p);
+      });
+    }
+    return {
+      element: e,
+      variantKeys: [...o],
+      propValueKeys: [...c],
+      passProps: f,
+      defaultProps: m,
+      attr: {
+        "data-component-name": u ? void 0 : l
+      }
     };
-  }
-  _withBuildContext(t) {
-    this._context = t;
-    const { name: s, config: a } = t;
-    return this._callerName = s, this;
   }
 }
-const _ = (e, t) => {
-  const s = new f(e, t), a = g(e, s.cssClassName, s.props, {
+const v = (n, e) => {
+  const t = new g(n, e), r = h(n, t.cssClassName, t.clientProps, {
     "data-unoptimized-client-component": !0
   });
-  return Object.assign(a, {
-    generator: s
-  }), a;
+  return Object.assign(r, {
+    generator: t
+  }), r;
 };
 export {
-  _ as styled
+  v as styled
 };

package/styles-generator-CD8r4Qz6.cjs

@@ -0,0 +1 @@
+"use strict";var c=Object.defineProperty;var l=(a,s,t)=>s in a?c(a,s,{enumerable:!0,configurable:!0,writable:!0,value:t}):a[s]=t;var h=(a,s,t)=>l(a,typeof s!="symbol"?s+"":s,t);const n=require("./parse-styles-E95SeoXv.cjs"),o=require("./parse-tokens-DfRKmjt1.cjs");class u{constructor(s){h(this,"buildContext",{});this.params=s}get priority(){return 0}get isRoot(){return this.priority===0}get hash(){return n.toHash(this.params.base||this.params)}get cssClassName(){return this.hash}get classNames(){const s=new Set([this.cssClassName]),{className:t}=this.params;return typeof t=="string"&&s.add(t),typeof t=="object"&&t.forEach(e=>s.add(e)),this.getTemplateClasses().forEach(e=>s.add(e)),this.buildContext.classNames&&this.buildContext.classNames.forEach(e=>s.add(e)),[...s].join(" ")}get cssFileName(){const{callerName:s}=this.buildContext;return s?`cl_${o.dashCase(s)}-${this.hash}.css`:`${this.hash}.css`}get css(){const{base:s={},variants:t={},compoundVariants:e=[]}=this.params,{config:r}=this.buildContext,i={...s,variants:t,compoundVariants:e};return n.parseAndJoinStyles(i,`.${this.cssClassName}`,r,this.isRoot)}getTemplateClasses(s=this.buildContext.config){if(!(s!=null&&s.templates)||!this.params.base||this.priority>0)return[];const t=Object.keys(s.templates);return Object.entries(this.params.base).reduce((e,[r,i])=>(t.includes(r)&&e.push("t_"+n.toHash(o.dashCase(`${r}-${i}`),4)),e),[])}_withBuildContext(s){return this.buildContext=s,this}}exports.StylesGenerator=u;