@salty-css/react 0.0.1-alpha.1 → 0.0.1-alpha.3

package/dist/README.md

@@ -0,0 +1,107 @@
+# Salty Css
+
+## Basic usage example with Button
+
+### Initial requirements
+
+1. Add `saltyPlugin` to vite or webpack config from `@salty-css/vite` or `@salty-css/webpack`
+2. Create `salty-config.ts` to the root of your project
+3. Import global styles to any regular .css file from `saltygen/index.css` (does not exist during first run, cli command coming later)
+4. Create salty components with styled only inside files that end with `.css.ts`, `.salty.ts` `.styled.ts` or `.styles.ts`
+
+### Code examples
+
+**Salty config**
+
+```tsx
+import { defineConfig } from '@salty-css/core/config';
+
+export const config = defineConfig({
+  variables: {
+    colors: {
+      brand: '#111',
+      highlight: 'yellow',
+    },
+  },
+  global: {
+    html: {
+      backgroundColor: '#f8f8f8',
+    },
+  },
+});
+```
+
+**Your React component file**
+
+```tsx
+import { Wrapper } from '../components/wrapper/wrapper.css';
+import { Button } from '../components/button/button.css';
+
+export const IndexPage = () => {
+  return (
+    <Wrapper>
+      <Button variant="solid" onClick={() => alert('It is a button.')}>
+        Outlined
+      </Button>
+    </Wrapper>
+  );
+};
+```
+
+**Wrapper** (`components/wrapper/wrapper.css.ts`)
+
+```tsx
+import { styled } from '@salty-css/react/styled';
+
+export const Wrapper = styled('div', {
+  display: 'block',
+  padding: '2vw',
+});
+```
+
+**Button** (`components/button/button.css.ts`)
+
+```tsx
+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',
+  },
+  variants: {
+    variant: {
+      outlined: {
+        // same as default styles
+      },
+      solid: {
+        '&:not(:hover)': {
+          background: 'black',
+          borderColor: 'black',
+          color: 'white',
+        },
+        '&:hover': {
+          background: 'transparent',
+          borderColor: 'currentColor',
+          color: 'currentColor',
+        },
+      },
+    },
+  },
+});
+```
+
+More examples coming soon

package/dist/element-factory-CHdv47Y_.js

@@ -0,0 +1,52 @@
+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/dist/element-factory-DvBlAL2I.cjs

@@ -0,0 +1 @@
+"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;

package/dist/element-factory.d.ts

@@ -0,0 +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>>;

package/dist/keyframes.cjs

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

package/dist/keyframes.d.ts

@@ -0,0 +1,22 @@
+import { CssStyles, StyleValue } from '../../core/src/types';
+type KeyframeKeys = number | 'from' | 'to' | `${number}%`;
+type Keyframes = {
+    [key in KeyframeKeys]: CssStyles;
+};
+interface KeyframesConfig {
+    animationName?: string;
+    appendInitialStyles?: boolean;
+    params?: KeyframesParams;
+}
+interface KeyframesParams {
+    duration?: string;
+    delay?: string;
+    iterationCount?: string | number;
+    easing?: StyleValue<'animationTimingFunction'>;
+    direction?: StyleValue<'animationDirection'>;
+    fillMode?: StyleValue<'animationFillMode'>;
+    playState?: StyleValue<'animationPlayState'>;
+}
+type KeyframesProps = Keyframes & KeyframesConfig;
+export declare const keyframes: ({ animationName: _name, params: _params, appendInitialStyles, ...keyframes }: KeyframesProps) => (params?: KeyframesParams) => string;
+export {};

package/dist/keyframes.js

@@ -0,0 +1,30 @@
+import { t as b, p as c } from "./parse-styles-BRv2UFN0.js";
+const C = ({ animationName: m, params: u, appendInitialStyles: f, ...t }) => {
+  const s = m || b(t), e = (r = {}) => {
+    const {
+      duration: n = "500ms",
+      easing: o = "ease-in-out",
+      delay: a = "0s",
+      iterationCount: i = "1",
+      direction: d = "normal",
+      fillMode: y = "forwards",
+      playState: S = "running"
+    } = { ...u, ...r }, $ = `${s} ${n} ${o} ${a} ${i} ${d} ${y} ${S}`;
+    if (!f) return $;
+    const g = c(t.from || t["0%"], "");
+    return `${$};${g}`;
+  }, l = Object.entries(t).reduce((r, [n, o]) => {
+    const a = c(o, ""), i = typeof n == "number" ? `${n}%` : n;
+    return `${r}${i}{${a}}`;
+  }, ""), p = `@keyframes ${s} {${l}}`;
+  return Object.assign(e, {
+    toString: e,
+    isKeyframes: !0,
+    animationName: s,
+    css: p,
+    keyframes: t
+  }), e;
+};
+export {
+  C as keyframes
+};

