shadcn-glass-ui 2.0.12 → 2.1.1

package/CHANGELOG.md

@@ -5,7 +5,200 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project
 adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## [2.0.0] - 2025-12-11
+## [2.1.0] - 2025-12-14
+
+### 🎉 Complete v2.0.0 Migration Applied
+
+This release applies all v2.0.0 API changes across the entire codebase, ensuring consistency and
+completing the migration roadmap.
+
+### ✨ Features
+
+#### Component Implementations Updated
+
+- **ButtonGlass** - All instances migrated to v2.0.0 API (`variant="default"`, `variant="link"`,
+  `size="default"`)
+- **ToggleGlass** - All instances migrated to v2.0.0 API (`pressed`, `onPressedChange`)
+- **SliderGlass** - All instances migrated to v2.0.0 API (`value: number[]`, `onValueChange`)
+- **ComboBoxGlass** - All instances migrated to v2.0.0 API (`onValueChange`)
+
+#### Demo Screenshots Added
+
+- 📸 **GitHub Pages screenshots** - Added demo-screenshot.png and demo-screenshot-aurora.png to
+  public directory
+- 🎨 **Visual documentation** - Both Glass and Aurora theme screenshots in README
+
+### 📚 Documentation
+
+#### Comprehensive Documentation Audit
+
+- **Removed v1.x legacy content** (-875 lines total):
+  - Deleted 3 outdated migration guides (select-to-combobox.md, modal-glass-compound-api.md,
+    tabs-glass-compound-api.md)
+  - Streamlined AI_USAGE.md: 1,463 → 855 lines (-42%)
+  - Streamlined BREAKING_CHANGES.md: 585 → 238 lines (-59%)
+  - Updated CLAUDE.md: removed v1.0.0 legacy examples
+- **Fixed all code examples** to use v2.0.0+ API patterns
+- **Fixed broken documentation links** across 16 files
+- **Updated component catalog** with correct API references
+- **Enhanced README** with v2.0.0 API compatibility badge
+
+#### Files Updated (Documentation)
+
+- README.md - Updated Quick Start examples with v2.0.0 API
+- CHANGELOG.md - Added complete v2.0.0 breaking changes
+- CONTRIBUTING.md - Fixed email placeholder
+- docs/AI_USAGE.md - Removed legacy content, focused on v2.0.0+
+- docs/BREAKING_CHANGES.md - Streamlined to v2.0.0 only
+- docs/COMPONENTS_CATALOG.md - Updated component references
+- docs/GETTING_STARTED.md - Fixed CLI command naming
+- docs/BEST_PRACTICES.md - Updated Tailwind version requirement (4.1+)
+- docs/api/README.md - Updated API documentation paths
+- docs/api/interfaces/ - Updated BadgeGlassProps, ButtonGlassProps
+
+### 🔧 Fixes
+
+- **Bundle size badge** - Replaced bundlephobia badge with static size badge (fixes dynamic loading
+  issues)
+
+### 📦 Internal Changes
+
+#### Test Coverage Maintained
+
+- **138/138 tests passing** ✅
+- All Storybook stories updated (.stories.tsx)
+- All unit tests updated (**tests**/)
+- All visual regression tests updated (**visual**/)
+- Compliance tests updated (accessibility, tokens, glassmorphism)
+
+#### Registry Updates
+
+Auto-updated component registry files:
+
+- button-glass.json, toggle-glass.json, slider-glass.json
+- combobox-glass.json, ai-card-glass.json, repository-card-glass.json
+- avatar-glass.json, badge-glass.json, year-card-glass.json
+
+#### Theme Files Updated
+
+Added component-specific CSS variables to all themes:
+
+- glass.css - Updated with semantic token mappings
+- light.css - Updated with semantic token mappings
+- aurora.css - Updated with semantic token mappings
+
+#### Files Changed
+
+- **90 files changed**: 2,556 insertions(+), 3,051 deletions(-)
+- Component implementations: 22 files
+- Storybook stories: 25+ files
+- Tests: 20+ files
+- Documentation: 16 files
+- Registry: 10 files
+- Demos: 6 files
+
+### 🎯 Impact
+
+- **100% codebase consistency** - All code now uses v2.0.0 API
+- **Cleaner documentation** - Removed 875 lines of outdated content
+- **Better DX** - All examples and documentation aligned with current API
+- **Zero tech debt** - No legacy API references remaining
+
+### 📖 Migration Guide
+
+All v2.0.0 migrations are now complete. For reference, see:
+
+- [BREAKING_CHANGES.md](docs/BREAKING_CHANGES.md) - Complete v2.0.0 migration guide
+- [API_PATTERNS_COMPARISON.md](docs/API_PATTERNS_COMPARISON.md) - Component API consistency
+  reference
+
+---
+
+## [2.0.0] - 2025-12-14
+
+### 🎉 MAJOR MILESTONE: 100% shadcn/ui API Compatibility
+
+All 20 core components now follow shadcn/ui naming conventions and API patterns.
+
+### 💥 BREAKING CHANGES
+
+#### ButtonGlass
+
+- **`variant="default"`** → **`variant="default"`** (shadcn/ui standard)
+- **`variant="link"`** → **`variant="link"`** (shadcn/ui standard)
+- **`size="default"`** → **`size="default"`** (shadcn/ui standard)
+- **Added**: `variant="outline"` with full theme support
+
+**Migration:**
+
+```tsx
+// Before v2.0
+<ButtonGlass variant="default" size="default">Click me</ButtonGlass>
+<ButtonGlass variant="link">Link</ButtonGlass>
+
+// After v2.0
+<ButtonGlass variant="default" size="default">Click me</ButtonGlass>
+<ButtonGlass variant="link">Link</ButtonGlass>
+```
+
+#### ToggleGlass
+
+- **`checked`** → **`pressed`** (shadcn/ui Toggle API)
+- **`onChange`** → **`onPressedChange`** (shadcn/ui convention)
+- **`size="default"`** → **`size="default"`**
+- **Added**: `defaultPressed` prop for uncontrolled mode
+- **Added**: `variant` prop ('default' | 'outline')
+- **ARIA**: `aria-checked` → `aria-pressed` (correct semantics for toggle switches)
+
+**Migration:**
+
+```tsx
+// Before v2.0
+<ToggleGlass checked={isOn} onChange={setIsOn} size="default" />
+
+// After v2.0 - Controlled
+<ToggleGlass pressed={isOn} onPressedChange={setIsOn} size="default" />
+
+// After v2.0 - Uncontrolled
+<ToggleGlass defaultPressed={true} variant="outline" />
+```
+
+#### SliderGlass
+
+- **Full migration to Radix UI primitives** (`@radix-ui/react-slider`)
+- **`value: number`** → **`value: number[]`** (range slider support)
+- **`onChange`** → **`onValueChange`** (shadcn/ui Slider API)
+- **Added**: `defaultValue: number[]` for uncontrolled mode
+- **Added**: `onValueCommit` callback (fires on mouse up / touch end)
+- **Added**: `orientation` prop ('horizontal' | 'vertical')
+- **Added**: Multiple thumbs support for range sliders
+
+**Migration:**
+
+```tsx
+// Before v2.0 - Single value
+<SliderGlass value={50} onChange={setValue} />
+
+// After v2.0 - Single value
+<SliderGlass value={[50]} onValueChange={setValue} />
+
+// After v2.0 - Range slider (NEW!)
+<SliderGlass defaultValue={[25, 75]} onValueChange={setRange} />
+```
+
+#### ComboBoxGlass
+
+- **`onChange`** → **`onValueChange`** (shadcn/ui convention)
+
+**Migration:**
+
+```tsx
+// Before v2.0
+<ComboBoxGlass options={options} value={value} onChange={setValue} />
+
+// After v2.0
+<ComboBoxGlass options={options} value={value} onValueChange={setValue} />
+```
 
 ### ✨ Added
 
