shadcn-glass-ui 2.1.4 → 2.2.0

package/CHANGELOG.md

@@ -5,6 +5,57 @@ 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.2.0] - 2025-12-18
+
+### 🎉 100% shadcn/ui API Compatibility (Issue #3)
+
+This release achieves full API compatibility with shadcn/ui components, adding 6 new components and
+completing the compound component API patterns.
+
+### ✨ New Components
+
+#### Core UI Components (+6)
+
+- **SeparatorGlass** - Glass-styled divider with horizontal/vertical orientation
+- **ScrollAreaGlass** - Custom scrollable container with glass-themed scrollbar
+  - Sub-components: ScrollAreaGlass, ScrollBarGlass
+- **CollapsibleGlass** - Expandable/collapsible sections with smooth animations
+  - Compound API: Root, Trigger (with asChild), Content
+- **RadioGroupGlass** - Glass-styled radio button group with glow effects
+  - Compound API: Root, Item
+- **ToggleGroupGlass** - Segmented control / toggle button group
+  - Supports type='single'|'multiple', variant='default'|'outline', size='sm'|'default'|'lg'
+- **SheetGlass** - Side panel drawer with glass effects and backdrop blur
+  - Compound API: Root, Trigger, Content, Header, Footer, Title, Description, Close, Portal, Overlay
+  - Supports side='top'|'right'|'bottom'|'left'
+
+#### ModalGlass Enhancements
+
+- **ModalGlass.Trigger** - Added trigger component with asChild support
+- **ModalGlass.Portal** - Added portal component for custom positioning
+- Both controlled and uncontrolled modes now fully supported
+
+### 📦 Component Count
+
+- **Total components:** 57 → 63 (+6)
+- **Core UI:** 18 → 24 (+6)
+
+### 📚 Documentation
+
+- Updated Context7 index with 9 new component rules
+- Updated README.md component counts and examples
+- Updated Storybook Introduction with new statistics
+- Added Storybook stories for all 6 new components
+
+### 🔧 Technical
+
+- All components use Radix UI primitives for accessibility
+- Full TypeScript strict mode support
+- Consistent compound component API pattern across all new components
+- ESLint compliant with react-refresh and TypeScript rules
+
+---
+
 ## [2.1.1] - 2025-12-14
 
 ### 🐛 Bug Fixes

package/README.md

