shadcn-glass-ui 2.1.4 → 2.2.0

package/docs/EXPORTS_MAP.json

@@ -2,10 +2,10 @@
   "$schema": "http://json-schema.org/draft-07/schema#",
   "title": "shadcn-glass-ui Exports Map",
   "description": "Machine-readable export structure for AI assistants and automated tools",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "library": "shadcn-glass-ui",
   "repository": "https://github.com/yhooi2/shadcn-glass-ui",
-  "lastUpdated": "2025-12-06",
+  "lastUpdated": "2025-12-17",
 
   "components": {
     "primitives": {
@@ -76,7 +76,15 @@
           "type": "component",
           "description": "Status badge with multiple variants",
           "props": "BadgeGlassProps",
-          "variants": ["default", "secondary", "destructive", "outline", "success", "warning", "info"],
+          "variants": [
+            "default",
+            "secondary",
+            "destructive",
+            "outline",
+            "success",
+            "warning",
+            "info"
+          ],
           "category": "display",
           "keywords": ["badge", "tag", "label", "status"],
           "shadcnCompatible": true
@@ -169,7 +177,18 @@
           "keywords": ["modal", "dialog", "overlay", "popup"],
           "shadcnCompatible": true,
           "compoundAPI": true,
-          "subComponents": ["Root", "Trigger", "Overlay", "Content", "Header", "Title", "Description", "Body", "Footer", "Close"]
+          "subComponents": [
+            "Root",
+            "Trigger",
+            "Overlay",
+            "Content",
+            "Header",
+            "Title",
+            "Description",
+            "Body",
+            "Footer",
+            "Close"
+          ]
         },
         {
           "name": "NotificationGlass",
@@ -245,6 +264,50 @@
           "category": "overlay",
           "keywords": ["tooltip", "hint", "help", "overlay"],
           "shadcnCompatible": true
+        },
+        {
+          "name": "SidebarGlass",
+          "path": "components/glass/ui/sidebar-glass",
+          "type": "component",
+          "description": "Collapsible sidebar navigation with glassmorphism styling (100% shadcn/ui compatible)",
+          "props": "SidebarGlassProps",
+          "category": "navigation",
+          "keywords": [
+            "sidebar",
+            "navigation",
+            "drawer",
+            "collapsible",
+            "menu",
+            "compound",
+            "rail"
+          ],
+          "shadcnCompatible": true,
+          "compoundAPI": true,
+          "subComponents": [
+            "Provider",
+            "Root",
+            "Header",
+            "Content",
+            "Footer",
+            "Rail",
+            "Inset",
+            "Trigger",
+            "Separator",
+            "Group",
+            "GroupLabel",
+            "GroupAction",
+            "GroupContent",
+            "Menu",
+            "MenuItem",
+            "MenuButton",
+            "MenuAction",
+            "MenuBadge",
+            "MenuSkeleton",
+            "MenuSub",
+            "MenuSubItem",
+            "MenuSubButton"
+          ],
+          "contains": ["ModalGlass", "GlassCard"]
         }
       ]
     },
@@ -525,6 +588,40 @@
           "category": "display",
           "keywords": ["year", "card", "timeline", "career"],
           "contains": ["GlassCard", "StatItemGlass"]
+        },
+        {
+          "name": "SplitLayoutGlass",
+          "path": "components/glass/composite/split-layout-glass",
+          "type": "component",
+          "description": "Two-column responsive layout with sticky scroll behavior and glassmorphism styling",
+          "props": "SplitLayoutGlassProps",
+          "category": "layout",
+          "keywords": [
+            "layout",
+            "split",
+            "sidebar",
+            "responsive",
+            "sticky",
+            "two-column",
+            "master-detail",
+            "compound"
+          ],
+          "compoundAPI": true,
+          "subComponents": [
+            "Provider",
+            "Root",
+            "Sidebar",
+            "SidebarHeader",
+            "SidebarContent",
+            "SidebarFooter",
+            "Main",
+            "MainHeader",
+            "MainContent",
+            "MainFooter",
+            "Trigger",
+            "Accordion"
+          ],
+          "contains": ["GlassCard", "ScrollArea"]
         }
       ]
     },
@@ -709,6 +806,24 @@
         "returns": "{ isDark: boolean; tintColor: string }",
         "category": "theming",
         "keywords": ["wallpaper", "tint", "color", "macos"]
