@salty-css/react 0.0.1-alpha.7 → 0.0.1-alpha.9

package/README.md

@@ -54,8 +54,10 @@ export const IndexPage = () => {
 import { styled } from '@salty-css/react/styled';
 
 export const Wrapper = styled('div', {
-  display: 'block',
-  padding: '2vw',
+  base: {
+    display: 'block',
+    padding: '2vw',
+  },
 });
 ```
 
@@ -65,22 +67,24 @@ export const Wrapper = styled('div', {
 import { styled } from '@salty-css/react/styled';
 
 export const Button = styled('button', {
-  display: 'block',
-  padding: `0.6em 1.2em`,
-  border: '1px solid currentColor',
-  background: 'transparent',
-  color: 'currentColor/40',
-  cursor: 'pointer',
-  transition: '200ms',
-  textDecoration: 'none',
-  '&:hover': {
-    background: 'black',
-    borderColor: 'black',
-    color: 'white',
-  },
-  '&:disabled': {
-    opacity: 0.25,
-    pointerEvents: 'none',
+  base: {
+    display: 'block',
+    padding: `0.6em 1.2em`,
+    border: '1px solid currentColor',
+    background: 'transparent',
+    color: 'currentColor/40',
+    cursor: 'pointer',
+    transition: '200ms',
+    textDecoration: 'none',
+    '&:hover': {
+      background: 'black',
+      borderColor: 'black',
+      color: 'white',
+    },
+    '&:disabled': {
+      opacity: 0.25,
+      pointerEvents: 'none',
+    },
   },
   variants: {
     variant: {

package/element-factory-CKZth7Mh.cjs

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

package/element-factory-DjCaPhwl.js

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

package/element-factory.d.ts

@@ -1,2 +1,2 @@
 import { StyledComponentProps, Tag } from '../../core/src/types';
-export declare const elementFactory: (tagName: Tag<any>, _className: string, _element?: string, _variantKeys?: string[], _additionalProps?: Record<PropertyKey, any>) => ({ extend, element, className, children, passVariantProps, _vks, ...props }: StyledComponentProps) => import('react').ReactElement<any, string | import('react').JSXElementConstructor<any>>;
+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>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salty-css/react",
-  "version": "0.0.1-alpha.7",
+  "version": "0.0.1-alpha.9",
   "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-DvBlAL2I.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 l=require("./element-factory-CKZth7Mh.cjs"),a=(e,t,n,o,r)=>l.elementFactory(e,t,o,r,{"data-component-name":n});exports.styledClient=a;

package/styled-client.d.ts

@@ -1,2 +1,2 @@
 import { Tag } from '../../core/src/types';
-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>>;
+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>>;

package/styled-client.js

@@ -1,4 +1,4 @@
-import { e as a } from "./element-factory-CHdv47Y_.js";
+import { e as a } from "./element-factory-DjCaPhwl.js";
 const c = (e, t, n, o, r) => a(e, t, o, r, {
   "data-component-name": n
 });

package/styled.cjs

@@ -1 +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;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("./parse-styles-PkK9Yzyn.cjs"),o=require("./element-factory-CKZth7Mh.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;

package/styled.d.ts

@@ -1,3 +1,5 @@
-import { HTMLAttributes, ReactDOM, ReactNode } from 'react';
-import { Tag, StyledComponentProps, Styles, GeneratorOptions, CreateElementProps, VariantProps, ParentComponentProps } from '../../core/src/types';
-export declare const styled: <const PROPS extends StyledComponentProps, const TAG extends Tag<Required<PROPS>>, const STYLES extends Styles>(tagName: TAG, styles: STYLES, 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;
+import { AllHTMLAttributes, ReactDOM, ReactNode } from 'react';
+import { Tag, StyledComponentProps, CreateElementProps, VariantProps, ParentComponentProps, StyledParams } 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) | 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;

package/styled.js

@@ -1,19 +1,19 @@
-import { t as a, p as o } from "./parse-styles-BRv2UFN0.js";
-import { e as c } from "./element-factory-CHdv47Y_.js";
-const h = (r) => Object.keys(r);
-class l {
-  constructor(t, s, e) {
-    this.tagName = t, this.styles = s, this.options = e;
+import { t as i, p as o } from "./parse-styles-BRv2UFN0.js";
+import { e as c } from "./element-factory-DjCaPhwl.js";
+const p = (a) => Object.keys(a);
+class m {
+  constructor(t, s) {
+    this.tagName = t, this.params = s;
   }
   get hash() {
-    return a(this.styles);
+    return i(this.params.base || this.params);
   }
   get priority() {
     var t;
-    return typeof this.tagName == "function" ? (((t = this.tagName.generator) == null ? void 0 : t.priority) || 0) + 1 : 0;
+    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.options;
+    const t = [this.hash], { className: s } = this.params;
     return s && t.push(s), t.join(" ");
   }
   get cssClassName() {
@@ -24,16 +24,17 @@ class l {
   }
   get templateKeys() {
     var t;
-    return (t = this._context) != null && t.config.templates ? h(this._context.config.templates) : [];
+    return (t = this._context) != null && t.config.templates ? p(this._context.config.templates) : [];
   }
   get css() {
-    var t;
-    return o(this.styles, `.${this.cssClassName}`, this.priority, (t = this._context) == null ? void 0 : t.config);
+    var r;
+    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);
   }
   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];
+    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 {
@@ -47,13 +48,13 @@ class l {
     return this._callerName = s, this;
   }
 }
-const u = (r, t, s = {}) => {
-  const e = new l(r, t, s), n = c(r, e.cssClassName, e.props.element, e.props.variantKeys, {
+const u = (a, t) => {
+  const s = new m(a, t), e = c(a, s.cssClassName, s.props.element, s.props.variantKeys, {
     "data-unoptimized-client-component": !0
   });
-  return Object.assign(n, {
-    generator: e
-  }), n;
+  return Object.assign(e, {
+    generator: s
+  }), e;
 };
 export {
   u as styled

package/element-factory-CHdv47Y_.js

@@ -1,52 +0,0 @@
-import { createElement as w } from "react";
-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 i = t.length;
-    for (n = 0; n < i; 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 = "", i = arguments.length; s < i; s++) (t = arguments[s]) && (n = j(t)) && (e && (e += " "), e += n);
-  return e;
-}
-const C = ["passVariantProps"], A = (t, n, s, e, i) => {
-  const m = ({
-    extend: c = t,
-    element: g = s,
-    className: p = "",
-    children: E,
-    passVariantProps: S,
-    _vks: f = /* @__PURE__ */ new Set(),
-    ...d
-  }) => {
-    const o = { passVariantProps: S };
-    d && Object.assign(o, d), i && Object.assign(o, i);
-    const u = new Set(p.split(" ")), l = typeof c == "function", y = l && "isStyled" in c, b = l ? c : g || c;
-    if (!b) throw new Error("No element provided");
-    e && e.forEach((a) => {
-      const [r, h] = a.split("=");
-      d[r] !== void 0 ? (u.add(`${r}-${d[r]}`), l ? f && f.add(r) : delete o[r]) : h !== void 0 && u.add(`${r}-${h}`);
-    }), f && (!l || !y && !S) ? f.forEach((a) => delete o[a]) : y && Object.assign(o, { _vks: f }), y || C.forEach((a) => delete o[a]);
-    const $ = O(n, ...u);
-    return w(
-      b,
-      {
-        element: l ? g : void 0,
-        className: $,
-        ...o
-      },
-      E
-    );
-  };
-  return Object.assign(m, {
-    isStyled: !0,
-    className: n,
-    toString: () => `.${n}`
-  }), m;
-};
-export {
-  A as e
-};

package/element-factory-DvBlAL2I.cjs

@@ -1 +0,0 @@
-"use strict";const w=require("react");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 o=t.length;for(n=0;n<o;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="",o=arguments.length;s<o;s++)(t=arguments[s])&&(n=j(t))&&(e&&(e+=" "),e+=n);return e}const C=["passVariantProps"],V=(t,n,s,e,o)=>{const g=({extend:a=t,element:m=s,className:E="",children:$,passVariantProps:S,_vks:c=new Set,...d})=>{const i={passVariantProps:S};d&&Object.assign(i,d),o&&Object.assign(i,o);const u=new Set(E.split(" ")),f=typeof a=="function",y=f&&"isStyled"in a,b=f?a:m||a;if(!b)throw new Error("No element provided");e&&e.forEach(l=>{const[r,h]=l.split("=");d[r]!==void 0?(u.add(`${r}-${d[r]}`),f?c&&c.add(r):delete i[r]):h!==void 0&&u.add(`${r}-${h}`)}),c&&(!f||!y&&!S)?c.forEach(l=>delete i[l]):y&&Object.assign(i,{_vks:c}),y||C.forEach(l=>delete i[l]);const p=O(n,...u);return w.createElement(b,{element:f?m:void 0,className:p,...i},$)};return Object.assign(g,{isStyled:!0,className:n,toString:()=>`.${n}`}),g};exports.elementFactory=V;