@salty-css/react 0.0.1-alpha.276 → 0.0.1-alpha.278

package/dynamic-styles.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),o=require("@salty-css/core/parsers"),m=require("@salty-css/core/util"),S=require("./clsx-C11secjj.cjs"),i=s=>m.toHash(s),r=async(s,a)=>(await o.parseStyles(s,a)).join(`
-`),j=async({as:s,scope:a,styles:e,...n})=>{if(s){if(!e)return t.jsx(s,{...n});const c=i(e),u=await r(e,a||`.${c}`),y={...n,className:S.clsx(c,n.className)};return t.jsxs(t.Fragment,{children:[t.jsx("style",{children:u}),t.jsx(s,{...y})]})}if(!e)return null;const l=await r(e,a);return t.jsx("style",{children:l})};exports.DynamicStyles=j;exports.getDynamicStylesClassName=i;exports.getDynamicStylesCss=r;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),S=require("@salty-css/core/parsers"),g=require("@salty-css/core/util"),j=require("./clsx-C11secjj.cjs"),x=require("react"),o=e=>g.toHash(e),c=async(e,n)=>(await S.parseStyles(e,n)).join(`
+`),d=async({as:e,scope:n,styles:s,...r})=>{if(e){const a=l=>typeof e=="string"?x.createElement(e,l):e(l);if(!s)return t.jsx(a,{...r});const i=o(s),m=await c(s,n||`.${i}`),y={...r,className:j.clsx(i,r.className)};return t.jsxs(t.Fragment,{children:[t.jsx("style",{children:m}),t.jsx(a,{...y})]})}if(!s)return null;const u=await c(s,n);return t.jsx("style",{children:u})};exports.DynamicStyles=d;exports.getDynamicStylesClassName=o;exports.getDynamicStylesCss=c;

package/dynamic-styles.d.ts

@@ -9,14 +9,15 @@ export declare const getDynamicStylesClassName: (styles: BaseStyles) => string;
  * Note: this works only with server components.
  */
 export declare const getDynamicStylesCss: (styles: BaseStyles, scope?: string) => Promise<string>;
+type AnyComponent = (...args: any[]) => React.ReactNode;
 interface DynamicStylesProps extends HTMLAttributes<HTMLElement> {
     styles?: BaseStyles;
     scope?: string;
-    as?: (...args: any[]) => React.ReactNode;
+    as?: string | AnyComponent;
 }
 /**
  * Add any dynamic styles to your app with a custom scope.
  * Note: this works only with server components.
  */
-export declare const DynamicStyles: ({ as: Component, scope, styles, ...rest }: DynamicStylesProps) => Promise<import("react/jsx-runtime").JSX.Element | null>;
+export declare const DynamicStyles: ({ as, scope, styles, ...rest }: DynamicStylesProps) => Promise<import("react/jsx-runtime").JSX.Element | null>;
 export {};

package/dynamic-styles.js