+      },
+      {
+        "name": "useSplitLayout",
+        "path": "components/glass/composite/split-layout-glass",
+        "type": "hook",
+        "description": "Hook for accessing SplitLayoutGlass context (selectedKey, isOpen, isMobile, toggle, state)",
+        "returns": "SplitLayoutContextValue",
+        "category": "layout",
+        "keywords": ["split", "layout", "sidebar", "context", "state"]
+      },
+      {
+        "name": "useSidebar",
+        "path": "components/glass/ui/sidebar-glass",
+        "type": "hook",
+        "description": "Hook for accessing SidebarGlass context (100% shadcn/ui compatible)",
+        "returns": "SidebarContextValue",
+        "category": "navigation",
+        "keywords": ["sidebar", "context", "state", "collapsible"]
       }
     ]
   },
@@ -737,7 +852,15 @@
     ],
     "variants": {
       "AlertType": ["default", "destructive", "success", "warning"],
-      "BadgeVariant": ["default", "secondary", "destructive", "outline", "success", "warning", "info"],
+      "BadgeVariant": [
+        "default",
+        "secondary",
+        "destructive",
+        "outline",
+        "success",
+        "warning",
+        "info"
+      ],
       "NotificationType": ["default", "destructive", "success", "warning"],
       "SkeletonVariant": ["text", "circle", "rectangle"],
       "TooltipPosition": ["top", "bottom", "left", "right"],
@@ -779,21 +902,21 @@
   },
 
   "statistics": {
-    "totalComponents": 55,
+    "totalComponents": 57,
     "byLevel": {
       "primitives": 3,
-      "core": 18,
+      "core": 19,
       "atomic": 6,
       "specialized": 8,
-      "composite": 13,
+      "composite": 14,
       "sections": 7
     },
-    "totalTypes": 45,
-    "totalHooks": 4,
+    "totalTypes": 47,
+    "totalHooks": 6,
     "totalUtilities": 1,
-    "shadcnCompatible": 18,
+    "shadcnCompatible": 19,
     "supportsAsChild": 3,
-    "compoundAPI": 2
+    "compoundAPI": 4
   },
 
   "usage": {
@@ -814,7 +937,9 @@
         "MetricsGridGlass",
         "ProgressGlass",
         "BadgeGlass",
-        "HeaderNavGlass"
+        "HeaderNavGlass",
+        "SidebarGlass",
+        "SplitLayoutGlass"
       ],
       "forms": [
         "InputGlass",
@@ -833,7 +958,8 @@
         "RepositoryCardGlass",
         "TrustScoreCardGlass",
         "LanguageBarGlass"
-      ]
+      ],
+      "layouts": ["SplitLayoutGlass", "SidebarGlass", "GlassCard", "ModalGlass", "TabsGlass"]
     }
   },
 

package/docs/EXPORTS_STRUCTURE.md

@@ -101,8 +101,9 @@ Level 5: Sections (7)        → Complete page sections
 └──────────────────┬──────────────────────────┘
                    │
 ┌──────────────────▼──────────────────────────┐
-│ LEVEL 4: COMPOSITE (13 components)          │
-│ MetricCardGlass, AICardGlass, etc.          │
+│ LEVEL 4: COMPOSITE (14 components)          │
+│ MetricCardGlass, AICardGlass,               │
+│ SplitLayoutGlass, etc.                      │
 └──────────────────┬──────────────────────────┘
                    │
 ┌──────────────────▼──────────────────────────┐
@@ -116,8 +117,9 @@ Level 5: Sections (7)        → Complete page sections
 └──────────────────┬──────────────────────────┘
                    │
 ┌──────────────────▼──────────────────────────┐
-│ LEVEL 1: CORE UI (18 components)            │
-│ ButtonGlass, InputGlass, ModalGlass, etc.   │
+│ LEVEL 1: CORE UI (19 components)            │
+│ ButtonGlass, InputGlass, ModalGlass,        │
+│ SidebarGlass, etc.                          │
 └──────────────────┬──────────────────────────┘
                    │
 ┌──────────────────▼──────────────────────────┐
@@ -193,6 +195,12 @@ Primary building blocks for application interfaces. These are the most commonly
 | `SkeletonGlass`         | Loading skeleton            | `variant`, `width`, `height`                | text, circle, rectangle                                          |
 | `TooltipGlass`          | Tooltip overlay             | `content`, `position`, `children`           | top, bottom, left, right                                         |
 
