shadcn-glass-ui 2.1.5 → 2.2.1

package/docs/GETTING_STARTED.md

@@ -489,40 +489,64 @@ export default function ProductCard() {
 
 ### Modal Dialog
 
+ModalGlass uses a compound component API for maximum flexibility. **Note:** `ModalGlass.Content`
+automatically includes the overlay backdrop - you don't need to add `<ModalGlass.Overlay />`
+separately.
+
 ```tsx
 import { useState } from 'react';
 import { ModalGlass, ButtonGlass } from 'shadcn-glass-ui';
 
-export default function ModalDemo() {
-  const [isOpen, setIsOpen] = useState(false);
-
+// Trigger Pattern (Uncontrolled - Recommended)
+export function ModalDemo() {
   return (
-    <div className="theme-glass p-8">
-      <ButtonGlass onClick={() => setIsOpen(true)}>Open Modal</ButtonGlass>
+    <ModalGlass.Root>
+      <ModalGlass.Trigger asChild>
+        <ButtonGlass>Open Modal</ButtonGlass>
+      </ModalGlass.Trigger>
+      <ModalGlass.Content>
+        <ModalGlass.Header>
+          <ModalGlass.Title>Confirm Action</ModalGlass.Title>
+          <ModalGlass.Description>This action cannot be undone.</ModalGlass.Description>
+        </ModalGlass.Header>
+        <ModalGlass.Body>
+          <p>Are you sure you want to proceed?</p>
+        </ModalGlass.Body>
+        <ModalGlass.Footer>
+          <ModalGlass.Close asChild>
+            <ButtonGlass variant="ghost">Cancel</ButtonGlass>
+          </ModalGlass.Close>
+          <ButtonGlass>Confirm</ButtonGlass>
+        </ModalGlass.Footer>
+      </ModalGlass.Content>
+    </ModalGlass.Root>
+  );
+}
 
-      <ModalGlass
-        isOpen={isOpen}
-        onClose={() => setIsOpen(false)}
-        title="Confirm Action"
-        size="default"
-      >
-        <p className="mb-6">Are you sure you want to proceed?</p>
-
-        <div className="flex gap-3 justify-end">
-          <ButtonGlass variant="ghost" onClick={() => setIsOpen(false)}>
-            Cancel
-          </ButtonGlass>
-          <ButtonGlass
-            onClick={() => {
-              console.log('Confirmed');
-              setIsOpen(false);
-            }}
-          >
-            Confirm
-          </ButtonGlass>
-        </div>
-      </ModalGlass>
-    </div>
+// Controlled Pattern (when you need programmatic control)
+export function ControlledModalDemo() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <ButtonGlass onClick={() => setOpen(true)}>Open Modal</ButtonGlass>
+      <ModalGlass.Root open={open} onOpenChange={setOpen}>
+        <ModalGlass.Content>
+          <ModalGlass.Header>
+            <ModalGlass.Title>Confirm Action</ModalGlass.Title>
+          </ModalGlass.Header>
+          <ModalGlass.Body>
+            <p>Are you sure you want to proceed?</p>
+          </ModalGlass.Body>
+          <ModalGlass.Footer>
+            <ButtonGlass variant="ghost" onClick={() => setOpen(false)}>
+              Cancel
+            </ButtonGlass>
+            <ButtonGlass onClick={() => setOpen(false)}>Confirm</ButtonGlass>
+          </ModalGlass.Footer>
+        </ModalGlass.Content>
+      </ModalGlass.Root>
+    </>
   );
 }
 ```

package/docs/api/README.md

@@ -149,7 +149,6 @@ import { ModalGlass, TabsGlass } from 'shadcn-glass-ui';
 
 // ModalGlass Compound API
 <ModalGlass.Root open={open} onOpenChange={setOpen}>
-  <ModalGlass.Overlay />
   <ModalGlass.Content>
     <ModalGlass.Header>
       <ModalGlass.Title>Confirm Action</ModalGlass.Title>
@@ -226,7 +225,6 @@ support.
 
 // ✅ Use Compound API
 <ModalGlass.Root open={true} onOpenChange={() => {}}>
-  <ModalGlass.Overlay />
   <ModalGlass.Content>
     <ModalGlass.Header>
       <ModalGlass.Title>Test</ModalGlass.Title>

package/docs/api/variables/ModalGlass.md

@@ -1,6 +1,6 @@
 [**shadcn-glass-ui API Reference v1.0.7**](../README.md)
 
-***
+---
 
 [shadcn-glass-ui API Reference](../globals.md) / ModalGlass
 
@@ -8,7 +8,8 @@
 
 > `const` **ModalGlass**: `object`
 
-Defined in: [src/components/glass/ui/modal-glass.tsx:514](https://github.com/Yhooi2/shadcn-glass-ui-library/blob/926c43a35b985ce0dee6d96ce88a1fc3d72f4d67/src/components/glass/ui/modal-glass.tsx#L514)
+Defined in:
+[src/components/glass/ui/modal-glass.tsx:514](https://github.com/Yhooi2/shadcn-glass-ui-library/blob/926c43a35b985ce0dee6d96ce88a1fc3d72f4d67/src/components/glass/ui/modal-glass.tsx#L514)
 
 ModalGlass - Compound Component API
 
@@ -24,7 +25,8 @@ ModalGlass - Compound Component API
 
 ### Content
 
-> **Content**: `ForwardRefExoticComponent`\<`ModalContentProps` & `RefAttributes`\<`HTMLDivElement`\>\> = `ModalContent`
+> **Content**: `ForwardRefExoticComponent`\<`ModalContentProps` &
+> `RefAttributes`\<`HTMLDivElement`\>\> = `ModalContent`
 
 ### Header
 
@@ -54,7 +56,6 @@ ModalGlass - Compound Component API
 
 ```tsx
 <ModalGlass.Root open={open} onOpenChange={setOpen}>
-  <ModalGlass.Overlay />
   <ModalGlass.Content>
     <ModalGlass.Header>
       <ModalGlass.Title>Confirm</ModalGlass.Title>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "shadcn-glass-ui",
   "private": false,
-  "version": "2.1.5",
+  "version": "2.2.1",
   "description": "Glassmorphism UI library for React - AI-friendly with 57 components, strict TypeScript, and comprehensive docs",
   "author": "Yhooi2",
   "license": "MIT",