@@ -1,23 +1,25 @@
-import { jsx as t, jsxs as l, Fragment as f } from "react/jsx-runtime";
-import { parseStyles as p } from "@salty-css/core/parsers";
-import { toHash as u } from "@salty-css/core/util";
-import { c as y } from "./clsx-OuTLNxxd.js";
-const d = (s) => u(s), e = async (s, a) => (await p(s, a)).join(`
-`), g = async ({ as: s, scope: a, styles: r, ...c }) => {
-  if (s) {
-    if (!r) return /* @__PURE__ */ t(s, { ...c });
-    const n = d(r), o = await e(r, a || `.${n}`), m = { ...c, className: y(n, c.className) };
-    return /* @__PURE__ */ l(f, { children: [
-      /* @__PURE__ */ t("style", { children: o }),
-      /* @__PURE__ */ t(s, { ...m })
+import { jsx as s, jsxs as f, Fragment as y } from "react/jsx-runtime";
+import { parseStyles as u } from "@salty-css/core/parsers";
+import { toHash as d } from "@salty-css/core/util";
+import { c as g } from "./clsx-OuTLNxxd.js";
+import { createElement as h } from "react";
+const x = (t) => d(t), m = async (t, r) => (await u(t, r)).join(`
+`), D = async ({ as: t, scope: r, styles: n, ...e }) => {
+  if (t) {
+    const c = (a) => typeof t == "string" ? h(t, a) : t(a);
+    if (!n) return /* @__PURE__ */ s(c, { ...e });
+    const o = x(n), l = await m(n, r || `.${o}`), p = { ...e, className: g(o, e.className) };
+    return /* @__PURE__ */ f(y, { children: [
+      /* @__PURE__ */ s("style", { children: l }),
+      /* @__PURE__ */ s(c, { ...p })
     ] });
   }
-  if (!r) return null;
-  const i = await e(r, a);
-  return /* @__PURE__ */ t("style", { children: i });
+  if (!n) return null;
+  const i = await m(n, r);
+  return /* @__PURE__ */ s("style", { children: i });
 };
 export {
-  g as DynamicStyles,
-  d as getDynamicStylesClassName,
-  e as getDynamicStylesCss
+  D as DynamicStyles,
+  x as getDynamicStylesClassName,
+  m as getDynamicStylesCss
 };

package/{element-factory-D5vMsSwp.js → element-factory-Bs1HmAhv.js}

@@ -2,42 +2,42 @@ import { forwardRef as V, createElement as C } from "react";
 import { c as N } from "./clsx-OuTLNxxd.js";
 import { dashCase as R } from "@salty-css/core/util";
 import { parseVariableTokens as p } from "@salty-css/core/parsers";
-const q = ["passProps"], B = (S, m = "", t = {}, y) => {
+const q = ["passProps"], D = (S, m = "", t = {}, y) => {
   const b = V(({
     extend: c = S,
     element: h = t.element,
     className: E = "",
     children: K,
     passProps: l = t.passProps,
-    _vks: n = /* @__PURE__ */ new Set(),
+    _vks: f = /* @__PURE__ */ new Set(),
     ...a
   }, O) => {
     const s = { passProps: l };
     t.attr && Object.assign(s, t.attr), y && Object.assign(s, y), t.defaultProps && Object.assign(a, t.defaultProps), a && Object.assign(s, a);
-    const r = /* @__PURE__ */ new Set([...m.split(" "), ...E.split(" ")]), o = typeof c == "function" || typeof c == "object", u = o && "isStyled" in c, j = o ? c : h || c;
+    const u = /* @__PURE__ */ new Set([...m.split(" "), ...E.split(" ")]), d = typeof c == "function" || typeof c == "object", r = d && "isStyled" in c, j = d ? c : h || c;
     if (!j) throw new Error("No element provided");
-    const d = s.style || {};
-    s.style || (s.style = d), Object.entries(d).forEach(([e, i]) => {
-      const f = p(i);
-      f && (d[e] = f.transformed);
+    const o = s.style || {};
+    s.style || (s.style = o), Object.entries(o).forEach(([e, i]) => {
+      const n = p(i);
+      n && (o[e] = n.transformed);
     }), t.propValueKeys && t.propValueKeys.forEach((e) => {
-      const i = `css-${e}`, f = a[i];
-      if (f === void 0) return;
+      const i = `css-${e}`, n = a[i];
+      if (n === void 0) return;
       const w = `--props-${R(e)}`;
-      d[w] = f, n && n.add(i);
+      o[w] = n, f && f.add(i);
     }), t.variantKeys && t.variantKeys.forEach((e) => {
-      const [i, f] = e.split("=");
-      a[i] !== void 0 ? (r.add(`${i}-${a[i]}`), n && n.add(i)) : f !== void 0 && r.add(`${i}-${f}`);
-    }), n && (!o || !u) ? n.forEach((e) => {
+      const [i, n] = e.split("=");
+      a[i] !== void 0 ? (u.add(`${i}-${a[i]}`), f && f.add(i)) : n !== void 0 && u.add(`${i}-${n}`);
+    }), f && (!d || !r) ? f.forEach((e) => {
       if (!l) return delete s[e];
       if (l !== !0 && !l.includes(e))
         return delete s[e];
-    }) : u && Object.assign(s, { _vks: n }), u || q.forEach((e) => delete s[e]);
-    const $ = N(...r);
+    }) : r && Object.assign(s, { _vks: f }), r || q.forEach((e) => delete s[e]);
+    const $ = N(...u);
     return C(
       j,
       {
-        element: o ? h : void 0,
+        element: d ? h : void 0,
         className: $,
         ref: O,
         ...s
@@ -52,5 +52,5 @@ const q = ["passProps"], B = (S, m = "", t = {}, y) => {
   }), b;
 };
 export {
-  B as e
+  D as e
 };

package/element-factory-CvLrXNeg.cjs

@@ -0,0 +1 @@
+"use strict";const S=require("react"),C=require("./clsx-C11secjj.cjs"),N=require("@salty-css/core/util"),F=require("@salty-css/core/parsers"),R=["passProps"],T=(E,y="",t={},m)=>{const K=({extend:a=E,element:h=t.element,className:O="",children:$,passProps:l=t.passProps,_vks:c=new Set,...f},w)=>{const s={passProps:l};t.attr&&Object.assign(s,t.attr),m&&Object.assign(s,m),t.defaultProps&&Object.assign(f,t.defaultProps),f&&Object.assign(s,f);const r=new Set([...y.split(" "),...O.split(" ")]),d=typeof a=="function"||typeof a=="object",o=d&&"isStyled"in a,j=d?a:h||a;if(!j)throw new Error("No element provided");const u=s.style||{};s.style||(s.style=u),Object.entries(u).forEach(([e,n])=>{const i=F.parseVariableTokens(n);i&&(u[e]=i.transformed)}),t.propValueKeys&&t.propValueKeys.forEach(e=>{const n=`css-${e}`,i=f[n];if(i===void 0)return;const q=`--props-${N.dashCase(e)}`;u[q]=i,c&&c.add(n)}),t.variantKeys&&t.variantKeys.forEach(e=>{const[n,i]=e.split("=");f[n]!==void 0?(r.add(`${n}-${f[n]}`),c&&c.add(n)):i!==void 0&&r.add(`${n}-${i}`)}),c&&(!d||!o)?c.forEach(e=>{if(!l)return delete s[e];if(l!==!0&&!l.includes(e))return delete s[e]}):o&&Object.assign(s,{_vks:c}),o||R.forEach(e=>delete s[e]);const V=C.clsx(...r);return S.createElement(j,{element:d?h:void 0,className:V,ref:w,...s},$)},b=S.forwardRef(K);return Object.assign(b,{isStyled:!0,className:y,toString:()=>`.${t.hash}`}),b};exports.elementFactory=T;

package/package.json

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

package/styled-client.cjs

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

package/styled-client.js

@@ -1,4 +1,4 @@
-import { e as o } from "./element-factory-D5vMsSwp.js";
+import { e as o } from "./element-factory-Bs1HmAhv.js";
 const l = (e, t, r) => o(e, t, r);
 export {
   l as styledClient

package/styled.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("@salty-css/core/generators"),s=require("./element-factory-BPI0pGIH.cjs"),c=(t,r)=>{const e=new o.StyledGenerator(t,r),n=s.elementFactory(t,e.cssClassName,e.clientProps,{"data-unoptimized-client-component":!0});return Object.assign(n,{generator:e}),n};exports.styled=c;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("@salty-css/core/generators"),s=require("./element-factory-CvLrXNeg.cjs"),c=(t,r)=>{const e=new o.StyledGenerator(t,r),n=s.elementFactory(t,e.cssClassName,e.clientProps,{"data-unoptimized-client-component":!0});return Object.assign(n,{generator:e}),n};exports.styled=c;

package/styled.js

@@ -1,5 +1,5 @@
 import { StyledGenerator as r } from "@salty-css/core/generators";
-import { e as s } from "./element-factory-D5vMsSwp.js";
+import { e as s } from "./element-factory-Bs1HmAhv.js";
 const i = (t, o) => {
   const e = new r(t, o), n = s(t, e.cssClassName, e.clientProps, {
     "data-unoptimized-client-component": !0

package/element-factory-BPI0pGIH.cjs

@@ -1 +0,0 @@
-"use strict";const S=require("react"),C=require("./clsx-C11secjj.cjs"),N=require("@salty-css/core/util"),F=require("@salty-css/core/parsers"),R=["passProps"],v=(E,y="",t={},m)=>{const K=({extend:l=E,element:h=t.element,className:O="",children:$,passProps:f=t.passProps,_vks:c=new Set,...a},w)=>{const s={passProps:f};t.attr&&Object.assign(s,t.attr),m&&Object.assign(s,m),t.defaultProps&&Object.assign(a,t.defaultProps),a&&Object.assign(s,a);const o=new Set([...y.split(" "),...O.split(" ")]),d=typeof l=="function"||typeof l=="object",r=d&&"isStyled"in l,j=d?l:h||l;if(!j)throw new Error("No element provided");const u=s.style||{};s.style||(s.style=u),Object.entries(u).forEach(([e,i])=>{const n=F.parseVariableTokens(i);n&&(u[e]=n.transformed)}),t.propValueKeys&&t.propValueKeys.forEach(e=>{const i=`css-${e}`,n=a[i];if(n===void 0)return;const q=`--props-${N.dashCase(e)}`;u[q]=n,c&&c.add(i)}),t.variantKeys&&t.variantKeys.forEach(e=>{const[i,n]=e.split("=");a[i]!==void 0?(o.add(`${i}-${a[i]}`),c&&c.add(i)):n!==void 0&&o.add(`${i}-${n}`)}),c&&(!d||!r)?c.forEach(e=>{if(!f)return delete s[e];if(f!==!0&&!f.includes(e))return delete s[e]}):r&&Object.assign(s,{_vks:c}),r||R.forEach(e=>delete s[e]);const V=C.clsx(...o);return S.createElement(j,{element:d?h:void 0,className:V,ref:w,...s},$)},b=S.forwardRef(K);return Object.assign(b,{isStyled:!0,className:y,toString:()=>`.${t.hash}`}),b};exports.elementFactory=v;