@salty-css/react 0.0.1-alpha.3 → 0.0.1-alpha.300
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/README.md +490 -43
- package/class-name-client.cjs +1 -0
- package/class-name-client.d.ts +7 -0
- package/class-name-client.js +15 -0
- package/class-name.cjs +1 -0
- package/class-name.d.ts +10 -0
- package/class-name.js +20 -0
- package/clsx-C11secjj.cjs +1 -0
- package/clsx-OuTLNxxd.js +16 -0
- package/config.cjs +1 -0
- package/config.d.ts +1 -0
- package/config.js +1 -0
- package/dynamic-styles.cjs +2 -0
- package/dynamic-styles.d.ts +23 -0
- package/dynamic-styles.js +29 -0
- package/element-factory-BPI0pGIH.cjs +1 -0
- package/element-factory-D5vMsSwp.js +56 -0
- package/element-factory.d.ts +3 -0
- package/helpers.cjs +1 -0
- package/helpers.d.ts +1 -0
- package/helpers.js +1 -0
- package/index.cjs +1 -0
- package/index.d.ts +1 -0
- package/index.js +1 -0
- package/keyframes.cjs +1 -0
- package/keyframes.d.ts +1 -0
- package/keyframes.js +1 -0
- package/media.cjs +1 -0
- package/media.d.ts +1 -0
- package/media.js +1 -0
- package/package.json +38 -3
- package/styled-client.cjs +1 -0
- package/styled-client.d.ts +3 -0
- package/styled-client.js +5 -0
- package/styled.cjs +1 -0
- package/styled.d.ts +5 -0
- package/styled.js +13 -0
- package/dist/README.md +0 -107
- package/dist/element-factory-CHdv47Y_.js +0 -52
- package/dist/element-factory-DvBlAL2I.cjs +0 -1
- package/dist/element-factory.d.ts +0 -2
- package/dist/keyframes.cjs +0 -1
- package/dist/keyframes.d.ts +0 -22
- package/dist/keyframes.js +0 -30
- package/dist/media.cjs +0 -1
- package/dist/media.d.ts +0 -71
- package/dist/media.js +0 -81
- package/dist/package.json +0 -42
- package/dist/parse-styles-BRv2UFN0.js +0 -87
- package/dist/parse-styles-PkK9Yzyn.cjs +0 -7
- package/dist/styled-client.cjs +0 -1
- package/dist/styled-client.d.ts +0 -2
- package/dist/styled-client.js +0 -7
- package/dist/styled.cjs +0 -1
- package/dist/styled.d.ts +0 -3
- package/dist/styled.js +0 -60
package/dist/media.js
DELETED
@@ -1,81 +0,0 @@
|
|
1
|
-
class n {
|
2
|
-
constructor(t = "@media") {
|
3
|
-
this.base = t, this.next = (e) => {
|
4
|
-
const s = new String(e);
|
5
|
-
return Object.assign(s, {
|
6
|
-
get and() {
|
7
|
-
return new n(`${e} and`);
|
8
|
-
},
|
9
|
-
get or() {
|
10
|
-
return new n(`${e},`);
|
11
|
-
}
|
12
|
-
}), s;
|
13
|
-
};
|
14
|
-
}
|
15
|
-
custom(t) {
|
16
|
-
return this.next(`${this.base} ${t}`);
|
17
|
-
}
|
18
|
-
minWidth(t) {
|
19
|
-
const e = typeof t == "number" ? `${t}px` : t, s = `${this.base} (min-width: ${e})`;
|
20
|
-
return this.next(s);
|
21
|
-
}
|
22
|
-
maxWidth(t) {
|
23
|
-
const e = typeof t == "number" ? `${t}px` : t, s = `${this.base} (max-width: ${e})`;
|
24
|
-
return this.next(s);
|
25
|
-
}
|
26
|
-
minHeight(t) {
|
27
|
-
const e = typeof t == "number" ? `${t}px` : t, s = `${this.base} (min-height: ${e})`;
|
28
|
-
return this.next(s);
|
29
|
-
}
|
30
|
-
maxHeight(t) {
|
31
|
-
const e = typeof t == "number" ? `${t}px` : t, s = `${this.base} (max-height: ${e})`;
|
32
|
-
return this.next(s);
|
33
|
-
}
|
34
|
-
get portrait() {
|
35
|
-
const t = `${this.base} (orientation: portrait)`;
|
36
|
-
return this.next(t);
|
37
|
-
}
|
38
|
-
get landscape() {
|
39
|
-
const t = `${this.base} (orientation: landscape)`;
|
40
|
-
return this.next(t);
|
41
|
-
}
|
42
|
-
prefersColorScheme(t) {
|
43
|
-
const e = `${this.base} (prefers-color-scheme: ${t})`;
|
44
|
-
return this.next(e);
|
45
|
-
}
|
46
|
-
get dark() {
|
47
|
-
return this.prefersColorScheme("dark");
|
48
|
-
}
|
49
|
-
get light() {
|
50
|
-
return this.prefersColorScheme("light");
|
51
|
-
}
|
52
|
-
get print() {
|
53
|
-
const t = `${this.base} print`;
|
54
|
-
return this.next(t);
|
55
|
-
}
|
56
|
-
get screen() {
|
57
|
-
const t = `${this.base} screen`;
|
58
|
-
return this.next(t);
|
59
|
-
}
|
60
|
-
get speech() {
|
61
|
-
const t = `${this.base} speech`;
|
62
|
-
return this.next(t);
|
63
|
-
}
|
64
|
-
get all() {
|
65
|
-
const t = `${this.base} all`;
|
66
|
-
return this.next(t);
|
67
|
-
}
|
68
|
-
get not() {
|
69
|
-
const t = `${this.base} not`;
|
70
|
-
return this.next(t);
|
71
|
-
}
|
72
|
-
get reducedMotion() {
|
73
|
-
const t = `${this.base} (prefers-reduced-motion: reduce)`;
|
74
|
-
return this.next(t);
|
75
|
-
}
|
76
|
-
}
|
77
|
-
const r = new n();
|
78
|
-
export {
|
79
|
-
n as MediaQueryFactory,
|
80
|
-
r as media
|
81
|
-
};
|
package/dist/package.json
DELETED
@@ -1,42 +0,0 @@
|
|
1
|
-
{
|
2
|
-
"name": "@salty-css/react",
|
3
|
-
"version": "0.0.1-alpha.3",
|
4
|
-
"main": "./dist/index.js",
|
5
|
-
"module": "./dist/index.mjs",
|
6
|
-
"typings": "./dist/index.d.ts",
|
7
|
-
"type": "module",
|
8
|
-
"license": "MIT",
|
9
|
-
"private": false,
|
10
|
-
"publishConfig": {
|
11
|
-
"access": "public"
|
12
|
-
},
|
13
|
-
"homepage": "https://github.com/margarita-form/salty-css",
|
14
|
-
"bugs": {
|
15
|
-
"url": "https://github.com/margarita-form/salty-css/issues"
|
16
|
-
},
|
17
|
-
"files": [
|
18
|
-
"dist",
|
19
|
-
"!**/*.tsbuildinfo"
|
20
|
-
],
|
21
|
-
"nx": {
|
22
|
-
"name": "react"
|
23
|
-
},
|
24
|
-
"exports": {
|
25
|
-
"./styled": {
|
26
|
-
"import": "./styled.js",
|
27
|
-
"require": "./styled.cjs"
|
28
|
-
},
|
29
|
-
"./styled-client": {
|
30
|
-
"import": "./styled-client.js",
|
31
|
-
"require": "./styled-client.cjs"
|
32
|
-
},
|
33
|
-
"./keyframes": {
|
34
|
-
"import": "./keyframes.js",
|
35
|
-
"require": "./keyframes.cjs"
|
36
|
-
},
|
37
|
-
"./media": {
|
38
|
-
"import": "./media.js",
|
39
|
-
"require": "./media.cjs"
|
40
|
-
}
|
41
|
-
}
|
42
|
-
}
|
@@ -1,87 +0,0 @@
|
|
1
|
-
const j = (t) => String.fromCharCode(t + (t > 25 ? 39 : 97)), P = (t, e) => {
|
2
|
-
let r = "", n;
|
3
|
-
for (n = Math.abs(t); n > 52; n = n / 52 | 0) r = j(n % 52) + r;
|
4
|
-
return r = j(n % 52) + r, r.length < e ? r = r.padStart(e, "a") : r.length > e && (r = r.slice(-e)), r;
|
5
|
-
}, T = (t, e) => {
|
6
|
-
let r = e.length;
|
7
|
-
for (; r; ) t = t * 33 ^ e.charCodeAt(--r);
|
8
|
-
return t;
|
9
|
-
}, M = (t, e = 3) => {
|
10
|
-
const r = T(5381, JSON.stringify(t)) >>> 0;
|
11
|
-
return P(r, e);
|
12
|
-
};
|
13
|
-
function O(t) {
|
14
|
-
return t ? typeof t != "string" ? String(t) : t.replace(/\s/g, "-").replace(/[A-Z](?:(?=[^A-Z])|[A-Z]*(?=[A-Z][^A-Z]|$))/g, (e, r) => (r > 0 ? "-" : "") + e.toLowerCase()) : "";
|
15
|
-
}
|
16
|
-
const W = (t, e) => {
|
17
|
-
if (typeof t != "string") return { result: t };
|
18
|
-
if (!e) return { result: t };
|
19
|
-
const r = [];
|
20
|
-
return Object.values(e).forEach((n) => {
|
21
|
-
const { pattern: c, transform: h } = n;
|
22
|
-
t = t.replace(c, (d) => {
|
23
|
-
const { value: i, css: l } = h(d);
|
24
|
-
return l && r.push(l), i;
|
25
|
-
});
|
26
|
-
}), { result: t, additionalCss: r };
|
27
|
-
}, w = (t) => typeof t != "string" ? { result: t } : /\{[^{}]+\}/g.test(t) ? { result: t.replace(/\{([^{}]+)\}/g, (...n) => `var(--${O(n[1].replaceAll(".", "-"))})`) } : { result: t }, $ = (t, e, r, n) => {
|
28
|
-
const c = [], h = Object.entries(t).reduce((i, [l, s]) => {
|
29
|
-
const o = l.trim();
|
30
|
-
if (typeof s == "function" && (s = s()), typeof s == "object") {
|
31
|
-
if (!s) return i;
|
32
|
-
if (o === "variants")
|
33
|
-
return Object.entries(s).forEach(([f, p]) => {
|
34
|
-
p && Object.entries(p).forEach(([m, b]) => {
|
35
|
-
if (!b) return;
|
36
|
-
const y = `${e}.${f}-${m}`, A = $(b, y, r);
|
37
|
-
c.push(A);
|
38
|
-
});
|
39
|
-
}), i;
|
40
|
-
if (o === "defaultVariants")
|
41
|
-
return i;
|
42
|
-
if (o === "compoundVariants")
|
43
|
-
return s.forEach((f) => {
|
44
|
-
const { css: p, ...m } = f, b = Object.entries(m).reduce((A, [k, N]) => `${A}.${k}-${N}`, e), y = $(p, b, r);
|
45
|
-
c.push(y);
|
46
|
-
}), i;
|
47
|
-
if (o.startsWith("@")) {
|
48
|
-
const f = $(s, e, r), p = `${o} {
|
49
|
-
${f.replace(`
|
50
|
-
`, `
|
51
|
-
`)}
|
52
|
-
}`;
|
53
|
-
return c.push(p), i;
|
54
|
-
}
|
55
|
-
const u = l.includes("&") ? o.replace("&", e) : o.startsWith(":") ? `${e}${o}` : `${e} ${o}`, a = $(s, u, r);
|
56
|
-
return c.push(a), i;
|
57
|
-
}
|
58
|
-
if (n != null && n.templates && n.templates[o]) {
|
59
|
-
const a = s.split(".").reduce((p, m) => p[m], n.templates[o]), f = $(a, "");
|
60
|
-
return `${i}${f}`;
|
61
|
-
}
|
62
|
-
const E = o.startsWith("-") ? o : O(o), S = (u, a = ";") => i = `${i}${u}${a}`, g = (u) => S(`${E}:${u}`);
|
63
|
-
if (typeof s == "number") return g(s);
|
64
|
-
if (typeof s != "string")
|
65
|
-
if ("toString" in s) s = s.toString();
|
66
|
-
else return i;
|
67
|
-
const { modifiers: V } = n || {}, Z = function* () {
|
68
|
-
yield w(s), yield W(s, V);
|
69
|
-
}();
|
70
|
-
for (const { result: u, additionalCss: a = [] } of Z)
|
71
|
-
s = u, a.forEach((f) => {
|
72
|
-
const p = $(f, "");
|
73
|
-
S(p, "");
|
74
|
-
});
|
75
|
-
return g(s);
|
76
|
-
}, "");
|
77
|
-
if (!h) return c.join(`
|
78
|
-
`);
|
79
|
-
if (!e) return h;
|
80
|
-
let d = "";
|
81
|
-
return r !== void 0 ? d = `@layer l${r} { ${e} { ${h} } }` : d = `${e} { ${h} }`, [d, ...c].join(`
|
82
|
-
`);
|
83
|
-
};
|
84
|
-
export {
|
85
|
-
$ as p,
|
86
|
-
M as t
|
87
|
-
};
|
@@ -1,7 +0,0 @@
|
|
1
|
-
"use strict";const j=t=>String.fromCharCode(t+(t>25?39:97)),N=(t,e)=>{let r="",n;for(n=Math.abs(t);n>52;n=n/52|0)r=j(n%52)+r;return r=j(n%52)+r,r.length<e?r=r.padStart(e,"a"):r.length>e&&(r=r.slice(-e)),r},P=(t,e)=>{let r=e.length;for(;r;)t=t*33^e.charCodeAt(--r);return t},T=(t,e=3)=>{const r=P(5381,JSON.stringify(t))>>>0;return N(r,e)};function O(t){return t?typeof t!="string"?String(t):t.replace(/\s/g,"-").replace(/[A-Z](?:(?=[^A-Z])|[A-Z]*(?=[A-Z][^A-Z]|$))/g,(e,r)=>(r>0?"-":"")+e.toLowerCase()):""}const W=(t,e)=>{if(typeof t!="string")return{result:t};if(!e)return{result:t};const r=[];return Object.values(e).forEach(n=>{const{pattern:c,transform:$}=n;t=t.replace(c,d=>{const{value:i,css:l}=$(d);return l&&r.push(l),i})}),{result:t,additionalCss:r}},w=t=>typeof t!="string"?{result:t}:/\{[^{}]+\}/g.test(t)?{result:t.replace(/\{([^{}]+)\}/g,(...n)=>`var(--${O(n[1].replaceAll(".","-"))})`)}:{result:t},a=(t,e,r,n)=>{const c=[],$=Object.entries(t).reduce((i,[l,s])=>{const o=l.trim();if(typeof s=="function"&&(s=s()),typeof s=="object"){if(!s)return i;if(o==="variants")return Object.entries(s).forEach(([f,p])=>{p&&Object.entries(p).forEach(([m,b])=>{if(!b)return;const y=`${e}.${f}-${m}`,S=a(b,y,r);c.push(S)})}),i;if(o==="defaultVariants")return i;if(o==="compoundVariants")return s.forEach(f=>{const{css:p,...m}=f,b=Object.entries(m).reduce((S,[k,H])=>`${S}.${k}-${H}`,e),y=a(p,b,r);c.push(y)}),i;if(o.startsWith("@")){const f=a(s,e,r),p=`${o} {
|
2
|
-
${f.replace(`
|
3
|
-
`,`
|
4
|
-
`)}
|
5
|
-
}`;return c.push(p),i}const u=l.includes("&")?o.replace("&",e):o.startsWith(":")?`${e}${o}`:`${e} ${o}`,h=a(s,u,r);return c.push(h),i}if(n!=null&&n.templates&&n.templates[o]){const h=s.split(".").reduce((p,m)=>p[m],n.templates[o]),f=a(h,"");return`${i}${f}`}const E=o.startsWith("-")?o:O(o),A=(u,h=";")=>i=`${i}${u}${h}`,g=u=>A(`${E}:${u}`);if(typeof s=="number")return g(s);if(typeof s!="string")if("toString"in s)s=s.toString();else return i;const{modifiers:V}=n||{},Z=function*(){yield w(s),yield W(s,V)}();for(const{result:u,additionalCss:h=[]}of Z)s=u,h.forEach(f=>{const p=a(f,"");A(p,"")});return g(s)},"");if(!$)return c.join(`
|
6
|
-
`);if(!e)return $;let d="";return r!==void 0?d=`@layer l${r} { ${e} { ${$} } }`:d=`${e} { ${$} }`,[d,...c].join(`
|
7
|
-
`)};exports.parseStyles=a;exports.toHash=T;
|
package/dist/styled-client.cjs
DELETED
@@ -1 +0,0 @@
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("./element-factory-DvBlAL2I.cjs"),a=(e,t,n,o,r)=>l.elementFactory(e,t,o,r,{"data-component-name":n});exports.styledClient=a;
|
package/dist/styled-client.d.ts
DELETED
@@ -1,2 +0,0 @@
|
|
1
|
-
import { Tag } from '../../core/src/types';
|
2
|
-
export declare const styledClient: (tagName: Tag<any>, className: string, callerName?: string, element?: string, variantKeys?: string[]) => ({ extend, element, className, children, passVariantProps, _vks, ...props }: import('../../core/src/types').StyledComponentProps) => import('react').ReactElement<any, string | import('react').JSXElementConstructor<any>>;
|
package/dist/styled-client.js
DELETED
package/dist/styled.cjs
DELETED
@@ -1 +0,0 @@
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("./parse-styles-PkK9Yzyn.cjs"),o=require("./element-factory-DvBlAL2I.cjs"),c=r=>Object.keys(r);class l{constructor(t,s,e){this.tagName=t,this.styles=s,this.options=e}get hash(){return a.toHash(this.styles)}get priority(){var t;return typeof this.tagName=="function"?(((t=this.tagName.generator)==null?void 0:t.priority)||0)+1:0}get classNames(){const t=[this.hash],{className:s}=this.options;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?c(this._context.config.templates):[]}get css(){var t;return a.parseStyles(this.styles,`.${this.cssClassName}`,this.priority,(t=this._context)==null?void 0:t.config)}get props(){const{element:t}=this.options,s=this.styles.variants?Object.keys(this.styles.variants).map(e=>{var i;const n=(i=this.styles.defaultVariants)==null?void 0:i[e];return n!==void 0?`${e}=${String(n)}`:e}):void 0;return{element:t,variantKeys:s}}_withBuildContext(t){this._context=t;const{name:s,config:e}=t;return this._callerName=s,this}}const h=(r,t,s={})=>{const e=new l(r,t,s),n=o.elementFactory(r,e.cssClassName,e.props.element,e.props.variantKeys,{"data-unoptimized-client-component":!0});return Object.assign(n,{generator:e}),n};exports.styled=h;
|
package/dist/styled.d.ts
DELETED
@@ -1,3 +0,0 @@
|
|
1
|
-
import { HTMLAttributes, ReactDOM, ReactNode } from 'react';
|
2
|
-
import { Tag, StyledComponentProps, GeneratorOptions, CreateElementProps, VariantProps, ParentComponentProps, StyledParams } from '../../core/src/types';
|
3
|
-
export declare const styled: <const PROPS extends StyledComponentProps, const TAG extends Tag<Required<PROPS>>, const PARAMS extends StyledParams>(tagName: TAG, styles: PARAMS, options?: GeneratorOptions) => (<T extends object>(props: (T & CreateElementProps & ParentComponentProps<TAG>) | VariantProps<STYLES> | (TAG extends keyof ReactDOM ? ReactDOM[TAG] extends (...props: infer R) => any ? R[0] : TAG extends string ? HTMLAttributes<HTMLElement> : never : TAG extends string ? HTMLAttributes<HTMLElement> : never)) => ReactNode) & string;
|
package/dist/styled.js
DELETED
@@ -1,60 +0,0 @@
|
|
1
|
-
import { t as a, p as o } from "./parse-styles-BRv2UFN0.js";
|
2
|
-
import { e as c } from "./element-factory-CHdv47Y_.js";
|
3
|
-
const h = (r) => Object.keys(r);
|
4
|
-
class l {
|
5
|
-
constructor(t, s, e) {
|
6
|
-
this.tagName = t, this.styles = s, this.options = e;
|
7
|
-
}
|
8
|
-
get hash() {
|
9
|
-
return a(this.styles);
|
10
|
-
}
|
11
|
-
get priority() {
|
12
|
-
var t;
|
13
|
-
return typeof this.tagName == "function" ? (((t = this.tagName.generator) == null ? void 0 : t.priority) || 0) + 1 : 0;
|
14
|
-
}
|
15
|
-
get classNames() {
|
16
|
-
const t = [this.hash], { className: s } = this.options;
|
17
|
-
return s && t.push(s), t.join(" ");
|
18
|
-
}
|
19
|
-
get cssClassName() {
|
20
|
-
return this.hash;
|
21
|
-
}
|
22
|
-
get cssDisplayNameVar() {
|
23
|
-
return `--${this.hash}-display-name: ${this._callerName};`;
|
24
|
-
}
|
25
|
-
get templateKeys() {
|
26
|
-
var t;
|
27
|
-
return (t = this._context) != null && t.config.templates ? h(this._context.config.templates) : [];
|
28
|
-
}
|
29
|
-
get css() {
|
30
|
-
var t;
|
31
|
-
return o(this.styles, `.${this.cssClassName}`, this.priority, (t = this._context) == null ? void 0 : t.config);
|
32
|
-
}
|
33
|
-
get props() {
|
34
|
-
const { element: t } = this.options, s = this.styles.variants ? Object.keys(this.styles.variants).map((e) => {
|
35
|
-
var i;
|
36
|
-
const n = (i = this.styles.defaultVariants) == null ? void 0 : i[e];
|
37
|
-
return n !== void 0 ? `${e}=${String(n)}` : e;
|
38
|
-
}) : void 0;
|
39
|
-
return {
|
40
|
-
element: t,
|
41
|
-
variantKeys: s
|
42
|
-
};
|
43
|
-
}
|
44
|
-
_withBuildContext(t) {
|
45
|
-
this._context = t;
|
46
|
-
const { name: s, config: e } = t;
|
47
|
-
return this._callerName = s, this;
|
48
|
-
}
|
49
|
-
}
|
50
|
-
const u = (r, t, s = {}) => {
|
51
|
-
const e = new l(r, t, s), n = c(r, e.cssClassName, e.props.element, e.props.variantKeys, {
|
52
|
-
"data-unoptimized-client-component": !0
|
53
|
-
});
|
54
|
-
return Object.assign(n, {
|
55
|
-
generator: e
|
56
|
-
}), n;
|
57
|
-
};
|
58
|
-
export {
|
59
|
-
u as styled
|
60
|
-
};
|