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

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/dash-case-BLMDQfZk.js

@@ -0,0 +1,6 @@
+function t(e) {
+  return e ? typeof e != "string" ? String(e) : e.replace(/\s/g, "-").replace(/[A-Z](?:(?=[^A-Z])|[A-Z]*(?=[A-Z][^A-Z]|$))/g, (r, n) => (n > 0 ? "-" : "") + r.toLowerCase()) : "";
+}
+export {
+  t as d
+};

package/dash-case-BSxADP5V.cjs

@@ -0,0 +1 @@
+"use strict";function t(e){return e?typeof e!="string"?String(e):e.replace(/\s/g,"-").replace(/[A-Z](?:(?=[^A-Z])|[A-Z]*(?=[A-Z][^A-Z]|$))/g,(r,n)=>(n>0?"-":"")+r.toLowerCase()):""}exports.dashCase=t;

package/element-factory-BCMNslLa.cjs

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

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

package/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>) => import('react').ForwardRefExoticComponent<Omit<StyledComponentProps, "ref"> & import('react').RefAttributes<any>>;

package/keyframes.cjs

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

@@ -0,0 +1,30 @@
+import { t as b, p as c } from "./parse-styles-jRJiQaik.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/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/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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salty-css/react",
-  "version": "0.0.1-alpha.1",
+  "version": "0.0.1-alpha.11",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "typings": "./dist/index.d.ts",
@@ -15,10 +15,11 @@
     "url": "https://github.com/margarita-form/salty-css/issues"
   },
   "files": [
-    "dist",
+    "**/*",
     "!**/*.tsbuildinfo"
   ],
   "nx": {
+    "sourceRoot": "libs/react/src",
     "name": "react"
   },
   "exports": {

package/parse-styles-CsUEXYf5.cjs

@@ -0,0 +1,7 @@
+"use strict";const V=require("./dash-case-BSxADP5V.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)=>{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 y=`${s}.${f}-${m}`,S=a(b,y,t);p.push(S)})}),i;if(o==="defaultVariants")return i;if(o==="compoundVariants")return e.forEach(f=>{const{css:c,...m}=f,b=Object.entries(m).reduce((S,[H,N])=>`${S}.${H}-${N}`,s),y=a(c,b,t);p.push(y)}),i;if(o.startsWith("@")){const f=a(e,s,t),c=`${o} {
+ ${f.replace(`
+`,`
+ `)}
+}`;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),j=(u,h=";")=>i=`${i}${u}${h}`,O=u=>j(`${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,"");j(c,"")});return O(e)},"");if(!$)return p.join(`
+`);if(!s)return $;let d="";return t!==void 0?d=`@layer l${t} { ${s} { ${$} } }`:d=`${s} { ${$} }`,[d,...p].join(`
+`)};exports.parseStyles=a;exports.toHash=W;

package/parse-styles-jRJiQaik.js

@@ -0,0 +1,84 @@
+import { d as V } from "./dash-case-BLMDQfZk.js";
+const E = (r) => String.fromCharCode(r + (r > 25 ? 39 : 97)), T = (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;
+}, W = (r, s) => {
+  let t = s.length;
+  for (; t; ) r = r * 33 ^ s.charCodeAt(--t);
+  return r;
+}, x = (r, s = 3) => {
+  const t = W(5381, JSON.stringify(r)) >>> 0;
+  return T(t, s);
+}, H = (r, s) => {
+  if (typeof r != "string") return { result: r };
+  if (!s) return { result: r };
+  const t = [];
+  return Object.values(s).forEach((n) => {
+    const { pattern: c, transform: a } = n;
+    r = r.replace(c, (d) => {
+      const { value: i, css: m } = a(d);
+      return m && t.push(m), i;
+    });
+  }), { result: r, additionalCss: t };
+}, 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) => {
+  const c = [], a = Object.entries(r).reduce((i, [m, e]) => {
+    const o = m.trim();
+    if (typeof e == "function" && (e = e()), typeof e == "object") {
+      if (!e) return i;
+      if (o === "variants")
+        return Object.entries(e).forEach(([f, p]) => {
+          p && Object.entries(p).forEach(([l, b]) => {
+            if (!b) return;
+            const j = `${s}.${f}-${l}`, y = $(b, j, t);
+            c.push(y);
+          });
+        }), i;
+      if (o === "defaultVariants")
+        return i;
+      if (o === "compoundVariants")
+        return e.forEach((f) => {
+          const { css: p, ...l } = f, b = Object.entries(l).reduce((y, [N, P]) => `${y}.${N}-${P}`, s), j = $(p, b, t);
+          c.push(j);
+        }), i;
+      if (o.startsWith("@")) {
+        const f = $(e, s, t), p = `${o} {
+ ${f.replace(`
+`, `
+ `)}
+}`;
+        return c.push(p), i;
+      }
+      const u = m.includes("&") ? o.replace("&", s) : o.startsWith(":") ? `${s}${o}` : `${s} ${o}`, h = $(e, u, t);
+      return c.push(h), i;
+    }
+    if (n != null && n.templates && n.templates[o]) {
+      const h = e.split(".").reduce((p, l) => p[l], n.templates[o]), f = $(h, "");
+      return `${i}${f}`;
+    }
+    const g = o.startsWith("-") ? o : V(o), S = (u, h = ";") => i = `${i}${u}${h}`, O = (u) => S(`${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 H(e, A);
+    }();
+    for (const { result: u, additionalCss: h = [] } of k)
+      e = u, h.forEach((f) => {
+        const p = $(f, "");
+        S(p, "");
+      });
+    return O(e);
+  }, "");
+  if (!a) return c.join(`
+`);
+  if (!s) return a;
+  let d = "";
+  return t !== void 0 ? d = `@layer l${t} { ${s} { ${a} } }` : d = `${s} { ${a} }`, [d, ...c].join(`
+`);
+};
+export {
+  $ as p,
+  x as t
+};

package/styled-client.cjs

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

package/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[]) => import('react').ForwardRefExoticComponent<Omit<import('../../core/src/types').StyledComponentProps, "ref"> & import('react').RefAttributes<any>>;

package/styled-client.js

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

package/styled.cjs

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

package/styled.d.ts

@@ -0,0 +1,5 @@
+import { AllHTMLAttributes, ReactDOM, ReactNode } from 'react';
+import { Tag, StyledComponentProps, CreateElementProps, VariantProps, ParentComponentProps, StyledParams, CssRuntimeValues } 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;

package/styled.js

@@ -0,0 +1,61 @@
+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 {
+  constructor(t, s) {
+    this.tagName = t, this.params = s;
+  }
+  get hash() {
+    return i(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 ? p(this._context.config.templates) : [];
+  }
+  get css() {
+    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.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 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(e, {
+    generator: s
+  }), e;
+};
+export {
+  u as styled
+};