package/dist/media.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});class n{constructor(e="@media"){this.base=e,this.next=t=>{const s=new String(t);return Object.assign(s,{get and(){return new n(`${t} and`)},get or(){return new n(`${t},`)}}),s}}custom(e){return this.next(`${this.base} ${e}`)}minWidth(e){const t=typeof e=="number"?`${e}px`:e,s=`${this.base} (min-width: ${t})`;return this.next(s)}maxWidth(e){const t=typeof e=="number"?`${e}px`:e,s=`${this.base} (max-width: ${t})`;return this.next(s)}minHeight(e){const t=typeof e=="number"?`${e}px`:e,s=`${this.base} (min-height: ${t})`;return this.next(s)}maxHeight(e){const t=typeof e=="number"?`${e}px`:e,s=`${this.base} (max-height: ${t})`;return this.next(s)}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 r=new n;exports.MediaQueryFactory=n;exports.media=r;

package/dist/media.d.ts

@@ -0,0 +1,71 @@
+import { OrNumber, OrString } from '../../core/src/types/util-types';
+export declare class MediaQueryFactory {
+    private base;
+    constructor(base?: string);
+    private next;
+    custom(value: string): string & {
+        and: MediaQueryFactory;
+        or: MediaQueryFactory;
+    };
+    minWidth(width: OrString | OrNumber): string & {
+        and: MediaQueryFactory;
+        or: MediaQueryFactory;
+    };
+    maxWidth(width: OrString | OrNumber): string & {
+        and: MediaQueryFactory;
+        or: MediaQueryFactory;
+    };
+    minHeight(height: OrString | OrNumber): string & {
+        and: MediaQueryFactory;
+        or: MediaQueryFactory;
+    };
+    maxHeight(height: OrString | OrNumber): string & {
+        and: MediaQueryFactory;
+        or: MediaQueryFactory;
+    };
+    get portrait(): string & {
+        and: MediaQueryFactory;
+        or: MediaQueryFactory;
+    };
+    get landscape(): string & {
+        and: MediaQueryFactory;
+        or: MediaQueryFactory;
+    };
+    prefersColorScheme(scheme: 'dark' | 'light' | OrString): string & {
+        and: MediaQueryFactory;
+        or: MediaQueryFactory;
+    };
+    get dark(): string & {
+        and: MediaQueryFactory;
+        or: MediaQueryFactory;
+    };
+    get light(): string & {
+        and: MediaQueryFactory;
+        or: MediaQueryFactory;
+    };
+    get print(): string & {
+        and: MediaQueryFactory;
+        or: MediaQueryFactory;
+    };
+    get screen(): string & {
+        and: MediaQueryFactory;
+        or: MediaQueryFactory;
+    };
+    get speech(): string & {
+        and: MediaQueryFactory;
+        or: MediaQueryFactory;
+    };
+    get all(): string & {
+        and: MediaQueryFactory;
+        or: MediaQueryFactory;
+    };
+    get not(): string & {
+        and: MediaQueryFactory;
+        or: MediaQueryFactory;
+    };
+    get reducedMotion(): string & {
+        and: MediaQueryFactory;
+        or: MediaQueryFactory;
+    };
+}
+export declare const media: MediaQueryFactory;

package/dist/media.js

@@ -0,0 +1,81 @@
+class n {
+  constructor(t = "@media") {
+    this.base = t, this.next = (e) => {
+      const s = new String(e);
+      return Object.assign(s, {
+        get and() {
+          return new n(`${e} and`);
+        },
+        get or() {
+          return new n(`${e},`);
+        }
+      }), s;
+    };
+  }
+  custom(t) {
+    return this.next(`${this.base} ${t}`);
+  }
+  minWidth(t) {
+    const e = typeof t == "number" ? `${t}px` : t, s = `${this.base} (min-width: ${e})`;
+    return this.next(s);
+  }
+  maxWidth(t) {
+    const e = typeof t == "number" ? `${t}px` : t, s = `${this.base} (max-width: ${e})`;
+    return this.next(s);
+  }
+  minHeight(t) {
+    const e = typeof t == "number" ? `${t}px` : t, s = `${this.base} (min-height: ${e})`;
+    return this.next(s);
+  }
+  maxHeight(t) {
+    const e = typeof t == "number" ? `${t}px` : t, s = `${this.base} (max-height: ${e})`;
+    return this.next(s);
+  }
+  get portrait() {
+    const t = `${this.base} (orientation: portrait)`;
+    return this.next(t);
+  }
+  get landscape() {
+    const t = `${this.base} (orientation: landscape)`;
+    return this.next(t);
+  }
+  prefersColorScheme(t) {
+    const e = `${this.base} (prefers-color-scheme: ${t})`;
+    return this.next(e);
+  }
+  get dark() {
+    return this.prefersColorScheme("dark");
+  }
+  get light() {
+    return this.prefersColorScheme("light");
+  }
+  get print() {
+    const t = `${this.base} print`;
+    return this.next(t);
+  }
+  get screen() {
+    const t = `${this.base} screen`;
+    return this.next(t);
+  }
+  get speech() {
+    const t = `${this.base} speech`;
+    return this.next(t);
+  }
+  get all() {
+    const t = `${this.base} all`;
+    return this.next(t);
+  }
+  get not() {
+    const t = `${this.base} not`;
+    return this.next(t);
+  }
+  get reducedMotion() {
+    const t = `${this.base} (prefers-reduced-motion: reduce)`;
+    return this.next(t);
+  }
+}
+const r = new n();
+export {
+  n as MediaQueryFactory,
+  r as media
+};

package/dist/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@salty-css/react",
+  "version": "0.0.1-alpha.3",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "typings": "./dist/index.d.ts",
+  "type": "module",
+  "license": "MIT",
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "homepage": "https://github.com/margarita-form/salty-css",
+  "bugs": {
+    "url": "https://github.com/margarita-form/salty-css/issues"
+  },
+  "files": [
+    "dist",
+    "!**/*.tsbuildinfo"
+  ],
+  "nx": {
+    "name": "react"
+  },
+  "exports": {
+    "./styled": {
+      "import": "./styled.js",
+      "require": "./styled.cjs"
+    },
+    "./styled-client": {
+      "import": "./styled-client.js",
+      "require": "./styled-client.cjs"
+    },
+    "./keyframes": {
+      "import": "./keyframes.js",
+      "require": "./keyframes.cjs"
+    },
+    "./media": {
+      "import": "./media.js",
+      "require": "./media.cjs"
+    }
+  }
+}

