@styleframe/runtime 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Alex Grozav
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/runtime.d.ts

@@ -0,0 +1,93 @@
+import { PrimitiveTokenValue } from '@styleframe/core';
+import { RecipeRuntime } from '@styleframe/core';
+import { RuntimeModifierDeclarationsBlock } from '@styleframe/core';
+import { RuntimeVariantDeclarationsBlock } from '@styleframe/core';
+import { RuntimeVariantDeclarationsValue } from '@styleframe/core';
+import { TokenValue } from '@styleframe/core';
+
+/**
+ * Creates a runtime recipe function that generates utility class strings based on variant props.
+ *
+ * The function:
+ * 1. Applies the recipe name as the base class
+ * 2. Applies all base declarations
+ * 3. Applies variant declarations based on props (with defaultVariants as fallback)
+ * 4. Applies compound variants if all conditions match
+ * 5. Later declarations override earlier ones
+ *
+ * @param name - The recipe name (used as the base class)
+ * @param runtime - The pre-computed RecipeRuntime object with resolved values
+ * @returns A function that accepts variant props and returns a className string
+ *
+ * @example
+ * ```ts
+ * const buttonRuntime: RecipeRuntime = {
+ *     base: {
+ *         borderWidth: "thin",
+ *         borderStyle: "[solid]",
+ *     },
+ *     variants: {
+ *         color: {
+ *             primary: { background: "primary", color: "white" },
+ *             secondary: { background: "secondary", color: "white" },
+ *         },
+ *         size: {
+ *             sm: { padding: "[10px]" },
+ *             md: { padding: "2" },
+ *         },
+ *     },
+ *     defaultVariants: {
+ *         color: "primary",
+ *         size: "md",
+ *     },
+ * };
+ *
+ * const button = createRecipe("button", buttonRuntime);
+ * button({}); // "button _border-width:thin _border-style:[solid] _background:primary _color:white _padding:2"
+ * button({ color: "secondary" }); // "button _border-width:thin _border-style:[solid] _background:secondary _color:white _padding:2"
+ * ```
+ */
+export declare function createRecipe<R extends RecipeRuntime>(name: string, runtime: R): (props?: RecipeVariantProps<R>) => string;
+
+export { PrimitiveTokenValue }
+
+export { RecipeRuntime }
+
+/**
+ * Extracts the variant props type from a RecipeRuntime.
+ * Maps each variant key to its possible option values.
+ *
+ * @example
+ * ```ts
+ * const runtime = {
+ *     variants: {
+ *         color: { primary: {...}, secondary: {...} },
+ *         size: { sm: {...}, md: {...} },
+ *     },
+ * } as const;
+ *
+ * type Props = RecipeVariantProps<typeof runtime>;
+ * // { color?: 'primary' | 'secondary', size?: 'sm' | 'md' }
+ * ```
+ */
+export declare type RecipeVariantProps<R> = R extends {
+    variants?: infer V;
+} ? V extends Record<string, Record<string, unknown> | undefined> ? string extends keyof V ? Record<string, string> : {
+    [K in keyof V]?: V[K] extends Record<string, unknown> ? keyof V[K] & string : never;
+} : Record<string, string> : Record<string, string>;
+
+export { RuntimeModifierDeclarationsBlock }
+
+export { RuntimeVariantDeclarationsBlock }
+
+export { RuntimeVariantDeclarationsValue }
+
+/**
+ * Represents a mapping of variant option names to their runtime declarations.
+ * Used for cleaner type assertions when iterating over variant options.
+ */
+export declare type RuntimeVariantOptions = Record<string, RuntimeVariantDeclarationsBlock | undefined>;
+
+export { TokenValue }
+
+export { }

package/dist/runtime.js

