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

package/dynamic-styles.d.ts

@@ -0,0 +1,23 @@
+import { BaseStyles } from '@salty-css/core/types';
+import { HTMLAttributes } from 'react';
+/**
+ * Create a hash of the dynamic styles that then can be used as scope.
+ */
+export declare const getDynamicStylesClassName: (styles: BaseStyles) => string;
+/**
+ * Add any dynamic styles to your app with a custom scope.
+ * Note: this works only with server components.
+ */
+export declare const getDynamicStylesCss: (styles: BaseStyles, scope?: string) => Promise<string>;
+type AnyComponent = (...args: any[]) => React.ReactNode;
+interface DynamicStylesProps extends HTMLAttributes<HTMLElement> {
+    styles?: BaseStyles;
+    scope?: string;
+    as?: string | AnyComponent;
+}
+/**
+ * Add any dynamic styles to your app with a custom scope.
+ * Note: this works only with server components.
+ */
+export declare const DynamicStyles: ({ as, scope, styles, ...rest }: DynamicStylesProps) => Promise<import("react/jsx-runtime").JSX.Element | null>;
+export {};

package/dynamic-styles.js

@@ -0,0 +1,29 @@
+import { jsx as s, jsxs as p, Fragment as y } from "react/jsx-runtime";
+import { parseStyles as u } from "@salty-css/core/parsers";
+import { resolveDynamicConfigCache as g } from "@salty-css/core/cache/resolve-dynamic-config-cache";
+import { toHash as d } from "@salty-css/core/util";
+import { c as h } from "./clsx-OuTLNxxd.js";
+import { createElement as C } from "react";
+const w = (t) => d(t), i = async (t, r) => {
+  const n = await g();
+  return (await u(t, r, n)).join(`
+`);
+}, E = async ({ as: t, scope: r, styles: n, ...o }) => {
+  if (t) {
+    const c = (a) => typeof t == "string" ? C(t, a) : t(a);
+    if (!n) return /* @__PURE__ */ s(c, { ...o });
+    const e = w(n), l = await i(n, r || `.${e}`), f = { ...o, className: h(e, o.className) };
+    return /* @__PURE__ */ p(y, { children: [
+      /* @__PURE__ */ s("style", { children: l }),
+      /* @__PURE__ */ s(c, { ...f })
+    ] });
+  }
+  if (!n) return null;
+  const m = await i(n, r);
+  return /* @__PURE__ */ s("style", { children: m });
+};
+export {
+  E as DynamicStyles,
+  w as getDynamicStylesClassName,
+  i as getDynamicStylesCss
+};

package/element-factory-BPI0pGIH.cjs

@@ -0,0 +1 @@
+"use strict";const S=require("react"),C=require("./clsx-C11secjj.cjs"),N=require("@salty-css/core/util"),F=require("@salty-css/core/parsers"),R=["passProps"],v=(E,y="",t={},m)=>{const K=({extend:l=E,element:h=t.element,className:O="",children:$,passProps:f=t.passProps,_vks:c=new Set,...a},w)=>{const s={passProps:f};t.attr&&Object.assign(s,t.attr),m&&Object.assign(s,m),t.defaultProps&&Object.assign(a,t.defaultProps),a&&Object.assign(s,a);const o=new Set([...y.split(" "),...O.split(" ")]),d=typeof l=="function"||typeof l=="object",r=d&&"isStyled"in l,j=d?l:h||l;if(!j)throw new Error("No element provided");const u=s.style||{};s.style||(s.style=u),Object.entries(u).forEach(([e,i])=>{const n=F.parseVariableTokens(i);n&&(u[e]=n.transformed)}),t.propValueKeys&&t.propValueKeys.forEach(e=>{const i=`css-${e}`,n=a[i];if(n===void 0)return;const q=`--props-${N.dashCase(e)}`;u[q]=n,c&&c.add(i)}),t.variantKeys&&t.variantKeys.forEach(e=>{const[i,n]=e.split("=");a[i]!==void 0?(o.add(`${i}-${a[i]}`),c&&c.add(i)):n!==void 0&&o.add(`${i}-${n}`)}),c&&(!d||!r)?c.forEach(e=>{if(!f)return delete s[e];if(f!==!0&&!f.includes(e))return delete s[e]}):r&&Object.assign(s,{_vks:c}),r||R.forEach(e=>delete s[e]);const V=C.clsx(...o);return S.createElement(j,{element:d?h:void 0,className:V,ref:w,...s},$)},b=S.forwardRef(K);return Object.assign(b,{isStyled:!0,className:y,toString:()=>`.${t.hash}`}),b};exports.elementFactory=v;

