tailwind-styled-v4 1.0.0 → 4.0.0

package/package.json

@@ -1,55 +1,64 @@
 {
   "name": "tailwind-styled-v4",
-  "version": "1.0.0",
-  "description": "PRO Engine: styled-components + Tailwind CSS v4, zero-runtime compile, variant system, responsive props, plugin ecosystem",
+  "version": "4.0.0",
+  "description": "Zero-config, zero-runtime, compiler-driven Tailwind styling — tw.div, variants, RSC-aware",
   "author": "Dictionar32",
   "license": "MIT",
-  "keywords": [
-    "tailwind",
-    "tailwindcss",
-    "styled-components",
-    "css-in-js",
-    "variants",
-    "cva",
-    "stitches",
-    "panda-css",
-    "twin.macro",
-    "react",
-    "next.js",
-    "vite",
-    "zero-runtime",
-    "typescript",
-    "shadcn",
-    "radix",
-    "headless-ui"
-  ],
-  "homepage": "https://github.com/Dictionar32/tailwind-styled-v4.1.2",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/Dictionar32/tailwind-styled-v4.1.2.git"
-  },
-  "bugs": {
-    "url": "https://github.com/Dictionar32/tailwind-styled-v4.1.2/issues"
-  },
-  "main": "dist/index.js",
-  "module": "dist/index.mjs",
-  "types": "dist/index.d.ts",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js"
+      "types":   "./dist/index.d.ts",
+      "import":  "./dist/index.js",
+      "require": "./dist/index.cjs",
+      "default": "./dist/index.js"
+    },
+    "./next": {
+      "types":   "./dist/next.d.ts",
+      "import":  "./dist/next.js",
+      "require": "./dist/next.cjs"
+    },
+    "./vite": {
+      "types":   "./dist/vite.d.ts",
+      "import":  "./dist/vite.js",
+      "require": "./dist/vite.cjs"
     },
     "./compiler": {
-      "types": "./dist/compiler/index.d.ts",
-      "import": "./dist/compiler/index.mjs",
-      "require": "./dist/compiler/index.js"
+      "types":   "./dist/compiler.d.ts",
+      "import":  "./dist/compiler.js",
+      "require": "./dist/compiler.cjs"
     },
-    "./webpack-loader": {
-      "require": "./dist/webpack-loader.js"
+    "./preset": {
+      "types":   "./dist/preset.d.ts",
+      "import":  "./dist/preset.js",
+      "require": "./dist/preset.cjs"
     },
-    "./turbopack-loader": {
-      "require": "./dist/turbopack-loader.js"
+    "./css": {
+      "types":   "./dist/css.d.ts",
+      "import":  "./dist/css.js",
+      "require": "./dist/css.cjs"
+    },
+    "./plugins": {
+      "types":   "./dist/plugins.d.ts",
+      "import":  "./dist/plugins.js",
+      "require": "./dist/plugins.cjs"
+    },
+    "./devtools": {
+      "types":   "./dist/devtools.d.ts",
+      "import":  "./dist/devtools.js",
+      "require": "./dist/devtools.cjs"
+    },
+    "./animate": {
+      "types":   "./dist/animate.d.ts",
+      "import":  "./dist/animate.js",
+      "require": "./dist/animate.cjs"
+    },
+    "./theme": {
+      "types":   "./dist/theme.d.ts",
+      "import":  "./dist/theme.js",
+      "require": "./dist/theme.cjs"
     },
     "./package.json": "./package.json"
   },
@@ -60,62 +69,29 @@
     "LICENSE"
   ],
   "sideEffects": false,
