@salty-css/react 0.0.1-alpha.13 → 0.0.1-alpha.14

package/element-factory-B9SpSdkZ.cjs

@@ -0,0 +1 @@
+"use strict";const K=require("react"),C=require("./dash-case-BSxADP5V.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;

package/element-factory-BQovXL0W.js

@@ -0,0 +1,59 @@
+import { forwardRef as E, createElement as V } from "react";
+import { d as C } from "./dash-case-BLMDQfZk.js";
+function j(t) {
+  var n, s, e = "";
+  if (typeof t == "string" || typeof t == "number") e += t;
+  else if (typeof t == "object") if (Array.isArray(t)) {
+    var d = t.length;
+    for (n = 0; n < d; n++) t[n] && (s = j(t[n])) && (e && (e += " "), e += s);
+  } else for (s in t) t[s] && (e && (e += " "), e += s);
+  return e;
+}
+function O() {
+  for (var t, n, s = 0, e = "", d = arguments.length; s < d; s++) (t = arguments[s]) && (n = j(t)) && (e && (e += " "), e += n);
+  return e;
+}
+const N = ["passVariantProps"], q = (t, n, s, e) => {
+  const h = E(({
+    extend: r = t,
+    element: b = s.element,
+    className: K = "",
+    children: $,
+    passVariantProps: p,
+    _vks: f = /* @__PURE__ */ new Set(),
+    ...c
+  }, g) => {
+    const i = { passVariantProps: p };
+    e && Object.assign(i, e), c && Object.assign(i, c);
+    const u = new Set(K.split(" ")), y = typeof r == "function" || typeof r == "object", m = y && "isStyled" in r, S = y ? r : b || r;
+    if (!S) throw new Error("No element provided");
+    s.propValueKeys && (i.style || (i.style = {}), s.propValueKeys.forEach((o) => {
+      const a = `css-${o}`, l = c[a];
+      if (l === void 0) return;
+      const w = `--props-${C(o)}`;
+      i.style[w] = l, f && f.add(a);
+    })), s.variantKeys && s.variantKeys.forEach((o) => {
+      const [a, l] = o.split("=");
+      c[a] !== void 0 ? (u.add(`${a}-${c[a]}`), f && f.add(a)) : l !== void 0 && u.add(`${a}-${l}`);
+    }), f && (!y || !m && !p) ? f.forEach((o) => delete i[o]) : m && Object.assign(i, { _vks: f }), m || N.forEach((o) => delete i[o]);
+    const v = O(n, ...u);
+    return V(
+      S,
+      {
+        element: y ? b : void 0,
+        className: v,
+        ref: g,
+        ...i
+      },
+      $
+    );
+  });
+  return Object.assign(h, {
+    isStyled: !0,
+    className: n,
+    toString: () => `.${n}`
+  }), h;
+};
+export {
+  q as e
+};

package/element-factory.d.ts

@@ -1,2 +1,3 @@
+import { GeneratorProps } from '../../core/src/generator';
 import { StyledComponentProps, Tag } from '../../core/src/types';
-export declare const elementFactory: (tagName: Tag<any>, _className: string, _element?: string, _variantKeys?: string[], _additionalProps?: Record<PropertyKey, any>) => import('react').ForwardRefExoticComponent<Omit<StyledComponentProps, "ref"> & import('react').RefAttributes<any>>;
+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>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salty-css/react",
-  "version": "0.0.1-alpha.13",
+  "version": "0.0.1-alpha.14",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "typings": "./dist/index.d.ts",

package/styled-client.cjs

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

package/styled-client.d.ts

@@ -1,2 +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, element?: string, variantKeys?: string[]) => import('react').ForwardRefExoticComponent<Omit<import('../../core/src/types').StyledComponentProps, "ref"> & import('react').RefAttributes<any>>;
+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>>;

package/styled-client.js