@@ -6,7 +6,7 @@
 [![Bundle Size](https://img.shields.io/bundlephobia/minzip/shadcn-glass-ui?cacheSeconds=86400)](https://bundlephobia.com/package/shadcn-glass-ui)
 [![AI-Friendly](https://img.shields.io/badge/AI-Optimized-blueviolet)](docs/AI_USAGE.md)
 
-**Glassmorphism components for React** — drop-in compatible with shadcn/ui. 57 components, 3 themes,
+**Glassmorphism components for React** — drop-in compatible with shadcn/ui. 63 components, 3 themes,
 zero migration.
 
 <div align="center">
@@ -27,7 +27,7 @@ npm install shadcn-glass-ui
 
 ```tsx
 import { ButtonGlass, ThemeProvider } from 'shadcn-glass-ui';
-import 'shadcn-glass-ui/dist/styles.css';
+import 'shadcn-glass-ui/styles.css';
 
 export default function App() {
   return (
@@ -92,16 +92,16 @@ import { ButtonGlass } from '@/components/glass/ui/button-glass';  // Glass vari
 
 ## Components
 
-| Category        | Count | Examples                                           |
-| --------------- | ----- | -------------------------------------------------- |
-| **Core UI**     | 18    | ButtonGlass, InputGlass, ModalGlass, TabsGlass     |
-| **Composite**   | 14    | MetricCardGlass, SplitLayoutGlass, AICardGlass     |
-| **Specialized** | 10    | StepperGlass, SparklineGlass, RainbowProgressGlass |
-| **Sections**    | 7     | HeaderNavGlass, ProfileHeaderGlass                 |
-| **Atomic**      | 7     | SearchBoxGlass, ThemeToggleGlass                   |
-| **Primitives**  | 3     | TouchTarget, FormFieldWrapper                      |
+| Category        | Count | Examples                                             |
+| --------------- | ----- | ---------------------------------------------------- |
+| **Core UI**     | 25    | ButtonGlass, ModalGlass, SheetGlass, RadioGroupGlass |
+| **Composite**   | 14    | MetricCardGlass, SplitLayoutGlass, AICardGlass       |
+| **Specialized** | 10    | StepperGlass, SparklineGlass, RainbowProgressGlass   |
+| **Sections**    | 7     | HeaderNavGlass, ProfileHeaderGlass                   |
+| **Atomic**      | 7     | SearchBoxGlass, ThemeToggleGlass                     |
+| **Primitives**  | 3     | TouchTarget, FormFieldWrapper                        |
 
-[**Browse all 58 components →**](https://yhooi2.github.io/shadcn-glass-ui-library/)
+[**Browse all 63 components →**](https://yhooi2.github.io/shadcn-glass-ui-library/)
 
 ---
 
@@ -128,7 +128,7 @@ Built for AI coding assistants:
 
 | Tool             | Integration                                                                    |
 | ---------------- | ------------------------------------------------------------------------------ |
-| **Context7 MCP** | [Auto-indexed](https://context7.com/yhooi2/shadcn-glass-ui-library) — 41 rules |
+| **Context7 MCP** | [Auto-indexed](https://context7.com/yhooi2/shadcn-glass-ui-library) — 63 rules |
 | **Claude Code**  | [CLAUDE.md](CLAUDE.md) — 365 lines of context                                  |
 | **Copilot**      | TypeScript strict + JSDoc                                                      |
 
@@ -142,7 +142,7 @@ Built for AI coding assistants:
 | ------------------------------------------------------------------ | --------------------- |
 | [**Storybook**](https://yhooi2.github.io/shadcn-glass-ui-library/) | Interactive demos     |
 | [**Getting Started**](docs/GETTING_STARTED.md)                     | Installation & setup  |
-| [**Component Catalog**](docs/COMPONENTS_CATALOG.md)                | All 57 components     |
+| [**Component Catalog**](docs/COMPONENTS_CATALOG.md)                | All 63 components     |
 | [**Theme Guide**](docs/THEME_CREATION_GUIDE.md)                    | Custom themes         |
 | [**Token Architecture**](docs/TOKEN_ARCHITECTURE.md)               | 3-layer CSS system    |
 | [**AI Usage**](docs/AI_USAGE.md)                                   | Claude, Copilot, GPT  |

package/context7.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://context7.com/schema/context7.json",
   "projectTitle": "shadcn-glass-ui",
-  "description": "Glassmorphism UI library for React - AI-friendly with 57 components, strict TypeScript, and comprehensive docs",
+  "description": "Glassmorphism UI library for React - AI-friendly with 63 components, strict TypeScript, and comprehensive docs",
   "branch": "main",
   "folders": ["docs"],
   "includeFiles": ["README.md", "CLAUDE.md", "CHANGELOG.md"],
@@ -11,7 +11,7 @@
     "Use 'variant' prop instead of 'type' for AlertGlass and NotificationGlass (v1.0 breaking change)",
     "Use 'variant=\"destructive\"' instead of 'variant=\"danger\"' for ButtonGlass",
     "Always wrap components with ThemeProvider from 'shadcn-glass-ui'",
-    "Import CSS: '@import \"shadcn-glass-ui/dist/styles.css\"' in main CSS file",
+    "Import CSS: '@import \"shadcn-glass-ui/styles.css\"' in main CSS file",
     "Use TypeScript strict mode - no 'any' types allowed",
     "ModalGlass and TabsGlass use compound component API (e.g., ModalGlass.Root, ModalGlass.Content)",
     "Three themes available: 'glass' (dark), 'light', 'aurora' (gradient)",
@@ -48,10 +48,36 @@
     "StepperGlass has 3 variants: numbered (default), icon, dots - use variant prop",
     "StepperGlass orientation: horizontal (default) or vertical",
     "StepperGlass supports linear mode (wizard pattern) - set linear prop to lock future steps",
-    "Use exported hooks: useFocus, useHover, useResponsive, useWallpaperTint for custom components"
+    "Use exported hooks: useFocus, useHover, useResponsive, useWallpaperTint for custom components",
+
+    "SplitLayoutGlass uses compound component API: Provider, Root, Sidebar, SidebarHeader, SidebarContent, SidebarFooter, Main, MainHeader, MainContent, MainFooter, Trigger, Accordion",
+    "SplitLayoutGlass.Provider accepts: selectedKey, onSelectedKeyChange, open, onOpenChange, defaultOpen (true), breakpoint ('sm'|'md'|'lg'|'xl'|'2xl'), mobileMode ('stack'|'accordion'|'drawer'), intensity ('subtle'|'medium'|'strong'), stickyOffset (24), urlParamName, keyboardShortcut ('b')",
+    "SplitLayoutGlass.Root accepts: ratio ({ sidebar: number; main: number }, default 1:2 = 33%/67%), minSidebarWidth ('300px'), maxSidebarWidth, gap (number | { mobile?: number; desktop?: number }), breakpoint, mobileLayout ('stack'|'main-only'|'sidebar-only')",
+    "SplitLayoutGlass.SidebarContent and MainContent have scrollable prop (default true) - enables ScrollArea wrapper for independent panel scrolling",
+    "useSplitLayout() returns: selectedKey, setSelectedKey, isOpen, setIsOpen, isMobileOpen, setMobileOpen, isMobile, toggle, state ('expanded'|'collapsed'), toggleSidebar (shadcn alias)",
+    "SplitLayoutGlass supports master-detail pattern via selectedKey state - use for documentation, dashboards, analytics layouts",
+
+    "SidebarGlass is 100% shadcn/ui Sidebar API compatible with compound component pattern",
+    "SidebarGlass compound components: Provider, Root, Header, Content, Footer, Rail, Inset, Trigger, Separator, Group, GroupLabel, GroupAction, GroupContent, Menu, MenuItem, MenuButton, MenuAction, MenuBadge, MenuSkeleton, MenuSub, MenuSubItem, MenuSubButton",
+    "SidebarGlass.Provider accepts: side ('left'|'right'), variant ('sidebar'|'floating'|'inset'), collapsible ('offcanvas'|'icon'|'none'), open, onOpenChange, defaultOpen (true), cookieName ('sidebar:state'), keyboardShortcut ('b')",
+    "SidebarGlass renders as mobile drawer (ModalGlass sheet) on mobile and collapsible sidebar with glassmorphism on desktop",
+    "SidebarGlass.Rail provides interactive collapse/expand rail with hover indicator - click or drag to toggle sidebar",
+    "SidebarGlass.MenuButton accepts: isActive (boolean), tooltip (string - shown in icon mode), variant ('default'|'outline'), size ('default'|'sm'|'lg')",
+    "useSidebar() returns: state ('expanded'|'collapsed'), open, setOpen, openMobile, setOpenMobile, isMobile, side, variant, collapsible, toggleSidebar",
+
+    "SeparatorGlass: Simple glass-styled divider with horizontal/vertical orientation. Use decorative=true (default) for visual-only separators",
+    "ScrollAreaGlass: Custom scrollable container with glass-styled scrollbar. Supports orientation='vertical'|'horizontal'|'both'",
+    "CollapsibleGlass: Expandable/collapsible section with compound API: Root, Trigger (with asChild), Content. Supports controlled/uncontrolled modes",
+    "RadioGroupGlass: Glass-styled radio button group with compound API: Root (value/onValueChange), Item. Uses Radix primitives",
+    "ToggleGroupGlass: Segmented control / toggle button group. Supports type='single'|'multiple', variant='default'|'outline', size='sm'|'default'|'lg'",
+    "SheetGlass: Side panel drawer with compound API: Root, Trigger, Content (side='top'|'right'|'bottom'|'left'), Header, Footer, Title, Description, Close",
+    "ModalGlass.Trigger: Opens modal with asChild support. Use inside ModalGlass.Root for uncontrolled modal (no need for useState)",
+    "ModalGlass uncontrolled mode: Use defaultOpen prop instead of open/onOpenChange for simpler state management",
+    "GlassCard compound components: GlassCardHeader, GlassCardTitle, GlassCardDescription, GlassCardAction, GlassCardContent, GlassCardFooter - 100% shadcn/ui Card compatible"
   ],
   "previousVersions": [
-    { "tag": "v2.0.0", "title": "Version 2.0.0 (Latest - Token Architecture)" },
+    { "tag": "v2.2.0", "title": "Version 2.2.0 (Latest - shadcn/ui API Compatibility)" },
+    { "tag": "v2.0.0", "title": "Version 2.0.0 (Token Architecture)" },
     { "tag": "v1.1.0", "title": "Version 1.1.0" },
     { "tag": "v1.0.11", "title": "Version 1.0.11" },
     { "tag": "v1.0.0", "title": "Version 1.0.0 (Breaking Changes)" }

package/dist/cli/index.cjs

@@ -1,5 +1,5 @@
 #!/usr/bin/env node
-const require_trust_score_card_glass = require("../trust-score-card-glass-2rjz00d_.cjs");
+const require_trust_score_card_glass = require("../trust-score-card-glass-CTsEVRD3.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-2rjz00d_.cjs");
-require("./utils-XlyXIhuP.cjs");
-require("./use-focus-DbpBEuee.cjs");
-require("./theme-context-Y98bGvcm.cjs");
+const require_trust_score_card_glass = require("./trust-score-card-glass-CTsEVRD3.cjs");
+require("./utils-BqeJ4aco.cjs");
+require("./use-focus--Hw2nevi.cjs");
+require("./theme-context-D_cb9KzA.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;

package/dist/components.d.ts

@@ -661,7 +661,7 @@ declare interface FormFieldWrapperProps extends HTMLAttributes<HTMLDivElement> {
     children: ReactNode;
 }
 
-export declare const GlassCard: ForwardRefExoticComponent<GlassCardProps & RefAttributes<HTMLDivElement>>;
+export declare const GlassCard: React_2.ForwardRefExoticComponent<GlassCardProps & React_2.RefAttributes<HTMLDivElement>>;
 
 /**
  * Props for the GlassCard component
@@ -719,7 +719,7 @@ export declare const GlassCard: ForwardRefExoticComponent<GlassCardProps & RefAt
  * </GlassCard>
  * ```
  */
-declare interface GlassCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'style'>, VariantProps<typeof cardIntensity> {
+declare interface GlassCardProps extends Omit<React_2.HTMLAttributes<HTMLDivElement>, 'style'>, VariantProps<typeof cardIntensity> {
     /**
      * Render as child element instead of div (polymorphic rendering).
      * Useful for making cards clickable links or custom interactive elements.
@@ -1177,6 +1177,8 @@ declare interface ModalFooterProps {
  */
 export declare const ModalGlass: {
     Root: default_2.FC<ModalRootProps>;
+    Trigger: default_2.ForwardRefExoticComponent<ModalTriggerProps & default_2.RefAttributes<HTMLButtonElement>>;
+    Portal: default_2.FC<ModalPortalProps>;
     Overlay: default_2.FC<ModalOverlayProps>;
     Content: default_2.ForwardRefExoticComponent<ModalContentProps & default_2.RefAttributes<HTMLDivElement>>;
     Header: default_2.FC<ModalHeaderProps>;
@@ -1196,6 +1198,10 @@ declare interface ModalOverlayProps {
     className?: string;
 }
 
+declare interface ModalPortalProps {
+    children: ReactNode;
+}
+
 /**
  * Props for ModalGlass.Root component
  *
@@ -1291,8 +1297,10 @@ declare interface ModalOverlayProps {
  * ```
  */
 declare interface ModalRootProps extends default_2.HTMLAttributes<HTMLDivElement> {
-    /** Open state */
-    open: boolean;
+    /** Controlled open state (optional for uncontrolled mode) */
+    open?: boolean;
+    /** Default open state for uncontrolled mode */
+    defaultOpen?: boolean;
     /** Callback when open state changes */
     onOpenChange?: (open: boolean) => void;
     /** Size variant */
@@ -1312,6 +1320,12 @@ declare interface ModalTitleProps {
     className?: string;
 }
 
+declare interface ModalTriggerProps extends default_2.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Render as child element (polymorphic) */
+    asChild?: boolean;
+    children: ReactNode;
+}
+
 export declare const NotificationGlass: ForwardRefExoticComponent<NotificationGlassProps & RefAttributes<HTMLDivElement>>;
 
 declare interface NotificationGlassProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title' | 'style'>, VariantProps<typeof notificationVariants> {

package/dist/components.js

@@ -1,4 +1,4 @@
-import { $ as BaseProgressGlass, Dt as NotificationGlass, G as SegmentedControlGlass, K as RainbowProgressGlass, Mt as GlassCard, Pt as DropdownGlass, Q as StatusIndicatorGlass, St as PopoverGlass, X as LanguageBarGlass, Xt as ComboBoxGlass, Y as ProfileAvatarGlass, Z as FlagAlertGlass, _ as ContributionMetricsGlass, _t as SliderGlass, a as HeaderBrandingGlass, an as ButtonGlass, b as AICardGlass, bn as TouchTarget, bt as SkeletonGlass, c as YearCardGlass, ct as ExpandableHeaderGlass, d as TrustScoreDisplayGlass, et as ThemeToggleGlass, f as RepositoryMetadataGlass, g as MetricCardGlass, gt as TabsGlass, h as MetricsGridGlass, hn as AlertGlass, i as HeaderNavGlass, in as CheckboxGlass, jt as InputGlass, kt as ModalGlass, l as UserStatsLineGlass, ln as AvatarGlass, lt as TooltipGlass, m as RepositoryCardGlass, mt as ToggleGlass, n as ProjectsListGlass, nt as SortDropdownGlass, o as FlagsSectionGlass, p as RepositoryHeaderGlass, q as ProgressGlass, r as ProfileHeaderGlass, rn as CircularProgressGlass, rt as SearchBoxGlass, s as CareerStatsGlass, sn as BadgeGlass, st as IconButtonGlass, t as TrustScoreCardGlass, tt as StatItemGlass, u as UserInfoGlass, v as CircularMetricGlass, vn as InteractiveCard, y as CareerStatsHeaderGlass, yn as FormFieldWrapper } from "./trust-score-card-glass-zjkx4OC2.js";
+import { $ as BaseProgressGlass, An as InteractiveCard, Dn as AlertGlass, G as SegmentedControlGlass, Ht as DropdownGlass, K as RainbowProgressGlass, Mn as TouchTarget, Nt as InputGlass, Pt as GlassCard, Q as StatusIndicatorGlass, St as SkeletonGlass, X as LanguageBarGlass, Y as ProfileAvatarGlass, Z as FlagAlertGlass, _ as ContributionMetricsGlass, _n as ButtonGlass, _t as SliderGlass, a as HeaderBrandingGlass, b as AICardGlass, c as YearCardGlass, ct as ExpandableHeaderGlass, d as TrustScoreDisplayGlass, et as ThemeToggleGlass, f as RepositoryMetadataGlass, g as MetricCardGlass, gn as CheckboxGlass, gt as TabsGlass, h as MetricsGridGlass, hn as CircularProgressGlass, i as HeaderNavGlass, in as ComboBoxGlass, jn as FormFieldWrapper, jt as ModalGlass, kt as NotificationGlass, l as UserStatsLineGlass, lt as TooltipGlass, m as RepositoryCardGlass, mt as ToggleGlass, n as ProjectsListGlass, nt as SortDropdownGlass, o as FlagsSectionGlass, p as RepositoryHeaderGlass, q as ProgressGlass, r as ProfileHeaderGlass, rt as SearchBoxGlass, s as CareerStatsGlass, st as IconButtonGlass, t as TrustScoreCardGlass, tt as StatItemGlass, u as UserInfoGlass, v as CircularMetricGlass, wt as PopoverGlass, xn as AvatarGlass, y as CareerStatsHeaderGlass, yn as BadgeGlass } from "./trust-score-card-glass-CUStm4o_.js";
 import "./utils-CcyeqpKQ.js";
 import "./use-focus-CX0TJJIj.js";
 import "./theme-context-_T5r1KG4.js";

package/dist/hooks.cjs

@@ -1,5 +1,5 @@
-const require_use_focus = require("./use-focus-DbpBEuee.cjs");
-const require_use_wallpaper_tint = require("./use-wallpaper-tint-DbawS9zh.cjs");
+const require_use_focus = require("./use-focus--Hw2nevi.cjs");
+const require_use_wallpaper_tint = require("./use-wallpaper-tint-B4oMQsXQ.cjs");
 exports.useFocus = require_use_focus.useFocus;
 exports.useHover = require_use_focus.useHover;
 exports.useResponsive = require_use_wallpaper_tint.useResponsive;