tailuicss 1.0.2

package/CHANGELOG.md

@@ -0,0 +1,83 @@
+# Changelog
+
+All notable changes to TailUI will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [1.1.0] — 2025-06-20
+
+### Added
+
+- **`tailui migrate` command** — automatically convert Tailwind utility classes to semantic `.ui-*` classes
+  - **Tag-first detection**: HTML tag is the primary signal (`<button>` → `ui-button`, `<input>` → `ui-input`). No guessing.
+  - **Attribute resolution**: ARIA attributes disambiguate generic tags (`role="alert"` → `ui-alert`, `role="dialog"` → `ui-modal`)
+  - **Class-based fallback**: for `<div>`, `<span>`, etc. — requires high class confidence
+  - **Variant detection**: automatically detects color/style variants (`ui-primary`, `ui-danger`, `ui-elevated`, etc.)
+  - **Structural class preservation**: spacing, layout, sizing, and positioning classes are kept alongside `.ui-*` classes
+  - **Dynamic class skipping**: `cn()`, `clsx()`, `cva()`, `twMerge()`, template literal interpolations, and ternaries are safely skipped
+  - **Dry-run mode** (`--dry-run`): preview all changes without modifying files
+  - **Interactive mode** (`-i`): confirm each migration individually
+  - **Force mode** (`--force`): apply all migrations without confirmation
+  - **Confidence threshold** (`--threshold <0-100>`): control minimum match score (default: 60)
+  - **Backup & undo**: timestamped backups in `.tailui-backup/`, restore with `--undo`
+  - **Single file** (`-f <path>`) or **directory** (`--all <dir>`) migration
+- **Dev-only architecture**: the migrate module is lazy-loaded by the CLI and never imported by the Tailwind or PostCSS plugins — zero production bundle impact
+
+### Changed
+
+- CLI now has **7 commands** (added `migrate`)
+
+---
+
+## [1.0.0] — 2026-02-11
+
+### Added
+
+- **20 production-ready components**: accordion, alert, avatar, badge, button, card, carousel, dropdown, file-input, input, list, modal, progress, radio, rate, select, textarea, toast, toggle, tooltip
+- **AI component generation** — `tailui generate <component>` creates typed, accessible framework components using OpenAI, Claude, Gemini, or Mistral
+- **Zero-config PostCSS plugin** — auto-injects styles before `@tailwind components`, no manual import order needed
+- **Tailwind plugin** — auto-registers content paths, prevents tree-shaking
+- **CLI** with 6 commands:
+  - `tailui init` — interactive scaffold with stack selection, directory name, AI config
+  - `tailui create <component>` — generate component CSS with variants
+  - `tailui add <component> <token>` — add tokens to existing components
+  - `tailui list` — display all registered components and tokens
+  - `tailui generate <component>` — AI-powered framework component generation
+  - `tailui config` — view or update configuration (stack, AI provider, API key)
+- **Stack-aware init** — choose React, Next.js, Vue, Nuxt, Svelte, SvelteKit, Angular, Astro, or HTML
+- **Flexible directory naming** — choose `ui/`, `components/`, `design-system/`, or any name; stored in `ui.config.json`
+- **Centralized config** — `ui.config.json` stores directory path, stack, AI settings; all CLI commands and plugins resolve it automatically
+- **`.ui-*` class selectors** — standard CSS classes for maximum compatibility
+- **`@style` directive** — CSS custom properties alongside `@apply`
+- **Dark mode** via `[data-theme="dark"]` selectors on all 20 components
+- **Free composition** — tokens combine without hierarchy (`class="ui-card ui-elevated ui-hoverable"`)
+- **Token types**: component, modifier, slot, state, size
+- **CSS variable convention**: `--ui-<component>-<property>`
+- **Framework agnostic**: HTML, React, Vue, Svelte, Angular, Astro, Web Components
+- **SSR & CSR** compatible — zero JavaScript runtime
+
+### Components
+
+| Component | Key Tokens |
+|---|---|
+| **Accordion** | `flush`, `separated` |
+| **Alert** | `info`, `success`, `warning`, `danger`, `outlined`, `filled` |
+| **Avatar** | `xs`, `sm`, `lg`, `xl`, `square`, `ring` + status indicators |
+| **Badge** | `primary`, `secondary`, `success`, `danger`, `warning`, `dot`, `square` |
+| **Button** | `primary`, `secondary`, `danger`, `ghost`, `outline`, `sm`–`xl`, `disabled`, `loading`, `full`, `icon` |
+| **Card** | `elevated`, `outlined`, `flat`, `hoverable`, `interactive`, `compact` |
+| **Carousel** | `fade` + navigation dots/arrows |
+| **Dropdown** | `right`, `up` + menu items, dividers, headers |
+| **File Input** | `compact`, `error`, `disabled`, drag-and-drop zone |
+| **Input** | `error`, `success`, `disabled`, `sm`, `lg` + label, helper |
+| **List** | `interactive`, `flush`, `compact` + leading/trailing slots |
+| **Modal** | `sm`–`full`, `centered` + overlay |
+| **Progress** | `success`, `warning`, `danger`, `sm`–`xl`, `striped`, `animated`, `labeled` |
+| **Radio** | `horizontal`, `disabled`, `sm`, `lg` |
+| **Rate** | `readonly`, `sm`, `lg`, `half`, `disabled` |
+| **Select** | `error`, `disabled`, `sm`, `lg`, `multi` + search input |
+| **Textarea** | `error`, `success`, `disabled`, `noresize`, `auto`, `sm`, `lg` |
+| **Toast** | `success`, `danger`, `warning`, `info` + positioning |
+| **Toggle** | `success`, `danger`, `disabled`, `sm`, `lg` |
+| **Tooltip** | `bottom`, `left`, `right` + arrow positioning |

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Hosby
+
+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

