shadcn-glass-ui 2.2.0 → 2.2.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (47) hide show
  1. package/CHANGELOG.md +12 -46
  2. package/README.md +11 -12
  3. package/context7.json +4 -15
  4. package/dist/cli/index.cjs +1 -1
  5. package/dist/components.cjs +4 -4
  6. package/dist/components.d.ts +90 -161
  7. package/dist/components.js +1 -1
  8. package/dist/hooks.cjs +2 -2
  9. package/dist/index.cjs +1064 -2292
  10. package/dist/index.cjs.map +1 -1
  11. package/dist/index.js +1055 -2256
  12. package/dist/index.js.map +1 -1
  13. package/dist/r/alert-glass.json +1 -1
  14. package/dist/r/badge-glass.json +1 -1
  15. package/dist/r/button-glass.json +1 -1
  16. package/dist/r/card-glass.json +40 -0
  17. package/dist/r/input-glass.json +1 -1
  18. package/dist/r/modal-glass.json +5 -5
  19. package/dist/r/registry.json +7 -1
  20. package/dist/r/tooltip-glass.json +1 -1
  21. package/dist/shadcn-glass-ui.css +1 -1
  22. package/dist/{theme-context-D_cb9KzA.cjs → theme-context-BEA8K_rq.cjs} +2 -2
  23. package/dist/{theme-context-D_cb9KzA.cjs.map → theme-context-BEA8K_rq.cjs.map} +1 -1
  24. package/dist/themes.cjs +1 -1
  25. package/dist/{trust-score-card-glass-CTsEVRD3.cjs → trust-score-card-glass-DTS1RdIt.cjs} +189 -341
  26. package/dist/trust-score-card-glass-DTS1RdIt.cjs.map +1 -0
  27. package/dist/{trust-score-card-glass-CUStm4o_.js → trust-score-card-glass-Dg4_b_g_.js} +158 -238
  28. package/dist/trust-score-card-glass-Dg4_b_g_.js.map +1 -0
  29. package/dist/{use-focus--Hw2nevi.cjs → use-focus-CdoUzFQ8.cjs} +2 -2
  30. package/dist/{use-focus--Hw2nevi.cjs.map → use-focus-CdoUzFQ8.cjs.map} +1 -1
  31. package/dist/{use-wallpaper-tint-B4oMQsXQ.cjs → use-wallpaper-tint-Rq5UgY9L.cjs} +2 -2
  32. package/dist/{use-wallpaper-tint-B4oMQsXQ.cjs.map → use-wallpaper-tint-Rq5UgY9L.cjs.map} +1 -1
  33. package/dist/{utils-BqeJ4aco.cjs → utils-NLnOCttr.cjs} +2 -2
  34. package/dist/{utils-BqeJ4aco.cjs.map → utils-NLnOCttr.cjs.map} +1 -1
  35. package/dist/utils.cjs +1 -1
  36. package/docs/ADVANCED_PATTERNS.md +7 -5
  37. package/docs/AI_USAGE.md +0 -1
  38. package/docs/BEST_PRACTICES.md +0 -2
  39. package/docs/BREAKING_CHANGES.md +0 -1
  40. package/docs/COMPONENTS_CATALOG.md +1 -4
  41. package/docs/COMPONENT_PATTERNS.md +325 -0
  42. package/docs/GETTING_STARTED.md +52 -28
  43. package/docs/api/README.md +0 -2
  44. package/docs/api/variables/ModalGlass.md +5 -4
  45. package/package.json +2 -4
  46. package/dist/trust-score-card-glass-CTsEVRD3.cjs.map +0 -1
  47. package/dist/trust-score-card-glass-CUStm4o_.js.map +0 -1
package/CHANGELOG.md CHANGED
@@ -5,56 +5,22 @@ All notable changes to this project will be documented in this file.
5
5
  The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project
6
6
  adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
7
7
 
8
- ## [2.2.0] - 2025-12-18
8
+ ## [2.2.2] - 2025-12-19
9
9
 
10
- ### 🎉 100% shadcn/ui API Compatibility (Issue #3)
10
+ ### Fixed
11
11
 
