shadcn-glass-ui 2.0.6 → 2.0.9

package/README.md

@@ -1,116 +1,120 @@
 # shadcn-glass-ui
 
-<div align="center">
-
-![Glass Theme Preview](src/components/__visual__/__screenshots__/componentshowcase.visual.test.tsx/componentshowcase-full-glass-chromium.png)
-
-**Glassmorphism UI components for React** — drop-in shadcn/ui compatible, AI-optimized
-
-[Live Demo](https://yhooi2.github.io/shadcn-glass-ui-library/) |
-[Storybook](https://yhooi2.github.io/shadcn-glass-ui-library/) |
-[npm](https://www.npmjs.com/package/shadcn-glass-ui)
-
-</div>
-
 [![npm version](https://img.shields.io/npm/v/shadcn-glass-ui.svg)](https://www.npmjs.com/package/shadcn-glass-ui)
 [![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)
 
----
-
-## At a Glance
+**Glassmorphism UI components for React** — beautiful frosted glass effects, 58 production-ready
+components, 3 themes, drop-in compatible with shadcn/ui.
 
-| Feature           | Details                                                                                 |
-| ----------------- | --------------------------------------------------------------------------------------- |
-| **Components**    | 58 total: 18 Core + 7 Atomic + 13 Composite + 7 Section + 10 Specialized + 3 Primitives |
-| **Themes**        | Glass (dark), Light (clean), Aurora (gradient)                                          |
-| **Stack**         | React 19, TypeScript 5.9, Tailwind 4.1, Vite 7                                          |
-| **Testing**       | 1,570+ tests (802 visual + 650 compliance + 125 unit)                                   |
-| **AI Support**    | Optimized for Claude, Copilot, GPT — [AI Guide](docs/AI_USAGE.md)                       |
-| **Accessibility** | WCAG 2.1 AA, 44px touch targets, keyboard navigation                                    |
-| **Bundle Size**   | ~110KB gzipped                                                                          |
+**[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)**
 
 ---
 
-## Quick Start
-
-### Option 1: shadcn CLI (Recommended)
-
-**For existing shadcn/ui projects.** Listed on [registry.directory](https://registry.directory).
+## Why shadcn-glass-ui?
 
-1. Add registry to `components.json`:
+| Feature              | shadcn-glass-ui                      | Standard 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       |
+| **Accessibility**    | WCAG 2.1 AA + 44px touch targets     | Basic a11y          |
 
-```json
-{
-  "registries": {
-    "@shadcn-glass-ui": {
-      "url": "https://raw.githubusercontent.com/Yhooi2/shadcn-glass-ui-library/main/public/r"
-    }
-  }
-}
-```
+**Key advantages:**
 
-2. Install components:
+- 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
 
-```bash
-npx shadcn@latest add @shadcn-glass-ui/button-glass @shadcn-glass-ui/input-glass
-```
+---
 
-[Full Registry Guide](docs/REGISTRY_USAGE.md)
+## Quick Start
 
-### Option 2: npm Package
+**Requirements:** React 18+, Tailwind CSS 4.1+
 
-**For new projects.**
+### Install
 
 ```bash
 npm install shadcn-glass-ui
 ```
 
+### Use
+
 ```tsx
-import { ButtonGlass, ThemeProvider } from 'shadcn-glass-ui';
+import { ButtonGlass, InputGlass, ThemeProvider } from 'shadcn-glass-ui';
 import 'shadcn-glass-ui/dist/styles.css';
 
 function App() {
   return (
     <ThemeProvider defaultTheme="glass">
-      <ButtonGlass variant="primary">Click me</ButtonGlass>
+      <div className="p-8 space-y-4">
+        <ButtonGlass variant="primary" size="lg">
+          Click me
+        </ButtonGlass>
+        <InputGlass placeholder="Enter text..." />
+      </div>
     </ThemeProvider>
   );
 }
 ```
 
-[Getting Started Guide](docs/GETTING_STARTED.md)
+**[Full Getting Started Guide →](docs/GETTING_STARTED.md)**
 
 ---
 
-## Components
+## Installation Methods
 
-| Core UI                                                                                                                              | Composite                                                                                                        | Specialized                                                                                                                            |
-| ------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- |
-| ![Buttons](src/components/__visual__/__screenshots__/componentshowcase.visual.test.tsx/componentshowcase-buttons-glass-chromium.png) | ![Metrics](src/components/__visual__/__screenshots__/desktop.visual.test.tsx/desktop-ai-card-glass-chromium.png) | ![Progress](src/components/__visual__/__screenshots__/componentshowcase.visual.test.tsx/componentshowcase-progress-glass-chromium.png) |
-| ButtonGlass, InputGlass, ModalGlass, TabsGlass...                                                                                    | MetricCardGlass, AICardGlass, YearCardGlass...                                                                   | SparklineGlass, StepperGlass, RainbowProgressGlass...                                                                                  |
+### Option 1: shadcn CLI (Recommended)
 
-[View All 58 Components](docs/COMPONENTS_CATALOG.md) |
-[Interactive Storybook](https://yhooi2.github.io/shadcn-glass-ui-library/)
+Listed on [registry.directory](https://registry.directory)!
 
----
+Add to `components.json`:
 
-## Why shadcn-glass-ui?
+```json
+{
+  "registries": {
+    "@shadcn-glass-ui": {
+      "url": "https://raw.githubusercontent.com/Yhooi2/shadcn-glass-ui-library/main/public/r"
+    }
+  }
+}
+```
 
-| Standard shadcn/ui | shadcn-glass-ui                                  |
-| ------------------ | ------------------------------------------------ |
-| Flat design        | Glassmorphism effects (blur, glow, transparency) |
-| Manual theming     | 3 built-in themes with token system              |
-| Basic components   | 58 components including analytics widgets        |
-| DIY accessibility  | WCAG 2.1 AA + touch targets out of the box       |
-| Generic docs       | AI-optimized documentation                       |
+Install components:
 
-**Seamless Integration:** Works alongside existing shadcn/ui components. Same patterns, same CLI.
+```bash
+npx shadcn@latest add @shadcn-glass-ui/button-glass @shadcn-glass-ui/input-glass
+```
+
+**[Registry Documentation →](docs/REGISTRY_USAGE.md)**
+
+### Option 2: npm Package
+
+```bash
+npm install shadcn-glass-ui
+```
+
+**[npm Installation Guide →](docs/GETTING_STARTED.md)**
 
 ---
 
-## Component Categories
+## Components
+
+| Category        | Count | Examples                                                      |
+| --------------- | ----- | ------------------------------------------------------------- |
+| **Core UI**     | 18    | ButtonGlass, InputGlass, ModalGlass, TabsGlass, CheckboxGlass |
+| **Atomic**      | 7     | SearchBoxGlass, ThemeToggleGlass, IconButtonGlass             |
+| **Composite**   | 13    | MetricCardGlass, AICardGlass, YearCardGlass                   |
+| **Sections**    | 7     | HeaderNavGlass, ProfileHeaderGlass, CareerStatsGlass          |
+| **Specialized** | 10    | SparklineGlass, StepperGlass, RainbowProgressGlass            |
+| **Primitives**  | 3     | TouchTarget, FormFieldWrapper, InteractiveCard                |
 
 <details>
 <summary><strong>Core UI (18)</strong> — Essential building blocks</summary>
@@ -139,7 +143,7 @@ ContributionMetricsGlass, MetricsGridGlass, RepositoryHeaderGlass, RepositoryMet
 </details>
 
 <details>
-<summary><strong>Section (7)</strong> — Full page sections</summary>
+<summary><strong>Sections (7)</strong> — Full page sections</summary>
 
 HeaderNavGlass, ProfileHeaderGlass, CareerStatsGlass, FlagsSectionGlass, TrustScoreCardGlass,
 ProjectsListGlass, HeaderBrandingGlass
@@ -155,27 +159,53 @@ with 3 variants)
 
 </details>
 
-[Full Component Catalog](docs/COMPONENTS_CATALOG.md)
+**[Full Component Catalog →](docs/COMPONENTS_CATALOG.md)** |
+**[Try in Storybook →](https://yhooi2.github.io/shadcn-glass-ui-library/)**
 
 ---
 
 ## Themes
 
-| Glass (Dark)                                                                                                                    | Light                                                                                                                           | Aurora                                                                                                                            |
-| ------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- |
-| ![Glass](src/components/__visual__/__screenshots__/componentshowcase.visual.test.tsx/componentshowcase-full-glass-chromium.png) | ![Light](src/components/__visual__/__screenshots__/componentshowcase.visual.test.tsx/componentshowcase-full-light-chromium.png) | ![Aurora](src/components/__visual__/__screenshots__/componentshowcase.visual.test.tsx/componentshowcase-full-aurora-chromium.png) |
-| Frosted glass effects                                                                                                           | Clean minimal                                                                                                                   | Gradient glow                                                                                                                     |
+Three built-in themes with seamless switching:
+
+- **Glass (Dark)** — Frosted glass effects with purple accents, blur + glow
+- **Light** — Clean minimal design with subtle glass effects
+- **Aurora** — Gradient glow with aurora borealis-inspired colors
 
 ```tsx
 import { ThemeProvider, useTheme } from 'shadcn-glass-ui';
 
 function ThemeSwitcher() {
-  const { theme, cycleTheme, setTheme } = useTheme();
-  return <button onClick={cycleTheme}>Current: {theme}</button>;
+  const { theme, cycleTheme } = useTheme();
+  return <button onClick={cycleTheme}>Theme: {theme}</button>;
 }
 ```
 
-[Theme Creation Guide](docs/THEME_CREATION_GUIDE.md) — Create custom themes in 15 minutes
+**[Theme Creation Guide →](docs/THEME_CREATION_GUIDE.md)** — Create custom themes in 15 minutes
+
+---
+
+## AI Support
+
+This library is optimized for AI coding assistants:
+
+- **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)
+
+**[AI Usage Guide →](docs/AI_USAGE.md)**
+
+---
+
+## CLI
+
+```bash
+npx shadcn-glass-ui info button     # Component info (fuzzy search)
+npx shadcn-glass-ui list            # List all components
+npx shadcn-glass-ui list --category=core  # Filter by category
+```
 
 ---
 
@@ -184,7 +214,7 @@ function ThemeSwitcher() {
 <details>
 <summary><strong>How do I migrate from v1.x to v2.0?</strong></summary>
 
-v2.0 renames CSS variables to semantic names. Run the automated migration:
+v2.0 renames CSS variables to semantic names. Run automated migration:
 
 ```bash
 find src/ -type f \( -name "*.tsx" -o -name "*.css" \) -exec sed -i '' \
@@ -194,14 +224,15 @@ find src/ -type f \( -name "*.tsx" -o -name "*.css" \) -exec sed -i '' \
   -e 's/--metric-red-/--metric-destructive-/g' {} +
 ```
 
-[Full Migration Guide](docs/BREAKING_CHANGES.md)
+**[Full Migration Guide →](docs/BREAKING_CHANGES.md)**
 
 </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.
+Yes! Glass components use the same patterns and can coexist with standard shadcn/ui components. Same
+CLI, same structure.
 
 </details>
 
@@ -209,50 +240,73 @@ Yes! Glass components use the same patterns and can coexist with standard shadcn
 <summary><strong>What are the requirements?</strong></summary>
 
 - React 18.0+ or 19.0+
-- Tailwind CSS 4.0+
+- React-DOM 18.0+ or 19.0+
+- Tailwind CSS 4.1+
 - Node.js 20.16+
 
 </details>
 
 <details>
-<summary><strong>How do I use with AI assistants?</strong></summary>
+<summary><strong>Where are breaking changes documented?</strong></summary>
 
-See our [AI Usage Guide](docs/AI_USAGE.md) with decision trees for Claude, Copilot, and GPT. The
-library is indexed on [Context7](https://context7.com/yhooi2/shadcn-glass-ui-library).
+- **[BREAKING_CHANGES.md](docs/BREAKING_CHANGES.md)** — v1.0 and v2.0 changes
+- **[CHANGELOG.md](CHANGELOG.md)** — Complete version history
+- **[Migration Guides](docs/migration/)** — Step-by-step migration
 
 </details>
 
 <details>
-<summary><strong>Where are the breaking changes documented?</strong></summary>
+<summary><strong>How do I create a custom theme?</strong></summary>
 
-- [BREAKING_CHANGES.md](docs/BREAKING_CHANGES.md) — Consolidated v1.0 and v2.0 changes
-- [CHANGELOG.md](CHANGELOG.md) — Complete version history
-- [Migration Guides](docs/migration/) — Step-by-step migration
+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>
 
-## Documentation
+```tsx
+<ModalGlass.Root open={open} onOpenChange={setOpen}>
+  <ModalGlass.Overlay />
+  <ModalGlass.Content>
+    <ModalGlass.Header>
+      <ModalGlass.Title>Title</ModalGlass.Title>
+      <ModalGlass.Close />
+    </ModalGlass.Header>
+    <ModalGlass.Body>Content</ModalGlass.Body>
+  </ModalGlass.Content>
+</ModalGlass.Root>
+```
 
-| Resource                                                       | Description                 |
-| -------------------------------------------------------------- | --------------------------- |
-| [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           |
-| [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    |
-| [Advanced Patterns](docs/ADVANCED_PATTERNS.md)                 | asChild, Compound APIs      |
-| [Breaking Changes](docs/BREAKING_CHANGES.md)                   | Migration guides            |
+**[Advanced Patterns →](docs/ADVANCED_PATTERNS.md)**
 
-## CLI
+</details>
 
-```bash
-npx shadcn-glass-ui info button    # Component info (fuzzy search)
-npx shadcn-glass-ui list           # List all components
-npx shadcn-glass-ui list --category=core  # Filter by category
-```
+---
+
+## Documentation
+
+| Resource                                                           | Description                 |
+| ------------------------------------------------------------------ | --------------------------- |
+| **[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           |
+| **[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    |
+| **[Advanced Patterns](docs/ADVANCED_PATTERNS.md)**                 | asChild, Compound APIs      |
+| **[Breaking Changes](docs/BREAKING_CHANGES.md)**                   | Migration guides            |
 
 ---
 

package/dist/cli/index.cjs

@@ -1,5 +1,5 @@
 #!/usr/bin/env node
-const require_trust_score_card_glass = require("../trust-score-card-glass-r3qM09Jp.cjs");
+const require_trust_score_card_glass = require("../trust-score-card-glass-Dgu46oWI.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-r3qM09Jp.cjs");
-require("./utils-DLXayspX.cjs");
-require("./use-focus-ZE8ozmZE.cjs");
-require("./theme-context-CVW50BKW.cjs");
+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");
 exports.AICardGlass = require_trust_score_card_glass.AICardGlass;
 exports.AlertGlass = require_trust_score_card_glass.AlertGlass;
 exports.AvatarGlass = require_trust_score_card_glass.AvatarGlass;