@@ -1,7 +1,7 @@
-import { e as a } from "./element-factory-CwnAXm6m.js";
-const c = (e, t, n, o, r) => a(e, t, o, r, {
+import { e as r } from "./element-factory-BQovXL0W.js";
+const m = (e, t, n = "", o) => r(e, t, o, {
   "data-component-name": n
 });
 export {
-  c as styledClient
+  m as styledClient
 };

package/styled.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("./parse-styles-CsUEXYf5.cjs"),o=require("./element-factory-BCMNslLa.cjs"),c=a=>Object.keys(a);class p{constructor(t,s){this.tagName=t,this.params=s}get hash(){return i.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?c(this._context.config.templates):[]}get css(){var r;const{base:t={},variants:s={},compoundVariants:e=[]}=this.params,n={...t,variants:s,compoundVariants:e};return i.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(e=>{var r;const n=(r=this.params.defaultVariants)==null?void 0:r[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=(a,t)=>{const s=new p(a,t),e=o.elementFactory(a,s.cssClassName,s.props.element,s.props.variantKeys,{"data-unoptimized-client-component":!0});return Object.assign(e,{generator:s}),e};exports.styled=h;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("./parse-styles-CsUEXYf5.cjs"),h=require("./element-factory-B9SpSdkZ.cjs"),m=r=>Object.keys(r);class l{constructor(t,s){this.tagName=t,this.params=s}get hash(){return p.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?m(this._context.config.templates):[]}get css(){var a;const{base:t={},variants:s={},compoundVariants:e=[]}=this.params,n={...t,variants:s,compoundVariants:e};return p.parseStyles(n,`.${this.cssClassName}`,this.priority,(a=this._context)==null?void 0:a.config)}get props(){const{element:t}=this.params,s=this.params.variants?Object.keys(this.params.variants).map(a=>{var i;const o=(i=this.params.defaultVariants)==null?void 0:i[a];return o!==void 0?`${a}=${String(o)}`:a}):void 0,e=new Set([]),n=/\{props\.([\w\d]+)\}/gi.exec(JSON.stringify(this.params.base));return n&&n.forEach((a,o,i)=>{const c=i.at(1);c&&e.add(c)}),{element:t,variantKeys:s,propValueKeys:[...e]}}_withBuildContext(t){this._context=t;const{name:s,config:e}=t;return this._callerName=s,this}}const u=(r,t)=>{const s=new l(r,t),e=h.elementFactory(r,s.cssClassName,s.props,{"data-unoptimized-client-component":!0});return Object.assign(e,{generator:s}),e};exports.styled=u;

package/styled.d.ts

@@ -1,5 +1,5 @@
 import { AllHTMLAttributes, ReactDOM, ReactNode } from 'react';
-import { Tag, StyledComponentProps, CreateElementProps, VariantProps, ParentComponentProps, StyledParams, CssRuntimeValues } from '../../core/src/types';
+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) | CssRuntimeValues | VariantProps<STYLE_PARAMS> | (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;
+} : 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;

package/styled.js

@@ -1,12 +1,12 @@
-import { t as i, p as o } from "./parse-styles-jRJiQaik.js";
-import { e as c } from "./element-factory-CwnAXm6m.js";
-const p = (a) => Object.keys(a);
-class m {
+import { t as p, p as h } from "./parse-styles-jRJiQaik.js";
+import { e as m } from "./element-factory-BQovXL0W.js";
+const l = (r) => Object.keys(r);
+class u {
   constructor(t, s) {
     this.tagName = t, this.params = s;
   }
   get hash() {
-    return i(this.params.base || this.params);
+    return p(this.params.base || this.params);
   }
   get priority() {
     var t;
@@ -24,22 +24,26 @@ class m {
   }
   get templateKeys() {
     var t;
-    return (t = this._context) != null && t.config.templates ? p(this._context.config.templates) : [];
+    return (t = this._context) != null && t.config.templates ? l(this._context.config.templates) : [];
   }
   get css() {
-    var r;
+    var a;
     const { base: t = {}, variants: s = {}, compoundVariants: e = [] } = this.params, n = { ...t, variants: s, compoundVariants: e };
-    return o(n, `.${this.cssClassName}`, this.priority, (r = this._context) == null ? void 0 : r.config);
+    return h(n, `.${this.cssClassName}`, this.priority, (a = this._context) == null ? void 0 : a.config);
   }
   get props() {
-    const { element: t } = this.params, s = this.params.variants ? Object.keys(this.params.variants).map((e) => {
-      var r;
-      const n = (r = this.params.defaultVariants) == null ? void 0 : r[e];
-      return n !== void 0 ? `${e}=${String(n)}` : e;
-    }) : void 0;
-    return {
+    const { element: t } = this.params, s = this.params.variants ? Object.keys(this.params.variants).map((a) => {
+      var i;
+      const o = (i = this.params.defaultVariants) == null ? void 0 : i[a];
+      return o !== void 0 ? `${a}=${String(o)}` : a;
+    }) : void 0, e = /* @__PURE__ */ new Set([]), n = /\{props\.([\w\d]+)\}/gi.exec(JSON.stringify(this.params.base));
+    return n && n.forEach((a, o, i) => {
+      const c = i.at(1);
+      c && e.add(c);
+    }), {
       element: t,
-      variantKeys: s
+      variantKeys: s,
+      propValueKeys: [...e]
     };
   }
   _withBuildContext(t) {
@@ -48,8 +52,8 @@ class m {
     return this._callerName = s, this;
   }
 }
-const u = (a, t) => {
-  const s = new m(a, t), e = c(a, s.cssClassName, s.props.element, s.props.variantKeys, {
+const f = (r, t) => {
+  const s = new u(r, t), e = m(r, s.cssClassName, s.props, {
     "data-unoptimized-client-component": !0
   });
   return Object.assign(e, {
@@ -57,5 +61,5 @@ const u = (a, t) => {
   }), e;
 };
 export {
-  u as styled
+  f as styled
 };

package/element-factory-BCMNslLa.cjs

@@ -1 +0,0 @@
-"use strict";const w=require("react"),N=require("./dash-case-BSxADP5V.cjs");function E(t){var n,o,e="";if(typeof t=="string"||typeof t=="number")e+=t;else if(typeof t=="object")if(Array.isArray(t)){var f=t.length;for(n=0;n<f;n++)t[n]&&(o=E(t[n]))&&(e&&(e+=" "),e+=o)}else for(o in t)t[o]&&(e&&(e+=" "),e+=o);return e}function q(){for(var t,n,o=0,e="",f=arguments.length;o<f;o++)(t=arguments[o])&&(n=E(t))&&(e&&(e+=" "),e+=n);return e}const A=["passVariantProps"],F=(t,n,o,e,f)=>{const $=({extend:c=t,element:b=o,className:p="",children:C,passVariantProps:j,cssValues:u,_vks:a=new Set,...d},O)=>{const s={passVariantProps:j};f&&Object.assign(s,f),d&&Object.assign(s,d);const g=new Set(p.split(" ")),l=typeof c=="function"||typeof c=="object",m=l&&"isStyled"in c,S=l?c:b||c;if(!S)throw new Error("No element provided");u&&(console.log(u),s.style||(s.style={}),Object.entries(u).forEach(([i,r])=>{const y=`--${N.dashCase(i)}`;s.style[y]=r})),e&&e.forEach(i=>{const[r,y]=i.split("=");d[r]!==void 0?(g.add(`${r}-${d[r]}`),l?a&&a.add(r):delete s[r]):y!==void 0&&g.add(`${r}-${y}`)}),a&&(!l||!m&&!j)?a.forEach(i=>delete s[i]):m&&Object.assign(s,{_vks:a}),m||A.forEach(i=>delete s[i]);const v=q(n,...g);return w.createElement(S,{element:l?b:void 0,className:v,ref:O,...s},C)},h=w.forwardRef($);return Object.assign(h,{isStyled:!0,className:n,toString:()=>`.${n}`}),h};exports.elementFactory=F;

package/element-factory-CwnAXm6m.js

@@ -1,49 +0,0 @@
-import { forwardRef as C, createElement as v } from "react";
-import { d as N } from "./dash-case-BLMDQfZk.js";
-function S(t) {
-  var o, n, e = "";
-  if (typeof t == "string" || typeof t == "number") e += t;
-  else if (typeof t == "object") if (Array.isArray(t)) {
-    var f = t.length;
-    for (o = 0; o < f; o++) t[o] && (n = S(t[o])) && (e && (e += " "), e += n);
-  } else for (n in t) t[n] && (e && (e += " "), e += n);
-  return e;
-}
-function A() {
-  for (var t, o, n = 0, e = "", f = arguments.length; n < f; n++) (t = arguments[n]) && (o = S(t)) && (e && (e += " "), e += o);
-  return e;
-}
-const K = ["passVariantProps"], x = (t, o, n, e, f) => {
-  const b = C(({ extend: a = t, element: h = n, className: w = "", children: E, passVariantProps: j, cssValues: m, _vks: l = /* @__PURE__ */ new Set(), ...d }, $) => {
-    const r = { passVariantProps: j };
-    f && Object.assign(r, f), d && Object.assign(r, d);
-    const g = new Set(w.split(" ")), c = typeof a == "function" || typeof a == "object", u = c && "isStyled" in a, p = c ? a : h || a;
-    if (!p) throw new Error("No element provided");
-    m && (console.log(m), r.style || (r.style = {}), Object.entries(m).forEach(([i, s]) => {
-      const y = `--${N(i)}`;
-      r.style[y] = s;
-    })), e && e.forEach((i) => {
-      const [s, y] = i.split("=");
-      d[s] !== void 0 ? (g.add(`${s}-${d[s]}`), c ? l && l.add(s) : delete r[s]) : y !== void 0 && g.add(`${s}-${y}`);
-    }), l && (!c || !u && !j) ? l.forEach((i) => delete r[i]) : u && Object.assign(r, { _vks: l }), u || K.forEach((i) => delete r[i]);
-    const O = A(o, ...g);
-    return v(
-      p,
-      {
-        element: c ? h : void 0,
-        className: O,
-        ref: $,
-        ...r
-      },
-      E
-    );
-  });
-  return Object.assign(b, {
-    isStyled: !0,
-    className: o,
-    toString: () => `.${o}`
-  }), b;
-};
-export {
-  x as e
-};