shadcn-glass-ui 2.3.2 → 2.4.1

package/dist/cli/index.cjs

@@ -1,5 +1,5 @@
 #!/usr/bin/env node
-const require_trust_score_card_glass = require("../trust-score-card-glass-DtgFygh5.cjs");
+const require_trust_score_card_glass = require("../trust-score-card-glass-ztDXeLJV.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-DtgFygh5.cjs");
-require("./utils-CiuCe_Aq.cjs");
-require("./use-focus-BFBcpBh1.cjs");
-require("./theme-context-7NcW0KZL.cjs");
+const require_trust_score_card_glass = require("./trust-score-card-glass-ztDXeLJV.cjs");
+require("./utils-MToinUO7.cjs");
+require("./use-focus-D2yByp-J.cjs");
+require("./theme-context-D61BHWhL.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.mjs

@@ -1,5 +1,5 @@
 import "./utils-B792GPM_.mjs";
-import { A as FlagAlertGlass, B as IconButtonGlass, Bt as AvatarGlass, E as ProgressGlass, F as SortDropdownGlass, Ft as CheckboxGlass, H as TooltipGlass, I as SearchBoxGlass, It as ButtonGlass, Kt as AlertGlass, M as BaseProgressGlass, N as ThemeToggleGlass, Nt as CircularProgressGlass, O as ProfileAvatarGlass, P as StatItemGlass, Rt as BadgeGlass, T as RainbowProgressGlass, V as ExpandableHeaderGlass, Xt as FormFieldWrapper, Yt as InteractiveCard, Z as TabsGlass, Zt as TouchTarget, _ as ContributionMetricsGlass, a as HeaderBrandingGlass, b as AICardGlass, c as YearCardGlass, ct as NotificationGlass, d as TrustScoreDisplayGlass, et as SliderGlass, f as RepositoryMetadataGlass, ft as InputGlass, g as MetricCardGlass, h as MetricsGridGlass, ht as DropdownGlass, i as HeaderNavGlass, j as StatusIndicatorGlass, jt as ComboBoxGlass, k as LanguageBarGlass, l as UserStatsLineGlass, m as RepositoryCardGlass, n as ProjectsListGlass, o as FlagsSectionGlass, p as RepositoryHeaderGlass, pt as GlassCard, q as ToggleGlass, r as ProfileHeaderGlass, rt as PopoverGlass, s as CareerStatsGlass, t as TrustScoreCardGlass, tt as SkeletonGlass, u as UserInfoGlass, ut as ModalGlass, v as CircularMetricGlass, w as SegmentedControlGlass, y as CareerStatsHeaderGlass } from "./trust-score-card-glass-BGqBcdyJ.mjs";
+import { A as FlagAlertGlass, B as IconButtonGlass, Bt as DropdownGlass, E as ProgressGlass, F as SortDropdownGlass, I as SearchBoxGlass, Lt as InputGlass, M as BaseProgressGlass, N as ThemeToggleGlass, O as ProfileAvatarGlass, P as StatItemGlass, Rt as GlassCard, Sn as TouchTarget, T as RainbowProgressGlass, V as ExpandableHeaderGlass, W as TooltipGlass, Z as ToggleGlass, _ as ContributionMetricsGlass, _n as AlertGlass, a as HeaderBrandingGlass, at as SkeletonGlass, b as AICardGlass, bn as InteractiveCard, c as YearCardGlass, d as TrustScoreDisplayGlass, dn as AvatarGlass, f as RepositoryMetadataGlass, ft as NotificationGlass, g as MetricCardGlass, h as MetricsGridGlass, i as HeaderNavGlass, in as CircularProgressGlass, it as SliderGlass, j as StatusIndicatorGlass, k as LanguageBarGlass, kt as ModalGlass, l as UserStatsLineGlass, ln as BadgeGlass, m as RepositoryCardGlass, n as ProjectsListGlass, nn as ComboBoxGlass, o as FlagsSectionGlass, on as CheckboxGlass, p as RepositoryHeaderGlass, r as ProfileHeaderGlass, s as CareerStatsGlass, sn as ButtonGlass, st as PopoverGlass, t as TrustScoreCardGlass, tt as TabsGlass, u as UserInfoGlass, v as CircularMetricGlass, w as SegmentedControlGlass, xn as FormFieldWrapper, y as CareerStatsHeaderGlass } from "./trust-score-card-glass-Bt77v2TG.mjs";
 import "./use-focus-C5kPAKr_.mjs";
 import "./theme-context-DLS2uAgJ.mjs";
 export { AICardGlass, AlertGlass, AvatarGlass, BadgeGlass, BaseProgressGlass, ButtonGlass, CareerStatsGlass, CareerStatsHeaderGlass, CheckboxGlass, CircularMetricGlass, CircularProgressGlass, ComboBoxGlass, ContributionMetricsGlass, DropdownGlass, ExpandableHeaderGlass, FlagAlertGlass, FlagsSectionGlass, FormFieldWrapper, GlassCard, HeaderBrandingGlass, HeaderNavGlass, IconButtonGlass, InputGlass, InteractiveCard, LanguageBarGlass, MetricCardGlass, MetricsGridGlass, ModalGlass, NotificationGlass, PopoverGlass, ProfileAvatarGlass, ProfileHeaderGlass, ProgressGlass, ProjectsListGlass, RainbowProgressGlass, RepositoryCardGlass, RepositoryHeaderGlass, RepositoryMetadataGlass, SearchBoxGlass, SegmentedControlGlass, SkeletonGlass, SliderGlass, SortDropdownGlass, StatItemGlass, StatusIndicatorGlass, TabsGlass, ThemeToggleGlass, ToggleGlass, TooltipGlass, TouchTarget, TrustScoreCardGlass, TrustScoreDisplayGlass, UserInfoGlass, UserStatsLineGlass, YearCardGlass };

package/dist/hooks.cjs

@@ -1,5 +1,5 @@
-const require_use_focus = require("./use-focus-BFBcpBh1.cjs");
-const require_use_wallpaper_tint = require("./use-wallpaper-tint-DTTStm5f.cjs");
+const require_use_focus = require("./use-focus-D2yByp-J.cjs");
+const require_use_wallpaper_tint = require("./use-wallpaper-tint-DiGB-ziW.cjs");
 exports.useFocus = require_use_focus.useFocus;
 exports.useHover = require_use_focus.useHover;
 exports.useResponsive = require_use_wallpaper_tint.useResponsive;

package/dist/index.cjs

@@ -1,14 +1,16 @@
-const require_trust_score_card_glass = require("./trust-score-card-glass-DtgFygh5.cjs");
-const require_utils = require("./utils-CiuCe_Aq.cjs");
-const require_use_focus = require("./use-focus-BFBcpBh1.cjs");
-const require_theme_context = require("./theme-context-7NcW0KZL.cjs");
-const require_use_wallpaper_tint = require("./use-wallpaper-tint-DTTStm5f.cjs");
+const require_trust_score_card_glass = require("./trust-score-card-glass-ztDXeLJV.cjs");
+const require_utils = require("./utils-MToinUO7.cjs");
+const require_use_focus = require("./use-focus-D2yByp-J.cjs");
+const require_theme_context = require("./theme-context-D61BHWhL.cjs");
+const require_use_wallpaper_tint = require("./use-wallpaper-tint-DiGB-ziW.cjs");
 let react = require("react");
 react = require_trust_score_card_glass.__toESM(react);
 let lucide_react = require("lucide-react");
 let class_variance_authority = require("class-variance-authority");
 let react_jsx_runtime = require("react/jsx-runtime");
 let __radix_ui_react_slot = require("@radix-ui/react-slot");
+let __radix_ui_react_dialog = require("@radix-ui/react-dialog");
+__radix_ui_react_dialog = require_trust_score_card_glass.__toESM(__radix_ui_react_dialog);
 let recharts = require("recharts");
 recharts = require_trust_score_card_glass.__toESM(recharts);
 let __radix_ui_react_scroll_area = require("@radix-ui/react-scroll-area");
@@ -100,6 +102,161 @@ const CardGlass = {
 	Content: CardGlassContent,
 	Footer: CardGlassFooter
 };
+const sheetVariants = (0, class_variance_authority.cva)([
+	"fixed z-50 flex flex-col gap-4 p-6",
+	"transition-transform ease-in-out duration-300",
+	"data-[state=open]:animate-in data-[state=closed]:animate-out",
+	"data-[state=closed]:duration-300 data-[state=open]:duration-500"
+].join(" "), {
+	variants: { side: {
+		top: [
+			"inset-x-0 top-0",
+			"data-[state=closed]:slide-out-to-top",
+			"data-[state=open]:slide-in-from-top",
+			"rounded-b-2xl"
+		].join(" "),
+		bottom: [
+			"inset-x-0 bottom-0",
+			"data-[state=closed]:slide-out-to-bottom",
+			"data-[state=open]:slide-in-from-bottom",
+			"rounded-t-2xl"
+		].join(" "),
+		left: [
+			"inset-y-0 left-0 h-full w-3/4 sm:max-w-sm",
+			"data-[state=closed]:slide-out-to-left",
+			"data-[state=open]:slide-in-from-left",
+			"rounded-r-2xl"
+		].join(" "),
+		right: [
+			"inset-y-0 right-0 h-full w-3/4 sm:max-w-sm",
+			"data-[state=closed]:slide-out-to-right",
+			"data-[state=open]:slide-in-from-right",
+			"rounded-l-2xl"
+		].join(" ")
+	} },
+	defaultVariants: { side: "right" }
+});
+function SheetRoot({ ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__radix_ui_react_dialog.Root, {
+		"data-slot": "sheet",
+		...props
+	});
+}
+function SheetTrigger({ ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__radix_ui_react_dialog.Trigger, {
+		"data-slot": "sheet-trigger",
+		...props
+	});
+}
+function SheetPortal({ ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__radix_ui_react_dialog.Portal, {
+		"data-slot": "sheet-portal",
+		...props
+	});
+}
+var SheetOverlay = react.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__radix_ui_react_dialog.Overlay, {
+	ref,
+	"data-slot": "sheet-overlay",
+	className: require_utils.cn("fixed inset-0 z-50", "data-[state=open]:animate-in data-[state=closed]:animate-out", "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", className),
+	style: {
+		background: "var(--modal-overlay)",
+		backdropFilter: "blur(var(--blur-sm))",
+		WebkitBackdropFilter: "blur(var(--blur-sm))"
+	},
+	...props
+}));
+SheetOverlay.displayName = "SheetOverlay";
+var SheetContent = react.forwardRef(({ className, children, side = "right", showCloseButton = true, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(SheetPortal, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SheetOverlay, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__radix_ui_react_dialog.Content, {
+	ref,
+	"data-slot": "sheet-content",
+	"data-side": side,
+	className: require_utils.cn(sheetVariants({ side }), className),
+	style: {
+		background: "var(--modal-bg)",
+		border: "1px solid var(--modal-border)",
+		boxShadow: "var(--modal-glow)",
+		backdropFilter: "blur(var(--blur-lg))",
+		WebkitBackdropFilter: "blur(var(--blur-lg))"
+	},
+	...props,
+	children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "absolute inset-0 pointer-events-none",
+			style: {
+				background: "var(--modal-glow-effect)",
+				borderRadius: "inherit"
+			},
+			"aria-hidden": "true"
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "relative flex-1 flex flex-col overflow-auto",
+			children
+		}),
+		showCloseButton && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__radix_ui_react_dialog.Close, {
+			"data-slot": "sheet-close",
+			className: require_utils.cn("absolute top-4 right-4", "p-1.5 md:p-2 rounded-xl", "transition-all duration-300", "ring-offset-background", "focus:outline-none focus:ring-2 focus:ring-(--semantic-primary) focus:ring-offset-2", "hover:opacity-100 opacity-70", "disabled:pointer-events-none"),
+			style: {
+				background: "var(--modal-close-btn-bg)",
+				border: "var(--modal-close-btn-border)",
+				color: "var(--text-muted)"
+			},
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.X, { className: require_trust_score_card_glass.ICON_SIZES.md }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "sr-only",
+				children: "Close"
+			})]
+		})
+	]
+})] }));
+SheetContent.displayName = "SheetContent";
+function SheetHeader({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-slot": "sheet-header",
+		className: require_utils.cn("flex flex-col gap-2 text-center sm:text-left", className),
+		...props
+	});
+}
+function SheetFooter({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-slot": "sheet-footer",
+		className: require_utils.cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end mt-auto pt-4", className),
+		...props
+	});
+}
+var SheetTitle = react.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__radix_ui_react_dialog.Title, {
+	ref,
+	"data-slot": "sheet-title",
+	className: require_utils.cn("text-lg md:text-xl font-semibold leading-none tracking-tight", className),
+	style: { color: "var(--text-primary)" },
+	...props
+}));
+SheetTitle.displayName = "SheetTitle";
+var SheetDescription = react.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__radix_ui_react_dialog.Description, {
+	ref,
+	"data-slot": "sheet-description",
+	className: require_utils.cn("text-sm", className),
+	style: { color: "var(--text-muted)" },
+	...props
+}));
+SheetDescription.displayName = "SheetDescription";
+function SheetClose({ ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__radix_ui_react_dialog.Close, {
+		"data-slot": "sheet-close",
+		...props
+	});
+}
+const SheetGlass = {
+	Root: SheetRoot,
+	Trigger: SheetTrigger,
+	Portal: SheetPortal,
+	Overlay: SheetOverlay,
+	Content: SheetContent,
+	Header: SheetHeader,
+	Footer: SheetFooter,
+	Title: SheetTitle,
+	Description: SheetDescription,
+	Close: SheetClose
+};
+const Sheet = SheetRoot;
 const stepperRootVariants = (0, class_variance_authority.cva)("flex w-full", {
 	variants: { orientation: {
 		horizontal: "flex-col",
@@ -1608,6 +1765,16 @@ exports.CircularMetricGlass = require_trust_score_card_glass.CircularMetricGlass
 exports.CircularProgressGlass = require_trust_score_card_glass.CircularProgressGlass;
 exports.ComboBoxGlass = require_trust_score_card_glass.ComboBoxGlass;
 exports.ContributionMetricsGlass = require_trust_score_card_glass.ContributionMetricsGlass;
+exports.Dialog = require_trust_score_card_glass.Dialog;
+exports.DialogClose = require_trust_score_card_glass.DialogClose;
+exports.DialogContent = require_trust_score_card_glass.DialogContent;
+exports.DialogDescription = require_trust_score_card_glass.DialogDescription;
+exports.DialogFooter = require_trust_score_card_glass.DialogFooter;
+exports.DialogHeader = require_trust_score_card_glass.DialogHeader;
+exports.DialogOverlay = require_trust_score_card_glass.DialogOverlay;
+exports.DialogPortal = require_trust_score_card_glass.DialogPortal;
+exports.DialogTitle = require_trust_score_card_glass.DialogTitle;
+exports.DialogTrigger = require_trust_score_card_glass.DialogTrigger;
 exports.DropdownGlass = require_trust_score_card_glass.DropdownGlass;
 exports.DropdownMenuGlass = require_trust_score_card_glass.DropdownMenuGlass;
 exports.DropdownMenuGlassCheckboxItem = require_trust_score_card_glass.DropdownMenuGlassCheckboxItem;
@@ -1638,7 +1805,18 @@ exports.InteractiveCard = require_trust_score_card_glass.InteractiveCard;
 exports.LanguageBarGlass = require_trust_score_card_glass.LanguageBarGlass;
 exports.MetricCardGlass = require_trust_score_card_glass.MetricCardGlass;
 exports.MetricsGridGlass = require_trust_score_card_glass.MetricsGridGlass;
+exports.ModalBody = require_trust_score_card_glass.ModalBody;
+exports.ModalClose = require_trust_score_card_glass.ModalClose;
+exports.ModalContent = require_trust_score_card_glass.ModalContent;
+exports.ModalDescription = require_trust_score_card_glass.ModalDescription;
+exports.ModalFooter = require_trust_score_card_glass.ModalFooter;
 exports.ModalGlass = require_trust_score_card_glass.ModalGlass;
+exports.ModalHeader = require_trust_score_card_glass.ModalHeader;
+exports.ModalOverlay = require_trust_score_card_glass.ModalOverlay;
+exports.ModalPortal = require_trust_score_card_glass.ModalPortal;
+exports.ModalRoot = require_trust_score_card_glass.ModalRoot;
+exports.ModalTitle = require_trust_score_card_glass.ModalTitle;
+exports.ModalTrigger = require_trust_score_card_glass.ModalTrigger;
 exports.NotificationGlass = require_trust_score_card_glass.NotificationGlass;
 exports.PopoverGlass = require_trust_score_card_glass.PopoverGlass;
 exports.PopoverGlassAnchor = require_trust_score_card_glass.PopoverGlassAnchor;
@@ -1661,6 +1839,18 @@ Object.defineProperty(exports, "ResponsiveContainer", {
 });
 exports.SearchBoxGlass = require_trust_score_card_glass.SearchBoxGlass;
 exports.SegmentedControlGlass = require_trust_score_card_glass.SegmentedControlGlass;
+exports.Sheet = Sheet;
+exports.SheetClose = SheetClose;
+exports.SheetContent = SheetContent;
+exports.SheetDescription = SheetDescription;
+exports.SheetFooter = SheetFooter;
+exports.SheetGlass = SheetGlass;
+exports.SheetHeader = SheetHeader;
+exports.SheetOverlay = SheetOverlay;
+exports.SheetPortal = SheetPortal;
+exports.SheetRoot = SheetRoot;
+exports.SheetTitle = SheetTitle;
+exports.SheetTrigger = SheetTrigger;
 exports.SidebarGlass = SidebarGlass;
 exports.SkeletonGlass = require_trust_score_card_glass.SkeletonGlass;
 exports.SliderGlass = require_trust_score_card_glass.SliderGlass;
@@ -1681,11 +1871,15 @@ exports.TabsTrigger = require_trust_score_card_glass.TabsTrigger;
 exports.ThemeProvider = require_theme_context.ThemeProvider;
 exports.ThemeToggleGlass = require_trust_score_card_glass.ThemeToggleGlass;
 exports.ToggleGlass = require_trust_score_card_glass.ToggleGlass;
+exports.Tooltip = require_trust_score_card_glass.Tooltip;
+exports.TooltipContent = require_trust_score_card_glass.TooltipContent;
 exports.TooltipGlass = require_trust_score_card_glass.TooltipGlass;
 exports.TooltipGlassContent = require_trust_score_card_glass.TooltipGlassContent;
 exports.TooltipGlassProvider = require_trust_score_card_glass.TooltipGlassProvider;
 exports.TooltipGlassSimple = require_trust_score_card_glass.TooltipGlassSimple;
 exports.TooltipGlassTrigger = require_trust_score_card_glass.TooltipGlassTrigger;
+exports.TooltipProvider = require_trust_score_card_glass.TooltipProvider;
+exports.TooltipTrigger = require_trust_score_card_glass.TooltipTrigger;
 exports.TouchTarget = require_trust_score_card_glass.TouchTarget;
 exports.TrustScoreCardGlass = require_trust_score_card_glass.TrustScoreCardGlass;
 exports.TrustScoreDisplayGlass = require_trust_score_card_glass.TrustScoreDisplayGlass;
@@ -1710,6 +1904,7 @@ exports.progressSizes = require_trust_score_card_glass.progressSizes;
 exports.shadcnAlertVariants = alertVariants$1;
 exports.shadcnBadgeVariants = badgeVariants$1;
 exports.shadcnButtonVariants = buttonVariants;
+exports.sheetVariants = sheetVariants;
 exports.skeletonVariants = require_trust_score_card_glass.skeletonVariants;
 exports.sparklineBarVariants = require_trust_score_card_glass.sparklineBarVariants;
 exports.sparklineContainerVariants = require_trust_score_card_glass.sparklineContainerVariants;

package/dist/index.d.ts

@@ -11,8 +11,11 @@ export { DropdownMenuGlass, DropdownMenuGlassTrigger, DropdownMenuGlassContent,
 export { GlassCard } from './components/glass/ui/glass-card';
 export { CardGlass, CardGlassRoot, CardGlassHeader, CardGlassTitle, CardGlassDescription, CardGlassAction, CardGlassContent, CardGlassFooter, } from './components/glass/ui/card-glass';
 export { InputGlass } from './components/glass/ui/input-glass';
-export { ModalGlass } from './components/glass/ui/modal-glass';
+export { ModalGlass, ModalRoot, ModalTrigger, ModalPortal, ModalOverlay, ModalContent, ModalHeader, ModalBody, ModalFooter, ModalTitle, ModalDescription, ModalClose, Dialog, DialogTrigger, DialogPortal, DialogOverlay, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, DialogClose, } from './components/glass/ui/modal-glass';
+export type { ModalRootProps, ModalContentProps } from './components/glass/ui/modal-glass';
 export { NotificationGlass } from './components/glass/ui/notification-glass';
+export { SheetGlass, SheetRoot, SheetTrigger, SheetPortal, SheetOverlay, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription, SheetClose, Sheet, } from './components/glass/ui/sheet-glass';
+export type { SheetContentProps, SheetSide } from './components/glass/ui/sheet-glass';
 export { PopoverGlass, PopoverGlassTrigger, PopoverGlassContent, PopoverGlassAnchor, PopoverGlassLegacy, } from './components/glass/ui/popover-glass';
 export { SkeletonGlass } from './components/glass/ui/skeleton-glass';
 export { SliderGlass } from './components/glass/ui/slider-glass';
@@ -21,7 +24,7 @@ export { TabsGlass, Tabs, TabsList, TabsTrigger, TabsContent, } from './componen
 export type { TabsRootProps, TabsListProps, TabsTriggerProps, TabsContentProps, } from './components/glass/ui/tabs-glass';
 export { ToggleGlass } from './components/glass/ui/toggle-glass';
 export { SidebarGlass, useSidebar } from './components/glass/ui/sidebar-glass';
-export { TooltipGlassProvider, TooltipGlass, TooltipGlassTrigger, TooltipGlassContent, TooltipGlassSimple, } from './components/glass/ui/tooltip-glass';
+export { TooltipGlassProvider, TooltipGlass, TooltipGlassTrigger, TooltipGlassContent, TooltipGlassSimple, Tooltip, TooltipTrigger, TooltipContent, TooltipProvider, } from './components/glass/ui/tooltip-glass';
 export { ExpandableHeaderGlass } from './components/glass/atomic/expandable-header-glass';
 export { IconButtonGlass } from './components/glass/atomic/icon-button-glass';
 export { InsightCardGlass } from './components/glass/atomic/insight-card-glass';

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import { t as cn } from "./utils-B792GPM_.mjs";
-import { $ as TabsTrigger, A as FlagAlertGlass, At as DropdownMenuGlassTrigger, B as IconButtonGlass, Bt as AvatarGlass, C as sparklineContainerVariants, Ct as DropdownMenuGlassRadioGroup, D as progressSizes, Dt as DropdownMenuGlassSub, E as ProgressGlass, Et as DropdownMenuGlassShortcut, F as SortDropdownGlass, Ft as CheckboxGlass, G as TooltipGlassSimple, Gt as statusSizes, H as TooltipGlass, Ht as AvatarGlassImage, I as SearchBoxGlass, It as ButtonGlass, J as toggleSizes, Jt as AlertGlassTitle, K as TooltipGlassTrigger, Kt as AlertGlass, L as InsightCardGlass, Lt as buttonGlassVariants, M as BaseProgressGlass, Mt as inputVariants, N as ThemeToggleGlass, Nt as CircularProgressGlass, O as ProfileAvatarGlass, Ot as DropdownMenuGlassSubContent, P as StatItemGlass, Pt as Checkbox, Q as TabsList, Qt as alertVariants, R as insightCardVariants, Rt as BadgeGlass, S as sparklineBarVariants, St as DropdownMenuGlassPortal, T as RainbowProgressGlass, Tt as DropdownMenuGlassSeparator, U as TooltipGlassContent, Ut as AvatarGlassSimple, V as ExpandableHeaderGlass, Vt as AvatarGlassFallback, W as TooltipGlassProvider, Wt as avatarSizes, X as TabsContent, Xt as FormFieldWrapper, Y as Tabs, Yt as InteractiveCard, Z as TabsGlass, Zt as TouchTarget, _ as ContributionMetricsGlass, _t as DropdownMenuGlassCheckboxItem, a as HeaderBrandingGlass, at as PopoverGlassContent, b as AICardGlass, bt as DropdownMenuGlassItem, c as YearCardGlass, ct as NotificationGlass, d as TrustScoreDisplayGlass, dt as modalSizes, et as SliderGlass, f as RepositoryMetadataGlass, ft as InputGlass, g as MetricCardGlass, gt as DropdownMenuGlass, h as MetricsGridGlass, ht as DropdownGlass, i as HeaderNavGlass, it as PopoverGlassAnchor, j as StatusIndicatorGlass, jt as ComboBoxGlass, k as LanguageBarGlass, kt as DropdownMenuGlassSubTrigger, l as UserStatsLineGlass, lt as notificationVariants, m as RepositoryCardGlass, mt as cardIntensity, n as ProjectsListGlass, nt as skeletonVariants, o as FlagsSectionGlass, ot as PopoverGlassLegacy, p as RepositoryHeaderGlass, pt as GlassCard, q as ToggleGlass, qt as AlertGlassDescription, r as ProfileHeaderGlass, rt as PopoverGlass, s as CareerStatsGlass, st as PopoverGlassTrigger, t as TrustScoreCardGlass, tt as SkeletonGlass, u as UserInfoGlass, ut as ModalGlass, v as CircularMetricGlass, vt as DropdownMenuGlassContent, w as SegmentedControlGlass, wt as DropdownMenuGlassRadioItem, x as SparklineGlass, xt as DropdownMenuGlassLabel, y as CareerStatsHeaderGlass, yt as DropdownMenuGlassGroup, z as insightVariantConfig, zt as badgeVariants } from "./trust-score-card-glass-BGqBcdyJ.mjs";
+import { $ as Tabs, $t as DropdownMenuGlassSubContent, A as FlagAlertGlass, At as ModalHeader, B as IconButtonGlass, Bt as DropdownGlass, C as sparklineContainerVariants, Cn as ICON_SIZES, Ct as DialogTrigger, D as progressSizes, Dt as ModalDescription, E as ProgressGlass, Et as ModalContent, F as SortDropdownGlass, Ft as ModalTrigger, G as TooltipGlassContent, Gt as DropdownMenuGlassItem, H as Tooltip, Ht as DropdownMenuGlassCheckboxItem, I as SearchBoxGlass, It as modalSizes, J as TooltipGlassTrigger, Jt as DropdownMenuGlassRadioGroup, K as TooltipGlassProvider, Kt as DropdownMenuGlassLabel, L as InsightCardGlass, Lt as InputGlass, M as BaseProgressGlass, Mt as ModalPortal, N as ThemeToggleGlass, Nt as ModalRoot, O as ProfileAvatarGlass, Ot as ModalFooter, P as StatItemGlass, Pt as ModalTitle, Q as toggleSizes, Qt as DropdownMenuGlassSub, R as insightCardVariants, Rt as GlassCard, S as sparklineBarVariants, Sn as TouchTarget, St as DialogTitle, T as RainbowProgressGlass, Tt as ModalClose, U as TooltipContent, Ut as DropdownMenuGlassContent, V as ExpandableHeaderGlass, Vt as DropdownMenuGlass, W as TooltipGlass, Wt as DropdownMenuGlassGroup, X as TooltipTrigger, Xt as DropdownMenuGlassSeparator, Y as TooltipProvider, Yt as DropdownMenuGlassRadioItem, Z as ToggleGlass, Zt as DropdownMenuGlassShortcut, _ as ContributionMetricsGlass, _n as AlertGlass, _t as DialogDescription, a as HeaderBrandingGlass, an as Checkbox, at as SkeletonGlass, b as AICardGlass, bn as InteractiveCard, bt as DialogOverlay, c as YearCardGlass, cn as buttonGlassVariants, ct as PopoverGlassAnchor, d as TrustScoreDisplayGlass, dn as AvatarGlass, dt as PopoverGlassTrigger, en as DropdownMenuGlassSubTrigger, et as TabsContent, f as RepositoryMetadataGlass, fn as AvatarGlassFallback, ft as NotificationGlass, g as MetricCardGlass, gn as statusSizes, gt as DialogContent, h as MetricsGridGlass, hn as avatarSizes, ht as DialogClose, i as HeaderNavGlass, in as CircularProgressGlass, it as SliderGlass, j as StatusIndicatorGlass, jt as ModalOverlay, k as LanguageBarGlass, kt as ModalGlass, l as UserStatsLineGlass, ln as BadgeGlass, lt as PopoverGlassContent, m as RepositoryCardGlass, mn as AvatarGlassSimple, mt as Dialog, n as ProjectsListGlass, nn as ComboBoxGlass, nt as TabsList, o as FlagsSectionGlass, on as CheckboxGlass, ot as skeletonVariants, p as RepositoryHeaderGlass, pn as AvatarGlassImage, pt as notificationVariants, q as TooltipGlassSimple, qt as DropdownMenuGlassPortal, r as ProfileHeaderGlass, rn as inputVariants, rt as TabsTrigger, s as CareerStatsGlass, sn as ButtonGlass, st as PopoverGlass, t as TrustScoreCardGlass, tn as DropdownMenuGlassTrigger, tt as TabsGlass, u as UserInfoGlass, un as badgeVariants, ut as PopoverGlassLegacy, v as CircularMetricGlass, vn as AlertGlassDescription, vt as DialogFooter, w as SegmentedControlGlass, wn as alertVariants, wt as ModalBody, x as SparklineGlass, xn as FormFieldWrapper, xt as DialogPortal, y as CareerStatsHeaderGlass, yn as AlertGlassTitle, yt as DialogHeader, z as insightVariantConfig, zt as cardIntensity } from "./trust-score-card-glass-Bt77v2TG.mjs";
 import { n as useHover, t as useFocus } from "./use-focus-C5kPAKr_.mjs";
 import { a as getThemeConfig, i as getNextTheme, n as THEME_CONFIG, o as useTheme, r as ThemeProvider, t as THEMES } from "./theme-context-DLS2uAgJ.mjs";
 import { n as useResponsive, t as useWallpaperTint } from "./use-wallpaper-tint-C0kYXNiN.mjs";
@@ -9,6 +9,7 @@ import { Check, ChevronDown, Menu, PanelLeft, PanelLeftClose, PanelLeftOpen, X }
 import { cva } from "class-variance-authority";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Slot } from "@radix-ui/react-slot";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
 import * as RechartsPrimitive from "recharts";
 import { Bar, BarChart, Cell, ResponsiveContainer } from "recharts";
 import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
@@ -99,6 +100,161 @@ const CardGlass = {
 	Content: CardGlassContent,
 	Footer: CardGlassFooter
 };
+const sheetVariants = cva([
+	"fixed z-50 flex flex-col gap-4 p-6",
+	"transition-transform ease-in-out duration-300",
+	"data-[state=open]:animate-in data-[state=closed]:animate-out",
+	"data-[state=closed]:duration-300 data-[state=open]:duration-500"
+].join(" "), {
+	variants: { side: {
+		top: [
+			"inset-x-0 top-0",
+			"data-[state=closed]:slide-out-to-top",
+			"data-[state=open]:slide-in-from-top",
+			"rounded-b-2xl"
+		].join(" "),
+		bottom: [
+			"inset-x-0 bottom-0",
+			"data-[state=closed]:slide-out-to-bottom",
+			"data-[state=open]:slide-in-from-bottom",
+			"rounded-t-2xl"
+		].join(" "),
+		left: [
+			"inset-y-0 left-0 h-full w-3/4 sm:max-w-sm",
+			"data-[state=closed]:slide-out-to-left",
+			"data-[state=open]:slide-in-from-left",
+			"rounded-r-2xl"
+		].join(" "),
+		right: [
+			"inset-y-0 right-0 h-full w-3/4 sm:max-w-sm",
+			"data-[state=closed]:slide-out-to-right",
+			"data-[state=open]:slide-in-from-right",
+			"rounded-l-2xl"
+		].join(" ")
+	} },
+	defaultVariants: { side: "right" }
+});
+function SheetRoot({ ...props }) {
+	return /* @__PURE__ */ jsx(DialogPrimitive.Root, {
+		"data-slot": "sheet",
+		...props
+	});
+}
+function SheetTrigger({ ...props }) {
+	return /* @__PURE__ */ jsx(DialogPrimitive.Trigger, {
+		"data-slot": "sheet-trigger",
+		...props
+	});
+}
+function SheetPortal({ ...props }) {
+	return /* @__PURE__ */ jsx(DialogPrimitive.Portal, {
+		"data-slot": "sheet-portal",
+		...props
+	});
+}
+var SheetOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(DialogPrimitive.Overlay, {
+	ref,
+	"data-slot": "sheet-overlay",
+	className: cn("fixed inset-0 z-50", "data-[state=open]:animate-in data-[state=closed]:animate-out", "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", className),
+	style: {
+		background: "var(--modal-overlay)",
+		backdropFilter: "blur(var(--blur-sm))",
+		WebkitBackdropFilter: "blur(var(--blur-sm))"
+	},
+	...props
+}));
+SheetOverlay.displayName = "SheetOverlay";
+var SheetContent = React.forwardRef(({ className, children, side = "right", showCloseButton = true, ...props }, ref) => /* @__PURE__ */ jsxs(SheetPortal, { children: [/* @__PURE__ */ jsx(SheetOverlay, {}), /* @__PURE__ */ jsxs(DialogPrimitive.Content, {
+	ref,
+	"data-slot": "sheet-content",
+	"data-side": side,
+	className: cn(sheetVariants({ side }), className),
+	style: {
+		background: "var(--modal-bg)",
+		border: "1px solid var(--modal-border)",
+		boxShadow: "var(--modal-glow)",
+		backdropFilter: "blur(var(--blur-lg))",
+		WebkitBackdropFilter: "blur(var(--blur-lg))"
+	},
+	...props,
+	children: [
+		/* @__PURE__ */ jsx("div", {
+			className: "absolute inset-0 pointer-events-none",
+			style: {
+				background: "var(--modal-glow-effect)",
+				borderRadius: "inherit"
+			},
+			"aria-hidden": "true"
+		}),
+		/* @__PURE__ */ jsx("div", {
+			className: "relative flex-1 flex flex-col overflow-auto",
+			children
+		}),
+		showCloseButton && /* @__PURE__ */ jsxs(DialogPrimitive.Close, {
+			"data-slot": "sheet-close",
+			className: cn("absolute top-4 right-4", "p-1.5 md:p-2 rounded-xl", "transition-all duration-300", "ring-offset-background", "focus:outline-none focus:ring-2 focus:ring-(--semantic-primary) focus:ring-offset-2", "hover:opacity-100 opacity-70", "disabled:pointer-events-none"),
+			style: {
+				background: "var(--modal-close-btn-bg)",
+				border: "var(--modal-close-btn-border)",
+				color: "var(--text-muted)"
+			},
+			children: [/* @__PURE__ */ jsx(X, { className: ICON_SIZES.md }), /* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: "Close"
+			})]
+		})
+	]
+})] }));
+SheetContent.displayName = "SheetContent";
+function SheetHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "sheet-header",
+		className: cn("flex flex-col gap-2 text-center sm:text-left", className),
+		...props
+	});
+}
+function SheetFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "sheet-footer",
+		className: cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end mt-auto pt-4", className),
+		...props
+	});
+}
+var SheetTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(DialogPrimitive.Title, {
+	ref,
+	"data-slot": "sheet-title",
+	className: cn("text-lg md:text-xl font-semibold leading-none tracking-tight", className),
+	style: { color: "var(--text-primary)" },
+	...props
+}));
+SheetTitle.displayName = "SheetTitle";
+var SheetDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(DialogPrimitive.Description, {
+	ref,
+	"data-slot": "sheet-description",
+	className: cn("text-sm", className),
+	style: { color: "var(--text-muted)" },
+	...props
+}));
+SheetDescription.displayName = "SheetDescription";
+function SheetClose({ ...props }) {
+	return /* @__PURE__ */ jsx(DialogPrimitive.Close, {
+		"data-slot": "sheet-close",
+		...props
+	});
+}
+const SheetGlass = {
+	Root: SheetRoot,
+	Trigger: SheetTrigger,
+	Portal: SheetPortal,
+	Overlay: SheetOverlay,
+	Content: SheetContent,
+	Header: SheetHeader,
+	Footer: SheetFooter,
+	Title: SheetTitle,
+	Description: SheetDescription,
+	Close: SheetClose
+};
+const Sheet = SheetRoot;
 const stepperRootVariants = cva("flex w-full", {
 	variants: { orientation: {
 		horizontal: "flex-col",
@@ -1556,6 +1712,6 @@ const buttonVariants = cva("inline-flex items-center justify-center gap-2 whites
 		size: "default"
 	}
 });
-export { AICardGlass, AlertGlass, AlertGlassDescription, AlertGlassTitle, AvatarGlass, AvatarGlassFallback, AvatarGlassImage, AvatarGlassSimple, BadgeGlass, Bar, BarChart, BaseProgressGlass, ButtonGlass, CardGlass, CardGlassAction, CardGlassContent, CardGlassDescription, CardGlassFooter, CardGlassHeader, CardGlassRoot, CardGlassTitle, CareerStatsGlass, CareerStatsHeaderGlass, Cell, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, CheckboxGlass, CircularMetricGlass, CircularProgressGlass, ComboBoxGlass, ContributionMetricsGlass, DropdownGlass, DropdownMenuGlass, DropdownMenuGlassCheckboxItem, DropdownMenuGlassContent, DropdownMenuGlassGroup, DropdownMenuGlassItem, DropdownMenuGlassLabel, DropdownMenuGlassPortal, DropdownMenuGlassRadioGroup, DropdownMenuGlassRadioItem, DropdownMenuGlassSeparator, DropdownMenuGlassShortcut, DropdownMenuGlassSub, DropdownMenuGlassSubContent, DropdownMenuGlassSubTrigger, DropdownMenuGlassTrigger, ExpandableHeaderGlass, FlagAlertGlass, FlagsSectionGlass, FormFieldWrapper, GlassCard, HeaderBrandingGlass, HeaderNavGlass, IconButtonGlass, InputGlass, InsightCardGlass, InteractiveCard, LanguageBarGlass, MetricCardGlass, MetricsGridGlass, ModalGlass, NotificationGlass, PopoverGlass, PopoverGlassAnchor, PopoverGlassContent, PopoverGlassLegacy, PopoverGlassTrigger, ProfileAvatarGlass, ProfileHeaderGlass, ProgressGlass, ProjectsListGlass, RainbowProgressGlass, RepositoryCardGlass, RepositoryHeaderGlass, RepositoryMetadataGlass, ResponsiveContainer, SearchBoxGlass, SegmentedControlGlass, SidebarGlass, SkeletonGlass, SliderGlass, SortDropdownGlass, SparklineGlass, SplitLayoutAccordion, SplitLayoutGlass, StatItemGlass, StatusIndicatorGlass, StepperGlass, THEMES, THEME_CONFIG, Tabs, TabsContent, TabsGlass, TabsList, TabsTrigger, ThemeProvider, ThemeToggleGlass, ToggleGlass, TooltipGlass, TooltipGlassContent, TooltipGlassProvider, TooltipGlassSimple, TooltipGlassTrigger, TouchTarget, TrustScoreCardGlass, TrustScoreDisplayGlass, UserInfoGlass, UserStatsLineGlass, YearCardGlass, alertVariants, avatarSizes, badgeVariants, buttonGlassVariants, cardIntensity, cn, dropdownAlign, getNextTheme, getThemeConfig, inputVariants, insightCardVariants, insightVariantConfig, modalSizes, notificationVariants, progressSizes, alertVariants$1 as shadcnAlertVariants, badgeVariants$1 as shadcnBadgeVariants, buttonVariants as shadcnButtonVariants, skeletonVariants, sparklineBarVariants, sparklineContainerVariants, statusSizes, stepperConnectorVariants, stepperContentVariants, stepperDescriptionVariants, stepperIndicatorVariants, stepperLabelVariants, stepperListVariants, stepperRootVariants, stepperStepContainerVariants, toggleSizes, tooltipPositions, useChart, useFocus, useHover, useResponsive, useSidebar, useSplitLayout, useSplitLayoutOptional, useTheme, useWallpaperTint };
+export { AICardGlass, AlertGlass, AlertGlassDescription, AlertGlassTitle, AvatarGlass, AvatarGlassFallback, AvatarGlassImage, AvatarGlassSimple, BadgeGlass, Bar, BarChart, BaseProgressGlass, ButtonGlass, CardGlass, CardGlassAction, CardGlassContent, CardGlassDescription, CardGlassFooter, CardGlassHeader, CardGlassRoot, CardGlassTitle, CareerStatsGlass, CareerStatsHeaderGlass, Cell, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, CheckboxGlass, CircularMetricGlass, CircularProgressGlass, ComboBoxGlass, ContributionMetricsGlass, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownGlass, DropdownMenuGlass, DropdownMenuGlassCheckboxItem, DropdownMenuGlassContent, DropdownMenuGlassGroup, DropdownMenuGlassItem, DropdownMenuGlassLabel, DropdownMenuGlassPortal, DropdownMenuGlassRadioGroup, DropdownMenuGlassRadioItem, DropdownMenuGlassSeparator, DropdownMenuGlassShortcut, DropdownMenuGlassSub, DropdownMenuGlassSubContent, DropdownMenuGlassSubTrigger, DropdownMenuGlassTrigger, ExpandableHeaderGlass, FlagAlertGlass, FlagsSectionGlass, FormFieldWrapper, GlassCard, HeaderBrandingGlass, HeaderNavGlass, IconButtonGlass, InputGlass, InsightCardGlass, InteractiveCard, LanguageBarGlass, MetricCardGlass, MetricsGridGlass, ModalBody, ModalClose, ModalContent, ModalDescription, ModalFooter, ModalGlass, ModalHeader, ModalOverlay, ModalPortal, ModalRoot, ModalTitle, ModalTrigger, NotificationGlass, PopoverGlass, PopoverGlassAnchor, PopoverGlassContent, PopoverGlassLegacy, PopoverGlassTrigger, ProfileAvatarGlass, ProfileHeaderGlass, ProgressGlass, ProjectsListGlass, RainbowProgressGlass, RepositoryCardGlass, RepositoryHeaderGlass, RepositoryMetadataGlass, ResponsiveContainer, SearchBoxGlass, SegmentedControlGlass, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetGlass, SheetHeader, SheetOverlay, SheetPortal, SheetRoot, SheetTitle, SheetTrigger, SidebarGlass, SkeletonGlass, SliderGlass, SortDropdownGlass, SparklineGlass, SplitLayoutAccordion, SplitLayoutGlass, StatItemGlass, StatusIndicatorGlass, StepperGlass, THEMES, THEME_CONFIG, Tabs, TabsContent, TabsGlass, TabsList, TabsTrigger, ThemeProvider, ThemeToggleGlass, ToggleGlass, Tooltip, TooltipContent, TooltipGlass, TooltipGlassContent, TooltipGlassProvider, TooltipGlassSimple, TooltipGlassTrigger, TooltipProvider, TooltipTrigger, TouchTarget, TrustScoreCardGlass, TrustScoreDisplayGlass, UserInfoGlass, UserStatsLineGlass, YearCardGlass, alertVariants, avatarSizes, badgeVariants, buttonGlassVariants, cardIntensity, cn, dropdownAlign, getNextTheme, getThemeConfig, inputVariants, insightCardVariants, insightVariantConfig, modalSizes, notificationVariants, progressSizes, alertVariants$1 as shadcnAlertVariants, badgeVariants$1 as shadcnBadgeVariants, buttonVariants as shadcnButtonVariants, sheetVariants, skeletonVariants, sparklineBarVariants, sparklineContainerVariants, statusSizes, stepperConnectorVariants, stepperContentVariants, stepperDescriptionVariants, stepperIndicatorVariants, stepperLabelVariants, stepperListVariants, stepperRootVariants, stepperStepContainerVariants, toggleSizes, tooltipPositions, useChart, useFocus, useHover, useResponsive, useSidebar, useSplitLayout, useSplitLayoutOptional, useTheme, useWallpaperTint };
 
 //# sourceMappingURL=index.mjs.map

package/dist/r/modal-glass.json

@@ -7,7 +7,8 @@
   "dependencies": [
     "@radix-ui/react-dialog",
     "lucide-react",
-    "react"
+    "react",
+    "shadcn-glass-ui"
   ],
   "registryDependencies": [
     "cn",
@@ -18,7 +19,7 @@
     {
       "path": "components/glass/ui/modal-glass.tsx",
       "type": "registry:component",
-      "content": "/* eslint-disable react-refresh/only-export-components */\n/**\n * ModalGlass Component (Radix UI Dialog-based)\n *\n * Glass-themed modal/dialog with full shadcn/ui Dialog API compatibility.\n * Built on @radix-ui/react-dialog for accessibility and state management.\n *\n * @example Uncontrolled with Trigger (shadcn/ui pattern)\n * ```tsx\n * <ModalGlass.Root>\n *   <ModalGlass.Trigger asChild>\n *     <ButtonGlass>Open Dialog</ButtonGlass>\n *   </ModalGlass.Trigger>\n *   <ModalGlass.Content>\n *     <ModalGlass.Header>\n *       <ModalGlass.Title>Dialog Title</ModalGlass.Title>\n *       <ModalGlass.Description>Dialog description</ModalGlass.Description>\n *     </ModalGlass.Header>\n *     <ModalGlass.Body>Content here</ModalGlass.Body>\n *     <ModalGlass.Footer>\n *       <ModalGlass.Close asChild>\n *         <ButtonGlass variant=\"ghost\">Cancel</ButtonGlass>\n *       </ModalGlass.Close>\n *       <ButtonGlass>Confirm</ButtonGlass>\n *     </ModalGlass.Footer>\n *   </ModalGlass.Content>\n * </ModalGlass.Root>\n * ```\n *\n * @example Controlled mode (programmatic)\n * ```tsx\n * <ModalGlass.Root open={open} onOpenChange={setOpen}>\n *   <ModalGlass.Content>\n *     <ModalGlass.Header>\n *       <ModalGlass.Title>Confirm Action</ModalGlass.Title>\n *     </ModalGlass.Header>\n *     <ModalGlass.Body>Are you sure?</ModalGlass.Body>\n *     <ModalGlass.Footer>\n *       <ButtonGlass onClick={() => setOpen(false)}>Cancel</ButtonGlass>\n *     </ModalGlass.Footer>\n *   </ModalGlass.Content>\n * </ModalGlass.Root>\n * ```\n *\n * @accessibility\n * - Built on Radix UI Dialog with full WCAG 2.1 AA compliance\n * - Keyboard: Escape to close, Tab for focus trap\n * - Screen Readers: role=\"dialog\", aria-modal, aria-labelledby, aria-describedby\n * - Focus Management: Auto-focus on open, return focus on close\n *\n * @since v2.0.0 - Migrated to Radix UI Dialog, added Trigger and Portal\n */\n\nimport * as React from 'react';\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\nimport { X } from 'lucide-react';\nimport { cn } from '@/lib/utils';\nimport { modalSizes, type ModalSize } from '@/lib/variants/modal-glass-variants';\nimport { ICON_SIZES } from '@/components/glass/primitives';\nimport '@/glass-theme.css';\n\n// ========================================\n// CONTEXT FOR SIZE (optional enhancement)\n// ========================================\n\ninterface ModalContextValue {\n  size: ModalSize;\n}\n\nconst ModalContext = React.createContext<ModalContextValue>({ size: 'sm' });\n\nconst useModalContext = () => React.useContext(ModalContext);\n\n// ========================================\n// COMPOUND COMPONENT: ROOT\n// ========================================\n\ninterface ModalRootProps extends React.ComponentProps<typeof DialogPrimitive.Root> {\n  /** Size variant for the modal */\n  size?: ModalSize;\n}\n\n/**\n * ModalGlass.Root - Dialog root component\n *\n * Supports both controlled (open/onOpenChange) and uncontrolled (with Trigger) modes.\n */\nfunction ModalRoot({ size = 'sm', children, ...props }: ModalRootProps) {\n  return (\n    <ModalContext.Provider value={{ size }}>\n      <DialogPrimitive.Root data-slot=\"dialog\" {...props}>\n        {children}\n      </DialogPrimitive.Root>\n    </ModalContext.Provider>\n  );\n}\n\n// ========================================\n// COMPOUND COMPONENT: TRIGGER\n// ========================================\n\n/**\n * ModalGlass.Trigger - Opens the modal when clicked\n *\n * Use `asChild` to render as the child element instead of a button.\n */\nfunction ModalTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />;\n}\n\n// ========================================\n// COMPOUND COMPONENT: PORTAL\n// ========================================\n\n/**\n * ModalGlass.Portal - Renders children into a portal\n */\nfunction ModalPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>) {\n  return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />;\n}\n\n// ========================================\n// COMPOUND COMPONENT: OVERLAY\n// ========================================\n\n/**\n * ModalGlass.Overlay - Backdrop with glass blur effect\n */\nconst ModalOverlay = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Overlay>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Overlay\n    ref={ref}\n    data-slot=\"dialog-overlay\"\n    className={cn(\n      'fixed inset-0 z-50',\n      'data-[state=open]:animate-in data-[state=closed]:animate-out',\n      'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',\n      className\n    )}\n    style={{\n      background: 'var(--modal-overlay)',\n      backdropFilter: 'blur(var(--blur-sm))',\n      WebkitBackdropFilter: 'blur(var(--blur-sm))',\n    }}\n    {...props}\n  />\n));\nModalOverlay.displayName = 'ModalOverlay';\n\n// ========================================\n// COMPOUND COMPONENT: CONTENT\n// ========================================\n\ninterface ModalContentProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {\n  /** Show close button in top-right corner */\n  showCloseButton?: boolean;\n  /** Override size from Root */\n  size?: ModalSize;\n}\n\n/**\n * ModalGlass.Content - Main modal container with glass styling\n *\n * Automatically renders Portal and Overlay.\n */\nconst ModalContent = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Content>,\n  ModalContentProps\n>(({ className, children, showCloseButton = true, size: sizeProp, ...props }, ref) => {\n  const { size: contextSize } = useModalContext();\n  const size = sizeProp ?? contextSize;\n\n  return (\n    <ModalPortal>\n      <ModalOverlay />\n      <DialogPrimitive.Content\n        ref={ref}\n        data-slot=\"dialog-content\"\n        className={cn(\n          modalSizes({ size }),\n          'fixed top-[50%] left-[50%] z-50',\n          'translate-x-[-50%] translate-y-[-50%]',\n          'data-[state=open]:animate-in data-[state=closed]:animate-out',\n          'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',\n          'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',\n          'data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%]',\n          'data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]',\n          'duration-200',\n          className\n        )}\n        style={{\n          background: 'var(--modal-bg)',\n          border: '1px solid var(--modal-border)',\n          boxShadow: 'var(--modal-glow)',\n          backdropFilter: 'blur(var(--blur-lg))',\n          WebkitBackdropFilter: 'blur(var(--blur-lg))',\n        }}\n        {...props}\n      >\n        {/* Glow effect layer */}\n        <div\n          className=\"absolute inset-0 rounded-3xl pointer-events-none\"\n          style={{ background: 'var(--modal-glow-effect)' }}\n          aria-hidden=\"true\"\n        />\n        {/* Content */}\n        <div className=\"relative\">{children}</div>\n        {/* Close button */}\n        {showCloseButton && (\n          <DialogPrimitive.Close\n            data-slot=\"dialog-close\"\n            className={cn(\n              'absolute top-4 right-4',\n              'p-1.5 md:p-2 rounded-xl',\n              'transition-all duration-300',\n              'ring-offset-background',\n              'focus:outline-none focus:ring-2 focus:ring-(--semantic-primary) focus:ring-offset-2',\n              'hover:opacity-100 opacity-70',\n              'disabled:pointer-events-none'\n            )}\n            style={{\n              background: 'var(--modal-close-btn-bg)',\n              border: 'var(--modal-close-btn-border)',\n              color: 'var(--text-muted)',\n            }}\n          >\n            <X className={ICON_SIZES.md} />\n            <span className=\"sr-only\">Close</span>\n          </DialogPrimitive.Close>\n        )}\n      </DialogPrimitive.Content>\n    </ModalPortal>\n  );\n});\nModalContent.displayName = 'ModalContent';\n\n// ========================================\n// COMPOUND COMPONENT: HEADER\n// ========================================\n\n/**\n * ModalGlass.Header - Header section with flex layout\n */\nfunction ModalHeader({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"dialog-header\"\n      className={cn('flex flex-col gap-2 text-center sm:text-left mb-4', className)}\n      {...props}\n    />\n  );\n}\n\n// ========================================\n// COMPOUND COMPONENT: BODY\n// ========================================\n\n/**\n * ModalGlass.Body - Main content area\n *\n * Note: shadcn/ui Dialog doesn't have DialogBody, but we keep it for convenience.\n */\nfunction ModalBody({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"dialog-body\"\n      className={cn('relative', className)}\n      style={{ color: 'var(--text-secondary)' }}\n      {...props}\n    />\n  );\n}\n\n// ========================================\n// COMPOUND COMPONENT: FOOTER\n// ========================================\n\n/**\n * ModalGlass.Footer - Footer section with flex layout for actions\n */\nfunction ModalFooter({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"dialog-footer\"\n      className={cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end mt-4', className)}\n      {...props}\n    />\n  );\n}\n\n// ========================================\n// COMPOUND COMPONENT: TITLE\n// ========================================\n\n/**\n * ModalGlass.Title - Modal title with proper accessibility\n */\nconst ModalTitle = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Title\n    ref={ref}\n    data-slot=\"dialog-title\"\n    className={cn('text-lg md:text-xl font-semibold leading-none tracking-tight', className)}\n    style={{ color: 'var(--text-primary)' }}\n    {...props}\n  />\n));\nModalTitle.displayName = 'ModalTitle';\n\n// ========================================\n// COMPOUND COMPONENT: DESCRIPTION\n// ========================================\n\n/**\n * ModalGlass.Description - Modal description text\n */\nconst ModalDescription = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Description\n    ref={ref}\n    data-slot=\"dialog-description\"\n    className={cn('text-sm', className)}\n    style={{ color: 'var(--text-muted)' }}\n    {...props}\n  />\n));\nModalDescription.displayName = 'ModalDescription';\n\n// ========================================\n// COMPOUND COMPONENT: CLOSE\n// ========================================\n\n/**\n * ModalGlass.Close - Closes the modal when clicked\n *\n * Use `asChild` to render as the child element.\n *\n * @example\n * ```tsx\n * <ModalGlass.Close asChild>\n *   <ButtonGlass variant=\"ghost\">Cancel</ButtonGlass>\n * </ModalGlass.Close>\n * ```\n */\nfunction ModalClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>) {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />;\n}\n\n// ========================================\n// EXPORT COMPOUND COMPONENT\n// ========================================\n\n/**\n * ModalGlass - Glass-themed Dialog with shadcn/ui API compatibility\n *\n * Built on @radix-ui/react-dialog for full accessibility support.\n *\n * @example Uncontrolled (with Trigger)\n * ```tsx\n * <ModalGlass.Root>\n *   <ModalGlass.Trigger asChild>\n *     <ButtonGlass>Open</ButtonGlass>\n *   </ModalGlass.Trigger>\n *   <ModalGlass.Content>\n *     <ModalGlass.Header>\n *       <ModalGlass.Title>Title</ModalGlass.Title>\n *     </ModalGlass.Header>\n *     <ModalGlass.Body>Content</ModalGlass.Body>\n *     <ModalGlass.Footer>\n *       <ModalGlass.Close asChild>\n *         <ButtonGlass>Close</ButtonGlass>\n *       </ModalGlass.Close>\n *     </ModalGlass.Footer>\n *   </ModalGlass.Content>\n * </ModalGlass.Root>\n * ```\n *\n * @example Controlled\n * ```tsx\n * <ModalGlass.Root open={open} onOpenChange={setOpen}>\n *   <ModalGlass.Content showCloseButton={false}>\n *     <ModalGlass.Header>\n *       <ModalGlass.Title>Confirm</ModalGlass.Title>\n *     </ModalGlass.Header>\n *     <ModalGlass.Footer>\n *       <ButtonGlass onClick={() => setOpen(false)}>OK</ButtonGlass>\n *     </ModalGlass.Footer>\n *   </ModalGlass.Content>\n * </ModalGlass.Root>\n * ```\n */\nexport const ModalGlass = {\n  Root: ModalRoot,\n  Trigger: ModalTrigger,\n  Portal: ModalPortal,\n  Overlay: ModalOverlay,\n  Content: ModalContent,\n  Header: ModalHeader,\n  Body: ModalBody,\n  Footer: ModalFooter,\n  Title: ModalTitle,\n  Description: ModalDescription,\n  Close: ModalClose,\n};\n\n// Named exports for direct imports\nexport {\n  ModalRoot,\n  ModalTrigger,\n  ModalPortal,\n  ModalOverlay,\n  ModalContent,\n  ModalHeader,\n  ModalBody,\n  ModalFooter,\n  ModalTitle,\n  ModalDescription,\n  ModalClose,\n};\n\nexport type { ModalRootProps, ModalContentProps };\n"
+      "content": "/* eslint-disable react-refresh/only-export-components */\n/**\n * ModalGlass Component (Radix UI Dialog-based)\n *\n * Glass-themed modal/dialog with full shadcn/ui Dialog API compatibility.\n * Built on @radix-ui/react-dialog for accessibility and state management.\n *\n * @example Uncontrolled with Trigger (shadcn/ui pattern)\n * ```tsx\n * <ModalGlass.Root>\n *   <ModalGlass.Trigger asChild>\n *     <ButtonGlass>Open Dialog</ButtonGlass>\n *   </ModalGlass.Trigger>\n *   <ModalGlass.Content>\n *     <ModalGlass.Header>\n *       <ModalGlass.Title>Dialog Title</ModalGlass.Title>\n *       <ModalGlass.Description>Dialog description</ModalGlass.Description>\n *     </ModalGlass.Header>\n *     <ModalGlass.Body>Content here</ModalGlass.Body>\n *     <ModalGlass.Footer>\n *       <ModalGlass.Close asChild>\n *         <ButtonGlass variant=\"ghost\">Cancel</ButtonGlass>\n *       </ModalGlass.Close>\n *       <ButtonGlass>Confirm</ButtonGlass>\n *     </ModalGlass.Footer>\n *   </ModalGlass.Content>\n * </ModalGlass.Root>\n * ```\n *\n * @example Controlled mode (programmatic)\n * ```tsx\n * <ModalGlass.Root open={open} onOpenChange={setOpen}>\n *   <ModalGlass.Content>\n *     <ModalGlass.Header>\n *       <ModalGlass.Title>Confirm Action</ModalGlass.Title>\n *     </ModalGlass.Header>\n *     <ModalGlass.Body>Are you sure?</ModalGlass.Body>\n *     <ModalGlass.Footer>\n *       <ButtonGlass onClick={() => setOpen(false)}>Cancel</ButtonGlass>\n *     </ModalGlass.Footer>\n *   </ModalGlass.Content>\n * </ModalGlass.Root>\n * ```\n *\n * @accessibility\n * - Built on Radix UI Dialog with full WCAG 2.1 AA compliance\n * - Keyboard: Escape to close, Tab for focus trap\n * - Screen Readers: role=\"dialog\", aria-modal, aria-labelledby, aria-describedby\n * - Focus Management: Auto-focus on open, return focus on close\n *\n * @since v2.0.0 - Migrated to Radix UI Dialog, added Trigger and Portal\n */\n\nimport * as React from 'react';\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\nimport { X } from 'lucide-react';\nimport { cn } from '@/lib/utils';\nimport { modalSizes, type ModalSize } from '@/lib/variants/modal-glass-variants';\nimport { ICON_SIZES } from '@/components/glass/primitives';\nimport '@/glass-theme.css';\n\n// ========================================\n// CONTEXT FOR SIZE (optional enhancement)\n// ========================================\n\ninterface ModalContextValue {\n  size: ModalSize;\n}\n\nconst ModalContext = React.createContext<ModalContextValue>({ size: 'sm' });\n\nconst useModalContext = () => React.useContext(ModalContext);\n\n// ========================================\n// COMPOUND COMPONENT: ROOT\n// ========================================\n\ninterface ModalRootProps extends React.ComponentProps<typeof DialogPrimitive.Root> {\n  /** Size variant for the modal */\n  size?: ModalSize;\n}\n\n/**\n * ModalGlass.Root - Dialog root component\n *\n * Supports both controlled (open/onOpenChange) and uncontrolled (with Trigger) modes.\n */\nfunction ModalRoot({ size = 'sm', children, ...props }: ModalRootProps) {\n  return (\n    <ModalContext.Provider value={{ size }}>\n      <DialogPrimitive.Root data-slot=\"dialog\" {...props}>\n        {children}\n      </DialogPrimitive.Root>\n    </ModalContext.Provider>\n  );\n}\n\n// ========================================\n// COMPOUND COMPONENT: TRIGGER\n// ========================================\n\n/**\n * ModalGlass.Trigger - Opens the modal when clicked\n *\n * Use `asChild` to render as the child element instead of a button.\n */\nfunction ModalTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />;\n}\n\n// ========================================\n// COMPOUND COMPONENT: PORTAL\n// ========================================\n\n/**\n * ModalGlass.Portal - Renders children into a portal\n */\nfunction ModalPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>) {\n  return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />;\n}\n\n// ========================================\n// COMPOUND COMPONENT: OVERLAY\n// ========================================\n\n/**\n * ModalGlass.Overlay - Backdrop with glass blur effect\n */\nconst ModalOverlay = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Overlay>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Overlay\n    ref={ref}\n    data-slot=\"dialog-overlay\"\n    className={cn(\n      'fixed inset-0 z-50',\n      'data-[state=open]:animate-in data-[state=closed]:animate-out',\n      'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',\n      className\n    )}\n    style={{\n      background: 'var(--modal-overlay)',\n      backdropFilter: 'blur(var(--blur-sm))',\n      WebkitBackdropFilter: 'blur(var(--blur-sm))',\n    }}\n    {...props}\n  />\n));\nModalOverlay.displayName = 'ModalOverlay';\n\n// ========================================\n// COMPOUND COMPONENT: CONTENT\n// ========================================\n\ninterface ModalContentProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {\n  /** Show close button in top-right corner */\n  showCloseButton?: boolean;\n  /** Override size from Root */\n  size?: ModalSize;\n}\n\n/**\n * ModalGlass.Content - Main modal container with glass styling\n *\n * Automatically renders Portal and Overlay.\n */\nconst ModalContent = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Content>,\n  ModalContentProps\n>(({ className, children, showCloseButton = true, size: sizeProp, ...props }, ref) => {\n  const { size: contextSize } = useModalContext();\n  const size = sizeProp ?? contextSize;\n\n  return (\n    <ModalPortal>\n      <ModalOverlay />\n      <DialogPrimitive.Content\n        ref={ref}\n        data-slot=\"dialog-content\"\n        className={cn(\n          modalSizes({ size }),\n          'fixed top-[50%] left-[50%] z-50',\n          'translate-x-[-50%] translate-y-[-50%]',\n          'data-[state=open]:animate-in data-[state=closed]:animate-out',\n          'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',\n          'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',\n          'data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%]',\n          'data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]',\n          'duration-200',\n          className\n        )}\n        style={{\n          background: 'var(--modal-bg)',\n          border: '1px solid var(--modal-border)',\n          boxShadow: 'var(--modal-glow)',\n          backdropFilter: 'blur(var(--blur-lg))',\n          WebkitBackdropFilter: 'blur(var(--blur-lg))',\n        }}\n        {...props}\n      >\n        {/* Glow effect layer */}\n        <div\n          className=\"absolute inset-0 rounded-3xl pointer-events-none\"\n          style={{ background: 'var(--modal-glow-effect)' }}\n          aria-hidden=\"true\"\n        />\n        {/* Content */}\n        <div className=\"relative\">{children}</div>\n        {/* Close button */}\n        {showCloseButton && (\n          <DialogPrimitive.Close\n            data-slot=\"dialog-close\"\n            className={cn(\n              'absolute top-4 right-4',\n              'p-1.5 md:p-2 rounded-xl',\n              'transition-all duration-300',\n              'ring-offset-background',\n              'focus:outline-none focus:ring-2 focus:ring-(--semantic-primary) focus:ring-offset-2',\n              'hover:opacity-100 opacity-70',\n              'disabled:pointer-events-none'\n            )}\n            style={{\n              background: 'var(--modal-close-btn-bg)',\n              border: 'var(--modal-close-btn-border)',\n              color: 'var(--text-muted)',\n            }}\n          >\n            <X className={ICON_SIZES.md} />\n            <span className=\"sr-only\">Close</span>\n          </DialogPrimitive.Close>\n        )}\n      </DialogPrimitive.Content>\n    </ModalPortal>\n  );\n});\nModalContent.displayName = 'ModalContent';\n\n// ========================================\n// COMPOUND COMPONENT: HEADER\n// ========================================\n\n/**\n * ModalGlass.Header - Header section with flex layout\n */\nfunction ModalHeader({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"dialog-header\"\n      className={cn('flex flex-col gap-2 text-center sm:text-left mb-4', className)}\n      {...props}\n    />\n  );\n}\n\n// ========================================\n// COMPOUND COMPONENT: BODY\n// ========================================\n\n/**\n * ModalGlass.Body - Optional wrapper for main content area\n *\n * Note: This component is OPTIONAL. Unlike some implementations, content can go\n * directly inside ModalGlass.Content (matching shadcn/ui DialogContent pattern).\n * Use Body when you want the text-secondary color styling applied.\n *\n * @example Direct content (shadcn/ui pattern)\n * ```tsx\n * <ModalGlass.Content>\n *   <ModalGlass.Header>\n *     <ModalGlass.Title>Title</ModalGlass.Title>\n *   </ModalGlass.Header>\n *   <p>Content goes here directly</p>\n *   <ModalGlass.Footer>...</ModalGlass.Footer>\n * </ModalGlass.Content>\n * ```\n *\n * @example With Body wrapper (original pattern)\n * ```tsx\n * <ModalGlass.Content>\n *   <ModalGlass.Header>...</ModalGlass.Header>\n *   <ModalGlass.Body>\n *     <p>Content with text-secondary styling</p>\n *   </ModalGlass.Body>\n *   <ModalGlass.Footer>...</ModalGlass.Footer>\n * </ModalGlass.Content>\n * ```\n */\nfunction ModalBody({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"dialog-body\"\n      className={cn('relative', className)}\n      style={{ color: 'var(--text-secondary)' }}\n      {...props}\n    />\n  );\n}\n\n// ========================================\n// COMPOUND COMPONENT: FOOTER\n// ========================================\n\n/**\n * ModalGlass.Footer - Footer section with flex layout for actions\n */\nfunction ModalFooter({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"dialog-footer\"\n      className={cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end mt-4', className)}\n      {...props}\n    />\n  );\n}\n\n// ========================================\n// COMPOUND COMPONENT: TITLE\n// ========================================\n\n/**\n * ModalGlass.Title - Modal title with proper accessibility\n */\nconst ModalTitle = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Title\n    ref={ref}\n    data-slot=\"dialog-title\"\n    className={cn('text-lg md:text-xl font-semibold leading-none tracking-tight', className)}\n    style={{ color: 'var(--text-primary)' }}\n    {...props}\n  />\n));\nModalTitle.displayName = 'ModalTitle';\n\n// ========================================\n// COMPOUND COMPONENT: DESCRIPTION\n// ========================================\n\n/**\n * ModalGlass.Description - Modal description text\n */\nconst ModalDescription = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Description\n    ref={ref}\n    data-slot=\"dialog-description\"\n    className={cn('text-sm', className)}\n    style={{ color: 'var(--text-muted)' }}\n    {...props}\n  />\n));\nModalDescription.displayName = 'ModalDescription';\n\n// ========================================\n// COMPOUND COMPONENT: CLOSE\n// ========================================\n\n/**\n * ModalGlass.Close - Closes the modal when clicked\n *\n * Use `asChild` to render as the child element.\n *\n * @example\n * ```tsx\n * <ModalGlass.Close asChild>\n *   <ButtonGlass variant=\"ghost\">Cancel</ButtonGlass>\n * </ModalGlass.Close>\n * ```\n */\nfunction ModalClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>) {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />;\n}\n\n// ========================================\n// EXPORT COMPOUND COMPONENT\n// ========================================\n\n/**\n * ModalGlass - Glass-themed Dialog with shadcn/ui API compatibility\n *\n * Built on @radix-ui/react-dialog for full accessibility support.\n *\n * @example Uncontrolled (with Trigger)\n * ```tsx\n * <ModalGlass.Root>\n *   <ModalGlass.Trigger asChild>\n *     <ButtonGlass>Open</ButtonGlass>\n *   </ModalGlass.Trigger>\n *   <ModalGlass.Content>\n *     <ModalGlass.Header>\n *       <ModalGlass.Title>Title</ModalGlass.Title>\n *     </ModalGlass.Header>\n *     <ModalGlass.Body>Content</ModalGlass.Body>\n *     <ModalGlass.Footer>\n *       <ModalGlass.Close asChild>\n *         <ButtonGlass>Close</ButtonGlass>\n *       </ModalGlass.Close>\n *     </ModalGlass.Footer>\n *   </ModalGlass.Content>\n * </ModalGlass.Root>\n * ```\n *\n * @example Controlled\n * ```tsx\n * <ModalGlass.Root open={open} onOpenChange={setOpen}>\n *   <ModalGlass.Content showCloseButton={false}>\n *     <ModalGlass.Header>\n *       <ModalGlass.Title>Confirm</ModalGlass.Title>\n *     </ModalGlass.Header>\n *     <ModalGlass.Footer>\n *       <ButtonGlass onClick={() => setOpen(false)}>OK</ButtonGlass>\n *     </ModalGlass.Footer>\n *   </ModalGlass.Content>\n * </ModalGlass.Root>\n * ```\n */\nexport const ModalGlass = {\n  Root: ModalRoot,\n  Trigger: ModalTrigger,\n  Portal: ModalPortal,\n  Overlay: ModalOverlay,\n  Content: ModalContent,\n  Header: ModalHeader,\n  Body: ModalBody,\n  Footer: ModalFooter,\n  Title: ModalTitle,\n  Description: ModalDescription,\n  Close: ModalClose,\n};\n\n// Named exports for direct imports\nexport {\n  ModalRoot,\n  ModalTrigger,\n  ModalPortal,\n  ModalOverlay,\n  ModalContent,\n  ModalHeader,\n  ModalBody,\n  ModalFooter,\n  ModalTitle,\n  ModalDescription,\n  ModalClose,\n};\n\nexport type { ModalRootProps, ModalContentProps };\n\n// ========================================\n// SHADCN/UI COMPATIBLE ALIASES\n// ========================================\n\n/**\n * Dialog - shadcn/ui compatible alias for ModalGlass.Root\n *\n * @example shadcn/ui compatible usage\n * ```tsx\n * import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle } from 'shadcn-glass-ui'\n *\n * <Dialog>\n *   <DialogTrigger asChild>\n *     <Button>Open</Button>\n *   </DialogTrigger>\n *   <DialogContent>\n *     <DialogHeader>\n *       <DialogTitle>Title</DialogTitle>\n *     </DialogHeader>\n *     <p>Content goes directly here (no DialogBody needed)</p>\n *   </DialogContent>\n * </Dialog>\n * ```\n */\nexport const Dialog = ModalRoot;\n\n/** DialogTrigger - shadcn/ui compatible alias for ModalGlass.Trigger */\nexport const DialogTrigger = ModalTrigger;\n\n/** DialogPortal - shadcn/ui compatible alias for ModalGlass.Portal */\nexport const DialogPortal = ModalPortal;\n\n/** DialogOverlay - shadcn/ui compatible alias for ModalGlass.Overlay */\nexport const DialogOverlay = ModalOverlay;\n\n/** DialogContent - shadcn/ui compatible alias for ModalGlass.Content */\nexport const DialogContent = ModalContent;\n\n/** DialogHeader - shadcn/ui compatible alias for ModalGlass.Header */\nexport const DialogHeader = ModalHeader;\n\n/** DialogFooter - shadcn/ui compatible alias for ModalGlass.Footer */\nexport const DialogFooter = ModalFooter;\n\n/** DialogTitle - shadcn/ui compatible alias for ModalGlass.Title */\nexport const DialogTitle = ModalTitle;\n\n/** DialogDescription - shadcn/ui compatible alias for ModalGlass.Description */\nexport const DialogDescription = ModalDescription;\n\n/** DialogClose - shadcn/ui compatible alias for ModalGlass.Close */\nexport const DialogClose = ModalClose;\n"
     }
   ],
   "categories": [