@salty-css/react 0.0.1-alpha.26 → 0.0.1-alpha.260

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

package/parse-styles-BRbiYmZ_.js

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

package/parse-styles-BU5fcwDA.cjs

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

package/parse-tokens-BnDwbP7V.cjs

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

package/parse-tokens-Cbbbt7eO.js

@@ -0,0 +1,12 @@
+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 o = (e) => (r) => typeof r != "string" || !/\{[^{}]+\}/g.test(r) ? void 0 : { transformed: r.replace(/\{([^{}]+)\}/g, (...s) => {
+  const t = a(s[1].replaceAll(".", "-"));
+  return t.startsWith("-") ? `-${t}` : `var(--${t})`;
+}) }, c = o();
+export {
+  o as a,
+  a as d,
+  c as p
+};

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-Dt_Z9aHy.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-DrGBPkh2.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 h=require("./styles-generator-E48FU2R-.cjs"),g=require("./parse-tokens-BnDwbP7V.cjs"),b=require("./element-factory-Dt_Z9aHy.cjs");class v extends h.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:r=[],defaultVariants:d={},defaultProps:l={},passProps:u}=this.params,{callerName:y,isProduction:m}=this.buildContext,n=new Set([]),i=s=>{const a=d[s];a!==void 0?n.add(`${s}=${String(a)}`):n.add(s)};Object.keys(t).forEach(i),r.map(s=>Object.keys(s).forEach(i));const c=new Set([]);if(this.params.base){const s=JSON.stringify(this.params.base).match(/\{-?props\.([^}]+)\}/gi);s&&s.forEach(a=>{const p=a.replace(/\{(?:-)?props\.([^}]+)\}/gi,"$1"),f=g.dashCase(p);p&&c.add(f)})}return{element:e,variantKeys:[...n],propValueKeys:[...c],passProps:u,defaultProps:l,attr:{"data-component-name":m?void 0:y}}}}const S=(o,e)=>{const t=new v(o,e),r=b.elementFactory(o,t.cssClassName,t.clientProps,{"data-unoptimized-client-component":!0});return Object.assign(r,{generator:t}),r};exports.styled=S;

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,48 @@
-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-Cz2vkKB0.js";
+import { d as g } from "./parse-tokens-Cbbbt7eO.js";
+import { e as v } from "./element-factory-DrGBPkh2.js";
+class b 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: s = [], defaultVariants: d = {}, defaultProps: m = {}, passProps: l } = this.params, { callerName: f, isProduction: u } = this.buildContext, i = /* @__PURE__ */ new Set([]), n = (a) => {
+      const r = d[a];
+      r !== void 0 ? i.add(`${a}=${String(r)}`) : i.add(a);
+    };
+    Object.keys(t).forEach(n), s.map((a) => Object.keys(a).forEach(n));
+    const c = /* @__PURE__ */ new Set([]);
+    if (this.params.base) {
+      const a = JSON.stringify(this.params.base).match(/\{-?props\.([^}]+)\}/gi);
+      a && a.forEach((r) => {
+        const p = r.replace(/\{(?:-)?props\.([^}]+)\}/gi, "$1"), h = g(p);
+        p && c.add(h);
+      });
+    }
+    return {
+      element: e,
+      variantKeys: [...i],
+      propValueKeys: [...c],
+      passProps: l,
+      defaultProps: m,
+      attr: {
+        "data-component-name": u ? void 0 : f
+      }
     };
-  }
-  _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 K = (o, e) => {
+  const t = new b(o, e), s = v(o, t.cssClassName, t.clientProps, {
     "data-unoptimized-client-component": !0
   });
-  return Object.assign(a, {
-    generator: s
-  }), a;
+  return Object.assign(s, {
+    generator: t
+  }), s;
 };
 export {
-  _ as styled
+  K as styled
 };