package/element-factory-D5vMsSwp.js

@@ -0,0 +1,56 @@
+import { forwardRef as V, createElement as C } from "react";
+import { c as N } from "./clsx-OuTLNxxd.js";
+import { dashCase as R } from "@salty-css/core/util";
+import { parseVariableTokens as p } from "@salty-css/core/parsers";
+const q = ["passProps"], B = (S, m = "", t = {}, y) => {
+  const b = V(({
+    extend: c = S,
+    element: h = t.element,
+    className: E = "",
+    children: K,
+    passProps: l = t.passProps,
+    _vks: n = /* @__PURE__ */ new Set(),
+    ...a
+  }, O) => {
+    const s = { passProps: l };
+    t.attr && Object.assign(s, t.attr), y && Object.assign(s, y), t.defaultProps && Object.assign(a, t.defaultProps), a && Object.assign(s, a);
+    const r = /* @__PURE__ */ new Set([...m.split(" "), ...E.split(" ")]), o = typeof c == "function" || typeof c == "object", u = o && "isStyled" in c, j = o ? c : h || c;
+    if (!j) throw new Error("No element provided");
+    const d = s.style || {};
+    s.style || (s.style = d), Object.entries(d).forEach(([e, i]) => {
+      const f = p(i);
+      f && (d[e] = f.transformed);
+    }), t.propValueKeys && t.propValueKeys.forEach((e) => {
+      const i = `css-${e}`, f = a[i];
+      if (f === void 0) return;
+      const w = `--props-${R(e)}`;
+      d[w] = f, n && n.add(i);
+    }), t.variantKeys && t.variantKeys.forEach((e) => {
+      const [i, f] = e.split("=");
+      a[i] !== void 0 ? (r.add(`${i}-${a[i]}`), n && n.add(i)) : f !== void 0 && r.add(`${i}-${f}`);
+    }), n && (!o || !u) ? n.forEach((e) => {
+      if (!l) return delete s[e];
+      if (l !== !0 && !l.includes(e))
+        return delete s[e];
+    }) : u && Object.assign(s, { _vks: n }), u || q.forEach((e) => delete s[e]);
+    const $ = N(...r);
+    return C(
+      j,
+      {
+        element: o ? h : void 0,
+        className: $,
+        ref: O,
+        ...s
+      },
+      K
+    );
+  });
+  return Object.assign(b, {
+    isStyled: !0,
+    className: m,
+    toString: () => `.${t.hash}`
+  }), b;
+};
+export {
+  B as e
+};

package/element-factory.d.ts

@@ -0,0 +1,3 @@
+import { StyledComponentProps, Tag } from '@salty-css/core/types';
+import { StyledGeneratorClientProps } from '@salty-css/core/generators';
+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

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

@@ -0,0 +1 @@
+export * from '@salty-css/core/helpers';

package/helpers.js

@@ -0,0 +1 @@
+export * from "@salty-css/core/helpers";

package/index.cjs

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

@@ -0,0 +1 @@
+export * from '@salty-css/core/css';

package/index.js

@@ -0,0 +1 @@
+export * from "@salty-css/core/css";

package/keyframes.cjs

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

@@ -0,0 +1 @@
+export * from '@salty-css/core/css/keyframes';