12
- This release achieves full API compatibility with shadcn/ui components, adding 6 new components and
13
- completing the compound component API patterns.
12
+ - **CardGlass exports:** Fixed missing CardGlass compound component exports from main library entry
13
+ point
14
+ - Added `CardGlass` object export with compound API (Root, Header, Title, Description, Action,
15
+ Content, Footer)
16
+ - Added all named exports for shadcn/ui compatibility (`CardGlassRoot`, `CardGlassHeader`, etc.)
17
+ - Added `CardGlassRootProps` type export
18
+ - Resolves [GitHub Issue #4](https://github.com/Yhooi2/shadcn-glass-ui-library/issues/4)
14
19
 
15
- ### ✨ New Components
20
+ ### Changed
16
21
 
17
- #### Core UI Components (+6)
18
-
19
- - **SeparatorGlass** - Glass-styled divider with horizontal/vertical orientation
20
- - **ScrollAreaGlass** - Custom scrollable container with glass-themed scrollbar
21
- - Sub-components: ScrollAreaGlass, ScrollBarGlass
22
- - **CollapsibleGlass** - Expandable/collapsible sections with smooth animations
23
- - Compound API: Root, Trigger (with asChild), Content
24
- - **RadioGroupGlass** - Glass-styled radio button group with glow effects
25
- - Compound API: Root, Item
26
- - **ToggleGroupGlass** - Segmented control / toggle button group
27
- - Supports type='single'|'multiple', variant='default'|'outline', size='sm'|'default'|'lg'
28
- - **SheetGlass** - Side panel drawer with glass effects and backdrop blur
29
- - Compound API: Root, Trigger, Content, Header, Footer, Title, Description, Close, Portal, Overlay
30
- - Supports side='top'|'right'|'bottom'|'left'
31
-
32
- #### ModalGlass Enhancements
33
-
34
- - **ModalGlass.Trigger** - Added trigger component with asChild support
35
- - **ModalGlass.Portal** - Added portal component for custom positioning
36
- - Both controlled and uncontrolled modes now fully supported
37
-
38
- ### 📦 Component Count
39
-
40
- - **Total components:** 57 → 63 (+6)
41
- - **Core UI:** 18 → 24 (+6)
42
-
43
- ### 📚 Documentation
44
-
45
- - Updated Context7 index with 9 new component rules
46
- - Updated README.md component counts and examples
47
- - Updated Storybook Introduction with new statistics
48
- - Added Storybook stories for all 6 new components
49
-
50
- ### 🔧 Technical
51
-
52
- - All components use Radix UI primitives for accessibility
53
- - Full TypeScript strict mode support
54
- - Consistent compound component API pattern across all new components
55
- - ESLint compliant with react-refresh and TypeScript rules
56
-
57
- ---
22
+ - Updated component count from 57 to 59 in all documentation (package.json, README, context7.json,
23
+ CLAUDE.md)
58
24
 
59
25
  ## [2.1.1] - 2025-12-14
60
26
 
package/README.md CHANGED
@@ -6,7 +6,7 @@
6
6
  [![Bundle Size](https://img.shields.io/bundlephobia/minzip/shadcn-glass-ui?cacheSeconds=86400)](https://bundlephobia.com/package/shadcn-glass-ui)
7
7
  [![AI-Friendly](https://img.shields.io/badge/AI-Optimized-blueviolet)](docs/AI_USAGE.md)
8
8
 
9
- **Glassmorphism components for React** — drop-in compatible with shadcn/ui. 63 components, 3 themes,
9
+ **Glassmorphism components for React** — drop-in compatible with shadcn/ui. 59 components, 3 themes,
10
10
  zero migration.
11
11
 
12
12
  <div align="center">
@@ -74,7 +74,7 @@ npx shadcn@latest add @shadcn-glass-ui/button-glass
74
74
  | ----------------- | ------------------------------- | ------------ |
75
75
  | **Themes** | 3 built-in (Glass/Light/Aurora) | 1 base |
76
76
  | **Glass effects** | Native blur, glow, transparency | Manual CSS |
77
- | **Components** | 57 specialized | ~40 base |
77
+ | **Components** | 59 specialized | ~40 base |
78
78
  | **Custom theme** | 15 lines CSS | Full rewrite |
79
79
  | **AI docs** | Context7, Claude Code, Copilot | Basic |
80
80
 
@@ -92,16 +92,15 @@ import { ButtonGlass } from '@/components/glass/ui/button-glass'; // Glass vari
92
92
 
93
93
  ## Components
94
94
 
95
- | Category | Count | Examples |
96
- | --------------- | ----- | ---------------------------------------------------- |
97
- | **Core UI** | 25 | ButtonGlass, ModalGlass, SheetGlass, RadioGroupGlass |
98
- | **Composite** | 14 | MetricCardGlass, SplitLayoutGlass, AICardGlass |
99
- | **Specialized** | 10 | StepperGlass, SparklineGlass, RainbowProgressGlass |
100
- | **Sections** | 7 | HeaderNavGlass, ProfileHeaderGlass |
101
- | **Atomic** | 7 | SearchBoxGlass, ThemeToggleGlass |
102
- | **Primitives** | 3 | TouchTarget, FormFieldWrapper |
95
+ | Category | Count | Examples |
96
+ | --------------- | ----- | -------------------------------------------------- |
97
+ | **Core UI** | 22 | ButtonGlass, InputGlass, ModalGlass, SidebarGlass |
98
+ | **Composite** | 14 | MetricCardGlass, SplitLayoutGlass, AICardGlass |
99
+ | **Specialized** | 9 | StepperGlass, SparklineGlass, RainbowProgressGlass |
100
+ | **Sections** | 7 | HeaderNavGlass, ProfileHeaderGlass |
101
+ | **Atomic** | 7 | SearchBoxGlass, ThemeToggleGlass |
103
102
 
104
- [**Browse all 63 components →**](https://yhooi2.github.io/shadcn-glass-ui-library/)
103
+ [**Browse all 59 components →**](https://yhooi2.github.io/shadcn-glass-ui-library/)
105
104
 
106
105
  ---
107
106
 
@@ -142,7 +141,7 @@ Built for AI coding assistants:
142
141
  | ------------------------------------------------------------------ | --------------------- |
143
142
  | [**Storybook**](https://yhooi2.github.io/shadcn-glass-ui-library/) | Interactive demos |
144
143
  | [**Getting Started**](docs/GETTING_STARTED.md) | Installation & setup |
145
- | [**Component Catalog**](docs/COMPONENTS_CATALOG.md) | All 63 components |
144
+ | [**Component Catalog**](docs/COMPONENTS_CATALOG.md) | All 57 components |
146
145
  | [**Theme Guide**](docs/THEME_CREATION_GUIDE.md) | Custom themes |
147
146
  | [**Token Architecture**](docs/TOKEN_ARCHITECTURE.md) | 3-layer CSS system |
148
147
  | [**AI Usage**](docs/AI_USAGE.md) | Claude, Copilot, GPT |
package/context7.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "$schema": "https://context7.com/schema/context7.json",
3
3
  "projectTitle": "shadcn-glass-ui",
4
- "description": "Glassmorphism UI library for React - AI-friendly with 63 components, strict TypeScript, and comprehensive docs",
4
+ "description": "Glassmorphism UI library for React - AI-friendly with 59 components, strict TypeScript, and comprehensive docs",
5
5
  "branch": "main",
6
6
  "folders": ["docs"],
7
7
  "includeFiles": ["README.md", "CLAUDE.md", "CHANGELOG.md"],
@@ -13,7 +13,7 @@
13
13
  "Always wrap components with ThemeProvider from 'shadcn-glass-ui'",
14
14
  "Import CSS: '@import \"shadcn-glass-ui/styles.css\"' in main CSS file",
15
15
  "Use TypeScript strict mode - no 'any' types allowed",
16
- "ModalGlass and TabsGlass use compound component API (e.g., ModalGlass.Root, ModalGlass.Content)",
16
+ "ModalGlass and TabsGlass use compound component API (e.g., ModalGlass.Root, ModalGlass.Content) - ModalGlass.Content automatically includes Overlay, do NOT add <ModalGlass.Overlay /> separately",
17
17
  "Three themes available: 'glass' (dark), 'light', 'aurora' (gradient)",
18
18
  "WCAG 2.1 AA accessibility compliance required",
19
19
  "Use asChild prop on ButtonGlass for polymorphic rendering: <ButtonGlass asChild><Link href='/'>Home</Link></ButtonGlass>",
@@ -63,21 +63,10 @@
63
63
  "SidebarGlass renders as mobile drawer (ModalGlass sheet) on mobile and collapsible sidebar with glassmorphism on desktop",
64
64
  "SidebarGlass.Rail provides interactive collapse/expand rail with hover indicator - click or drag to toggle sidebar",
65
65
  "SidebarGlass.MenuButton accepts: isActive (boolean), tooltip (string - shown in icon mode), variant ('default'|'outline'), size ('default'|'sm'|'lg')",
66
- "useSidebar() returns: state ('expanded'|'collapsed'), open, setOpen, openMobile, setOpenMobile, isMobile, side, variant, collapsible, toggleSidebar",
67
-
68
- "SeparatorGlass: Simple glass-styled divider with horizontal/vertical orientation. Use decorative=true (default) for visual-only separators",
69
- "ScrollAreaGlass: Custom scrollable container with glass-styled scrollbar. Supports orientation='vertical'|'horizontal'|'both'",
70
- "CollapsibleGlass: Expandable/collapsible section with compound API: Root, Trigger (with asChild), Content. Supports controlled/uncontrolled modes",
71
- "RadioGroupGlass: Glass-styled radio button group with compound API: Root (value/onValueChange), Item. Uses Radix primitives",
72
- "ToggleGroupGlass: Segmented control / toggle button group. Supports type='single'|'multiple', variant='default'|'outline', size='sm'|'default'|'lg'",
73
- "SheetGlass: Side panel drawer with compound API: Root, Trigger, Content (side='top'|'right'|'bottom'|'left'), Header, Footer, Title, Description, Close",
74
- "ModalGlass.Trigger: Opens modal with asChild support. Use inside ModalGlass.Root for uncontrolled modal (no need for useState)",
75
- "ModalGlass uncontrolled mode: Use defaultOpen prop instead of open/onOpenChange for simpler state management",
76
- "GlassCard compound components: GlassCardHeader, GlassCardTitle, GlassCardDescription, GlassCardAction, GlassCardContent, GlassCardFooter - 100% shadcn/ui Card compatible"
66
+ "useSidebar() returns: state ('expanded'|'collapsed'), open, setOpen, openMobile, setOpenMobile, isMobile, side, variant, collapsible, toggleSidebar"
77
67
  ],
78
68
  "previousVersions": [
79
- { "tag": "v2.2.0", "title": "Version 2.2.0 (Latest - shadcn/ui API Compatibility)" },
80
- { "tag": "v2.0.0", "title": "Version 2.0.0 (Token Architecture)" },
69
+ { "tag": "v2.0.0", "title": "Version 2.0.0 (Latest - Token Architecture)" },
81
70
  { "tag": "v1.1.0", "title": "Version 1.1.0" },
82
71
  { "tag": "v1.0.11", "title": "Version 1.0.11" },
83
72
  { "tag": "v1.0.0", "title": "Version 1.0.0 (Breaking Changes)" }
@@ -1,5 +1,5 @@
1
1
  #!/usr/bin/env node
2
- const require_trust_score_card_glass = require("../trust-score-card-glass-CTsEVRD3.cjs");
2
+ const require_trust_score_card_glass = require("../trust-score-card-glass-DTS1RdIt.cjs");
3
3
  let node_util = require("node:util");
4
4
  let node_fs = require("node:fs");
5
5
  let node_path = require("node:path");
@@ -1,7 +1,7 @@
1
- const require_trust_score_card_glass = require("./trust-score-card-glass-CTsEVRD3.cjs");
2
- require("./utils-BqeJ4aco.cjs");
3
- require("./use-focus--Hw2nevi.cjs");
4
- require("./theme-context-D_cb9KzA.cjs");
1
+ const require_trust_score_card_glass = require("./trust-score-card-glass-DTS1RdIt.cjs");
2
+ require("./utils-NLnOCttr.cjs");
3
+ require("./use-focus-CdoUzFQ8.cjs");
4
+ require("./theme-context-BEA8K_rq.cjs");
5
5
  exports.AICardGlass = require_trust_score_card_glass.AICardGlass;
6
6
  exports.AlertGlass = require_trust_score_card_glass.AlertGlass;
7
7
  exports.AvatarGlass = require_trust_score_card_glass.AvatarGlass;
@@ -2,7 +2,7 @@ import * as AvatarPrimitive from '@radix-ui/react-avatar';
2
2
  import { ButtonHTMLAttributes } from 'react';
3
3
  import { ClassProp } from 'class-variance-authority/types';
4
4
  import { ComponentPropsWithoutRef } from 'react';
5
- import { default as default_2 } from 'react';
5
+ import * as DialogPrimitive from '@radix-ui/react-dialog';
6
6
  import { FC } from 'react';
7
7
  import { ForwardRefExoticComponent } from 'react';
8
8
  import { HTMLAttributes } from 'react';
@@ -661,7 +661,7 @@ declare interface FormFieldWrapperProps extends HTMLAttributes<HTMLDivElement> {
661
661
  children: ReactNode;
662
662
  }
663
663
 
664
- export declare const GlassCard: React_2.ForwardRefExoticComponent<GlassCardProps & React_2.RefAttributes<HTMLDivElement>>;
664
+ export declare const GlassCard: ForwardRefExoticComponent<GlassCardProps & RefAttributes<HTMLDivElement>>;
665
665
 
666
666
  /**
667
667
  * Props for the GlassCard component
@@ -719,7 +719,7 @@ export declare const GlassCard: React_2.ForwardRefExoticComponent<GlassCardProps
719
719
  * </GlassCard>
720
720
  * ```
721
721
  */
722
- declare interface GlassCardProps extends Omit<React_2.HTMLAttributes<HTMLDivElement>, 'style'>, VariantProps<typeof cardIntensity> {
722
+ declare interface GlassCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'style'>, VariantProps<typeof cardIntensity> {
723
723
  /**
724
724
  * Render as child element instead of div (polymorphic rendering).
725
725
  * Useful for making cards clickable links or custom interactive elements.
@@ -1128,185 +1128,112 @@ declare interface MetricTrend {
1128
1128
  */
1129
1129
  declare type MetricVariant = 'default' | 'secondary' | 'success' | 'warning' | 'destructive';
1130
1130
 
1131
- declare interface ModalBodyProps {
1132
- children: ReactNode;
1133
- className?: string;
1134
- }
1135
-
1136
- declare interface ModalCloseProps {
1137
- className?: string;
1138
- }
1139
-
1140
- declare interface ModalContentProps {
1141
- children: ReactNode;
1142
- className?: string;
1143
- }
1144
-
1145
- declare interface ModalDescriptionProps {
1146
- children: ReactNode;
1147
- className?: string;
1148
- }
1149
-
1150
- declare interface ModalFooterProps {
1151
- children: ReactNode;
1152
- className?: string;
1153
- }
1131
+ /**
1132
+ * ModalGlass.Body - Main content area
1133
+ *
1134
+ * Note: shadcn/ui Dialog doesn't have DialogBody, but we keep it for convenience.
1135
+ */
1136
+ declare function ModalBody({ className, ...props }: React_2.ComponentProps<'div'>): JSX.Element;
1154
1137
 
1155
1138
  /**
1156
- * ModalGlass - Compound Component API
1139
+ * ModalGlass.Close - Closes the modal when clicked
1140
+ *
1141
+ * Use `asChild` to render as the child element.
1157
1142
  *
1158
1143
  * @example
1159
1144
  * ```tsx
1160
- * <ModalGlass.Root open={open} onOpenChange={setOpen}>
1161
- * <ModalGlass.Overlay />
1162
- * <ModalGlass.Content>
1163
- * <ModalGlass.Header>
1164
- * <ModalGlass.Title>Confirm</ModalGlass.Title>
1165
- * <ModalGlass.Description>Are you sure?</ModalGlass.Description>
1166
- * <ModalGlass.Close />
1167
- * </ModalGlass.Header>
1168
- * <ModalGlass.Body>
1169
- * <p>Body content</p>
1170
- * </ModalGlass.Body>
1171
- * <ModalGlass.Footer>
1172
- * <ButtonGlass>Cancel</ButtonGlass>
1173
- * </ModalGlass.Footer>
1174
- * </ModalGlass.Content>
1175
- * </ModalGlass.Root>
1145
+ * <ModalGlass.Close asChild>
1146
+ * <ButtonGlass variant="ghost">Cancel</ButtonGlass>
1147
+ * </ModalGlass.Close>
1176
1148
  * ```
1177
1149
  */
1178
- export declare const ModalGlass: {
1179
- Root: default_2.FC<ModalRootProps>;
1180
- Trigger: default_2.ForwardRefExoticComponent<ModalTriggerProps & default_2.RefAttributes<HTMLButtonElement>>;
1181
- Portal: default_2.FC<ModalPortalProps>;
1182
- Overlay: default_2.FC<ModalOverlayProps>;
1183
- Content: default_2.ForwardRefExoticComponent<ModalContentProps & default_2.RefAttributes<HTMLDivElement>>;
1184
- Header: default_2.FC<ModalHeaderProps>;
1185
- Body: default_2.FC<ModalBodyProps>;
1186
- Footer: default_2.FC<ModalFooterProps>;
1187
- Title: default_2.FC<ModalTitleProps>;
1188
- Description: default_2.FC<ModalDescriptionProps>;
1189
- Close: default_2.FC<ModalCloseProps>;
1190
- };
1191
-
1192
- declare interface ModalHeaderProps {
1193
- children: ReactNode;
1194
- className?: string;
1195
- }
1150
+ declare function ModalClose({ ...props }: React_2.ComponentProps<typeof DialogPrimitive.Close>): JSX.Element;
1196
1151
 
1197
- declare interface ModalOverlayProps {
1198
- className?: string;
1152
+ declare interface ModalContentProps extends React_2.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
1153
+ /** Show close button in top-right corner */
1154
+ showCloseButton?: boolean;
1155
+ /** Override size from Root */
1156
+ size?: ModalSize;
1199
1157
  }
1200
1158
 
1201
- declare interface ModalPortalProps {
1202
- children: ReactNode;
1203
- }
1159
+ /**
1160
+ * ModalGlass.Footer - Footer section with flex layout for actions
1161
+ */
1162
+ declare function ModalFooter({ className, ...props }: React_2.ComponentProps<'div'>): JSX.Element;
1204
1163
 
1205
1164
  /**
1206
- * Props for ModalGlass.Root component
1165
+ * ModalGlass - Glass-themed Dialog with shadcn/ui API compatibility
1207
1166
  *
1208
- * Root component that provides context and manages open/close state for the modal.
1209
- * Handles keyboard events, body scroll lock, and accessibility attributes.
1210
- *
1211
- * @accessibility
1212
- * - **Keyboard Navigation:** Escape key closes modal, Tab key traps focus within modal content
1213
- * - **Focus Management:** Focus automatically moved to modal on open, returned to trigger on close (WCAG 2.4.3)
1214
- * - **Screen Readers:** Uses `role="dialog"` and `aria-modal="true"` for proper modal semantics (WCAG 4.1.3)
1215
- * - **Title Association:** Modal title automatically linked via `aria-labelledby="modal-title"`
1216
- * - **Description Association:** Optional description linked via `aria-describedby="modal-description"`
1217
- * - **Body Scroll Lock:** Prevents background scrolling when modal is open (improves UX and focus management)
1218
- * - **Touch Targets:** All interactive elements (close button, action buttons) meet 44x44px minimum (WCAG 2.5.5)
1219
- * - **Color Contrast:** Modal content and overlay meet WCAG AA contrast requirements
1220
- * - **Motion:** Open/close animations respect `prefers-reduced-motion` settings
1167
+ * Built on @radix-ui/react-dialog for full accessibility support.
1221
1168
  *
1222
- * @example
1169
+ * @example Uncontrolled (with Trigger)
1223
1170
  * ```tsx
1224
- * // Basic modal with title and description
1225
- * <ModalGlass.Root open={open} onOpenChange={setOpen}>
1226
- * <ModalGlass.Overlay />
1171
+ * <ModalGlass.Root>
1172
+ * <ModalGlass.Trigger asChild>
1173
+ * <ButtonGlass>Open</ButtonGlass>
1174
+ * </ModalGlass.Trigger>
1227
1175
  * <ModalGlass.Content>
1228
1176
  * <ModalGlass.Header>
1229
- * <ModalGlass.Title>Confirm Action</ModalGlass.Title>
1230
- * <ModalGlass.Description>
1231
- * This action cannot be undone.
1232
- * </ModalGlass.Description>
1233
- * <ModalGlass.Close />
1177
+ * <ModalGlass.Title>Title</ModalGlass.Title>
1234
1178
  * </ModalGlass.Header>
1235
- * <ModalGlass.Body>
1236
- * <p>Are you sure you want to proceed?</p>
1237
- * </ModalGlass.Body>
1179
+ * <ModalGlass.Body>Content</ModalGlass.Body>
1238
1180
  * <ModalGlass.Footer>
1239
- * <ButtonGlass variant="ghost" onClick={() => setOpen(false)}>
1240
- * Cancel
1241
- * </ButtonGlass>
1242
- * <ButtonGlass variant="destructive" onClick={handleConfirm}>
1243
- * Confirm
1244
- * </ButtonGlass>
1181
+ * <ModalGlass.Close asChild>
1182
+ * <ButtonGlass>Close</ButtonGlass>
1183
+ * </ModalGlass.Close>
1245
1184
  * </ModalGlass.Footer>
1246
1185
  * </ModalGlass.Content>
1247
1186
  * </ModalGlass.Root>
1187
+ * ```
1248
1188
  *
1249
- * // Different sizes
1250
- * <ModalGlass.Root open={open} onOpenChange={setOpen} size="sm">
1251
- * {// Small modal content}
1252
- * </ModalGlass.Root>
1253
- * <ModalGlass.Root open={open} onOpenChange={setOpen} size="lg">
1254
- * {// Large modal content}
1255
- * </ModalGlass.Root>
1256
- *
1257
- * // Form modal with proper focus management
1189
+ * @example Controlled
1190
+ * ```tsx
1258
1191
  * <ModalGlass.Root open={open} onOpenChange={setOpen}>
1259
- * <ModalGlass.Overlay />
1260
- * <ModalGlass.Content>
1192
+ * <ModalGlass.Content showCloseButton={false}>
1261
1193
  * <ModalGlass.Header>
1262
- * <ModalGlass.Title>Create Account</ModalGlass.Title>
1263
- * <ModalGlass.Close />
1264
- * </ModalGlass.Header>
1265
- * <ModalGlass.Body>
1266
- * <form id="signup-form" onSubmit={handleSubmit}>
1267
- * <InputGlass label="Email" type="email" required />
1268
- * <InputGlass label="Password" type="password" required />
1269
- * </form>
1270
- * </ModalGlass.Body>
1271
- * <ModalGlass.Footer>
1272
- * <ButtonGlass variant="ghost" onClick={() => setOpen(false)}>
1273
- * Cancel
1274
- * </ButtonGlass>
1275
- * <ButtonGlass type="submit" form="signup-form">
1276
- * Sign Up
1277
- * </ButtonGlass>
1278
- * </ModalGlass.Footer>
1279
- * </ModalGlass.Content>
1280
- * </ModalGlass.Root>
1281
- *
1282
- * // Alert modal (no close button)
1283
- * <ModalGlass.Root open={showAlert} onOpenChange={setShowAlert}>
1284
- * <ModalGlass.Overlay />
1285
- * <ModalGlass.Content>
1286
- * <ModalGlass.Header>
1287
- * <ModalGlass.Title>Session Expired</ModalGlass.Title>
1194
+ * <ModalGlass.Title>Confirm</ModalGlass.Title>
1288
1195
  * </ModalGlass.Header>
1289
- * <ModalGlass.Body>
1290
- * Your session has expired. Please log in again.
1291
- * </ModalGlass.Body>
1292
1196
  * <ModalGlass.Footer>
1293
- * <ButtonGlass onClick={handleLogin}>Log In</ButtonGlass>
1197
+ * <ButtonGlass onClick={() => setOpen(false)}>OK</ButtonGlass>
1294
1198
  * </ModalGlass.Footer>
1295
1199
  * </ModalGlass.Content>
1296
1200
  * </ModalGlass.Root>
1297
1201
  * ```
1298
1202
  */
1299
- declare interface ModalRootProps extends default_2.HTMLAttributes<HTMLDivElement> {
1300
- /** Controlled open state (optional for uncontrolled mode) */
1301
- open?: boolean;
1302
- /** Default open state for uncontrolled mode */
1303
- defaultOpen?: boolean;
1304
- /** Callback when open state changes */
1305
- onOpenChange?: (open: boolean) => void;
1306
- /** Size variant */
1203
+ export declare const ModalGlass: {
1204
+ Root: typeof ModalRoot;
1205
+ Trigger: typeof ModalTrigger;
1206
+ Portal: typeof ModalPortal;
1207
+ Overlay: React_2.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React_2.RefAttributes<HTMLDivElement>, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
1208
+ Content: React_2.ForwardRefExoticComponent<ModalContentProps & React_2.RefAttributes<HTMLDivElement>>;
1209
+ Header: typeof ModalHeader;
1210
+ Body: typeof ModalBody;
1211
+ Footer: typeof ModalFooter;
1212
+ Title: React_2.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React_2.RefAttributes<HTMLHeadingElement>, "ref"> & React_2.RefAttributes<HTMLHeadingElement>>;
1213
+ Description: React_2.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React_2.RefAttributes<HTMLParagraphElement>, "ref"> & React_2.RefAttributes<HTMLParagraphElement>>;
1214
+ Close: typeof ModalClose;
1215
+ };
1216
+
1217
+ /**
1218
+ * ModalGlass.Header - Header section with flex layout
1219
+ */
1220
+ declare function ModalHeader({ className, ...props }: React_2.ComponentProps<'div'>): JSX.Element;
1221
+
1222
+ /**
1223
+ * ModalGlass.Portal - Renders children into a portal
1224
+ */
1225
+ declare function ModalPortal({ ...props }: React_2.ComponentProps<typeof DialogPrimitive.Portal>): JSX.Element;
1226
+
1227
+ /**
1228
+ * ModalGlass.Root - Dialog root component
1229
+ *
1230
+ * Supports both controlled (open/onOpenChange) and uncontrolled (with Trigger) modes.
1231
+ */
1232
+ declare function ModalRoot({ size, children, ...props }: ModalRootProps): JSX.Element;
1233
+
1234
+ declare interface ModalRootProps extends React_2.ComponentProps<typeof DialogPrimitive.Root> {
1235
+ /** Size variant for the modal */
1307
1236
  size?: ModalSize;
1308
- /** Child components */
1309
- children: ReactNode;
1310
1237
  }
1311
1238
 
1312
1239
  /**
@@ -1315,16 +1242,12 @@ declare interface ModalRootProps extends default_2.HTMLAttributes<HTMLDivElement
1315
1242
  */
1316
1243
  declare type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
1317
1244
 
1318
- declare interface ModalTitleProps {
1319
- children: ReactNode;
1320
- className?: string;
1321
- }
1322
-
1323
- declare interface ModalTriggerProps extends default_2.ButtonHTMLAttributes<HTMLButtonElement> {
1324
- /** Render as child element (polymorphic) */
1325
- asChild?: boolean;
1326
- children: ReactNode;
1327
- }
1245
+ /**
1246
+ * ModalGlass.Trigger - Opens the modal when clicked
1247
+ *
1248
+ * Use `asChild` to render as the child element instead of a button.
1249
+ */
1250
+ declare function ModalTrigger({ ...props }: React_2.ComponentProps<typeof DialogPrimitive.Trigger>): JSX.Element;
1328
1251
 
1329
1252
  export declare const NotificationGlass: ForwardRefExoticComponent<NotificationGlassProps & RefAttributes<HTMLDivElement>>;
1330
1253
 
@@ -1548,7 +1471,7 @@ declare interface SkeletonGlassProps extends React.HTMLAttributes<HTMLDivElement
1548
1471
  }
1549
1472
 
1550
1473
  declare const skeletonVariants: (props?: ({
1551
- variant?: "title" | "text" | "avatar" | "thumbnail" | "card" | null | undefined;
1474
+ variant?: "title" | "text" | "card" | "avatar" | "thumbnail" | null | undefined;
1552
1475
  } & ClassProp) | undefined) => string;
1553
1476
 
1554
1477
  export declare const SliderGlass: ForwardRefExoticComponent<SliderGlassProps & RefAttributes<HTMLSpanElement>>;
@@ -1834,7 +1757,13 @@ declare const toggleSizes: (props?: ({
1834
1757
  variant?: "default" | "outline" | null | undefined;
1835
1758
  } & ClassProp) | undefined) => string;
1836
1759
 
1837
- export declare const TooltipGlass: React_2.FC<TooltipPrimitive.TooltipProps>;
1760
+ export declare const TooltipGlass: typeof TooltipGlassRoot;
1761
+
1762
+ /**
1763
+ * TooltipGlassRoot - Individual tooltip instance
1764
+ * Wraps Radix TooltipPrimitive.Root with auto-included Provider (shadcn/ui pattern)
1765
+ */
1766
+ declare function TooltipGlassRoot({ ...props }: React_2.ComponentPropsWithoutRef<typeof TooltipPrimitive.Root>): JSX.Element;
1838
1767
 
1839
1768
  /**
1840
1769
  * TouchTarget wrapper component
@@ -1,4 +1,4 @@
1
- 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";
1
+ 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-Dg4_b_g_.js";
2
2
  import "./utils-CcyeqpKQ.js";
3
3
  import "./use-focus-CX0TJJIj.js";
4
4
  import "./theme-context-_T5r1KG4.js";
package/dist/hooks.cjs CHANGED
@@ -1,5 +1,5 @@
1
- const require_use_focus = require("./use-focus--Hw2nevi.cjs");
2
- const require_use_wallpaper_tint = require("./use-wallpaper-tint-B4oMQsXQ.cjs");
1
+ const require_use_focus = require("./use-focus-CdoUzFQ8.cjs");
2
+ const require_use_wallpaper_tint = require("./use-wallpaper-tint-Rq5UgY9L.cjs");
3
3
  exports.useFocus = require_use_focus.useFocus;
4
4
  exports.useHover = require_use_focus.useHover;
5
5
  exports.useResponsive = require_use_wallpaper_tint.useResponsive;