+#### Navigation (1)
+
+| Export         | Description                    | Key Props                                      | shadcn/ui |
+| -------------- | ------------------------------ | ---------------------------------------------- | --------- |
+| `SidebarGlass` | Collapsible sidebar navigation | `side`, `variant`, `collapsible`, compound API | 100%      |
+
 **Import:**
 
 ```tsx
@@ -326,10 +334,16 @@ import { ProgressGlass, RainbowProgressGlass, SegmentedControlGlass } from 'shad
 
 ---
 
-### Level 4: Composite Components (13 components)
+### Level 4: Composite Components (14 components)
 
 Multi-component compositions that combine several elements.
 
+#### Layout (1)
+
+| Export             | Description                  | Contains              | Use Case                    |
+| ------------------ | ---------------------------- | --------------------- | --------------------------- |
+| `SplitLayoutGlass` | Two-column responsive layout | GlassCard, ScrollArea | Docs, dashboards, analytics |
+
 #### Metrics & Stats (4)
 
 | Export                     | Description                     | Contains                 | Use Case               |
@@ -546,7 +560,14 @@ console.log(THEME_CONFIG); // [{ name: 'glass', label: 'Glass' }, ...]
 ### React Hooks
 
 ```tsx
-import { useFocus, useHover, useResponsive, useWallpaperTint } from 'shadcn-glass-ui';
+import {
+  useFocus,
+  useHover,
+  useResponsive,
+  useWallpaperTint,
+  useSplitLayout,
+  useSidebar,
+} from 'shadcn-glass-ui';
 
 // Focus management
 function FocusExample() {
@@ -571,6 +592,18 @@ function WallpaperExample() {
   const { isDark, tintColor } = useWallpaperTint();
   return <div style={{ color: tintColor }}>Adaptive UI</div>;
 }
+
+// SplitLayoutGlass context
+function SplitLayoutExample() {
+  const { selectedKey, isOpen, isMobile, toggle } = useSplitLayout();
+  return <button onClick={toggle}>{isOpen ? 'Close' : 'Open'}</button>;
+}
+
+// SidebarGlass context (shadcn/ui compatible)
+function SidebarExample() {
+  const { state, toggleSidebar, isMobile } = useSidebar();
+  return <button onClick={toggleSidebar}>{state}</button>;
+}
 ```
 
 ### CVA Variants (Advanced)
@@ -688,10 +721,10 @@ import {
 ### Component Count by Level
 
 - **Level 0 (Primitives):** 3 components
-- **Level 1 (Core UI):** 18 components
+- **Level 1 (Core UI):** 19 components (including SidebarGlass)
 - **Level 2 (Atomic):** 7 components
 - **Level 3 (Specialized):** 10 components
-- **Level 4 (Composite):** 13 components
+- **Level 4 (Composite):** 14 components (including SplitLayoutGlass)
 - **Level 5 (Sections):** 7 components
 - **Total:** 57 components
 
@@ -700,9 +733,10 @@ import {
 - **Components:** 57 total
 - **Types:** 25+ prop types, 15+ variant types
 - **Utilities:** 1 function (`cn`)
-- **Hooks:** 4 custom hooks
+- **Hooks:** 6 custom hooks (including useSplitLayout, useSidebar)
 - **Theme:** 6 exports (provider, hook, constants, helpers)
 - **CVA Variants:** 15+ variant functions
+- **Compound Components:** ModalGlass, TabsGlass, SidebarGlass, SplitLayoutGlass, StepperGlass
 
 ### shadcn/ui Compatibility
 

package/docs/GETTING_STARTED.md

@@ -126,7 +126,7 @@ Create or update your `globals.css`:
 @tailwind utilities;
 
 /* Import shadcn-glass-ui styles (if using npm package) */
-@import 'shadcn-glass-ui/dist/styles.css';
+@import 'shadcn-glass-ui/styles.css';
 
 /* Or define variables manually */
 @layer base {

package/docs/REGISTRY_USAGE.md

@@ -313,7 +313,7 @@ npm install shadcn-glass-ui
 
 ```tsx
 import { ButtonGlass, InputGlass } from 'shadcn-glass-ui';
-import 'shadcn-glass-ui/dist/styles.css';
+import 'shadcn-glass-ui/styles.css';
 ```
 
 See [GETTING_STARTED.md](./GETTING_STARTED.md) for npm installation guide.

package/docs/api/README.md

@@ -97,7 +97,7 @@ npm install shadcn-glass-ui
 
 ```tsx
 import { ButtonGlass, InputGlass, ThemeProvider } from 'shadcn-glass-ui';
-import 'shadcn-glass-ui/dist/styles.css';
+import 'shadcn-glass-ui/styles.css';
 
 function App() {
   return (