@salty-css/react 0.0.1-alpha.27 → 0.0.1-alpha.270

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.
@@ -0,0 +1 @@
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;
@@ -1,3 +1,3 @@
1
- import { GeneratorProps } from '../../core/src/generator';
2
- import { StyledComponentProps, Tag } from '../../core/src/types';
3
- export declare const elementFactory: (tagName: Tag<any>, _className: string, _generatorProps: GeneratorProps, _additionalProps?: Record<PropertyKey, any>) => import('react').ForwardRefExoticComponent<Omit<StyledComponentProps, "ref"> & import('react').RefAttributes<any>>;
1
+ import { StyledComponentProps, Tag } from '@salty-css/core/types';
2
+ import { StyledGeneratorClientProps } from '@salty-css/core/generators';
3
+ export declare const elementFactory: (tagName: Tag<any>, _className?: string, _generatorProps?: StyledGeneratorClientProps, _additionalProps?: Record<PropertyKey, any>) => import('react').ForwardRefExoticComponent<Omit<StyledComponentProps, "ref"> & import('react').RefAttributes<any>>;
package/helpers.cjs ADDED
@@ -0,0 +1 @@
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("@salty-css/core/helpers");Object.keys(t).forEach(e=>{e!=="default"&&!Object.prototype.hasOwnProperty.call(exports,e)&&Object.defineProperty(exports,e,{enumerable:!0,get:()=>t[e]})});
package/helpers.d.ts ADDED
@@ -0,0 +1 @@
1
+ export * from '@salty-css/core/helpers';
package/helpers.js ADDED
@@ -0,0 +1 @@
1
+ export * from "@salty-css/core/helpers";
package/index.cjs ADDED
@@ -0,0 +1 @@
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("@salty-css/core/css");Object.keys(t).forEach(e=>{e!=="default"&&!Object.prototype.hasOwnProperty.call(exports,e)&&Object.defineProperty(exports,e,{enumerable:!0,get:()=>t[e]})});
package/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export * from '@salty-css/core/css';
package/index.js ADDED
@@ -0,0 +1 @@
1
+ export * from "@salty-css/core/css";
package/keyframes.cjs CHANGED
@@ -1 +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;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("@salty-css/core/css/keyframes");Object.keys(t).forEach(e=>{e!=="default"&&!Object.prototype.hasOwnProperty.call(exports,e)&&Object.defineProperty(exports,e,{enumerable:!0,get:()=>t[e]})});
package/keyframes.d.ts CHANGED
@@ -1,22 +1 @@
1
- import { CssStyles, StyleValue } from '../../core/src/types';
2
- type KeyframeKeys = number | 'from' | 'to' | `${number}%`;
3
- type Keyframes = {
4
- [key in KeyframeKeys]: CssStyles;
5
- };
6
- interface KeyframesConfig {
7
- animationName?: string;
8
- appendInitialStyles?: boolean;
9
- params?: KeyframesParams;
10
- }
11
- interface KeyframesParams {
12
- duration?: string;
13
- delay?: string;
14
- iterationCount?: string | number;
15
- easing?: StyleValue<'animationTimingFunction'>;
16
- direction?: StyleValue<'animationDirection'>;
17
- fillMode?: StyleValue<'animationFillMode'>;
18
- playState?: StyleValue<'animationPlayState'>;
19
- }
20
- type KeyframesProps = Keyframes & KeyframesConfig;
21
- export declare const keyframes: ({ animationName: _name, params: _params, appendInitialStyles, ...keyframes }: KeyframesProps) => (params?: KeyframesParams) => string;
22
- export {};
1
+ export * from '@salty-css/core/css/keyframes';
package/keyframes.js CHANGED
@@ -1,30 +1 @@
1
- import { t as b, p as c } from "./parse-styles-T74HIH4_.js";
2
- const C = ({ animationName: m, params: u, appendInitialStyles: f, ...t }) => {
3
- const s = m || b(t), e = (r = {}) => {
4
- const {
5
- duration: n = "500ms",
6
- easing: o = "ease-in-out",
7
- delay: a = "0s",
8
- iterationCount: i = "1",
9
- direction: d = "normal",
10
- fillMode: y = "forwards",
11
- playState: S = "running"
12
- } = { ...u, ...r }, $ = `${s} ${n} ${o} ${a} ${i} ${d} ${y} ${S}`;
13
- if (!f) return $;
14
- const g = c(t.from || t["0%"], "");
15
- return `${$};${g}`;
16
- }, l = Object.entries(t).reduce((r, [n, o]) => {
17
- const a = c(o, ""), i = typeof n == "number" ? `${n}%` : n;
18
- return `${r}${i}{${a}}`;
19
- }, ""), p = `@keyframes ${s} {${l}}`;
20
- return Object.assign(e, {
21
- toString: e,
22
- isKeyframes: !0,
23
- animationName: s,
24
- css: p,
25
- keyframes: t
26
- }), e;
27
- };
28
- export {
29
- C as keyframes
30
- };
1
+ export * from "@salty-css/core/css/keyframes";
package/media.cjs CHANGED
@@ -1 +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;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("@salty-css/core/css/media");Object.keys(t).forEach(e=>{e!=="default"&&!Object.prototype.hasOwnProperty.call(exports,e)&&Object.defineProperty(exports,e,{enumerable:!0,get:()=>t[e]})});
package/media.d.ts CHANGED
@@ -1,71 +1 @@
1
- import { OrNumber, OrString } from '../../core/src/types/util-types';
2
- export declare class MediaQueryFactory {
3
- private base;
4
- constructor(base?: string);
5
- private next;
6
- custom(value: string): string & {
7
- and: MediaQueryFactory;
8
- or: MediaQueryFactory;
9
- };
10
- minWidth(width: OrString | OrNumber): string & {
11
- and: MediaQueryFactory;
12
- or: MediaQueryFactory;
13
- };
14
- maxWidth(width: OrString | OrNumber): string & {
15
- and: MediaQueryFactory;
16
- or: MediaQueryFactory;
17
- };
18
- minHeight(height: OrString | OrNumber): string & {
19
- and: MediaQueryFactory;
20
- or: MediaQueryFactory;
21
- };
22
- maxHeight(height: OrString | OrNumber): string & {
23
- and: MediaQueryFactory;
24
- or: MediaQueryFactory;
25
- };
26
- get portrait(): string & {
27
- and: MediaQueryFactory;
28
- or: MediaQueryFactory;
29
- };
30
- get landscape(): string & {
31
- and: MediaQueryFactory;
32
- or: MediaQueryFactory;
33
- };
34
- prefersColorScheme(scheme: 'dark' | 'light' | OrString): string & {
35
- and: MediaQueryFactory;
36
- or: MediaQueryFactory;
37
- };
38
- get dark(): string & {
39
- and: MediaQueryFactory;
40
- or: MediaQueryFactory;
41
- };
42
- get light(): string & {
43
- and: MediaQueryFactory;
44
- or: MediaQueryFactory;
45
- };
46
- get print(): string & {
47
- and: MediaQueryFactory;
48
- or: MediaQueryFactory;
49
- };
50
- get screen(): string & {
51
- and: MediaQueryFactory;
52
- or: MediaQueryFactory;
53
- };
54
- get speech(): string & {
55
- and: MediaQueryFactory;
56
- or: MediaQueryFactory;
57
- };
58
- get all(): string & {
59
- and: MediaQueryFactory;
60
- or: MediaQueryFactory;
61
- };
62
- get not(): string & {
63
- and: MediaQueryFactory;
64
- or: MediaQueryFactory;
65
- };
66
- get reducedMotion(): string & {
67
- and: MediaQueryFactory;
68
- or: MediaQueryFactory;
69
- };
70
- }
71
- export declare const media: MediaQueryFactory;
1
+ export * from '@salty-css/core/css/media';
package/media.js CHANGED
@@ -1,85 +1 @@
1
- var o = Object.defineProperty;
2
- var a = (s, t, e) => t in s ? o(s, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[t] = e;
3
- var i = (s, t, e) => a(s, typeof t != "symbol" ? t + "" : t, e);
4
- class r {
5
- constructor(t = "@media") {
6
- i(this, "next", (t) => {
7
- const e = new String(t);
8
- return Object.assign(e, {
9
- get and() {
10
- return new r(`${t} and`);
11
- },
12
- get or() {
13
- return new r(`${t},`);
14
- }
15
- }), e;
16
- });
17
- this.base = t;
18
- }
19
- custom(t) {
20
- return this.next(`${this.base} ${t}`);
21
- }
22
- minWidth(t) {
23
- const e = typeof t == "number" ? `${t}px` : t, n = `${this.base} (min-width: ${e})`;
24
- return this.next(n);
25
- }
26
- maxWidth(t) {
27
- const e = typeof t == "number" ? `${t}px` : t, n = `${this.base} (max-width: ${e})`;
28
- return this.next(n);
29
- }
30
- minHeight(t) {
31
- const e = typeof t == "number" ? `${t}px` : t, n = `${this.base} (min-height: ${e})`;
32
- return this.next(n);
33
- }
34
- maxHeight(t) {
35
- const e = typeof t == "number" ? `${t}px` : t, n = `${this.base} (max-height: ${e})`;
36
- return this.next(n);
37
- }
38
- get portrait() {
39
- const t = `${this.base} (orientation: portrait)`;
40
- return this.next(t);
41
- }
42
- get landscape() {
43
- const t = `${this.base} (orientation: landscape)`;
44
- return this.next(t);
45
- }
46
- prefersColorScheme(t) {
47
- const e = `${this.base} (prefers-color-scheme: ${t})`;
48
- return this.next(e);
49
- }
50
- get dark() {
51
- return this.prefersColorScheme("dark");
52
- }
53
- get light() {
54
- return this.prefersColorScheme("light");
55
- }
56
- get print() {
57
- const t = `${this.base} print`;
58
- return this.next(t);
59
- }
60
- get screen() {
61
- const t = `${this.base} screen`;
62
- return this.next(t);
63
- }
64
- get speech() {
65
- const t = `${this.base} speech`;
66
- return this.next(t);
67
- }
68
- get all() {
69
- const t = `${this.base} all`;
70
- return this.next(t);
71
- }
72
- get not() {
73
- const t = `${this.base} not`;
74
- return this.next(t);
75
- }
76
- get reducedMotion() {
77
- const t = `${this.base} (prefers-reduced-motion: reduce)`;
78
- return this.next(t);
79
- }
80
- }
81
- const u = new r();
82
- export {
83
- r as MediaQueryFactory,
84
- u as media
85
- };
1
+ export * from "@salty-css/core/css/media";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salty-css/react",
3
- "version": "0.0.1-alpha.27",
3
+ "version": "0.0.1-alpha.270",
4
4
  "main": "./dist/index.js",
5
5
  "module": "./dist/index.mjs",
6
6
  "typings": "./dist/index.d.ts",
@@ -10,7 +10,12 @@
10
10
  "publishConfig": {
11
11
  "access": "public"
12
12
  },
13
- "homepage": "https://github.com/margarita-form/salty-css",
13
+ "description": "React library for Salty CSS",
14
+ "homepage": "https://salty-css.dev/",
15
+ "repository": {
16
+ "type": "git",
17
+ "url": "git+https://github.com/margarita-form/salty-css.git"
18
+ },
14
19
  "bugs": {
15
20
  "url": "https://github.com/margarita-form/salty-css/issues"
16
21
  },
@@ -23,6 +28,10 @@
23
28
  "name": "react"
24
29
  },
