@salty-css/react 0.0.1-alpha.271 → 0.0.1-alpha.273
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/clsx-C11secjj.cjs +1 -0
- package/clsx-OuTLNxxd.js +16 -0
- package/dynamic-styles.cjs +2 -2
- package/dynamic-styles.d.ts +17 -3
- package/dynamic-styles.js +19 -7
- package/element-factory-BPI0pGIH.cjs +1 -0
- package/element-factory-D5vMsSwp.js +56 -0
- package/package.json +2 -2
- package/styled-client.cjs +1 -1
- package/styled-client.js +1 -1
- package/styled.cjs +1 -1
- package/styled.js +1 -1
- package/element-factory-Ccd9WJOa.js +0 -68
- package/element-factory-CgP5yEab.cjs +0 -1
@@ -0,0 +1 @@
|
|
1
|
+
"use strict";function i(r){var f,n,t="";if(typeof r=="string"||typeof r=="number")t+=r;else if(typeof r=="object")if(Array.isArray(r)){var s=r.length;for(f=0;f<s;f++)r[f]&&(n=i(r[f]))&&(t&&(t+=" "),t+=n)}else for(n in r)r[n]&&(t&&(t+=" "),t+=n);return t}function o(){for(var r,f,n=0,t="",s=arguments.length;n<s;n++)(r=arguments[n])&&(f=i(r))&&(t&&(t+=" "),t+=f);return t}exports.clsx=o;
|
package/clsx-OuTLNxxd.js
ADDED
@@ -0,0 +1,16 @@
|
|
1
|
+
function a(r) {
|
2
|
+
var f, n, t = "";
|
3
|
+
if (typeof r == "string" || typeof r == "number") t += r;
|
4
|
+
else if (typeof r == "object") if (Array.isArray(r)) {
|
5
|
+
var o = r.length;
|
6
|
+
for (f = 0; f < o; f++) r[f] && (n = a(r[f])) && (t && (t += " "), t += n);
|
7
|
+
} else for (n in r) r[n] && (t && (t += " "), t += n);
|
8
|
+
return t;
|
9
|
+
}
|
10
|
+
function i() {
|
11
|
+
for (var r, f, n = 0, t = "", o = arguments.length; n < o; n++) (r = arguments[n]) && (f = a(r)) && (t && (t += " "), t += f);
|
12
|
+
return t;
|
13
|
+
}
|
14
|
+
export {
|
15
|
+
i as c
|
16
|
+
};
|
package/dynamic-styles.cjs
CHANGED
@@ -1,2 +1,2 @@
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
2
|
-
`);return
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("@salty-css/core/parsers"),m=require("@salty-css/core/util"),S=require("./clsx-C11secjj.cjs"),r=s=>m.toHash(s),i=s=>`.${r(s)}`,l=async(s,t)=>(await o.parseStyles(s,t)).join(`
|
2
|
+
`),h=async({as:s,scope:t,styles:a,...n})=>{const c=await l(a,t);if(s){const y=i(a),u={...n,className:S.clsx(y,n.className)};return e.jsxs(e.Fragment,{children:[e.jsx("style",{children:c}),e.jsx(s,{...u})]})}return e.jsx("style",{children:c})};exports.DynamicStyles=h;exports.useDynamicStyles=l;exports.useDynamicStylesClassName=i;exports.useDynamicStylesHash=r;
|
package/dynamic-styles.d.ts
CHANGED
@@ -1,9 +1,23 @@
|
|
1
1
|
import { BaseStyles } from '@salty-css/core/types';
|
2
|
+
import { HTMLAttributes } from 'react';
|
3
|
+
/**
|
4
|
+
* Create a hash of the dynamic styles that then can be used as scope.
|
5
|
+
*/
|
6
|
+
export declare const useDynamicStylesHash: (styles: BaseStyles) => string;
|
7
|
+
export declare const useDynamicStylesClassName: (styles: BaseStyles) => string;
|
2
8
|
/**
|
3
9
|
* Add any dynamic styles to your app with a custom scope.
|
4
10
|
* Note: this works only with server components.
|
5
11
|
*/
|
6
|
-
export declare const
|
7
|
-
|
12
|
+
export declare const useDynamicStyles: (styles: BaseStyles, scope?: string) => Promise<string>;
|
13
|
+
interface DynamicStylesProps extends HTMLAttributes<HTMLElement> {
|
14
|
+
scope?: string;
|
15
|
+
as?: (...args: any[]) => React.ReactNode;
|
8
16
|
styles: BaseStyles;
|
9
|
-
}
|
17
|
+
}
|
18
|
+
/**
|
19
|
+
* Add any dynamic styles to your app with a custom scope.
|
20
|
+
* Note: this works only with server components.
|
21
|
+
*/
|
22
|
+
export declare const DynamicStyles: ({ as: Component, scope, styles, ...rest }: DynamicStylesProps) => Promise<import("react/jsx-runtime").JSX.Element>;
|
23
|
+
export {};
|
package/dynamic-styles.js
CHANGED
@@ -1,10 +1,22 @@
|
|
1
|
-
import { jsx as
|
2
|
-
import { parseStyles as
|
3
|
-
|
4
|
-
|
5
|
-
`
|
6
|
-
|
1
|
+
import { jsxs as m, Fragment as i, jsx as r } from "react/jsx-runtime";
|
2
|
+
import { parseStyles as l } from "@salty-css/core/parsers";
|
3
|
+
import { toHash as y } from "@salty-css/core/util";
|
4
|
+
import { c as h } from "./clsx-OuTLNxxd.js";
|
5
|
+
const p = (s) => y(s), u = (s) => `.${p(s)}`, d = async (s, a) => (await l(s, a)).join(`
|
6
|
+
`), N = async ({ as: s, scope: a, styles: t, ...c }) => {
|
7
|
+
const e = await d(t, a);
|
8
|
+
if (s) {
|
9
|
+
const n = u(t), o = { ...c, className: h(n, c.className) };
|
10
|
+
return /* @__PURE__ */ m(i, { children: [
|
11
|
+
/* @__PURE__ */ r("style", { children: e }),
|
12
|
+
/* @__PURE__ */ r(s, { ...o })
|
13
|
+
] });
|
14
|
+
}
|
15
|
+
return /* @__PURE__ */ r("style", { children: e });
|
7
16
|
};
|
8
17
|
export {
|
9
|
-
|
18
|
+
N as DynamicStyles,
|
19
|
+
d as useDynamicStyles,
|
20
|
+
u as useDynamicStylesClassName,
|
21
|
+
p as useDynamicStylesHash
|
10
22
|
};
|
@@ -0,0 +1 @@
|
|
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"],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;
|
@@ -0,0 +1,56 @@
|
|
1
|
+
import { forwardRef as V, createElement as C } from "react";
|
2
|
+
import { c as N } from "./clsx-OuTLNxxd.js";
|
3
|
+
import { dashCase as R } from "@salty-css/core/util";
|
4
|
+
import { parseVariableTokens as p } from "@salty-css/core/parsers";
|
5
|
+
const q = ["passProps"], B = (S, m = "", t = {}, y) => {
|
6
|
+
const b = V(({
|
7
|
+
extend: c = S,
|
8
|
+
element: h = t.element,
|
9
|
+
className: E = "",
|
10
|
+
children: K,
|
11
|
+
passProps: l = t.passProps,
|
12
|
+
_vks: n = /* @__PURE__ */ new Set(),
|
13
|
+
...a
|
14
|
+
}, O) => {
|
15
|
+
const s = { passProps: l };
|
16
|
+
t.attr && Object.assign(s, t.attr), y && Object.assign(s, y), t.defaultProps && Object.assign(a, t.defaultProps), a && Object.assign(s, a);
|
17
|
+
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;
|
18
|
+
if (!j) throw new Error("No element provided");
|
19
|
+
const d = s.style || {};
|
20
|
+
s.style || (s.style = d), Object.entries(d).forEach(([e, i]) => {
|
21
|
+
const f = p(i);
|
22
|
+
f && (d[e] = f.transformed);
|
23
|
+
}), t.propValueKeys && t.propValueKeys.forEach((e) => {
|
24
|
+
const i = `css-${e}`, f = a[i];
|
25
|
+
if (f === void 0) return;
|
26
|
+
const w = `--props-${R(e)}`;
|
27
|
+
d[w] = f, n && n.add(i);
|
28
|
+
}), t.variantKeys && t.variantKeys.forEach((e) => {
|
29
|
+
const [i, f] = e.split("=");
|
30
|
+
a[i] !== void 0 ? (r.add(`${i}-${a[i]}`), n && n.add(i)) : f !== void 0 && r.add(`${i}-${f}`);
|
31
|
+
}), n && (!o || !u) ? n.forEach((e) => {
|
32
|
+
if (!l) return delete s[e];
|
33
|
+
if (l !== !0 && !l.includes(e))
|
34
|
+
return delete s[e];
|
35
|
+
}) : u && Object.assign(s, { _vks: n }), u || q.forEach((e) => delete s[e]);
|
36
|
+
const $ = N(...r);
|
37
|
+
return C(
|
38
|
+
j,
|
39
|
+
{
|
40
|
+
element: o ? h : void 0,
|
41
|
+
className: $,
|
42
|
+
ref: O,
|
43
|
+
...s
|
44
|
+
},
|
45
|
+
K
|
46
|
+
);
|
47
|
+
});
|
48
|
+
return Object.assign(b, {
|
49
|
+
isStyled: !0,
|
50
|
+
className: m,
|
51
|
+
toString: () => `.${t.hash}`
|
52
|
+
}), b;
|
53
|
+
};
|
54
|
+
export {
|
55
|
+
B as e
|
56
|
+
};
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@salty-css/react",
|
3
|
-
"version": "0.0.1-alpha.
|
3
|
+
"version": "0.0.1-alpha.273",
|
4
4
|
"main": "./dist/index.js",
|
5
5
|
"module": "./dist/index.mjs",
|
6
6
|
"typings": "./dist/index.d.ts",
|
@@ -70,7 +70,7 @@
|
|
70
70
|
}
|
71
71
|
},
|
72
72
|
"dependencies": {
|
73
|
-
"@salty-css/core": "^0.0.1-alpha.
|
73
|
+
"@salty-css/core": "^0.0.1-alpha.273",
|
74
74
|
"clsx": ">=2.x",
|
75
75
|
"react": ">=19.x || >=18.3.x"
|
76
76
|
}
|
package/styled-client.cjs
CHANGED
@@ -1 +1 @@
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("./element-factory-
|
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;
|
package/styled-client.js
CHANGED
package/styled.cjs
CHANGED
@@ -1 +1 @@
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("@salty-css/core/generators"),s=require("./element-factory-
|
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;
|
package/styled.js
CHANGED
@@ -1,5 +1,5 @@
|
|
1
1
|
import { StyledGenerator as r } from "@salty-css/core/generators";
|
2
|
-
import { e as s } from "./element-factory-
|
2
|
+
import { e as s } from "./element-factory-D5vMsSwp.js";
|
3
3
|
const i = (t, o) => {
|
4
4
|
const e = new r(t, o), n = s(t, e.cssClassName, e.clientProps, {
|
5
5
|
"data-unoptimized-client-component": !0
|
@@ -1,68 +0,0 @@
|
|
1
|
-
import { forwardRef as C, createElement as N } from "react";
|
2
|
-
import { dashCase as p } from "@salty-css/core/util";
|
3
|
-
import { parseVariableTokens as g } from "@salty-css/core/parsers";
|
4
|
-
function K(i) {
|
5
|
-
var n, e, t = "";
|
6
|
-
if (typeof i == "string" || typeof i == "number") t += i;
|
7
|
-
else if (typeof i == "object") if (Array.isArray(i)) {
|
8
|
-
var d = i.length;
|
9
|
-
for (n = 0; n < d; n++) i[n] && (e = K(i[n])) && (t && (t += " "), t += e);
|
10
|
-
} else for (e in i) i[e] && (t && (t += " "), t += e);
|
11
|
-
return t;
|
12
|
-
}
|
13
|
-
function A() {
|
14
|
-
for (var i, n, e = 0, t = "", d = arguments.length; e < d; e++) (i = arguments[e]) && (n = K(i)) && (t && (t += " "), t += n);
|
15
|
-
return t;
|
16
|
-
}
|
17
|
-
const R = ["passProps"], z = (i, n = "", e = {}, t) => {
|
18
|
-
const j = C(({
|
19
|
-
extend: o = i,
|
20
|
-
element: S = e.element,
|
21
|
-
className: O = "",
|
22
|
-
children: $,
|
23
|
-
passProps: u = e.passProps,
|
24
|
-
_vks: l = /* @__PURE__ */ new Set(),
|
25
|
-
...r
|
26
|
-
}, w) => {
|
27
|
-
const f = { passProps: u };
|
28
|
-
e.attr && Object.assign(f, e.attr), t && Object.assign(f, t), e.defaultProps && Object.assign(r, e.defaultProps), r && Object.assign(f, r);
|
29
|
-
const b = /* @__PURE__ */ new Set([...n.split(" "), ...O.split(" ")]), y = typeof o == "function" || typeof o == "object", h = y && "isStyled" in o, E = y ? o : S || o;
|
30
|
-
if (!E) throw new Error("No element provided");
|
31
|
-
const m = f.style || {};
|
32
|
-
f.style || (f.style = m), Object.entries(m).forEach(([s, a]) => {
|
33
|
-
const c = g(a);
|
34
|
-
c && (m[s] = c.transformed);
|
35
|
-
}), e.propValueKeys && e.propValueKeys.forEach((s) => {
|
36
|
-
const a = `css-${s}`, c = r[a];
|
37
|
-
if (c === void 0) return;
|
38
|
-
const v = `--props-${p(s)}`;
|
39
|
-
m[v] = c, l && l.add(a);
|
40
|
-
}), e.variantKeys && e.variantKeys.forEach((s) => {
|
41
|
-
const [a, c] = s.split("=");
|
42
|
-
r[a] !== void 0 ? (b.add(`${a}-${r[a]}`), l && l.add(a)) : c !== void 0 && b.add(`${a}-${c}`);
|
43
|
-
}), l && (!y || !h) ? l.forEach((s) => {
|
44
|
-
if (!u) return delete f[s];
|
45
|
-
if (u !== !0 && !u.includes(s))
|
46
|
-
return delete f[s];
|
47
|
-
}) : h && Object.assign(f, { _vks: l }), h || R.forEach((s) => delete f[s]);
|
48
|
-
const V = A(...b);
|
49
|
-
return N(
|
50
|
-
E,
|
51
|
-
{
|
52
|
-
element: y ? S : void 0,
|
53
|
-
className: V,
|
54
|
-
ref: w,
|
55
|
-
...f
|
56
|
-
},
|
57
|
-
$
|
58
|
-
);
|
59
|
-
});
|
60
|
-
return Object.assign(j, {
|
61
|
-
isStyled: !0,
|
62
|
-
className: n,
|
63
|
-
toString: () => `.${e.hash}`
|
64
|
-
}), j;
|
65
|
-
};
|
66
|
-
export {
|
67
|
-
z as e
|
68
|
-
};
|
@@ -1 +0,0 @@
|
|
1
|
-
"use strict";const K=require("react"),C=require("@salty-css/core/util"),N=require("@salty-css/core/parsers");function O(s){var n,e,t="";if(typeof s=="string"||typeof s=="number")t+=s;else if(typeof s=="object")if(Array.isArray(s)){var o=s.length;for(n=0;n<o;n++)s[n]&&(e=O(s[n]))&&(t&&(t+=" "),t+=e)}else for(e in s)s[e]&&(t&&(t+=" "),t+=e);return t}function g(){for(var s,n,e=0,t="",o=arguments.length;e<o;e++)(s=arguments[e])&&(n=O(s))&&(t&&(t+=" "),t+=n);return t}const A=["passProps"],F=(s,n="",e={},t)=>{const o=({extend:u=s,element:S=e.element,className:$="",children:w,passProps:d=e.passProps,_vks:l=new Set,...r},V)=>{const f={passProps:d};e.attr&&Object.assign(f,e.attr),t&&Object.assign(f,t),e.defaultProps&&Object.assign(r,e.defaultProps),r&&Object.assign(f,r);const b=new Set([...n.split(" "),...$.split(" ")]),y=typeof u=="function"||typeof u=="object",h=y&&"isStyled"in u,E=y?u:S||u;if(!E)throw new Error("No element provided");const m=f.style||{};f.style||(f.style=m),Object.entries(m).forEach(([i,a])=>{const c=N.parseVariableTokens(a);c&&(m[i]=c.transformed)}),e.propValueKeys&&e.propValueKeys.forEach(i=>{const a=`css-${i}`,c=r[a];if(c===void 0)return;const v=`--props-${C.dashCase(i)}`;m[v]=c,l&&l.add(a)}),e.variantKeys&&e.variantKeys.forEach(i=>{const[a,c]=i.split("=");r[a]!==void 0?(b.add(`${a}-${r[a]}`),l&&l.add(a)):c!==void 0&&b.add(`${a}-${c}`)}),l&&(!y||!h)?l.forEach(i=>{if(!d)return delete f[i];if(d!==!0&&!d.includes(i))return delete f[i]}):h&&Object.assign(f,{_vks:l}),h||A.forEach(i=>delete f[i]);const q=g(...b);return K.createElement(E,{element:y?S:void 0,className:q,ref:V,...f},w)},j=K.forwardRef(o);return Object.assign(j,{isStyled:!0,className:n,toString:()=>`.${e.hash}`}),j};exports.elementFactory=F;
|