package/dist/parse-styles-BRv2UFN0.js

@@ -0,0 +1,87 @@
+const j = (t) => String.fromCharCode(t + (t > 25 ? 39 : 97)), P = (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;
+}, T = (t, e) => {
+  let r = e.length;
+  for (; r; ) t = t * 33 ^ e.charCodeAt(--r);
+  return t;
+}, M = (t, e = 3) => {
+  const r = T(5381, JSON.stringify(t)) >>> 0;
+  return P(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: h } = n;
+    t = t.replace(c, (d) => {
+      const { value: i, css: l } = h(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 }, $ = (t, e, r, n) => {
+  const c = [], h = 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}`, A = $(b, y, r);
+            c.push(A);
+          });
+        }), i;
+      if (o === "defaultVariants")
+        return i;
+      if (o === "compoundVariants")
+        return s.forEach((f) => {
+          const { css: p, ...m } = f, b = Object.entries(m).reduce((A, [k, N]) => `${A}.${k}-${N}`, e), y = $(p, b, r);
+          c.push(y);
+        }), i;
+      if (o.startsWith("@")) {
+        const f = $(s, e, r), p = `${o} {
+ ${f.replace(`
+`, `
+ `)}
+}`;
+        return c.push(p), i;
+      }
+      const u = l.includes("&") ? o.replace("&", e) : o.startsWith(":") ? `${e}${o}` : `${e} ${o}`, a = $(s, u, r);
+      return c.push(a), i;
+    }
+    if (n != null && n.templates && n.templates[o]) {
+      const a = s.split(".").reduce((p, m) => p[m], n.templates[o]), f = $(a, "");
+      return `${i}${f}`;
+    }
+    const E = o.startsWith("-") ? o : O(o), S = (u, a = ";") => i = `${i}${u}${a}`, g = (u) => S(`${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: a = [] } of Z)
+      s = u, a.forEach((f) => {
+        const p = $(f, "");
+        S(p, "");
+      });
+    return g(s);
+  }, "");
+  if (!h) return c.join(`
+`);
+  if (!e) return h;
+  let d = "";
+  return r !== void 0 ? d = `@layer l${r} { ${e} { ${h} } }` : d = `${e} { ${h} }`, [d, ...c].join(`
+`);
+};
+export {
+  $ as p,
+  M as t
+};

package/dist/parse-styles-PkK9Yzyn.cjs

@@ -0,0 +1,7 @@
+"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} {
+ ${f.replace(`
+`,`
+ `)}
+}`;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(`
+`);if(!e)return $;let d="";return r!==void 0?d=`@layer l${r} { ${e} { ${$} } }`:d=`${e} { ${$} }`,[d,...c].join(`
+`)};exports.parseStyles=a;exports.toHash=T;

package/dist/styled-client.cjs

@@ -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

@@ -0,0 +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>>;

package/dist/styled-client.js

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

package/dist/styled.cjs

@@ -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

@@ -0,0 +1,3 @@
+import { HTMLAttributes, ReactDOM, ReactNode } from 'react';
+import { Tag, StyledComponentProps, GeneratorOptions, CreateElementProps, VariantProps, ParentComponentProps, StyledParams } from '../../core/src/types';
+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

@@ -0,0 +1,60 @@
+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;
+  }
+  get hash() {
+    return a(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 ? h(this._context.config.templates) : [];
+  }
+  get css() {
+    var t;
+    return o(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 u = (r, t, s = {}) => {
+  const e = new l(r, t, s), n = c(r, e.cssClassName, e.props.element, e.props.variantKeys, {
+    "data-unoptimized-client-component": !0
+  });
+  return Object.assign(n, {
+    generator: e
+  }), n;
+};
+export {
+  u as styled
+};

package/package.json

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