25
30
  "exports": {
31
+ ".": {
32
+ "import": "./index.js",
33
+ "require": "./index.cjs"
34
+ },
26
35
  "./styled": {
27
36
  "import": "./styled.js",
28
37
  "require": "./styled.cjs"
@@ -31,6 +40,14 @@
31
40
  "import": "./styled-client.js",
32
41
  "require": "./styled-client.cjs"
33
42
  },
43
+ "./class-name": {
44
+ "import": "./class-name.js",
45
+ "require": "./class-name.cjs"
46
+ },
47
+ "./class-name-client": {
48
+ "import": "./class-name-client.js",
49
+ "require": "./class-name-client.cjs"
50
+ },
34
51
  "./keyframes": {
35
52
  "import": "./keyframes.js",
36
53
  "require": "./keyframes.cjs"
@@ -38,11 +55,23 @@
38
55
  "./media": {
39
56
  "import": "./media.js",
40
57
  "require": "./media.cjs"
58
+ },
59
+ "./config": {
60
+ "import": "./config.js",
61
+ "require": "./config.cjs"
62
+ },
63
+ "./helpers": {
64
+ "import": "./helpers.js",
65
+ "require": "./helpers.cjs"
66
+ },
67
+ "./dynamic-styles": {
68
+ "import": "./dynamic-styles.js",
69
+ "require": "./dynamic-styles.cjs"
41
70
  }
42
71
  },
43
72
  "dependencies": {
44
- "@salty-css/core": "^0.0.1-alpha.27",
73
+ "@salty-css/core": "^0.0.1-alpha.270",
45
74
  "clsx": ">=2.x",
46
- "react": ">=18.3.x"
75
+ "react": ">=19.x || >=18.3.x"
47
76
  }
48
77
  }