@@ -0,0 +1,57 @@
+function u(s, t, i = []) {
+  const o = s.replace(
+    /[A-Z]/g,
+    (e) => `-${e.toLowerCase()}`
+  ), a = i.length > 0 ? `${i.join(":")}:` : "";
+  return t === !0 ? `_${a}${o}` : `_${a}${o}:${t}`;
+}
+function d(s) {
+  return typeof s == "object" && s !== null;
+}
+function l(s, t) {
+  for (const [i, o] of Object.entries(s))
+    if (d(o)) {
+      const a = i.split(":");
+      for (const [e, c] of Object.entries(o)) {
+        const n = `${a.join(":")}:${e}`;
+        t.set(n, {
+          value: c,
+          modifiers: a
+        });
+      }
+    } else
+      t.set(i, { value: o, modifiers: [] });
+}
+function p(s, t) {
+  return (i = {}) => {
+    const o = /* @__PURE__ */ new Map();
+    if (t.base && l(t.base, o), t.variants)
+      for (const [e, c] of Object.entries(
+        t.variants
+      )) {
+        const n = i[e] ?? t.defaultVariants?.[e], f = n ? c[n] : void 0;
+        f && l(f, o);
+      }
+    if (t.compoundVariants)
+      for (const e of t.compoundVariants) {
+        let c = !0;
+        for (const [n, r] of Object.entries(
+          e.match
+        ))
+          if ((i[n] ?? t.defaultVariants?.[n]) !== r) {
+            c = !1;
+            break;
+          }
+        c && e.css && l(e.css, o);
+      }
+    const a = [s];
+    for (const [e, { value: c, modifiers: n }] of o.entries()) {
+      const r = n.length > 0 ? e.slice(n.join(":").length + 1) : e;
+      a.push(u(r, c, n));
+    }
+    return a.join(" ");
+  };
+}
+export {
+  p as createRecipe
+};

package/dist/runtime.umd.cjs

@@ -0,0 +1 @@
+(function(r,f){typeof exports=="object"&&typeof module<"u"?f(exports):typeof define=="function"&&define.amd?define(["exports"],f):(r=typeof globalThis<"u"?globalThis:r||self,f(r.runtime={}))})(this,(function(r){"use strict";function f(i,e,s=[]){const o=i.replace(/[A-Z]/g,t=>`-${t.toLowerCase()}`),a=s.length>0?`${s.join(":")}:`:"";return e===!0?`_${a}${o}`:`_${a}${o}:${e}`}function p(i){return typeof i=="object"&&i!==null}function d(i,e){for(const[s,o]of Object.entries(i))if(p(o)){const a=s.split(":");for(const[t,c]of Object.entries(o)){const n=`${a.join(":")}:${t}`;e.set(n,{value:c,modifiers:a})}}else e.set(s,{value:o,modifiers:[]})}function y(i,e){return(s={})=>{const o=new Map;if(e.base&&d(e.base,o),e.variants)for(const[t,c]of Object.entries(e.variants)){const n=s[t]??e.defaultVariants?.[t],u=n?c[n]:void 0;u&&d(u,o)}if(e.compoundVariants)for(const t of e.compoundVariants){let c=!0;for(const[n,l]of Object.entries(t.match))if((s[n]??e.defaultVariants?.[n])!==l){c=!1;break}c&&t.css&&d(t.css,o)}const a=[i];for(const[t,{value:c,modifiers:n}]of o.entries()){const l=n.length>0?t.slice(n.join(":").length+1):t;a.push(f(l,c,n))}return a.join(" ")}}r.createRecipe=y,Object.defineProperty(r,Symbol.toStringTag,{value:"Module"})}));

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@styleframe/runtime",
+  "version": "1.0.0",
+  "type": "module",
+  "types": "./dist/runtime.d.ts",
+  "module": "./dist/runtime.js",
+  "main": "./dist/runtime.umd.cjs",
+  "exports": {
+    ".": {
+      "types": "./dist/runtime.d.ts",
+      "import": "./dist/runtime.js",
+      "require": "./dist/runtime.umd.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "LICENSE",
+    "CHANGELOG.md",
+    "README.md"
+  ],
+  "devDependencies": {
+    "@styleframe/config-typescript": "^2",
+    "@styleframe/config-vite": "^2",
+    "@styleframe/core": "^2",
+    "@vitest/coverage-v8": "^3.2.4",
+    "typescript": "^5.8.3",
+    "vite": "^7.0.6",
+    "vitest": "^3.2.4",
+    "vite-plugin-dts": "^4.5.4"
+  },
+  "peerDependencies": {
+    "@styleframe/core": "^2"
+  },
+  "homepage": "https://github.com/styleframe-dev/styleframe#readme",
+  "bugs": {
+    "url": "https://github.com/styleframe-dev/styleframe/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/styleframe-dev/styleframe.git"
+  },
+  "author": "Alex Grozav <alex@styleframe.dev>",
+  "overrides": {
+    "vite": "npm:rolldown-vite@latest"
+  },
+  "scripts": {
+    "dev": "vite build --watch",
+    "build": "pnpm typecheck && vite build",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:dev": "vitest --watch"
+  }
+}