-  "engines": {
-    "node": ">=18.0.0"
-  },
-  "scripts": {
-    "build": "tsup",
-    "build:types": "ts-node -P tsconfig.test.json scripts/build-types.ts",
-    "build:safelist": "ts-node -P tsconfig.test.json scripts/extract-css.ts",
-    "build:all": "npm run build:types && npm run build",
-    "analyze": "npm run build && ts-node -P tsconfig.test.json scripts/analyze-bundle.ts",
-    "dev": "tsup --watch",
-    "prepare": "npm run build",
-    "setup": "ts-node -P tsconfig.test.json src/setup/intellisense.ts",
-    "test": "npm run test:unit && npm run test:snapshot",
-    "test:unit": "ts-node -P tsconfig.test.json tests/unit/propEngine.unit.test.ts && ts-node -P tsconfig.test.json tests/unit/validator.test.ts",
-    "test:snapshot": "ts-node -P tsconfig.test.json tests/integration/snapshot.test.ts",
-    "test:legacy": "ts-node -P tsconfig.test.json tests/variant.test.ts && ts-node -P tsconfig.test.json tests/propEngine.test.ts && ts-node -P tsconfig.test.json tests/responsive.test.ts && ts-node -P tsconfig.test.json tests/zeroRuntime.test.ts",
-    "test:all": "npm run test && npm run test:legacy",
-    "typecheck": "tsc --noEmit",
-    "lint": "eslint src tests",
-    "lint:fix": "eslint src tests --fix",
-    "format": "prettier --write src tests scripts starters",
-    "format:check": "prettier --check src tests scripts starters",
-    "clean": "rm -rf dist bundle-report.json tailwind.safelist.json"
+  "engines": { "node": ">=18" },
+  "dependencies": {
+    "tailwind-merge": "^3",
+    "postcss": "^8"
   },
   "peerDependencies": {
-    "clsx": "^2",
     "react": ">=18",
-    "react-dom": ">=18",
-    "styled-components": ">=6",
-    "tailwind-merge": "^3"
+    "react-dom": ">=18"
   },
-  "peerDependenciesMeta": {
-    "clsx": {
-      "optional": true
-    },
-    "tailwind-merge": {
-      "optional": true
-    }
+  "peerDependenciesOptional": {
+    "tailwindcss": "^4",
+    "@tailwindcss/postcss": "^4"
   },
   "devDependencies": {
-    "@eslint/js": "^9",
+    "@tailwind-styled/animate": "*",
+    "@types/node": "^20",
     "@types/react": "^19",
-    "@types/react-dom": "^19",
-    "@types/styled-components": "^5",
-    "@typescript-eslint/eslint-plugin": "^8",
-    "@typescript-eslint/parser": "^8",
-    "eslint": "^9",
-    "eslint-plugin-react": "^7",
-    "eslint-plugin-react-hooks": "^5",
-    "prettier": "^3",
-    "ts-node": "^10",
     "tsup": "^8",
-    "typescript": "^5",
-    "typescript-eslint": "^8"
+    "typescript": "^5"
   },
-  "dependencies": {
-    "@types/node": "^20"
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "clean": "rm -rf dist"
   }
 }

package/CHANGELOG.md

@@ -1,75 +0,0 @@
-# Changelog
-
-All notable changes to `tailwind-styled-v4` will be documented here.
-
-## [1.0.0] — Initial Release
-
-### Added
-
-#### Core Engine
-- `tw` proxy — template literal & object config syntax
-- `tw.tag\`classes\`` — template literal API
-- `tw.tag({ base, variants, compoundVariants, defaultVariants })` — object config API
-- `tw(Component)\`classes\`` — wrap any existing component
-- `Component.extend\`extra-classes\`` — chain extra classes
-- `Component.withVariants(config)` — merge new variants
-
-#### Runtime Engines
-- **propEngine** — 80+ props (padding, margin, sizing, colors, flex, grid, layout, effects, animation, interaction)
-- **responsiveEngine** — `{ base, sm, md, lg, xl, 2xl }` responsive objects
-- **variantEngine** — CVA-style variants with `defaultVariants` support
-- **compoundVariant** — multi-condition compound variants
-- **classResolver** — central resolver combining all engines via `tailwind-merge`
-
-#### Standalone APIs
-- `cv()` — standalone class variants function (shadcn/ui & Radix compatible)
-- `withTw(Component, base?)` — HOC untuk wrap third-party components
-- `cls\`...\`` — tagged template for static class strings
-- `cx(...inputs)` — lightweight class joiner (~100b, zero-dep)
-- `cxm(...inputs)` — cx + tailwind-merge deduplication
-
-#### Plugin System
-- `registerPlugin({ name, props })` — custom prop resolver plugins
-- `loadBuiltinPlugins()` — 6 built-in plugins: animation, grid, backdrop, gradient, scroll, print
-- `listPlugins()` / `getPlugin(name)` — plugin introspection
-
-#### Theme System
-- `setTheme(tokens)` — deep-merge semantic tokens
-- `replaceTheme(tokens)` — replace entire theme
-- `getTheme()` / `getThemeNamespace(key)` — read current theme
-- `onThemeChange(listener)` — subscription API
-- `loadDefaultTheme()` — semantic token preset (primary, surface, muted, etc.)
-- `loadDarkTheme()` — fintech/crypto/Web3 dark preset
-
-#### Zero-Runtime Compiler
-- `withTailwindStyled(opts)(nextConfig)` — Next.js HOC wrapper
-- `tailwindStyledPlugin(opts)` — Vite plugin
-- Webpack loader (`tailwind-styled-v4/webpack-loader`)
-- Static transform: `tw.div\`p-4\`` → `styled.div.attrs(()=>({className:"p-4"}))\`\``
-- Dynamic guard: skips interpolated templates (`${}`) safely
-- `data-tw="tw-xxxxx"` attribute injection for DevTools (dev mode)
-
-#### Build Tools
-- `generateTailwindTypes.ts` — generates **58.055** Tailwind class type unions
-- `generateSafelist.ts` — scans src/ and outputs `tailwind.safelist.json`
-- `extractAllClasses(source)` — extract classes from any source string
-
-#### IntelliSense
-- **58.055 class definitions** in `tailwind.generated.ts`
-- Coverage: all colors (21 palettes × 11 shades), spacing, sizing, flexbox, grid, effects, transitions, animations, responsive prefixes (sm/md/lg/xl/2xl), state prefixes (hover/focus/active/disabled/dark/group-hover/peer-hover/focus-visible/focus-within)
-
-#### Developer Experience
-- `shouldForwardProp` — tw props tidak bocor ke DOM attributes
-- `blockProp(name)` / `allowProp(name)` — fine-grained forwarding control
-- `hashClass(input)` → `"tw-xxxxx"` — stable component hash
-- `componentName(tag, classes)` — display name generator for React DevTools
-- Source maps enabled in all builds
-
-#### Stack Compatibility
-- Next.js 15/16 (App Router + Pages Router)
-- React 18/19
-- Tailwind CSS v3/v4
-- styled-components v5/v6
-- TypeScript 4.9/5.x
-- shadcn/ui, Radix UI, Headless UI
-- Vite 4/5, Webpack 4/5

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2024 tailwind-styled-v4
-
-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/README.md

@@ -1,330 +0,0 @@
-# tailwind-styled-v4
-
-**PRO Engine** — styled-components + Tailwind CSS v4, zero-runtime compile option, variant system, responsive props, plugin ecosystem.
-
-> Melampaui `twin.macro` dengan tetap kompatibel penuh terhadap Next.js 16 · React 19 · Tailwind CSS v4 · styled-components v6 · TypeScript 5 · shadcn/ui.
-
----
-
-## Installation
-
-```bash
-npm install tailwind-styled-v4
-# peerDependencies
-npm install styled-components tailwind-merge clsx
-```
-
----
-
-## Quick Start
-
-### Template Literal (sederhana)
-
-```tsx
-import { tw } from "tailwind-styled-v4"
-
-const Card = tw.div`
-  p-6
-  bg-zinc-900
-  rounded-2xl
-  border border-zinc-800
-`
-
-// Responsive props inline
-<Card p={{ base: 4, md: 6, lg: 8 }} />
-// → p-4 md:p-6 lg:p-8
-```
-
-### Object Config (full power)
-
-```tsx
-const Button = tw.button({
-  base: "inline-flex items-center justify-center rounded-lg font-medium transition",
-  variants: {
-    variant: {
-      primary: "bg-blue-600 text-white hover:bg-blue-700",
-      ghost:   "bg-transparent border border-zinc-700 hover:bg-zinc-800",
-      danger:  "bg-red-600 text-white hover:bg-red-700",
-    },
-    size: {
-      sm: "h-8  px-3 text-sm",
-      md: "h-10 px-4 text-sm",
-      lg: "h-12 px-6 text-base",
-    },
-  },
-  compoundVariants: [
-    { variant: "primary", size: "lg", class: "shadow-lg shadow-blue-600/30" },
-  ],
-  defaultVariants: { variant: "primary", size: "md" },
-})
-
-// Usage
-<Button variant="primary" size="lg">Click me</Button>
-<Button variant="ghost" size="sm">Cancel</Button>
-```
-
-### Extend existing component
-
-```tsx
-const HeroCard = Card.extend`shadow-2xl ring-1 ring-zinc-700/50`
-```
-
-### Wrap any component (shadcn/ui, Radix, dll)
-
-```tsx
-import { withTw, tw } from "tailwind-styled-v4"
-import { Button } from "@/components/ui/button"   // shadcn
-import Link from "next/link"
-
-const TwButton = withTw(Button, "px-4 py-2")
-const NavLink  = tw(Link)`text-zinc-400 hover:text-zinc-100 transition-colors`
-```
-
-### Standalone class variants (headless/shadcn compatible)
-
-```tsx
-import { cv } from "tailwind-styled-v4"
-
-const badgeCv = cv({
-  base: "inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium",
-  variants: {
-    color: {
-      blue:  "bg-blue-100 text-blue-800",
-      green: "bg-green-100 text-green-800",
-      red:   "bg-red-100 text-red-800",
-    }
-  },
-  defaultVariants: { color: "blue" }
-})
-
-// Use anywhere
-<span className={badgeCv({ color: "green" })}>Active</span>
-```
-
----
-
-## Responsive Props
-
-Semua props mendukung responsive object:
-
-```tsx
-<Box
-  p={{ base: 2, sm: 4, md: 6, lg: 8 }}
-  cols={{ base: 1, sm: 2, lg: 3 }}
-  gap={{ base: 3, md: 4 }}
-  display="grid"
-/>
-// → p-2 sm:p-4 md:p-6 lg:p-8 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 md:gap-4
-```
-
-### Available Props
-
-| Category | Props |
-|----------|-------|
-| **Padding** | `p` `px` `py` `pt` `pb` `pl` `pr` |
-| **Margin** | `m` `mx` `my` `mt` `mb` `ml` `mr` |
-| **Gap** | `gap` `gapX` `gapY` `spaceX` `spaceY` |
-| **Sizing** | `w` `h` `size` `minW` `maxW` `minH` `maxH` |
-| **Colors** | `bg` `text` `border` `ring` `fill` `stroke` |
-| **Typography** | `font` `fontSize` `leading` `tracking` `align` `truncate` `lineClamp` |
-| **Flexbox** | `flex` `flexDir` `items` `justify` `wrap` `grow` `shrink` `basis` `self` |
-| **Grid** | `cols` `rows` `colSpan` `rowSpan` `colStart` `colEnd` |
-| **Layout** | `display` `overflow` `pos` `z` `top` `right` `bottom` `left` `inset` |
-| **Border** | `rounded` `roundedT` `roundedB` `borderStyle` `outline` |
-| **Effects** | `opacity` `shadow` `blur` `brightness` `contrast` `grayscale` `backdrop` |
-| **Motion** | `transition` `duration` `ease` `delay` `animate` |
-| **Interaction** | `cursor` `select` `pointer` `touch` |
-
----
-
-## Zero-Runtime (Next.js)
-
-Di production build, semua `tw.tag\`...\`` dikompilasi menjadi static string — zero JS runtime overhead.
-
-```ts
-// next.config.ts
-import { withTailwindStyled } from "tailwind-styled-v4/compiler"
-
-export default withTailwindStyled({
-  mode: "zero-runtime",    // "runtime" di dev, "zero-runtime" di production
-  addDataAttr: true,        // data-tw="tw-3f2a1" untuk DevTools
-  generateSafelist: true,   // auto-generate tailwind.safelist.json
-})(/** nextConfig */ {})
-```
-
-**Before (source):**
-```tsx
-const Box = tw.div`p-4 bg-zinc-900 rounded-xl`
-```
-
-**After (compiled output):**
-```tsx
-const Box = styled.div.attrs(() => ({ className: "p-4 bg-zinc-900 rounded-xl" }))``
-```
-
-Runtime cost: **0 bytes** untuk class resolution.
-
----
-
-## Zero-Runtime (Vite)
-
-```ts
-// vite.config.ts
-import { tailwindStyledPlugin } from "tailwind-styled-v4/compiler"
-
-export default defineConfig({
-  plugins: [react(), tailwindStyledPlugin({ mode: "zero-runtime" })],
-})
-```
-
----
-
-## Plugin System
-
-```tsx
-import { registerPlugin } from "tailwind-styled-v4"
-
-// Custom plugin
-registerPlugin({
-  name: "glass",
-  props: {
-    glass:   v => v === true ? "bg-white/10 backdrop-blur-xl border border-white/10" : "",
-    frosted: v => v === true ? "bg-white/5 backdrop-blur-md saturate-150" : "",
-  }
-})
-
-// Usage
-<Box glass />     // → bg-white/10 backdrop-blur-xl border border-white/10
-<Box frosted />   // → bg-white/5 backdrop-blur-md saturate-150
-```
-
-### Built-in Plugins
-
-```tsx
-import { loadBuiltinPlugins } from "tailwind-styled-v4"
-loadBuiltinPlugins()  // animation, grid, backdrop, gradient, scroll, print
-```
-
----
-
-## Theme System
-
-```tsx
-import { setTheme, loadDefaultTheme, loadDarkTheme } from "tailwind-styled-v4"
-
-// Preset themes
-loadDefaultTheme()  // semantic tokens: primary, surface, muted, dll
-loadDarkTheme()     // fintech/crypto/Web3 dark preset
-
-// Custom tokens
-setTheme({
-  colors: {
-    brand:    "blue-600",
-    "brand-hover": "blue-700",
-    surface:  "zinc-900",
-  },
-  radius: {
-    card:   "2xl",
-    button: "lg",
-  },
-})
-
-// Now works everywhere
-<Box bg="brand" rounded="card" />
-// → bg-blue-600 rounded-2xl
-```
-
----
-
-## Safelist Generation
-
-```bash
-npm run build:safelist
-```
-
-Menghasilkan `tailwind.safelist.json` yang bisa direferensikan di `tailwind.config.ts`:
-
-```ts
-// tailwind.config.ts
-import safelist from "./tailwind.safelist.json"
-
-export default {
-  safelist: safelist.safelist,
-  // ...
-}
-```
-
----
-
-## IntelliSense (VSCode)
-
-Library ini menyertakan **58.055 class definitions** di `src/types/tailwind.generated.ts` untuk autocomplete penuh di VSCode termasuk semua modifier:
-
-```
-bg-blue-500          ← base class
-hover:bg-blue-500    ← hover state
-md:bg-blue-500       ← responsive
-dark:bg-blue-500     ← dark mode
-dark:hover:bg-blue-500 ← combined
-```
-
-Tambahkan ke `.vscode/settings.json`:
-```json
-{
-  "tailwindCSS.experimental.classRegex": [
-    ["tw\\.\\w+`([^`]*)`", "([^`]*)"],
-    ["tw\\.\\w+\\(([^)]*)\\)", "\"([^\"]*)\""],
-    ["cv\\(([^)]*)\\)", "\"([^\"]*)\""]
-  ]
-}
-```
-
----
-
-## Scripts
-
-```bash
-npm run build           # build library
-npm run build:types     # regenerate 58k class types
-npm run build:safelist  # scan src/ dan generate safelist
-npm run dev             # watch mode
-npm run test            # run all tests
-```
-
----
-
-## Comparison
-
-| Feature | tailwind-styled-v4 | twin.macro | CVA | Stitches |
-|---------|--------------------|------------|-----|----------|
-| Template literal | ✅ | ✅ | ❌ | ❌ |
-| Object config + variants | ✅ | ❌ | ✅ | ✅ |
-| Compound variants | ✅ | ❌ | ✅ | ✅ |
-| Responsive props | ✅ | ❌ | ❌ | ❌ |
-| Zero-runtime | ✅ | ✅ | ❌ | ✅ |
-| Plugin system | ✅ | ❌ | ❌ | ❌ |
-| styled-components compat | ✅ | ✅ | ❌ | ❌ |
-| shadcn/ui compat | ✅ | ❌ | ✅ | ❌ |
-| Theme/token system | ✅ | ❌ | ❌ | ✅ |
-| IntelliSense 58k classes | ✅ | ✅ | ❌ | ❌ |
-| Wrap any component | ✅ | ❌ | ❌ | ❌ |
-
----
-
-## Stack Compatibility
-
-- **Next.js** 15 / 16 (App Router + Pages Router)
-- **React** 18 / 19 (Server Components compatible)
-- **Tailwind CSS** v3 / v4
-- **styled-components** v5 / v6
-- **TypeScript** 4.9 / 5.x
-- **shadcn/ui** (semua komponen)
-- **Radix UI** (via `withTw()`)
-- **Vite** 4 / 5
-- **Webpack** 4 / 5
-
----
-
-## License
-
-MIT