package/styled-client.cjs CHANGED
@@ -1 +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;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("./element-factory-CgP5yEab.cjs"),n=(e,t,r)=>l.elementFactory(e,t,r);exports.styledClient=n;
@@ -1,3 +1,3 @@
1
- import { GeneratorProps } from '../../core/src/generator';
2
- import { Tag } from '../../core/src/types';
3
- 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>>;
1
+ import { StyledGeneratorClientProps } from '@salty-css/core/generators';
2
+ import { Tag } from '@salty-css/core/types';
3
+ 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 CHANGED
@@ -1,7 +1,5 @@
1
- import { e as r } from "./element-factory-uEk4VrqP.js";
2
- const m = (e, t, n = "", o) => r(e, t, o, {
3
- "data-component-name": n
4
- });
1
+ import { e as o } from "./element-factory-Ccd9WJOa.js";
2
+ const l = (e, t, r) => o(e, t, r);
5
3
  export {
6
- m as styledClient
4
+ l as styledClient
7
5
  };
package/styled.cjs CHANGED
@@ -1 +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;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("@salty-css/core/generators"),s=require("./element-factory-CgP5yEab.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.d.ts CHANGED
@@ -1,5 +1,5 @@
1
- import { AllHTMLAttributes, ReactDOM, ReactNode } from 'react';
2
- import { Tag, StyledComponentProps, CreateElementProps, VariantProps, ParentComponentProps, StyledParams, ValueProps } from '../../core/src/types';
3
- 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 ? {
4
- ref: any;
5
- } : 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;
1
+ import { AllHTMLAttributes, JSX, ReactNode } from 'react';
2
+ import { Tag, StyledComponentProps, CreateElementProps, VariantProps, ParentComponentProps, StyledParams, ValueProps, Merge } from '@salty-css/core/types';
3
+ 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 ? {
4
+ ref?: any;
5
+ } : 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 CHANGED
@@ -1,70 +1,13 @@
1
- var m = Object.defineProperty;
2
- var h = (e, t, s) => t in e ? m(e, t, { enumerable: !0, configurable: !0, writable: !0, value: s }) : e[t] = s;
3
- var c = (e, t, s) => h(e, typeof t != "symbol" ? t + "" : t, s);
4
- import { t as l, p as u } from "./parse-styles-T74HIH4_.js";
5
- import { e as g } from "./element-factory-uEk4VrqP.js";
6
- const y = (e) => Object.keys(e);
7
- class f {
8
- constructor(t, s) {
9
- c(this, "_callerName");
10
- c(this, "_context");
11
- this.tagName = t, this.params = s;
12
- }
13
- get hash() {
14
- return l(this.params.base || this.params);
15
- }
16
- get priority() {
17
- var t;
18
- return typeof this.tagName == "function" || typeof this.tagName == "object" ? (((t = this.tagName.generator) == null ? void 0 : t.priority) || 0) + 1 : 0;
19
- }
20
- get classNames() {
21
- const t = [this.hash], { className: s } = this.params;
22
- return s && t.push(s), t.join(" ");
23
- }
24
- get cssClassName() {
25
- return this.hash;
26
- }
27
- get cssDisplayNameVar() {
28
- return `--${this.hash}-display-name: ${this._callerName};`;
29
- }
30
- get templateKeys() {
31
- var t;
32
- return (t = this._context) != null && t.config.templates ? y(this._context.config.templates) : [];
33
- }
34
- get css() {
35
- var r;
36
- const { base: t = {}, variants: s = {}, compoundVariants: a = [] } = this.params, n = { ...t, variants: s, compoundVariants: a };
37
- return u(n, `.${this.cssClassName}`, this.priority, (r = this._context) == null ? void 0 : r.config);
38
- }
39
- get props() {
40
- const { element: t } = this.params, s = this.params.variants ? Object.keys(this.params.variants).map((r) => {
41
- var i;
42
- const o = (i = this.params.defaultVariants) == null ? void 0 : i[r];
43
- return o !== void 0 ? `${r}=${String(o)}` : r;
44
- }) : void 0, a = /* @__PURE__ */ new Set([]), n = /\{props\.([\w\d]+)\}/gi.exec(JSON.stringify(this.params.base));
45
- return n && n.forEach((r, o, i) => {
46
- const p = i.at(1);
47
- p && a.add(p);
48
- }), {
49
- element: t,
50
- variantKeys: s,
51
- propValueKeys: [...a]
52
- };
53
- }
54
- _withBuildContext(t) {
55
- this._context = t;
56
- const { name: s, config: a } = t;
57
- return this._callerName = s, this;
58
- }
59
- }
60
- const _ = (e, t) => {
61
- const s = new f(e, t), a = g(e, s.cssClassName, s.props, {
1
+ import { StyledGenerator as r } from "@salty-css/core/generators";
2
+ import { e as s } from "./element-factory-Ccd9WJOa.js";
3
+ const i = (t, o) => {
4
+ const e = new r(t, o), n = s(t, e.cssClassName, e.clientProps, {
62
5
  "data-unoptimized-client-component": !0
63
6
  });
64
- return Object.assign(a, {
65
- generator: s
66
- }), a;
7
+ return Object.assign(n, {
8
+ generator: e
9
+ }), n;
67
10
  };
68
11
  export {
69
- _ as styled
12
+ i as styled
70
13
  };
@@ -1 +0,0 @@
1
- "use strict";function r(e){return e?typeof e!="string"?r(String(e)):e.replace(/\s/g,"-").replace(/[A-Z](?:(?=[^A-Z])|[A-Z]*(?=[A-Z][^A-Z]|$))/g,(n,t)=>(t>0?"-":"")+n.toLowerCase()):""}exports.dashCase=r;
@@ -1,6 +0,0 @@
1
- function t(e) {
2
- return e ? typeof e != "string" ? t(String(e)) : e.replace(/\s/g, "-").replace(/[A-Z](?:(?=[^A-Z])|[A-Z]*(?=[A-Z][^A-Z]|$))/g, (r, n) => (n > 0 ? "-" : "") + r.toLowerCase()) : "";
3
- }
4
- export {
5
- t as d
6
- };
@@ -1 +0,0 @@
1
- "use strict";const K=require("react"),C=require("./dash-case-B_odFlTl.cjs");function $(t){var n,s,e="";if(typeof t=="string"||typeof t=="number")e+=t;else if(typeof t=="object")if(Array.isArray(t)){var c=t.length;for(n=0;n<c;n++)t[n]&&(s=$(t[n]))&&(e&&(e+=" "),e+=s)}else for(s in t)t[s]&&(e&&(e+=" "),e+=s);return e}function V(){for(var t,n,s=0,e="",c=arguments.length;s<c;s++)(t=arguments[s])&&(n=$(t))&&(e&&(e+=" "),e+=n);return e}const O=["passVariantProps"],N=(t,n,s,e)=>{const c=({extend:f=t,element:b=s.element,className:g="",children:v,passVariantProps:S,_vks:r=new Set,...l},w)=>{const i={passVariantProps:S};e&&Object.assign(i,e),l&&Object.assign(i,l);const u=new Set(g.split(" ")),y=typeof f=="function"||typeof f=="object",m=y&&"isStyled"in f,j=y?f:b||f;if(!j)throw new Error("No element provided");s.propValueKeys&&(i.style||(i.style={}),s.propValueKeys.forEach(a=>{const o=`css-${a}`,d=l[o];if(d===void 0)return;const p=`--props-${C.dashCase(a)}`;i.style[p]=d,r&&r.add(o)})),s.variantKeys&&s.variantKeys.forEach(a=>{const[o,d]=a.split("=");l[o]!==void 0?(u.add(`${o}-${l[o]}`),r&&r.add(o)):d!==void 0&&u.add(`${o}-${d}`)}),r&&(!y||!m&&!S)?r.forEach(a=>delete i[a]):m&&Object.assign(i,{_vks:r}),m||O.forEach(a=>delete i[a]);const E=V(n,...u);return K.createElement(j,{element:y?b:void 0,className:E,ref:w,...i},v)},h=K.forwardRef(c);return Object.assign(h,{isStyled:!0,className:n,toString:()=>`.${n}`}),h};exports.elementFactory=N;
@@ -1,59 +0,0 @@
1
- import { forwardRef as E, createElement as V } from "react";
2
- import { d as C } from "./dash-case-CGJ_UIZz.js";
3
- function j(t) {
4
- var n, s, e = "";
5
- if (typeof t == "string" || typeof t == "number") e += t;
6
- else if (typeof t == "object") if (Array.isArray(t)) {
7
- var d = t.length;
8
- for (n = 0; n < d; n++) t[n] && (s = j(t[n])) && (e && (e += " "), e += s);
9
- } else for (s in t) t[s] && (e && (e += " "), e += s);
10
- return e;
11
- }
12
- function O() {
13
- for (var t, n, s = 0, e = "", d = arguments.length; s < d; s++) (t = arguments[s]) && (n = j(t)) && (e && (e += " "), e += n);
14
- return e;
15
- }
16
- const N = ["passVariantProps"], q = (t, n, s, e) => {
17
- const h = E(({
18
- extend: r = t,
19
- element: b = s.element,
20
- className: K = "",
21
- children: $,
22
- passVariantProps: p,
23
- _vks: f = /* @__PURE__ */ new Set(),
24
- ...c
25
- }, g) => {
26
- const i = { passVariantProps: p };
27
- e && Object.assign(i, e), c && Object.assign(i, c);
28
- const u = new Set(K.split(" ")), y = typeof r == "function" || typeof r == "object", m = y && "isStyled" in r, S = y ? r : b || r;
29
- if (!S) throw new Error("No element provided");
30
- s.propValueKeys && (i.style || (i.style = {}), s.propValueKeys.forEach((o) => {
31
- const a = `css-${o}`, l = c[a];
32
- if (l === void 0) return;
33
- const w = `--props-${C(o)}`;
34
- i.style[w] = l, f && f.add(a);
35
- })), s.variantKeys && s.variantKeys.forEach((o) => {
36
- const [a, l] = o.split("=");
37
- c[a] !== void 0 ? (u.add(`${a}-${c[a]}`), f && f.add(a)) : l !== void 0 && u.add(`${a}-${l}`);
38
- }), f && (!y || !m && !p) ? f.forEach((o) => delete i[o]) : m && Object.assign(i, { _vks: f }), m || N.forEach((o) => delete i[o]);
39
- const v = O(n, ...u);
40
- return V(
41
- S,
42
- {
43
- element: y ? b : void 0,
44
- className: v,
45
- ref: g,
46
- ...i
47
- },
48
- $
49
- );
50
- });
51
- return Object.assign(h, {
52
- isStyled: !0,
53
- className: n,
54
- toString: () => `.${n}`
55
- }), h;
56
- };
57
- export {
58
- q as e
59
- };
@@ -1,7 +0,0 @@
1
- "use strict";const V=require("./dash-case-B_odFlTl.cjs"),E=r=>String.fromCharCode(r+(r>25?39:97)),P=(r,s)=>{let t="",n;for(n=Math.abs(r);n>52;n=n/52|0)t=E(n%52)+t;return t=E(n%52)+t,t.length<s?t=t.padStart(s,"a"):t.length>s&&(t=t.slice(-s)),t},T=(r,s)=>{let t=s.length;for(;t;)r=r*33^s.charCodeAt(--t);return r},W=(r,s=3)=>{const t=T(5381,JSON.stringify(r))>>>0;return P(t,s)},q=(r,s)=>{if(typeof r!="string")return{result:r};if(!s)return{result:r};const t=[];return Object.values(s).forEach(n=>{const{pattern:p,transform:$}=n;r=r.replace(p,d=>{const{value:i,css:l}=$(d);return l&&t.push(l),i})}),{result:r,additionalCss:t}},M=r=>typeof r!="string"?{result:r}:/\{[^{}]+\}/g.test(r)?{result:r.replace(/\{([^{}]+)\}/g,(...n)=>`var(--${V.dashCase(n[1].replaceAll(".","-"))})`)}:{result:r},a=(r,s,t,n)=>{if(!r)return"";const p=[],$=Object.entries(r).reduce((i,[l,e])=>{const o=l.trim();if(typeof e=="function"&&(e=e()),typeof e=="object"){if(!e)return i;if(o==="variants")return Object.entries(e).forEach(([f,c])=>{c&&Object.entries(c).forEach(([m,b])=>{if(!b)return;const S=`${s}.${f}-${m}`,j=a(b,S,t);p.push(j)})}),i;if(o==="defaultVariants")return i;if(o==="compoundVariants")return e.forEach(f=>{const{css:c,...m}=f,b=Object.entries(m).reduce((j,[H,N])=>`${j}.${H}-${N}`,s),S=a(c,b,t);p.push(S)}),i;if(o.startsWith("@")){const f=a(e,s,t),c=`${o} {
2
- ${f.replace(`
3
- `,`
4
- `)}
5
- }`;return p.push(c),i}const u=l.includes("&")?o.replace("&",s):o.startsWith(":")?`${s}${o}`:`${s} ${o}`,h=a(e,u,t);return p.push(h),i}if(n!=null&&n.templates&&n.templates[o]){const h=e.split(".").reduce((c,m)=>c[m],n.templates[o]),f=a(h,"");return`${i}${f}`}const g=o.startsWith("-")?o:V.dashCase(o),y=(u,h=";")=>i=`${i}${u}${h}`,O=u=>y(`${g}:${u}`);if(typeof e=="number")return O(e);if(typeof e!="string")if("toString"in e)e=e.toString();else return i;const{modifiers:A}=n||{},k=function*(){yield M(e),yield q(e,A)}();for(const{result:u,additionalCss:h=[]}of k)e=u,h.forEach(f=>{const c=a(f,"");y(c,"")});return O(e)},"");if(!$)return p.join(`
6
- `);if(!s)return $;let d="";return t!==void 0?d=`@layer l${t} { ${s} { ${$} } }`:d=`${s} { ${$} }`,[d,...p].join(`
7
- `)};exports.parseStyles=a;exports.toHash=W;
@@ -1,85 +0,0 @@
1
- import { d as V } from "./dash-case-CGJ_UIZz.js";
2
- const E = (r) => String.fromCharCode(r + (r > 25 ? 39 : 97)), T = (r, s) => {
3
- let t = "", n;
4
- for (n = Math.abs(r); n > 52; n = n / 52 | 0) t = E(n % 52) + t;
5
- return t = E(n % 52) + t, t.length < s ? t = t.padStart(s, "a") : t.length > s && (t = t.slice(-s)), t;
6
- }, W = (r, s) => {
7
- let t = s.length;
8
- for (; t; ) r = r * 33 ^ s.charCodeAt(--t);
9
- return r;
10
- }, x = (r, s = 3) => {
11
- const t = W(5381, JSON.stringify(r)) >>> 0;
12
- return T(t, s);
13
- }, H = (r, s) => {
14
- if (typeof r != "string") return { result: r };
15
- if (!s) return { result: r };
16
- const t = [];
17
- return Object.values(s).forEach((n) => {
18
- const { pattern: c, transform: a } = n;
19
- r = r.replace(c, (d) => {
20
- const { value: i, css: m } = a(d);
21
- return m && t.push(m), i;
22
- });
23
- }), { result: r, additionalCss: t };
24
- }, M = (r) => typeof r != "string" ? { result: r } : /\{[^{}]+\}/g.test(r) ? { result: r.replace(/\{([^{}]+)\}/g, (...n) => `var(--${V(n[1].replaceAll(".", "-"))})`) } : { result: r }, $ = (r, s, t, n) => {
25
- if (!r) return "";
26
- const c = [], a = Object.entries(r).reduce((i, [m, e]) => {
27
- const o = m.trim();
28
- if (typeof e == "function" && (e = e()), typeof e == "object") {
29
- if (!e) return i;
30
- if (o === "variants")
31
- return Object.entries(e).forEach(([f, p]) => {
32
- p && Object.entries(p).forEach(([l, b]) => {
33
- if (!b) return;
34
- const j = `${s}.${f}-${l}`, S = $(b, j, t);
35
- c.push(S);
36
- });
37
- }), i;
38
- if (o === "defaultVariants")
39
- return i;
40
- if (o === "compoundVariants")
41
- return e.forEach((f) => {
42
- const { css: p, ...l } = f, b = Object.entries(l).reduce((S, [N, P]) => `${S}.${N}-${P}`, s), j = $(p, b, t);
43
- c.push(j);
44
- }), i;
45
- if (o.startsWith("@")) {
46
- const f = $(e, s, t), p = `${o} {
47
- ${f.replace(`
48
- `, `
49
- `)}
50
- }`;
51
- return c.push(p), i;
52
- }
53
- const u = m.includes("&") ? o.replace("&", s) : o.startsWith(":") ? `${s}${o}` : `${s} ${o}`, h = $(e, u, t);
54
- return c.push(h), i;
55
- }
56
- if (n != null && n.templates && n.templates[o]) {
57
- const h = e.split(".").reduce((p, l) => p[l], n.templates[o]), f = $(h, "");
58
- return `${i}${f}`;
59
- }
60
- const g = o.startsWith("-") ? o : V(o), y = (u, h = ";") => i = `${i}${u}${h}`, O = (u) => y(`${g}:${u}`);
61
- if (typeof e == "number") return O(e);
62
- if (typeof e != "string")
63
- if ("toString" in e) e = e.toString();
64
- else return i;
65
- const { modifiers: A } = n || {}, k = function* () {
66
- yield M(e), yield H(e, A);
67
- }();
68
- for (const { result: u, additionalCss: h = [] } of k)
69
- e = u, h.forEach((f) => {
70
- const p = $(f, "");
71
- y(p, "");
72
- });
73
- return O(e);
74
- }, "");
75
- if (!a) return c.join(`
76
- `);
77
- if (!s) return a;
78
- let d = "";
79
- return t !== void 0 ? d = `@layer l${t} { ${s} { ${a} } }` : d = `${s} { ${a} }`, [d, ...c].join(`
80
- `);
81
- };
82
- export {
83
- $ as p,
84
- x as t
85
- };