@@ -124,13 +317,33 @@ find src/ -type f \( -name "*.tsx" -o -name "*.css" \) -exec sed -i '' \
   {} +
 ```
 
+### 🧪 Testing & Quality
+
+**Migration Test Coverage:**
+
+- **ButtonGlass**: 24/24 tests pass ✅
+- **ToggleGlass**: 36/36 tests pass ✅
+- **SliderGlass**: 34/34 tests pass ✅
+- **ComboBoxGlass**: 44/44 tests pass ✅
+- **Total migrated tests**: 138/138 pass (100%) ✅
+
+**Quality Checks:**
+
+- ✅ TypeScript: `tsc --noEmit` - No errors
+- ✅ Linting: `npm run lint` - No errors
+- ✅ Build: Production build successful (902ms)
+- ✅ All unit tests pass
+- ✅ All Storybook stories functional
+
 ### 📊 Statistics
 
-- **Components**: 57 → **58** (added StepperGlass)
+- **shadcn/ui API Compatibility**: **100%** (20/20 components)
+- **Components Migrated**: 4 (ButtonGlass, ToggleGlass, SliderGlass, ComboBoxGlass)
+- **Total Components**: 57 → **58** (added StepperGlass)
 - **Tests**: 1,355+ → **~1,570+**
   - Visual: 582 → **802** (+220 screenshots from StepperGlass variants)
   - Compliance: ~650
-  - Unit: ~125
+  - Unit: ~125 → **~138** (migrated components)
 - **Primitive Tokens**: **207** OKLCH color primitives
 - **CSS Variables**: **296+** per theme (glass, light, aurora)
 - **Hardcoded OKLCH**: **0** (was 98 in glass.css)
@@ -477,7 +690,7 @@ import { ButtonGlass, InputGlass } from 'shadcn-glass-ui';
   - **Old API:** `isOpen`, `onClose`, `title` props
   - **New API:** Compound API only (`ModalGlass.Root`, `.Overlay`, `.Content`, `.Header`, `.Body`,
     `.Footer`, `.Title`, `.Description`, `.Close`)
-  - **Migration:** See [ModalGlass Compound API guide](docs/migration/modal-glass-compound-api.md)
+  - **Migration:** See [Compound Components guide](docs/migration/compound-components-v2.md)
   - **Key Changes:**
     - `isOpen` → `open` (on ModalGlass.Root)
     - `onClose` → `onOpenChange` with new signature: `(open: boolean) => void`
@@ -487,7 +700,7 @@ import { ButtonGlass, InputGlass } from 'shadcn-glass-ui';
 - **TabsGlass:** Legacy props API completely removed
   - **Old API:** `tabs`, `activeTab`, `onChange` props
   - **New API:** Compound API only (`TabsGlass.Root`, `.List`, `.Trigger`, `.Content`)
-  - **Migration:** See [TabsGlass Compound API guide](docs/migration/tabs-glass-compound-api.md)
+  - **Migration:** See [Compound Components guide](docs/migration/compound-components-v2.md)
   - **Key Changes:**
     - `tabs` array prop removed → use individual `<TabsGlass.Trigger>` components
     - `activeTab` → `value` (on TabsGlass.Root)

package/README.md

@@ -4,15 +4,20 @@
 [![npm downloads](https://img.shields.io/npm/dm/shadcn-glass-ui.svg)](https://www.npmjs.com/package/shadcn-glass-ui)
 [![TypeScript](https://img.shields.io/badge/TypeScript-5.9-blue)](https://www.typescriptlang.org/)
 [![AI-Friendly](https://img.shields.io/badge/AI-Optimized-blueviolet)](docs/AI_USAGE.md)
-[![Bundle Size](https://img.shields.io/bundlephobia/minzip/shadcn-glass-ui)](https://bundlephobia.com/package/shadcn-glass-ui)
+[![Bundle Size](https://img.shields.io/bundlephobia/minzip/shadcn-glass-ui?cacheSeconds=86400)](https://bundlephobia.com/package/shadcn-glass-ui)
 
-**Glassmorphism UI components for React** — beautiful frosted glass effects, 58 production-ready
+**Glassmorphism UI components for React** — beautiful frosted glass effects, 57 production-ready
 components, 3 themes, drop-in compatible with shadcn/ui.
 
 **[Live Demo](https://yhooi2.github.io/shadcn-glass-ui-library/)** |
 **[Interactive Storybook](https://yhooi2.github.io/shadcn-glass-ui-library/)** |
 **[npm Package](https://www.npmjs.com/package/shadcn-glass-ui)**
 
+<div align="center">
+  <img src="https://yhooi2.github.io/shadcn-glass-ui-library/demo-screenshot.png" alt="shadcn-glass-ui Demo - Glass Theme" width="100%" />
+  <p><em>Glass theme showcase with glassmorphism effects</em></p>
+</div>
+
 ---
 
 ## Why shadcn-glass-ui?
@@ -22,16 +27,16 @@ components, 3 themes, drop-in compatible with shadcn/ui.
 | **Themes**           | 3 built-in (Glass/Light/Aurora)      | 1 base theme        |
 | **Glass Effects**    | Native blur, glow, transparency      | Manual CSS required |
 | **AI Documentation** | Optimized for Claude, Copilot, GPT   | Basic docs          |
-| **Components**       | 58 specialized glassmorphism         | ~40 base components |
-| **Token System**     | 207 OKLCH primitives, zero hardcoded | CSS variables       |
+| **Components**       | 57 specialized glassmorphism         | ~40 base components |
+| **Token System**     | 225 OKLCH primitives, zero hardcoded | CSS variables       |
 | **Accessibility**    | WCAG 2.1 AA + 44px touch targets     | Basic a11y          |
 
 **Key advantages:**
 
 - Works alongside existing shadcn/ui components — same patterns, same CLI
 - AI-first documentation with decision trees and Context7 integration
-- 1,570+ tests (visual regression, compliance, unit)
-- Create custom themes in 15 minutes with 3-layer token system
+- 1,500+ tests (visual regression, compliance, unit)
+- 3-layer token system with zero hardcoded values
 
 ---
 
@@ -55,7 +60,7 @@ function App() {
   return (
     <ThemeProvider defaultTheme="glass">
       <div className="p-8 space-y-4">
-        <ButtonGlass variant="primary" size="lg">
+        <ButtonGlass variant="default" size="lg">
           Click me
         </ButtonGlass>
         <InputGlass placeholder="Enter text..." />
@@ -181,21 +186,131 @@ function ThemeSwitcher() {
 }
 ```
 
