shadcn-glass-ui 1.0.11 → 2.0.0

package/docs/announcements/v1.0.5-devto.md

@@ -0,0 +1,363 @@
+---
+title: Introducing shadcn-glass-ui v1.0.5 - 72 Glass Variants for Modern React UIs
+published: true
+description: A comprehensive glassmorphism UI component library with 72 glass variants, dual registry publishing, and full shadcn/ui compatibility
+tags: react, typescript, tailwindcss, opensource
+cover_image: [Add screenshot of GlassVariantsDemo]
+canonical_url: https://github.com/Yhooi2/shadcn-glass-ui-library
+---
+
+# Introducing shadcn-glass-ui v1.0.5 🎨
+
+I'm excited to announce **v1.0.5** of shadcn-glass-ui, a modern glassmorphism UI component library built on top of shadcn/ui with full compatibility!
+
+## TL;DR
+
+- 🎨 **72 Glass Variants** (4 base × 6 tints × 3 intensities)
+- 📦 **Dual Registry** (npm + GitHub Packages)
+- 🧪 **27 New Visual Tests** across 3 themes
+- ✨ **48 Components** with WCAG 2.1 AA compliance
+- ⚡ **Modern Stack** (React 19, Tailwind v4, TypeScript 5.9)
+
+[Try it live](https://yhooi2.github.io/shadcn-glass-ui-library/) | [GitHub](https://github.com/Yhooi2/shadcn-glass-ui-library) | [npm](https://www.npmjs.com/package/@yhooi2/shadcn-glass-ui)
+
+---
+
+## What's New in v1.0.5?
+
+### 1. Comprehensive Glass Variants System
+
+We've introduced a powerful glass effect system with **72 total combinations**:
+
+#### Base Variants (4)
+- `crystal` - Ultra-clear glass with minimal blur
+- `frosted` - Classic frosted glass effect
+- `fluted` - Textured glass with vertical ridges
+- `glass` - Standard glassmorphism
+
+#### Color Tints (6)
+- `purple` - Violet tint for luxury feel
+- `cyan` - Blue-green tint for tech vibes
+- `amber` - Warm golden tint
+- `emerald` - Green tint for natural look
+- `rose` - Pink tint for soft elegance
+- `neutral` (default) - No color tint
+
+#### Intensity Modifiers (3)
+- `subtle` - Lighter glass effect
+- `medium` (default) - Balanced effect
+- `strong` - More pronounced glass
+
+### Usage Example
+
+```tsx
+import { GlassCard } from '@yhooi2/shadcn-glass-ui';
+import '@yhooi2/shadcn-glass-ui/dist/styles.css';
+
+function App() {
+  return (
+    <div className="p-8 grid grid-cols-3 gap-4">
+      {/* Crystal clear with purple tint */}
+      <GlassCard variant="crystal" tint="purple">
+        <h3>Crystal Purple</h3>
+        <p>Ultra-clear with violet tint</p>
+      </GlassCard>
+
+      {/* Frosted glass with cyan tint and subtle intensity */}
+      <GlassCard variant="frosted" tint="cyan" intensity="subtle">
+        <h3>Frosted Cyan</h3>
+        <p>Soft frosted effect</p>
+      </GlassCard>
+
+      {/* Fluted glass with amber tint and strong intensity */}
+      <GlassCard variant="fluted" tint="amber" intensity="strong">
+        <h3>Fluted Amber</h3>
+        <p>Textured with warm glow</p>
+      </GlassCard>
+    </div>
+  );
+}
+```
+
+### 2. Dual Registry Publishing
+
+shadcn-glass-ui is now available on both:
+
+**npm Registry (Recommended)**
+```bash
+npm install @yhooi2/shadcn-glass-ui
+```
+
+**GitHub Packages** (for enterprise environments)
+```bash
+# Add .npmrc
+echo "@yhooi2:registry=https://npm.pkg.github.com" >> .npmrc
+
+# Authenticate
+npm login --scope=@yhooi2 --registry=https://npm.pkg.github.com
+
+# Install
+npm install @yhooi2/shadcn-glass-ui
+```
+
+This dual-registry approach provides:
+- **Public access** via npm for easy installation
+- **Enterprise security** via GitHub Packages with authentication
+- **Automated publishing** on each release via GitHub Actions
+
+### 3. Interactive GlassVariantsDemo
+
+Try all 72 glass variant combinations in the new interactive demo:
+
+```tsx
+import { GlassVariantsDemo } from '@yhooi2/shadcn-glass-ui';
+
+<GlassVariantsDemo />
+```
+
+Features:
+- Real-time preview of all variants
+- Theme switcher (Glass/Light/Aurora)
+- Copy code snippets
+- Test on different backgrounds
+
+[Live Demo →](https://yhooi2.github.io/shadcn-glass-ui-library/?path=/story/components-glassvariants)
+
+---
+
+## Library Overview
+
+### 48 Components Organized by Category
+
+**Core UI (16)**
+- ButtonGlass, InputGlass, GlassCard, ProgressGlass, BadgeGlass, AlertGlass
+- ToggleGlass, CheckboxGlass, TabsGlass, TooltipGlass, SliderGlass
+- SkeletonGlass, ModalGlass, DropdownGlass, AvatarGlass, NotificationGlass
+
+**Atomic (4)**
+- StatusIndicatorGlass - Status dots with glow
+- SegmentedControlGlass - Button groups
+- RainbowProgressGlass - Gradient progress
+- LanguageBarGlass - Language proficiency
+
+**Composites (5)**
+- MetricCardGlass, ProfileAvatarGlass, FlagAlertGlass, YearCardGlass, AICardGlass
+
+**Sections (6)**
+- HeaderNavGlass, TrustScoreCardGlass, ProfileHeaderGlass
+- CareerStatsGlass, FlagsSectionGlass, RepoCardGlass
+
+**Blocks (6)**
+- ButtonsBlock, FormElementsBlock, ProgressBlock
+- AvatarGalleryBlock, BadgesBlock, NotificationsBlock
+
+**New in v1.0+ (11)**
+- ComboBoxGlass, PopoverGlass, SearchBoxGlass, SortDropdownGlass
+- And 7 more specialized components
+
+### 3 Built-in Themes
+
+**Glass Theme (Dark Glassmorphism)**
+```tsx
+<ThemeProvider defaultTheme="glass">
+  <App />
+</ThemeProvider>
+```
+
+**Light Theme (Clean Minimal)**
+```tsx
+<ThemeProvider defaultTheme="light">
+  <App />
+</ThemeProvider>
+```
+
+**Aurora Theme (Gradient Glow)**
+```tsx
+<ThemeProvider defaultTheme="aurora">
+  <App />
+</ThemeProvider>
+```
+
+### Advanced Patterns
+
+**asChild Polymorphic Rendering** (using Radix UI Slot)
+```tsx
+<ButtonGlass asChild>
+  <Link href="/">Home</Link>
+</ButtonGlass>
+```
+
+**Compound Components** (ModalGlass, TabsGlass)
+```tsx
+<ModalGlass.Root open={open} onOpenChange={setOpen}>
+  <ModalGlass.Overlay />
+  <ModalGlass.Content>
+    <ModalGlass.Header>
+      <ModalGlass.Title>Title</ModalGlass.Title>
+      <ModalGlass.Description>Description</ModalGlass.Description>
+      <ModalGlass.Close />
+    </ModalGlass.Header>
+    <ModalGlass.Body>
+      <p>Modal content</p>
+    </ModalGlass.Body>
+    <ModalGlass.Footer>
+      <ButtonGlass>Action</ButtonGlass>
+    </ModalGlass.Footer>
+  </ModalGlass.Content>
+</ModalGlass.Root>
+```
+
+---
+
+## Modern Tech Stack
+
+- **React 19.2** - Latest stable release with Server Components
+- **TypeScript 5.9** - Strict type checking
+- **Tailwind CSS 4.1** - 5x faster builds, CSS variables by default
+- **Vite 7** (rolldown-vite) - 3-16x faster builds with Rust
+- **Storybook 10.1** - ESM-only, 29% smaller install
+- **Vitest 4.0** - Browser mode with visual regression
+
+See [DEPENDENCIES.md](https://github.com/Yhooi2/shadcn-glass-ui-library/blob/main/DEPENDENCIES.md) for details.
+
+---
+
+## Accessibility & Quality
+
+✅ **WCAG 2.1 AA Compliant** - Full accessibility with automated testing
+✅ **Touch-Optimized** - 44×44px minimum touch targets (Apple HIG)
+✅ **609 Visual Tests** - 100% pass rate in CI (Linux ubuntu-latest)
+✅ **TypeScript Strict** - No `any` types
+✅ **ESLint + Prettier** - Consistent code style
+✅ **90% Test Coverage** - Comprehensive unit + integration tests
+
+---
+
+## Installation & Usage
+
+### 1. Install Package
+
+```bash
+npm install @yhooi2/shadcn-glass-ui
+```
+
+### 2. Import Styles
+
+```tsx
+import '@yhooi2/shadcn-glass-ui/dist/styles.css';
+```
+
+### 3. Wrap with Theme Provider
+
+```tsx
+import { ThemeProvider } from '@yhooi2/shadcn-glass-ui';
+
+function App() {
+  return (
+    <ThemeProvider defaultTheme="glass">
+      <YourApp />
+    </ThemeProvider>
+  );
+}
+```
+
+### 4. Use Components
+
+```tsx
+import { ButtonGlass, InputGlass, GlassCard } from '@yhooi2/shadcn-glass-ui';
+
+function Dashboard() {
+  return (
+    <GlassCard variant="frosted" tint="purple">
+      <h1>Dashboard</h1>
+      <InputGlass placeholder="Search..." />
+      <ButtonGlass variant="primary">Submit</ButtonGlass>
+    </GlassCard>
+  );
+}
+```
+
+---
+
+## Development Highlights
+
+### Automated CI/CD
+- **Dual-registry publishing** on GitHub Release
+- **Version verification** before publish
+- **Visual test generation** on Linux CI
+- **Registry validation** for both npm + GitHub Packages
+
+### Git Hooks
+- Pre-commit hook prevents committing macOS screenshots
+- Ensures visual tests are platform-consistent (Linux only)
+- Automated via `./scripts/setup-git-hooks.sh`
+
+### Performance
+- **Bundle Size**: ~541 KB (minified), ~62 KB (gzipped)
+- **Build Speed**: 3-16x faster with Rolldown vs Rollup
+- **CSS Performance**: 5x faster full builds, 100x faster incremental
+
+---
+
+## Links & Resources
+
+- 📚 **Live Storybook**: https://yhooi2.github.io/shadcn-glass-ui-library/
+- 📦 **npm Package**: https://www.npmjs.com/package/@yhooi2/shadcn-glass-ui
+- 🐙 **GitHub**: https://github.com/Yhooi2/shadcn-glass-ui-library
+- 📖 **Documentation**: [Getting Started Guide](https://github.com/Yhooi2/shadcn-glass-ui-library/blob/main/docs/GETTING_STARTED.md)
+- 🔧 **Contributing**: [CONTRIBUTING.md](https://github.com/Yhooi2/shadcn-glass-ui-library/blob/main/CONTRIBUTING.md)
+- 📋 **Changelog**: [CHANGELOG.md](https://github.com/Yhooi2/shadcn-glass-ui-library/blob/main/CHANGELOG.md)
+
+---
+
+## What's Next?
+
+We're constantly improving shadcn-glass-ui. Upcoming features:
+- Additional glass variants (iridescent, holographic)
+- More composite components (Dashboard blocks, Analytics cards)
+- Enhanced Storybook integration with Chromatic
+- Performance optimizations for bundle size
+
+---
+
+## Contributing
+
+We welcome contributions! Here's how:
+
+1. Fork the repo: https://github.com/Yhooi2/shadcn-glass-ui-library/fork
+2. Create a feature branch: `git checkout -b feature/amazing-feature`
+3. Run tests: `npm run test:compliance:run`
+4. Commit with conventional commits: `feat(ui): add DatePickerGlass component`
+5. Push and create a Pull Request
+
+See [CONTRIBUTING.md](https://github.com/Yhooi2/shadcn-glass-ui-library/blob/main/CONTRIBUTING.md) for details.
+
+---
+
+## License
+
+MIT License - free for personal and commercial use.
+
+---
+
+## Credits
+
+Built with amazing open source projects:
+- [shadcn/ui](https://ui.shadcn.com/) - Design system foundation
+- [Radix UI](https://www.radix-ui.com/) - Unstyled, accessible components
+- [Tailwind CSS](https://tailwindcss.com/) - Utility-first CSS
+- [Vite](https://vitejs.dev/) - Next generation frontend tooling
+- [Storybook](https://storybook.js.org/) - Component workshop
+- [Vitest](https://vitest.dev/) - Blazing fast unit test framework
+
+---
+
+**⭐ Star the repo if you find it useful!**
+https://github.com/Yhooi2/shadcn-glass-ui-library
+
+**📢 Share your feedback!**
+Open an issue or discussion on GitHub - we'd love to hear from you!
+
+---
+
+*Made with ❤️ and glassmorphism*

package/docs/announcements/v1.0.5-reddit.md

@@ -0,0 +1,115 @@
+# Reddit Announcement - v1.0.5
+
+## Post for r/reactjs
+
+**Title:** [Release] shadcn-glass-ui v1.0.5 - Glassmorphism UI Library with 72 Variants
+
+**Body:**
+
+Hi r/reactjs! 👋
+
+I'm excited to share **shadcn-glass-ui v1.0.5**, a modern glassmorphism UI component library built on top of shadcn/ui with full compatibility.
+
+## 🎉 What's New in v1.0.5
+
+### Glass Variants System
+We've introduced a comprehensive glass effect system with **72 total combinations**:
+- **4 base variants**: crystal, frosted, fluted, glass
+- **6 color tints**: purple, cyan, amber, emerald, rose, neutral
+- **3 intensity levels**: subtle, medium, strong
+
+```tsx
+import { GlassCard } from '@yhooi2/shadcn-glass-ui';
+
+<GlassCard variant="frosted" tint="purple" intensity="medium">
+  Mix and match to create the perfect glass effect!
+</GlassCard>
+```
+
+### Dual Registry Publishing
+Now available on both:
+- **npm Registry** (recommended): `npm install @yhooi2/shadcn-glass-ui`
+- **GitHub Packages**: For enterprise environments with enhanced security
+
+## 🌟 Library Highlights
+
+- **48 Components**: Core UI (16) + Atomic (4) + Composites (5) + Sections (6) + Blocks (6) + New (11)
+- **3 Built-in Themes**: Glass (dark glassmorphism), Light (clean minimal), Aurora (gradient glow)
+- **Advanced Patterns**: asChild polymorphic rendering, Compound components (Modal, Tabs)
+- **Accessibility**: WCAG 2.1 AA compliant with automated testing
+- **Touch-Optimized**: 44×44px minimum touch targets (Apple HIG)
+- **Modern Stack**: React 19, Tailwind v4, TypeScript 5.9, Vitest 4, Storybook 10, Vite 7
+
+## 🚀 Quick Start
+
+```bash
+npm install @yhooi2/shadcn-glass-ui
+```
+
+```tsx
+import { ButtonGlass, InputGlass, ThemeProvider } from '@yhooi2/shadcn-glass-ui';
+import '@yhooi2/shadcn-glass-ui/dist/styles.css';
+
+function App() {
+  return (
+    <ThemeProvider defaultTheme="glass">
+      <div className="p-8 space-y-4">
+        <ButtonGlass variant="primary" size="lg">
+          Click me
+        </ButtonGlass>
+        <InputGlass placeholder="Enter text..." />
+      </div>
+    </ThemeProvider>
+  );
+}
+```
+
+## 🔗 Links
+
+- **Live Demo**: https://yhooi2.github.io/shadcn-glass-ui-library/
+- **GitHub**: https://github.com/Yhooi2/shadcn-glass-ui-library
+- **npm Package**: https://www.npmjs.com/package/@yhooi2/shadcn-glass-ui
+- **Documentation**: Full API docs in Storybook
+- **Changelog**: [CHANGELOG.md](https://github.com/Yhooi2/shadcn-glass-ui-library/blob/main/CHANGELOG.md)
+
+## 📊 Stats
+
+- 609 visual regression tests (100% pass rate in CI)
+- Bundle Size: ~62 KB (minified + gzipped)
+- MIT License
+- TypeScript strict mode
+- ESM + CJS support
+
+## 🎨 Interactive Demo
+
+The new `GlassVariantsDemo` component showcases all 72 glass variant combinations in an interactive grid. You can:
+- Switch between Glass/Light/Aurora themes
+- See real-time preview of all variants
+- Copy code snippets for each combination
+- Test on different backgrounds
+
+Try it live: https://yhooi2.github.io/shadcn-glass-ui-library/?path=/story/components-glassvariants
+
+## 💬 Feedback Welcome!
+
+This is an open-source project and we'd love to hear your thoughts:
+- What features would you like to see?
+- Any bugs or issues?
+- Suggestions for improvements?
+
+Feel free to open an issue or discussion on GitHub!
+
+---
+
+**Star the repo if you find it useful!** ⭐
+https://github.com/Yhooi2/shadcn-glass-ui-library
+
+---
+
+## Additional Subreddits
+
+### r/webdev
+**Title:** Glassmorphism UI Library for React - 72 Glass Variants with Tailwind v4
+
+### r/Frontend
+**Title:** shadcn-glass-ui v1.0.5 - Modern Glassmorphism Components with Full shadcn/ui Compatibility

package/docs/announcements/v1.0.5-twitter.md

@@ -0,0 +1,70 @@
+# Twitter Announcement - v1.0.5
+
+## Thread Structure
+
+### Tweet 1 (Main)
+🚀 shadcn-glass-ui v1.0.5 is here!
+
+✨ 72 Glass Variants (crystal, frosted, fluted, glass)
+🎨 Color tints & intensity modifiers
+📦 Dual registry: npm + GitHub Packages
+🧪 27 new visual tests
+
+Perfect for modern glassmorphism UIs!
+
+👉 https://github.com/Yhooi2/shadcn-glass-ui-library
+
+#React #shadcn #UI #TypeScript
+
+### Tweet 2 (Code Example)
+```tsx
+import { GlassCard } from '@yhooi2/shadcn-glass-ui';
+
+<GlassCard
+  variant="frosted"
+  tint="purple"
+  intensity="medium"
+>
+  Beautiful glassmorphism 💎
+</GlassCard>
+```
+
+72 combinations = 4 variants × 6 tints × 3 intensities
+
+### Tweet 3 (Features)
+What's included:
+
+🎯 48 Components (Core + Atomic + Composites + Sections + Blocks)
+🌈 3 Themes (Glass, Light, Aurora)
+♿ WCAG 2.1 AA compliant
+📱 Touch-optimized (44×44px targets)
+⚡ React 19 + Tailwind v4 + TypeScript 5.9
+
+### Tweet 4 (Installation)
+Get started in seconds:
+
+```bash
+npm install @yhooi2/shadcn-glass-ui
+```
+
+📚 Docs: https://yhooi2.github.io/shadcn-glass-ui-library/
+📦 npm: https://www.npmjs.com/package/@yhooi2/shadcn-glass-ui
+⭐ Give us a star!
+
+### Tweet 5 (Visual)
+Check out the interactive demo showcasing all 72 glass variant combinations! 🎨
+
+[Attach screenshot of GlassVariantsDemo from Storybook]
+
+Live demo: https://yhooi2.github.io/shadcn-glass-ui-library/
+
+---
+
+## Media Suggestions
+- Screenshot of GlassVariantsDemo showing all variants
+- GIF cycling through different glass effects
+- Before/After comparison of variants
+- Side-by-side theme comparison (Glass/Light/Aurora)
+
+## Hashtags
+#React #TypeScript #TailwindCSS #shadcn #UI #WebDev #Frontend #OpenSource #Glassmorphism #Design