@@ -0,0 +1,103 @@
+<div align="center">
+
+<img src="https://tailuicss.com/TailUI.png" alt="TailUI" width="120" />
+
+# TailUI
+
+**The semantic CSS layer for Tailwind CSS**
+
+Stop writing 40 utility classes per element. Write `ui-button ui-primary` instead.
+
+[![npm version](https://img.shields.io/npm/v/@tailuicss/core.svg?style=flat-square&color=0284c7)](https://www.npmjs.com/package/@tailuicss/core)
+[![license](https://img.shields.io/npm/l/@tailuicss/core.svg?style=flat-square&color=0284c7)](https://github.com/tailuicss/tailui/blob/main/LICENSE)
+[![tailwindcss](https://img.shields.io/badge/tailwindcss-%3E%3D3.4-0284c7?style=flat-square)](https://tailwindcss.com)
+[![zero runtime](https://img.shields.io/badge/JS_runtime-0kb-10b981?style=flat-square)](.)
+
+[Documentation](https://tailuicss.com/docs) · [Components](https://tailuicss.com/components) · [Examples](https://tailuicss.com/examples)
+
+</div>
+
+---
+
+## Why TailUI?
+
+```html
+<!-- ❌ Before: Tailwind at scale -->
+<button class="px-4 py-2 bg-blue-600 text-white rounded-lg font-medium
+  transition-all hover:bg-blue-700 active:bg-blue-800 shadow-sm
+  disabled:opacity-50 disabled:cursor-not-allowed">
+  Save
+</button>
+
+<!-- ✅ After: TailUI -->
+<button class="ui-button ui-primary">Save</button>
+```
+
+**Same output. 80% less code. Zero runtime. Pure CSS.**
+
+---
+
+## Quick Start
+
+```bash
+npm install @tailuicss/core
+```
+
+```js
+// tailwind.config.js
+plugins: [require('@tailuicss/core')()]
+```
+
+```js
+// postcss.config.js
+plugins: {
+  '@tailuicss/core/postcss': {},
+  tailwindcss: {},
+}
+```
+
+**That's it.** Start using `ui-button`, `ui-card`, `ui-input`, and [20 more components](https://tailuicss.com/components).
+
+---
+
+## Features
+
+- 🎨 **20 production-ready components** — Button, Card, Modal, Input, Toast, and more
+- 🌙 **Dark mode built-in** — One `data-theme="dark"` attribute switches everything
+- 🔧 **Full Tailwind power** — Use `@apply`, CSS variables, and all Tailwind utilities
+- 📦 **Framework agnostic** — React, Vue, Svelte, Angular, Astro, plain HTML
+- 🤖 **AI generation** — Generate typed components with OpenAI, Claude, Gemini, or Mistral
+- 🔄 **Migration CLI** — Convert existing Tailwind code to TailUI automatically
+- ⚡ **Zero JS runtime** — Pure CSS, no bundle bloat
+
+---
+
+## Documentation
+
+👉 **[Read the full documentation →](https://tailuicss.com/docs)**
+
+- [Installation](https://tailuicss.com/docs/installation)
+- [Configuration](https://tailuicss.com/docs/configuration)
+- [Components](https://tailuicss.com/components)
+- [Dark Mode](https://tailuicss.com/docs/dark-mode)
+- [CLI Commands](https://tailuicss.com/docs/cli)
+- [AI Generation](https://tailuicss.com/docs/ai-generation)
+- [Migration Guide](https://tailuicss.com/docs/migration)
+
+---
+
+## AI & Editor Integration
+
+TailUI provides a `llms.txt` file for AI assistants and code editors:
+
+```
+https://tailuicss.com/llms.txt
+```
+
+Add this to your Cursor rules, Windsurf, or any AI-powered editor for perfect TailUI code generation.
+
+---
+
+## License
+
+[MIT](LICENSE)

package/package.json

@@ -0,0 +1,104 @@
+{
+  "name": "tailuicss",
+  "version": "1.0.2",
+  "description": "A semantic CSS-first layer on top of Tailwind CSS. Write class=\"ui-button ui-primary\" instead of 40 utility classes.",
+  "main": "src/plugin/index.js",
+  "types": "src/plugin/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./src/plugin/index.d.ts",
+      "default": "./src/plugin/index.js"
+    },
+    "./postcss": {
+      "types": "./postcss.d.ts",
+      "default": "./postcss.js"
+    },
+    "./cli": "./src/cli/index.js"
+  },
+  "bin": {
+    "tailui": "./src/cli/index.js"
+  },
+  "files": [
+    "src/",
+    "ui/",
+    "postcss.js",
+    "postcss.d.ts",
+    "README.md",
+    "CHANGELOG.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "dev": "npx tailwindcss -i ./demo/src/input.css -o ./demo/dist/output.css --postcss --watch",
+    "build": "npx tailwindcss -i ./demo/src/input.css -o ./demo/dist/output.css --postcss",
+    "demo": "npx tailwindcss -i ./demo/src/input.css -o ./demo/dist/output.css --postcss && open demo/index.html"
+  },
+  "keywords": [
+    "tailwindcss",
+    "tailwind",
+    "css",
+    "design-system",
+    "ui",
+    "semantic",
+    "components",
+    "postcss",
+    "plugin",
+    "utility-first",
+    "css-framework",
+    "tailwind",
+    "tailwindcss",
+    "csstailwind",
+    "reacttailwind",
+    "nextjstailwind",
+    "tailwind plugin",
+    "tailwind vue",
+    "tailwind astro",
+    "tailwind svelte",
+    "tailwind nuxt",
+    "tailwind laravel",
+    "tailwind rails",
+    "front-end",
+    "theme",
+    "nextjs",
+    "vue",
+    "component",
+    "framework",
+    "library",
+    "astro",
+    "svelte",
+    "nuxt",
+    "laravel",
+    "rails"
+  ],
+  "author": "TailUI CSS",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/tailuicss/tailui.git"
+  },
+  "homepage": "https://tailuicss.com",
+  "bugs": {
+    "url": "https://github.com/tailuicss/tailui/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": false,
+  "engines": {
+    "node": ">=16.0.0"
+  },
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/tailuicss"
+  },
+  "dependencies": {
+    "commander": "^12.1.0"
+  },
+  "peerDependencies": {
+    "postcss": "^8.4.0",
+    "tailwindcss": "^3.4.0"
+  },
+  "devDependencies": {
+    "postcss": "^8.4.38",
+    "tailwindcss": "^3.4.17"
+  }
+}

package/postcss.d.ts

@@ -0,0 +1,19 @@
+import type { PluginCreator } from 'postcss';
+
+interface TailUIPostCSSOptions {
+  /** Override the styles directory path */
+  path?: string;
+}
+
+/**
+ * TailUI PostCSS Plugin
+ *
+ * Auto-injects all ui.*.css component styles before @tailwind components
+ * so the dev never has to manage CSS import order manually.
+ *
+ * @example
+ * // postcss.config.js
+ * plugins: { '@tailuicss/core/postcss': {}, tailwindcss: {} }
+ */
+declare const tailuiPostCSS: PluginCreator<TailUIPostCSSOptions>;
+export = tailuiPostCSS;

package/postcss.js

@@ -0,0 +1,2 @@
+// Entry point for require('@tailuicss/core/postcss')
+module.exports = require('./src/postcss');