package/keyframes.js

@@ -0,0 +1 @@
+export * from "@salty-css/core/css/keyframes";

package/media.cjs

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

@@ -0,0 +1 @@
+export * from '@salty-css/core/css/media';

package/media.js

@@ -0,0 +1 @@
+export * from "@salty-css/core/css/media";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salty-css/react",
-  "version": "0.0.1-alpha.3",
+  "version": "0.0.1-alpha.300",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "typings": "./dist/index.d.ts",
@@ -10,18 +10,28 @@
   "publishConfig": {
     "access": "public"
   },
-  "homepage": "https://github.com/margarita-form/salty-css",
+  "description": "React library for Salty CSS",
+  "homepage": "https://salty-css.dev/",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/margarita-form/salty-css.git"
+  },
   "bugs": {
     "url": "https://github.com/margarita-form/salty-css/issues"
   },
   "files": [
-    "dist",
+    "**/*",
     "!**/*.tsbuildinfo"
   ],
   "nx": {
+    "sourceRoot": "libs/react/src",
     "name": "react"
   },
   "exports": {
+    ".": {
+      "import": "./index.js",
+      "require": "./index.cjs"
+    },
     "./styled": {
       "import": "./styled.js",
       "require": "./styled.cjs"
@@ -30,6 +40,14 @@
       "import": "./styled-client.js",
       "require": "./styled-client.cjs"
     },
+    "./class-name": {
+      "import": "./class-name.js",
+      "require": "./class-name.cjs"
+    },
+    "./class-name-client": {
+      "import": "./class-name-client.js",
+      "require": "./class-name-client.cjs"
+    },
     "./keyframes": {
       "import": "./keyframes.js",
       "require": "./keyframes.cjs"
@@ -37,6 +55,23 @@
     "./media": {
       "import": "./media.js",
       "require": "./media.cjs"
+    },
+    "./config": {
+      "import": "./config.js",
+      "require": "./config.cjs"
+    },
+    "./helpers": {
+      "import": "./helpers.js",
+      "require": "./helpers.cjs"
+    },
+    "./dynamic-styles": {
+      "import": "./dynamic-styles.js",
+      "require": "./dynamic-styles.cjs"
     }
+  },
+  "dependencies": {
+    "@salty-css/core": "^0.0.1-alpha.300",
+    "clsx": ">=2.x",
+    "react": ">=19.x || >=18.3.x"
   }
 }

package/styled-client.cjs

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

package/styled-client.d.ts

@@ -0,0 +1,3 @@
+import { StyledGeneratorClientProps } from '@salty-css/core/generators';
+import { Tag } from '@salty-css/core/types';
+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

@@ -0,0 +1,5 @@
+import { e as o } from "./element-factory-D5vMsSwp.js";
+const l = (e, t, r) => o(e, t, r);
+export {
+  l as styledClient
+};

package/styled.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("@salty-css/core/generators"),s=require("./element-factory-BPI0pGIH.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

@@ -0,0 +1,5 @@
+import { AllHTMLAttributes, JSX, ReactNode } from 'react';
+import { Tag, StyledComponentProps, CreateElementProps, VariantProps, ParentComponentProps, StyledParams, ValueProps, Merge } from '@salty-css/core/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 & (TAG extends string ? {
+    ref?: any;
+} : 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

@@ -0,0 +1,13 @@
+import { StyledGenerator as r } from "@salty-css/core/generators";
+import { e as s } from "./element-factory-D5vMsSwp.js";
+const i = (t, o) => {
+  const e = new r(t, o), n = s(t, e.cssClassName, e.clientProps, {
+    "data-unoptimized-client-component": !0
+  });
+  return Object.assign(n, {
+    generator: e
+  }), n;
+};
+export {
+  i as styled
+};

package/dist/README.md

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

@@ -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/dist/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;

package/dist/element-factory.d.ts

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

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

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

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

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

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