styleframe 0.0.1 → 1.0.1

package/README.md

@@ -0,0 +1,171 @@
+<div align="center">
+  <img src="https://www.styleframe.dev/_vercel/image?url=%2Flogotype-light.svg&w=1536&q=100" alt="Styleframe" width="320" height="120">
+
+**Type-safe, Composable CSS in TypeScript**
+
+Write type-safe, composable, future-proof Design Systems code using styleframe's powerful TypeScript CSS API.
+
+[![npm version](https://img.shields.io/npm/v/styleframe.svg)](https://www.npmjs.com/package/styleframe)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://github.com/styleframe-dev/styleframe/blob/main/LICENSE)
+[![Discord](https://img.shields.io/discord/1395724958919032943?label=Discord&logo=discord)](https://discord.gg/KCVwuGz44M)
+
+[Homepage](https://styleframe.dev) · [Documentation](https://styleframe.dev/docs)
+
+</div>
+
+---
+
+# styleframe
+
+## ✨ Features
+
+- **🛡️ Type-safe CSS API** - Catch style bugs at compile time with full TypeScript support
+- **🧩 Composable & Modular** - Build design systems from reusable, composable functions
+- **🎨 Built-in Theming** - Create light/dark modes and custom themes effortlessly
+- **⚡ Framework Agnostic** - Works with React, Vue, Svelte, Solid, Astro, and more
+- **🔥 First-class DX** - IDE auto-complete, in-editor docs, and static analysis
+
+## 🚀 Quick Start
+
+### Installation
+
+```bash
+# npm
+npm install styleframe
+
+# pnpm
+pnpm add styleframe
+
+# yarn
+yarn add styleframe
+
+# bun
+bun add styleframe
+```
+
+### Initialization
+
+```bash
+# npm
+npx styleframe init
+
+# pnpm
+pnpx styleframe init
+
+# yarn
+yarn styleframe init
+
+# bun
+bunx styleframe init
+```
+
+Using the CLI command above, it will:
+
+- Install `styleframe` as a development dependency to your project
+- Add the `styleframe` plugin to Vite, if possible
+- Create a new `styleframe.config.ts` file
+
+## 💡 Usage
+
+```typescript
+import { styleframe } from "styleframe";
+
+const s = styleframe();
+const { variable, ref, selector, theme } = s;
+
+// Define design tokens
+const colorPrimary = variable("color--primary", "#006cff");
+const spacing = variable("spacing--md", "1rem");
+
+// Create styles
+selector(".button", {
+    backgroundColor: ref(colorPrimary),
+    padding: ref(spacing),
+    borderRadius: "4px",
+    color: "white",
+
+    "&:hover": {
+        opacity: 0.9,
+    },
+});
+
+// Add dark theme
+theme("dark", (ctx) => {
+    ctx.variable(colorPrimary, "#60a5fa");
+});
+
+export default s;
+```
+
+## 📚 Documentation
+
+Styleframe is extremely powerful and flexible. The code preview above is just a small example of what you can achieve with styleframe.
+
+Read the full documentation at [https://styleframe.dev](https://styleframe.dev).
+
+## 🎯 Why styleframe?
+
+After over 10 years of working on Design Systems for successful companies, we've learned a lot about what makes a great Design System. Styleframe is built on these learnings and is designed to help you easily build your own.
+
+[Read more](https://styleframe.dev/docs) about styleframe's philosophy and design principles.
+
+## 🔗 Framework Integration
+
+Styleframe works seamlessly with any framework:
+
+- **Vite** - Native plugin support
+- **React** - Perfect for component libraries
+- **Vue** - Full SFC compatibility
+- **Svelte** - Works out of the box
+- **Astro** - Static site ready
+- **Solid** - Reactive styling
+
+See the [installation guide](https://styleframe.dev/docs/getting-started/installation/vite) for framework-specific setup.
+
+## 📖 Documentation
+
+- **[Getting Started](https://styleframe.dev/docs/getting-started/introduction)** - Learn the basics
+- **[API Reference](https://styleframe.dev/docs/api/variables)** - Complete API documentation
+- **[Guides](https://styleframe.dev/docs/resources/guides)** - Step-by-step tutorials
+- **[Examples](https://github.com/styleframe-dev/examples)** - Real-world examples
+
+## 🤝 Community
+
+- **[Discord](https://discord.gg/KCVwuGz44M)** - Chat with the community
+- **[GitHub Issues](https://github.com/styleframe-dev/styleframe/issues)** - Report bugs or request features
+- **[Discussions](https://github.com/styleframe-dev/styleframe/discussions)** - Ask questions and share ideas
+
+## 🛠️ Development
+
+```bash
+# Clone the repository
+git clone https://github.com/styleframe-dev/styleframe.git
+
+# Install dependencies
+pnpm install
+
+# Run tests
+pnpm test
+
+# Build
+pnpm build
+```
+
+## 📝 License
+
+Styleframe is [MIT licensed](https://github.com/styleframe-dev/styleframe/blob/main/LICENSE).
+
+## 💎 Styleframe Pro
+
+Looking for advanced features? Check out [Styleframe Pro](https://styleframe.dev/pricing) for:
+
+- Premium composables and design tokens
+- Advanced theming capabilities
+- Priority support
+- Commercial licenses
+
+---
+
+<div align="center">
+  <sub>Built with ❤️ by <a href="https://github.com/styleframe-dev">Styleframe</a></sub>
+</div>

package/dist/cli.cjs

@@ -0,0 +1,29 @@
+//#region rolldown:runtime
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+		key = keys[i];
+		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: ((k) => from[k]).bind(null, key),
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+
+//#endregion
+const __styleframe_cli = __toESM(require("@styleframe/cli"));
+
+//#region src/cli.ts
+(0, __styleframe_cli.default)();
+
+//#endregion

package/dist/cli.d.cts

@@ -0,0 +1 @@
+export { };

package/dist/cli.d.ts

@@ -0,0 +1 @@
+export { };

package/dist/cli.js

@@ -0,0 +1,7 @@
+import main from "@styleframe/cli";
+
+//#region src/cli.ts
+main();
+
+//#endregion
+//# sourceMappingURL=cli.js.map

package/dist/cli.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cli.js","names":[],"sources":["../src/cli.ts"],"sourcesContent":["import main from \"@styleframe/cli\";\n\nmain();\n"],"mappings":";;;AAEA,MAAM"}

package/dist/index.cjs

@@ -0,0 +1,9 @@
+
+
+var __styleframe_core = require("@styleframe/core");
+Object.keys(__styleframe_core).forEach(function (k) {
+  if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+    enumerable: true,
+    get: function () { return __styleframe_core[k]; }
+  });
+});

package/dist/index.d.cts

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

package/dist/index.d.ts

@@ -1,2 +1 @@
-export {};
-//# sourceMappingURL=index.d.ts.map
+export * from "@styleframe/core";

package/dist/index.js

@@ -1,4 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-console.log('Happy developing using styleframe ✨');
-//# sourceMappingURL=index.js.map
+export * from "@styleframe/core"

package/dist/loader.cjs

@@ -0,0 +1,9 @@
+
+
+var __styleframe_loader = require("@styleframe/loader");
+Object.keys(__styleframe_loader).forEach(function (k) {
+  if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+    enumerable: true,
+    get: function () { return __styleframe_loader[k]; }
+  });
+});

package/dist/loader.d.cts

@@ -0,0 +1 @@
+export * from "@styleframe/loader";

package/dist/loader.d.ts

@@ -0,0 +1 @@
+export * from "@styleframe/loader";

package/dist/loader.js

@@ -0,0 +1 @@
+export * from "@styleframe/loader"

package/dist/transpiler.cjs

@@ -0,0 +1,9 @@
+
+
+var __styleframe_transpiler = require("@styleframe/transpiler");
+Object.keys(__styleframe_transpiler).forEach(function (k) {
+  if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+    enumerable: true,
+    get: function () { return __styleframe_transpiler[k]; }
+  });
+});

package/dist/transpiler.d.cts

@@ -0,0 +1 @@
+export * from "@styleframe/transpiler";

package/dist/transpiler.d.ts

@@ -0,0 +1 @@
+export * from "@styleframe/transpiler";

package/dist/transpiler.js

@@ -0,0 +1 @@
+export * from "@styleframe/transpiler"

package/package.json

@@ -1,31 +1,73 @@
 {
   "name": "styleframe",
-  "version": "0.0.1",
-  "description": "Write modern, clean, composable CSS using Typescript, with a focus on simplicity and performance.",
-  "author": "Alex Grozav <alex@styleframe.dev>",
-  "main": "dist/index.js",
-  "keywords": [
-    "styleframe",
-    "css"
+  "version": "1.0.1",
+  "bin": {
+    "styleframe": "./dist/cli.cjs"
+  },
+  "description": "A command-line interface for styleframe.",
+  "type": "module",
+  "license": "MIT",
+  "files": [
+    "README.md",
+    "dist"
   ],
-  "homepage": "https://styleframe.dev",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/styleframe-dev/styleframe"
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./cli": {
+      "types": "./dist/cli.d.ts",
+      "import": "./dist/cli.js",
+      "require": "./dist/cli.cjs"
+    },
+    "./loader": {
+      "types": "./dist/loader.d.ts",
+      "import": "./dist/loader.js",
+      "require": "./dist/loader.cjs"
+    },
+    "./transpiler": {
+      "types": "./dist/transpiler.d.ts",
+      "import": "./dist/transpiler.js",
+      "require": "./dist/transpiler.cjs"
+    },
+    "./package.json": "./package.json"
   },
-  "bugs": {
-    "email": "support@styleframe.dev",
-    "url": "https://github.com/styleframe-dev/styleframe/issues"
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@styleframe/cli": "^1.0.1",
+    "@styleframe/transpiler": "^1.0.1",
+    "@styleframe/core": "^1.0.1",
+    "@styleframe/loader": "^1.0.1"
   },
-  "dependencies": {},
   "devDependencies": {
-    "typescript": "^5.8.3"
+    "@types/node": "^22.15.17",
+    "bumpp": "^10.1.0",
+    "tsdown": "^0.11.9",
+    "typescript": "^5.8.3",
+    "vitest": "^3.1.3",
+    "@styleframe/config-typescript": "^1.0.1"
   },
-  "engines": {
-    "node": ">=7.6.0"
+  "homepage": "https://github.com/styleframe-dev/styleframe#readme",
+  "bugs": {
+    "url": "https://github.com/styleframe-dev/styleframe/issues"
   },
-  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/styleframe-dev/styleframe.git"
+  },
+  "author": "Alex Grozav <alex@styleframe.dev>",
   "scripts": {
-    "build": "tsc"
+    "build": "tsdown",
+    "dev": "tsdown --watch",
+    "test": "vitest",
+    "typecheck": "tsc --noEmit",
+    "release": "bumpp && npm publish"
   }
 }

package/.idea/material_theme_project_new.xml

@@ -1,10 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="MaterialThemeProjectNewConfig">
-    <option name="metadata">
-      <MTProjectMetadataState>
-        <option name="userId" value="5fbaf10e:1978bfec20b:-7ffd" />
-      </MTProjectMetadataState>
-    </option>
-  </component>
-</project>

package/.idea/modules.xml

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ProjectModuleManager">
-    <modules>
-      <module fileurl="file://$PROJECT_DIR$/.idea/styleframe.iml" filepath="$PROJECT_DIR$/.idea/styleframe.iml" />
-    </modules>
-  </component>
-</project>

package/.idea/styleframe.iml

@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<module type="WEB_MODULE" version="4">
-  <component name="NewModuleRootManager">
-    <content url="file://$MODULE_DIR$">
-      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
-      <excludeFolder url="file://$MODULE_DIR$/temp" />
-      <excludeFolder url="file://$MODULE_DIR$/tmp" />
-    </content>
-    <orderEntry type="inheritedJdk" />
-    <orderEntry type="sourceFolder" forTests="false" />
-  </component>
-</module>

package/.idea/vcs.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="VcsDirectoryMappings">
-    <mapping directory="$PROJECT_DIR$" vcs="Git" />
-  </component>
-</project>

package/dist/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":""}

package/dist/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;AAAA,OAAO,CAAC,GAAG,CAAC,qCAAqC,CAAC,CAAA"}

package/src/index.ts

@@ -1 +0,0 @@
-console.log('Happy developing using styleframe ✨')

package/tsconfig.json

@@ -1,40 +0,0 @@
-{
-  "compilerOptions": {
-    // Base Options recommended for all projects
-    "esModuleInterop": true,
-    "skipLibCheck": true,
-    "target": "es2022",
-    "allowJs": true,
-    "resolveJsonModule": true,
-    "moduleDetection": "force",
-    "isolatedModules": true,
-    "verbatimModuleSyntax": true,
-    // Enable strict type checking so you can catch bugs early
-    "strict": true,
-    "noUncheckedIndexedAccess": true,
-    "noImplicitOverride": true,
-    // Transpile our TypeScript code to JavaScript
-    "module": "NodeNext",
-    "outDir": "dist",
-    // Emit type declarations
-    "declaration": true,
-    // Emit source maps and enable the composite option for monorepos
-    "composite": true,
-    "declarationMap": true,
-    "sourceMap": true,
-    // Include the DOM types
-    "lib": [
-      "es2022",
-      "dom",
-      "dom.iterable"
-    ]
-  },
-  // Include the necessary files for your project
-  "include": [
-    "src/**/*.ts",
-    "src/**/*.tsx"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
-}