-**[Theme Creation Guide →](docs/THEME_CREATION_GUIDE.md)** — Create custom themes in 15 minutes
+**[Theme Creation Guide →](docs/THEME_CREATION_GUIDE.md)**
+
+---
+
+## 3-Layer Token System
+
+Centralized color management with **zero hardcoded values**.
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│  Component Tokens   --btn-primary-bg, --modal-surface       │
+│         ↓                                                   │
+│  Semantic Tokens    --semantic-primary, --semantic-surface  │
+│         ↓                                                   │
+│  Primitive Tokens   --oklch-purple-500 (225 OKLCH colors)   │
+└─────────────────────────────────────────────────────────────┘
+```
+
+| Metric                  | Before (v1.x)  | After (v2.0)         |
+| ----------------------- | -------------- | -------------------- |
+| Hardcoded OKLCH values  | ~280 per theme | **0**                |
+| CSS variables per theme | ~85            | **296+ (inherited)** |
+
+**How it works:**
+
+1. Define ~15 semantic tokens for your theme
+2. 280+ component tokens are inherited automatically
+3. All 57 components update instantly
+
+```css
+/* Create a "neon" theme */
+[data-theme='neon'] {
+  --semantic-primary: var(--oklch-cyan-400);
+  --semantic-surface: var(--oklch-slate-950);
+  --semantic-text: var(--oklch-white-95);
+  /* ... ~12 more tokens */
+}
+```
+
+**[Token Architecture Guide →](docs/TOKEN_ARCHITECTURE.md)** |
+**[Theme Creation Guide →](docs/THEME_CREATION_GUIDE.md)**
+
+---
+
+## Full shadcn/ui Compatibility
+
+### 🎉 v2.0.0: 100% API Compatible
+
+**Install on top of existing shadcn/ui projects** — no migration required!
+
+All components now follow **exact shadcn/ui API conventions**:
+
+| Component         | shadcn/ui API                      | shadcn-glass-ui v2.0+ | Status |
+| ----------------- | ---------------------------------- | --------------------- | ------ |
+| **ButtonGlass**   | `variant="default"`                | ✅ Same               | 100%   |
+| **ToggleGlass**   | `pressed`, `onPressedChange`       | ✅ Same               | 100%   |
+| **SliderGlass**   | `value: number[]`, `onValueChange` | ✅ Same               | 100%   |
+| **ComboBoxGlass** | `value`, `onValueChange`           | ✅ Same               | 100%   |
+
+**Key improvements in v2.0:**
+
+- `onChange` → `onValueChange` (Select, ComboBox, Slider)
+- `checked` → `pressed` (Toggle components)
+- `variant="default"` → `variant="default"` (Button)
+- Array-based values for Slider (`number[]` instead of `number`)
+
+| Feature           | shadcn-glass-ui                                 | Standard shadcn/ui      |
+| ----------------- | ----------------------------------------------- | ----------------------- |
+| CLI installation  | `npx shadcn add @shadcn-glass-ui/button-glass`  | `npx shadcn add button` |
+| Core props        | `variant`, `size`, `className`                  | Same                    |
+| Callback names    | `onValueChange`, `onPressedChange`              | Same                    |
+| asChild pattern   | Full support                                    | Full support            |
+| TypeScript        | Strict mode                                     | Same                    |
+| Extended features | `loading`, `icon`, compound APIs, glassmorphism | —                       |
+
+**Mix and match freely:**
+
+```tsx
+import { Button } from '@/components/ui/button'; // Standard shadcn/ui
+import { ButtonGlass } from '@/components/glass/ui/button-glass'; // Glass variant
+
+function App() {
+  return (
+    <>
+      <Button variant="outline">Standard</Button>
+      <ButtonGlass variant="default">Glassmorphism</ButtonGlass>
+    </>
+  );
+}
+```
+
+**Add to existing project:**
+
+```bash
+# No migration needed - just add to components.json
+npx shadcn@latest add @shadcn-glass-ui/button-glass
+```
+
+**[Registry Documentation →](docs/REGISTRY_USAGE.md)**
 
 ---
 
-## AI Support
+## AI-First Documentation
+
+Built for AI coding assistants — Claude, Copilot, GPT understand this library perfectly.
 
-This library is optimized for AI coding assistants:
+| AI Tool            | Integration                                                    | What it provides                           |
+| ------------------ | -------------------------------------------------------------- | ------------------------------------------ |
+| **Claude Code**    | [CLAUDE.md](CLAUDE.md)                                         | 365-line project context, all patterns     |
+| **Context7 MCP**   | [Indexed](https://context7.com/yhooi2/shadcn-glass-ui-library) | 41 rules, auto-fetched docs, version-aware |
+| **GitHub Copilot** | TypeScript strict + JSDoc                                      | Accurate completions, type inference       |
+| **ChatGPT/GPT-4**  | [EXPORTS_MAP.json](docs/EXPORTS_MAP.json)                      | Machine-readable component registry        |
 
-- **Claude Code** — Project-specific instructions in [CLAUDE.md](CLAUDE.md)
-- **Context7** — [Indexed](https://context7.com/yhooi2/shadcn-glass-ui-library) with 59 AI-specific
-  rules
-- **GitHub Copilot** — TypeScript strict mode + comprehensive JSDoc
-- **ChatGPT/GPT-4** — Machine-readable [EXPORTS_MAP.json](docs/EXPORTS_MAP.json)
+**Context7 MCP enables:**
+
+```
+AI: "Add a stepper component to my checkout flow"
+
+→ Context7 fetches StepperGlass docs automatically
+→ AI reads: "compound API, linear mode for wizards"
+→ AI generates correct code with all props
+```
 
-**[AI Usage Guide →](docs/AI_USAGE.md)**
+**[AI Usage Guide →](docs/AI_USAGE.md)** — Decision trees, migration scripts, component
+recommendations
 
 ---
 
@@ -228,14 +343,6 @@ find src/ -type f \( -name "*.tsx" -o -name "*.css" \) -exec sed -i '' \
 
 </details>
 
-<details>
-<summary><strong>Does it work with existing shadcn/ui components?</strong></summary>
-
-Yes! Glass components use the same patterns and can coexist with standard shadcn/ui components. Same
-CLI, same structure.
-
-</details>
-
 <details>
 <summary><strong>What are the requirements?</strong></summary>
 
@@ -255,24 +362,6 @@ CLI, same structure.
 
 </details>
 
-<details>
-<summary><strong>How do I create a custom theme?</strong></summary>
-
-Use the 3-layer token system. Define ~15 semantic tokens and component tokens are inherited
-automatically.
-
-```css
-[data-theme='custom'] {
-  --semantic-primary: var(--oklch-cyan-400);
-  --semantic-surface: var(--oklch-slate-900);
-  /* ... */
-}
-```
-
-**[Theme Creation Guide →](docs/THEME_CREATION_GUIDE.md)**
-
-</details>
-
 <details>
 <summary><strong>How do I use Compound Components (Modal, Tabs, Stepper)?</strong></summary>
 
@@ -301,7 +390,7 @@ automatically.
 | ------------------------------------------------------------------ | --------------------------- |
 | **[Storybook](https://yhooi2.github.io/shadcn-glass-ui-library/)** | Interactive component demos |
 | **[Getting Started](docs/GETTING_STARTED.md)**                     | Setup tutorial              |
-| **[Component Catalog](docs/COMPONENTS_CATALOG.md)**                | All 58 components           |
+| **[Component Catalog](docs/COMPONENTS_CATALOG.md)**                | All 57 components           |
 | **[AI Usage Guide](docs/AI_USAGE.md)**                             | For Claude, Copilot, GPT    |
 | **[Theme Guide](docs/THEME_CREATION_GUIDE.md)**                    | Create custom themes        |
 | **[Token Architecture](docs/TOKEN_ARCHITECTURE.md)**               | 3-layer CSS token system    |

package/context7.json

@@ -1,9 +1,10 @@
 {
   "$schema": "https://context7.com/schema/context7.json",
   "projectTitle": "shadcn-glass-ui",
-  "description": "Glassmorphism UI library for React - AI-friendly with 58 components, strict TypeScript, and comprehensive docs",
+  "description": "Glassmorphism UI library for React - AI-friendly with 57 components, strict TypeScript, and comprehensive docs",
   "branch": "main",
   "folders": ["docs"],
+  "includeFiles": ["README.md", "CLAUDE.md", "CHANGELOG.md"],
   "excludeFolders": ["src", "node_modules", "dist", ".storybook", ".github", "public", "coverage"],
   "excludeFiles": ["package-lock.json", ".DS_Store"],
   "rules": [

package/dist/cli/index.cjs

@@ -1,5 +1,5 @@
 #!/usr/bin/env node
-const require_trust_score_card_glass = require("../trust-score-card-glass-Dgu46oWI.cjs");
+const require_trust_score_card_glass = require("../trust-score-card-glass-CGXmOIfq.cjs");
 let node_util = require("node:util");
 let node_fs = require("node:fs");
 let node_path = require("node:path");

package/dist/components.cjs

@@ -1,7 +1,7 @@
-const require_trust_score_card_glass = require("./trust-score-card-glass-Dgu46oWI.cjs");
-require("./utils-BXN7AcRu.cjs");
-require("./use-focus-BRkQtQCj.cjs");
-require("./theme-context-DNe_2vWJ.cjs");
+const require_trust_score_card_glass = require("./trust-score-card-glass-CGXmOIfq.cjs");
+require("./utils-LYxxWvUn.cjs");
+require("./use-focus-CeNHOiBa.cjs");
+require("./theme-context-BHXYJ4RE.cjs");
 exports.AICardGlass = require_trust_score_card_glass.AICardGlass;
 exports.AlertGlass = require_trust_score_card_glass.AlertGlass;
 exports.AvatarGlass = require_trust_score_card_glass.AvatarGlass;