shadcn-glass-ui 2.3.2 → 2.4.0
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.
- package/dist/cli/index.cjs +1 -1
- package/dist/components.cjs +4 -4
- package/dist/components.mjs +1 -1
- package/dist/hooks.cjs +2 -2
- package/dist/index.cjs +196 -5
- package/dist/index.d.ts +4 -1
- package/dist/index.mjs +158 -2
- package/dist/r/modal-glass.json +3 -2
- package/dist/r/progress-glass.json +2 -2
- package/dist/r/registry.json +7 -1
- package/dist/r/sheet-glass.json +44 -0
- package/dist/shadcn-glass-ui.css +1 -1
- package/dist/{theme-context-7NcW0KZL.cjs → theme-context-C-vx8lHq.cjs} +2 -2
- package/dist/themes.cjs +1 -1
- package/dist/{trust-score-card-glass-DtgFygh5.cjs → trust-score-card-glass-BcZhKCFm.cjs} +146 -4
- package/dist/{trust-score-card-glass-BGqBcdyJ.mjs → trust-score-card-glass-CguUC0Iy.mjs} +12 -2
- package/dist/{use-focus-BFBcpBh1.cjs → use-focus-BoO-8ZPI.cjs} +2 -2
- package/dist/{use-wallpaper-tint-DTTStm5f.cjs → use-wallpaper-tint-BaKRGsRu.cjs} +2 -2
- package/dist/{utils-CiuCe_Aq.cjs → utils-DEM7daK7.cjs} +2 -2
- package/dist/utils.cjs +1 -1
- package/package.json +1 -1
package/dist/cli/index.cjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
#!/usr/bin/env node
|
|
2
|
-
const require_trust_score_card_glass = require("../trust-score-card-glass-
|
|
2
|
+
const require_trust_score_card_glass = require("../trust-score-card-glass-BcZhKCFm.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");
|
package/dist/components.cjs
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
const require_trust_score_card_glass = require("./trust-score-card-glass-
|
|
2
|
-
require("./utils-
|
|
3
|
-
require("./use-focus-
|
|
4
|
-
require("./theme-context-
|
|
1
|
+
const require_trust_score_card_glass = require("./trust-score-card-glass-BcZhKCFm.cjs");
|
|
2
|
+
require("./utils-DEM7daK7.cjs");
|
|
3
|
+
require("./use-focus-BoO-8ZPI.cjs");
|
|
4
|
+
require("./theme-context-C-vx8lHq.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;
|
package/dist/components.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import "./utils-B792GPM_.mjs";
|
|
2
|
-
import { A as FlagAlertGlass, B as IconButtonGlass,
|
|
2
|
+
import { A as FlagAlertGlass, B as IconButtonGlass, E as ProgressGlass, F as SortDropdownGlass, H as TooltipGlass, I as SearchBoxGlass, It as DropdownGlass, M as BaseProgressGlass, N as ThemeToggleGlass, Nt as InputGlass, O as ProfileAvatarGlass, P as StatItemGlass, Pt as GlassCard, Qt as ComboBoxGlass, T as RainbowProgressGlass, Tt as ModalGlass, V as ExpandableHeaderGlass, Z as TabsGlass, _ as ContributionMetricsGlass, _n as FormFieldWrapper, a as HeaderBrandingGlass, an as BadgeGlass, b as AICardGlass, c as YearCardGlass, ct as NotificationGlass, d as TrustScoreDisplayGlass, en as CircularProgressGlass, et as SliderGlass, f as RepositoryMetadataGlass, g as MetricCardGlass, gn as InteractiveCard, h as MetricsGridGlass, i as HeaderNavGlass, j as StatusIndicatorGlass, k as LanguageBarGlass, l as UserStatsLineGlass, m as RepositoryCardGlass, n as ProjectsListGlass, nn as CheckboxGlass, o as FlagsSectionGlass, p as RepositoryHeaderGlass, pn as AlertGlass, q as ToggleGlass, r as ProfileHeaderGlass, rn as ButtonGlass, rt as PopoverGlass, s as CareerStatsGlass, sn as AvatarGlass, t as TrustScoreCardGlass, tt as SkeletonGlass, u as UserInfoGlass, v as CircularMetricGlass, vn as TouchTarget, w as SegmentedControlGlass, y as CareerStatsHeaderGlass } from "./trust-score-card-glass-CguUC0Iy.mjs";
|
|
3
3
|
import "./use-focus-C5kPAKr_.mjs";
|
|
4
4
|
import "./theme-context-DLS2uAgJ.mjs";
|
|
5
5
|
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
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
const require_use_focus = require("./use-focus-
|
|
2
|
-
const require_use_wallpaper_tint = require("./use-wallpaper-tint-
|
|
1
|
+
const require_use_focus = require("./use-focus-BoO-8ZPI.cjs");
|
|
2
|
+
const require_use_wallpaper_tint = require("./use-wallpaper-tint-BaKRGsRu.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;
|
package/dist/index.cjs
CHANGED
|
@@ -1,14 +1,16 @@
|
|
|
1
|
-
const require_trust_score_card_glass = require("./trust-score-card-glass-
|
|
2
|
-
const require_utils = require("./utils-
|
|
3
|
-
const require_use_focus = require("./use-focus-
|
|
4
|
-
const require_theme_context = require("./theme-context-
|
|
5
|
-
const require_use_wallpaper_tint = require("./use-wallpaper-tint-
|
|
1
|
+
const require_trust_score_card_glass = require("./trust-score-card-glass-BcZhKCFm.cjs");
|
|
2
|
+
const require_utils = require("./utils-DEM7daK7.cjs");
|
|
3
|
+
const require_use_focus = require("./use-focus-BoO-8ZPI.cjs");
|
|
4
|
+
const require_theme_context = require("./theme-context-C-vx8lHq.cjs");
|
|
5
|
+
const require_use_wallpaper_tint = require("./use-wallpaper-tint-BaKRGsRu.cjs");
|
|
6
6
|
let react = require("react");
|
|
7
7
|
react = require_trust_score_card_glass.__toESM(react);
|
|
8
8
|
let lucide_react = require("lucide-react");
|
|
9
9
|
let class_variance_authority = require("class-variance-authority");
|
|
10
10
|
let react_jsx_runtime = require("react/jsx-runtime");
|
|
11
11
|
let __radix_ui_react_slot = require("@radix-ui/react-slot");
|
|
12
|
+
let __radix_ui_react_dialog = require("@radix-ui/react-dialog");
|
|
13
|
+
__radix_ui_react_dialog = require_trust_score_card_glass.__toESM(__radix_ui_react_dialog);
|
|
12
14
|
let recharts = require("recharts");
|
|
13
15
|
recharts = require_trust_score_card_glass.__toESM(recharts);
|
|
14
16
|
let __radix_ui_react_scroll_area = require("@radix-ui/react-scroll-area");
|
|
@@ -100,6 +102,161 @@ const CardGlass = {
|
|
|
100
102
|
Content: CardGlassContent,
|
|
101
103
|
Footer: CardGlassFooter
|
|
102
104
|
};
|
|
105
|
+
const sheetVariants = (0, class_variance_authority.cva)([
|
|
106
|
+
"fixed z-50 flex flex-col gap-4 p-6",
|
|
107
|
+
"transition-transform ease-in-out duration-300",
|
|
108
|
+
"data-[state=open]:animate-in data-[state=closed]:animate-out",
|
|
109
|
+
"data-[state=closed]:duration-300 data-[state=open]:duration-500"
|
|
110
|
+
].join(" "), {
|
|
111
|
+
variants: { side: {
|
|
112
|
+
top: [
|
|
113
|
+
"inset-x-0 top-0",
|
|
114
|
+
"data-[state=closed]:slide-out-to-top",
|
|
115
|
+
"data-[state=open]:slide-in-from-top",
|
|
116
|
+
"rounded-b-2xl"
|
|
117
|
+
].join(" "),
|
|
118
|
+
bottom: [
|
|
119
|
+
"inset-x-0 bottom-0",
|
|
120
|
+
"data-[state=closed]:slide-out-to-bottom",
|
|
121
|
+
"data-[state=open]:slide-in-from-bottom",
|
|
122
|
+
"rounded-t-2xl"
|
|
123
|
+
].join(" "),
|
|
124
|
+
left: [
|
|
125
|
+
"inset-y-0 left-0 h-full w-3/4 sm:max-w-sm",
|
|
126
|
+
"data-[state=closed]:slide-out-to-left",
|
|
127
|
+
"data-[state=open]:slide-in-from-left",
|
|
128
|
+
"rounded-r-2xl"
|
|
129
|
+
].join(" "),
|
|
130
|
+
right: [
|
|
131
|
+
"inset-y-0 right-0 h-full w-3/4 sm:max-w-sm",
|
|
132
|
+
"data-[state=closed]:slide-out-to-right",
|
|
133
|
+
"data-[state=open]:slide-in-from-right",
|
|
134
|
+
"rounded-l-2xl"
|
|
135
|
+
].join(" ")
|
|
136
|
+
} },
|
|
137
|
+
defaultVariants: { side: "right" }
|
|
138
|
+
});
|
|
139
|
+
function SheetRoot({ ...props }) {
|
|
140
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__radix_ui_react_dialog.Root, {
|
|
141
|
+
"data-slot": "sheet",
|
|
142
|
+
...props
|
|
143
|
+
});
|
|
144
|
+
}
|
|
145
|
+
function SheetTrigger({ ...props }) {
|
|
146
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__radix_ui_react_dialog.Trigger, {
|
|
147
|
+
"data-slot": "sheet-trigger",
|
|
148
|
+
...props
|
|
149
|
+
});
|
|
150
|
+
}
|
|
151
|
+
function SheetPortal({ ...props }) {
|
|
152
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__radix_ui_react_dialog.Portal, {
|
|
153
|
+
"data-slot": "sheet-portal",
|
|
154
|
+
...props
|
|
155
|
+
});
|
|
156
|
+
}
|
|
157
|
+
var SheetOverlay = react.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__radix_ui_react_dialog.Overlay, {
|
|
158
|
+
ref,
|
|
159
|
+
"data-slot": "sheet-overlay",
|
|
160
|
+
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),
|
|
161
|
+
style: {
|
|
162
|
+
background: "var(--modal-overlay)",
|
|
163
|
+
backdropFilter: "blur(var(--blur-sm))",
|
|
164
|
+
WebkitBackdropFilter: "blur(var(--blur-sm))"
|
|
165
|
+
},
|
|
166
|
+
...props
|
|
167
|
+
}));
|
|
168
|
+
SheetOverlay.displayName = "SheetOverlay";
|
|
169
|
+
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, {
|
|
170
|
+
ref,
|
|
171
|
+
"data-slot": "sheet-content",
|
|
172
|
+
"data-side": side,
|
|
173
|
+
className: require_utils.cn(sheetVariants({ side }), className),
|
|
174
|
+
style: {
|
|
175
|
+
background: "var(--modal-bg)",
|
|
176
|
+
border: "1px solid var(--modal-border)",
|
|
177
|
+
boxShadow: "var(--modal-glow)",
|
|
178
|
+
backdropFilter: "blur(var(--blur-lg))",
|
|
179
|
+
WebkitBackdropFilter: "blur(var(--blur-lg))"
|
|
180
|
+
},
|
|
181
|
+
...props,
|
|
182
|
+
children: [
|
|
183
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
184
|
+
className: "absolute inset-0 pointer-events-none",
|
|
185
|
+
style: {
|
|
186
|
+
background: "var(--modal-glow-effect)",
|
|
187
|
+
borderRadius: "inherit"
|
|
188
|
+
},
|
|
189
|
+
"aria-hidden": "true"
|
|
190
|
+
}),
|
|
191
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
192
|
+
className: "relative flex-1 flex flex-col overflow-auto",
|
|
193
|
+
children
|
|
194
|
+
}),
|
|
195
|
+
showCloseButton && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__radix_ui_react_dialog.Close, {
|
|
196
|
+
"data-slot": "sheet-close",
|
|
197
|
+
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"),
|
|
198
|
+
style: {
|
|
199
|
+
background: "var(--modal-close-btn-bg)",
|
|
200
|
+
border: "var(--modal-close-btn-border)",
|
|
201
|
+
color: "var(--text-muted)"
|
|
202
|
+
},
|
|
203
|
+
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", {
|
|
204
|
+
className: "sr-only",
|
|
205
|
+
children: "Close"
|
|
206
|
+
})]
|
|
207
|
+
})
|
|
208
|
+
]
|
|
209
|
+
})] }));
|
|
210
|
+
SheetContent.displayName = "SheetContent";
|
|
211
|
+
function SheetHeader({ className, ...props }) {
|
|
212
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
213
|
+
"data-slot": "sheet-header",
|
|
214
|
+
className: require_utils.cn("flex flex-col gap-2 text-center sm:text-left", className),
|
|
215
|
+
...props
|
|
216
|
+
});
|
|
217
|
+
}
|
|
218
|
+
function SheetFooter({ className, ...props }) {
|
|
219
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
220
|
+
"data-slot": "sheet-footer",
|
|
221
|
+
className: require_utils.cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end mt-auto pt-4", className),
|
|
222
|
+
...props
|
|
223
|
+
});
|
|
224
|
+
}
|
|
225
|
+
var SheetTitle = react.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__radix_ui_react_dialog.Title, {
|
|
226
|
+
ref,
|
|
227
|
+
"data-slot": "sheet-title",
|
|
228
|
+
className: require_utils.cn("text-lg md:text-xl font-semibold leading-none tracking-tight", className),
|
|
229
|
+
style: { color: "var(--text-primary)" },
|
|
230
|
+
...props
|
|
231
|
+
}));
|
|
232
|
+
SheetTitle.displayName = "SheetTitle";
|
|
233
|
+
var SheetDescription = react.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__radix_ui_react_dialog.Description, {
|
|
234
|
+
ref,
|
|
235
|
+
"data-slot": "sheet-description",
|
|
236
|
+
className: require_utils.cn("text-sm", className),
|
|
237
|
+
style: { color: "var(--text-muted)" },
|
|
238
|
+
...props
|
|
239
|
+
}));
|
|
240
|
+
SheetDescription.displayName = "SheetDescription";
|
|
241
|
+
function SheetClose({ ...props }) {
|
|
242
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__radix_ui_react_dialog.Close, {
|
|
243
|
+
"data-slot": "sheet-close",
|
|
244
|
+
...props
|
|
245
|
+
});
|
|
246
|
+
}
|
|
247
|
+
const SheetGlass = {
|
|
248
|
+
Root: SheetRoot,
|
|
249
|
+
Trigger: SheetTrigger,
|
|
250
|
+
Portal: SheetPortal,
|
|
251
|
+
Overlay: SheetOverlay,
|
|
252
|
+
Content: SheetContent,
|
|
253
|
+
Header: SheetHeader,
|
|
254
|
+
Footer: SheetFooter,
|
|
255
|
+
Title: SheetTitle,
|
|
256
|
+
Description: SheetDescription,
|
|
257
|
+
Close: SheetClose
|
|
258
|
+
};
|
|
259
|
+
const Sheet = SheetRoot;
|
|
103
260
|
const stepperRootVariants = (0, class_variance_authority.cva)("flex w-full", {
|
|
104
261
|
variants: { orientation: {
|
|
105
262
|
horizontal: "flex-col",
|
|
@@ -1608,6 +1765,16 @@ exports.CircularMetricGlass = require_trust_score_card_glass.CircularMetricGlass
|
|
|
1608
1765
|
exports.CircularProgressGlass = require_trust_score_card_glass.CircularProgressGlass;
|
|
1609
1766
|
exports.ComboBoxGlass = require_trust_score_card_glass.ComboBoxGlass;
|
|
1610
1767
|
exports.ContributionMetricsGlass = require_trust_score_card_glass.ContributionMetricsGlass;
|
|
1768
|
+
exports.Dialog = require_trust_score_card_glass.Dialog;
|
|
1769
|
+
exports.DialogClose = require_trust_score_card_glass.DialogClose;
|
|
1770
|
+
exports.DialogContent = require_trust_score_card_glass.DialogContent;
|
|
1771
|
+
exports.DialogDescription = require_trust_score_card_glass.DialogDescription;
|
|
1772
|
+
exports.DialogFooter = require_trust_score_card_glass.DialogFooter;
|
|
1773
|
+
exports.DialogHeader = require_trust_score_card_glass.DialogHeader;
|
|
1774
|
+
exports.DialogOverlay = require_trust_score_card_glass.DialogOverlay;
|
|
1775
|
+
exports.DialogPortal = require_trust_score_card_glass.DialogPortal;
|
|
1776
|
+
exports.DialogTitle = require_trust_score_card_glass.DialogTitle;
|
|
1777
|
+
exports.DialogTrigger = require_trust_score_card_glass.DialogTrigger;
|
|
1611
1778
|
exports.DropdownGlass = require_trust_score_card_glass.DropdownGlass;
|
|
1612
1779
|
exports.DropdownMenuGlass = require_trust_score_card_glass.DropdownMenuGlass;
|
|
1613
1780
|
exports.DropdownMenuGlassCheckboxItem = require_trust_score_card_glass.DropdownMenuGlassCheckboxItem;
|
|
@@ -1638,7 +1805,18 @@ exports.InteractiveCard = require_trust_score_card_glass.InteractiveCard;
|
|
|
1638
1805
|
exports.LanguageBarGlass = require_trust_score_card_glass.LanguageBarGlass;
|
|
1639
1806
|
exports.MetricCardGlass = require_trust_score_card_glass.MetricCardGlass;
|
|
1640
1807
|
exports.MetricsGridGlass = require_trust_score_card_glass.MetricsGridGlass;
|
|
1808
|
+
exports.ModalBody = require_trust_score_card_glass.ModalBody;
|
|
1809
|
+
exports.ModalClose = require_trust_score_card_glass.ModalClose;
|
|
1810
|
+
exports.ModalContent = require_trust_score_card_glass.ModalContent;
|
|
1811
|
+
exports.ModalDescription = require_trust_score_card_glass.ModalDescription;
|
|
1812
|
+
exports.ModalFooter = require_trust_score_card_glass.ModalFooter;
|
|
1641
1813
|
exports.ModalGlass = require_trust_score_card_glass.ModalGlass;
|
|
1814
|
+
exports.ModalHeader = require_trust_score_card_glass.ModalHeader;
|
|
1815
|
+
exports.ModalOverlay = require_trust_score_card_glass.ModalOverlay;
|
|
1816
|
+
exports.ModalPortal = require_trust_score_card_glass.ModalPortal;
|
|
1817
|
+
exports.ModalRoot = require_trust_score_card_glass.ModalRoot;
|
|
1818
|
+
exports.ModalTitle = require_trust_score_card_glass.ModalTitle;
|
|
1819
|
+
exports.ModalTrigger = require_trust_score_card_glass.ModalTrigger;
|
|
1642
1820
|
exports.NotificationGlass = require_trust_score_card_glass.NotificationGlass;
|
|
1643
1821
|
exports.PopoverGlass = require_trust_score_card_glass.PopoverGlass;
|
|
1644
1822
|
exports.PopoverGlassAnchor = require_trust_score_card_glass.PopoverGlassAnchor;
|
|
@@ -1661,6 +1839,18 @@ Object.defineProperty(exports, "ResponsiveContainer", {
|
|
|
1661
1839
|
});
|
|
1662
1840
|
exports.SearchBoxGlass = require_trust_score_card_glass.SearchBoxGlass;
|
|
1663
1841
|
exports.SegmentedControlGlass = require_trust_score_card_glass.SegmentedControlGlass;
|
|
1842
|
+
exports.Sheet = Sheet;
|
|
1843
|
+
exports.SheetClose = SheetClose;
|
|
1844
|
+
exports.SheetContent = SheetContent;
|
|
1845
|
+
exports.SheetDescription = SheetDescription;
|
|
1846
|
+
exports.SheetFooter = SheetFooter;
|
|
1847
|
+
exports.SheetGlass = SheetGlass;
|
|
1848
|
+
exports.SheetHeader = SheetHeader;
|
|
1849
|
+
exports.SheetOverlay = SheetOverlay;
|
|
1850
|
+
exports.SheetPortal = SheetPortal;
|
|
1851
|
+
exports.SheetRoot = SheetRoot;
|
|
1852
|
+
exports.SheetTitle = SheetTitle;
|
|
1853
|
+
exports.SheetTrigger = SheetTrigger;
|
|
1664
1854
|
exports.SidebarGlass = SidebarGlass;
|
|
1665
1855
|
exports.SkeletonGlass = require_trust_score_card_glass.SkeletonGlass;
|
|
1666
1856
|
exports.SliderGlass = require_trust_score_card_glass.SliderGlass;
|
|
@@ -1710,6 +1900,7 @@ exports.progressSizes = require_trust_score_card_glass.progressSizes;
|
|
|
1710
1900
|
exports.shadcnAlertVariants = alertVariants$1;
|
|
1711
1901
|
exports.shadcnBadgeVariants = badgeVariants$1;
|
|
1712
1902
|
exports.shadcnButtonVariants = buttonVariants;
|
|
1903
|
+
exports.sheetVariants = sheetVariants;
|
|
1713
1904
|
exports.skeletonVariants = require_trust_score_card_glass.skeletonVariants;
|
|
1714
1905
|
exports.sparklineBarVariants = require_trust_score_card_glass.sparklineBarVariants;
|
|
1715
1906
|
exports.sparklineContainerVariants = require_trust_score_card_glass.sparklineContainerVariants;
|
package/dist/index.d.ts
CHANGED
|
@@ -11,8 +11,11 @@ export { DropdownMenuGlass, DropdownMenuGlassTrigger, DropdownMenuGlassContent,
|
|
|
11
11
|
export { GlassCard } from './components/glass/ui/glass-card';
|
|
12
12
|
export { CardGlass, CardGlassRoot, CardGlassHeader, CardGlassTitle, CardGlassDescription, CardGlassAction, CardGlassContent, CardGlassFooter, } from './components/glass/ui/card-glass';
|
|
13
13
|
export { InputGlass } from './components/glass/ui/input-glass';
|
|
14
|
-
export { ModalGlass } from './components/glass/ui/modal-glass';
|
|
14
|
+
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';
|
|
15
|
+
export type { ModalRootProps, ModalContentProps } from './components/glass/ui/modal-glass';
|
|
15
16
|
export { NotificationGlass } from './components/glass/ui/notification-glass';
|
|
17
|
+
export { SheetGlass, SheetRoot, SheetTrigger, SheetPortal, SheetOverlay, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription, SheetClose, Sheet, } from './components/glass/ui/sheet-glass';
|
|
18
|
+
export type { SheetContentProps, SheetSide } from './components/glass/ui/sheet-glass';
|
|
16
19
|
export { PopoverGlass, PopoverGlassTrigger, PopoverGlassContent, PopoverGlassAnchor, PopoverGlassLegacy, } from './components/glass/ui/popover-glass';
|
|
17
20
|
export { SkeletonGlass } from './components/glass/ui/skeleton-glass';
|
|
18
21
|
export { SliderGlass } from './components/glass/ui/slider-glass';
|
package/dist/index.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { t as cn } from "./utils-B792GPM_.mjs";
|
|
2
|
-
import { $ as TabsTrigger, A as FlagAlertGlass, At as
|
|
2
|
+
import { $ as TabsTrigger, $t as inputVariants, A as FlagAlertGlass, At as ModalTitle, B as IconButtonGlass, Bt as DropdownMenuGlassGroup, C as sparklineContainerVariants, Ct as ModalDescription, D as progressSizes, Dt as ModalOverlay, E as ProgressGlass, Et as ModalHeader, F as SortDropdownGlass, Ft as cardIntensity, G as TooltipGlassSimple, Gt as DropdownMenuGlassRadioItem, H as TooltipGlass, Ht as DropdownMenuGlassLabel, I as SearchBoxGlass, It as DropdownGlass, J as toggleSizes, Jt as DropdownMenuGlassSub, K as TooltipGlassTrigger, Kt as DropdownMenuGlassSeparator, L as InsightCardGlass, Lt as DropdownMenuGlass, M as BaseProgressGlass, Mt as modalSizes, N as ThemeToggleGlass, Nt as InputGlass, O as ProfileAvatarGlass, Ot as ModalPortal, P as StatItemGlass, Pt as GlassCard, Q as TabsList, Qt as ComboBoxGlass, R as insightCardVariants, Rt as DropdownMenuGlassCheckboxItem, S as sparklineBarVariants, St as ModalContent, T as RainbowProgressGlass, Tt as ModalGlass, U as TooltipGlassContent, Ut as DropdownMenuGlassPortal, V as ExpandableHeaderGlass, Vt as DropdownMenuGlassItem, W as TooltipGlassProvider, Wt as DropdownMenuGlassRadioGroup, X as TabsContent, Xt as DropdownMenuGlassSubTrigger, Y as Tabs, Yt as DropdownMenuGlassSubContent, Z as TabsGlass, Zt as DropdownMenuGlassTrigger, _ as ContributionMetricsGlass, _n as FormFieldWrapper, _t as DialogPortal, a as HeaderBrandingGlass, an as BadgeGlass, at as PopoverGlassContent, b as AICardGlass, bn as alertVariants, bt as ModalBody, c as YearCardGlass, cn as AvatarGlassFallback, ct as NotificationGlass, d as TrustScoreDisplayGlass, dn as avatarSizes, dt as DialogClose, en as CircularProgressGlass, et as SliderGlass, f as RepositoryMetadataGlass, fn as statusSizes, ft as DialogContent, g as MetricCardGlass, gn as InteractiveCard, gt as DialogOverlay, h as MetricsGridGlass, hn as AlertGlassTitle, ht as DialogHeader, i as HeaderNavGlass, in as buttonGlassVariants, it as PopoverGlassAnchor, j as StatusIndicatorGlass, jt as ModalTrigger, k as LanguageBarGlass, kt as ModalRoot, l as UserStatsLineGlass, ln as AvatarGlassImage, lt as notificationVariants, m as RepositoryCardGlass, mn as AlertGlassDescription, mt as DialogFooter, n as ProjectsListGlass, nn as CheckboxGlass, nt as skeletonVariants, o as FlagsSectionGlass, on as badgeVariants, ot as PopoverGlassLegacy, p as RepositoryHeaderGlass, pn as AlertGlass, pt as DialogDescription, q as ToggleGlass, qt as DropdownMenuGlassShortcut, r as ProfileHeaderGlass, rn as ButtonGlass, rt as PopoverGlass, s as CareerStatsGlass, sn as AvatarGlass, st as PopoverGlassTrigger, t as TrustScoreCardGlass, tn as Checkbox, tt as SkeletonGlass, u as UserInfoGlass, un as AvatarGlassSimple, ut as Dialog, v as CircularMetricGlass, vn as TouchTarget, vt as DialogTitle, w as SegmentedControlGlass, wt as ModalFooter, x as SparklineGlass, xt as ModalClose, y as CareerStatsHeaderGlass, yn as ICON_SIZES, yt as DialogTrigger, z as insightVariantConfig, zt as DropdownMenuGlassContent } from "./trust-score-card-glass-CguUC0Iy.mjs";
|
|
3
3
|
import { n as useHover, t as useFocus } from "./use-focus-C5kPAKr_.mjs";
|
|
4
4
|
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";
|
|
5
5
|
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 }
|
|
|
9
9
|
import { cva } from "class-variance-authority";
|
|
10
10
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
11
11
|
import { Slot } from "@radix-ui/react-slot";
|
|
12
|
+
import * as DialogPrimitive from "@radix-ui/react-dialog";
|
|
12
13
|
import * as RechartsPrimitive from "recharts";
|
|
13
14
|
import { Bar, BarChart, Cell, ResponsiveContainer } from "recharts";
|
|
14
15
|
import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
|
|
@@ -99,6 +100,161 @@ const CardGlass = {
|
|
|
99
100
|
Content: CardGlassContent,
|
|
100
101
|
Footer: CardGlassFooter
|
|
101
102
|
};
|
|
103
|
+
const sheetVariants = cva([
|
|
104
|
+
"fixed z-50 flex flex-col gap-4 p-6",
|
|
105
|
+
"transition-transform ease-in-out duration-300",
|
|
106
|
+
"data-[state=open]:animate-in data-[state=closed]:animate-out",
|
|
107
|
+
"data-[state=closed]:duration-300 data-[state=open]:duration-500"
|
|
108
|
+
].join(" "), {
|
|
109
|
+
variants: { side: {
|
|
110
|
+
top: [
|
|
111
|
+
"inset-x-0 top-0",
|
|
112
|
+
"data-[state=closed]:slide-out-to-top",
|
|
113
|
+
"data-[state=open]:slide-in-from-top",
|
|
114
|
+
"rounded-b-2xl"
|
|
115
|
+
].join(" "),
|
|
116
|
+
bottom: [
|
|
117
|
+
"inset-x-0 bottom-0",
|
|
118
|
+
"data-[state=closed]:slide-out-to-bottom",
|
|
119
|
+
"data-[state=open]:slide-in-from-bottom",
|
|
120
|
+
"rounded-t-2xl"
|
|
121
|
+
].join(" "),
|
|
122
|
+
left: [
|
|
123
|
+
"inset-y-0 left-0 h-full w-3/4 sm:max-w-sm",
|
|
124
|
+
"data-[state=closed]:slide-out-to-left",
|
|
125
|
+
"data-[state=open]:slide-in-from-left",
|
|
126
|
+
"rounded-r-2xl"
|
|
127
|
+
].join(" "),
|
|
128
|
+
right: [
|
|
129
|
+
"inset-y-0 right-0 h-full w-3/4 sm:max-w-sm",
|
|
130
|
+
"data-[state=closed]:slide-out-to-right",
|
|
131
|
+
"data-[state=open]:slide-in-from-right",
|
|
132
|
+
"rounded-l-2xl"
|
|
133
|
+
].join(" ")
|
|
134
|
+
} },
|
|
135
|
+
defaultVariants: { side: "right" }
|
|
136
|
+
});
|
|
137
|
+
function SheetRoot({ ...props }) {
|
|
138
|
+
return /* @__PURE__ */ jsx(DialogPrimitive.Root, {
|
|
139
|
+
"data-slot": "sheet",
|
|
140
|
+
...props
|
|
141
|
+
});
|
|
142
|
+
}
|
|
143
|
+
function SheetTrigger({ ...props }) {
|
|
144
|
+
return /* @__PURE__ */ jsx(DialogPrimitive.Trigger, {
|
|
145
|
+
"data-slot": "sheet-trigger",
|
|
146
|
+
...props
|
|
147
|
+
});
|
|
148
|
+
}
|
|
149
|
+
function SheetPortal({ ...props }) {
|
|
150
|
+
return /* @__PURE__ */ jsx(DialogPrimitive.Portal, {
|
|
151
|
+
"data-slot": "sheet-portal",
|
|
152
|
+
...props
|
|
153
|
+
});
|
|
154
|
+
}
|
|
155
|
+
var SheetOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(DialogPrimitive.Overlay, {
|
|
156
|
+
ref,
|
|
157
|
+
"data-slot": "sheet-overlay",
|
|
158
|
+
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),
|
|
159
|
+
style: {
|
|
160
|
+
background: "var(--modal-overlay)",
|
|
161
|
+
backdropFilter: "blur(var(--blur-sm))",
|
|
162
|
+
WebkitBackdropFilter: "blur(var(--blur-sm))"
|
|
163
|
+
},
|
|
164
|
+
...props
|
|
165
|
+
}));
|
|
166
|
+
SheetOverlay.displayName = "SheetOverlay";
|
|
167
|
+
var SheetContent = React.forwardRef(({ className, children, side = "right", showCloseButton = true, ...props }, ref) => /* @__PURE__ */ jsxs(SheetPortal, { children: [/* @__PURE__ */ jsx(SheetOverlay, {}), /* @__PURE__ */ jsxs(DialogPrimitive.Content, {
|
|
168
|
+
ref,
|
|
169
|
+
"data-slot": "sheet-content",
|
|
170
|
+
"data-side": side,
|
|
171
|
+
className: cn(sheetVariants({ side }), className),
|
|
172
|
+
style: {
|
|
173
|
+
background: "var(--modal-bg)",
|
|
174
|
+
border: "1px solid var(--modal-border)",
|
|
175
|
+
boxShadow: "var(--modal-glow)",
|
|
176
|
+
backdropFilter: "blur(var(--blur-lg))",
|
|
177
|
+
WebkitBackdropFilter: "blur(var(--blur-lg))"
|
|
178
|
+
},
|
|
179
|
+
...props,
|
|
180
|
+
children: [
|
|
181
|
+
/* @__PURE__ */ jsx("div", {
|
|
182
|
+
className: "absolute inset-0 pointer-events-none",
|
|
183
|
+
style: {
|
|
184
|
+
background: "var(--modal-glow-effect)",
|
|
185
|
+
borderRadius: "inherit"
|
|
186
|
+
},
|
|
187
|
+
"aria-hidden": "true"
|
|
188
|
+
}),
|
|
189
|
+
/* @__PURE__ */ jsx("div", {
|
|
190
|
+
className: "relative flex-1 flex flex-col overflow-auto",
|
|
191
|
+
children
|
|
192
|
+
}),
|
|
193
|
+
showCloseButton && /* @__PURE__ */ jsxs(DialogPrimitive.Close, {
|
|
194
|
+
"data-slot": "sheet-close",
|
|
195
|
+
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"),
|
|
196
|
+
style: {
|
|
197
|
+
background: "var(--modal-close-btn-bg)",
|
|
198
|
+
border: "var(--modal-close-btn-border)",
|
|
199
|
+
color: "var(--text-muted)"
|
|
200
|
+
},
|
|
201
|
+
children: [/* @__PURE__ */ jsx(X, { className: ICON_SIZES.md }), /* @__PURE__ */ jsx("span", {
|
|
202
|
+
className: "sr-only",
|
|
203
|
+
children: "Close"
|
|
204
|
+
})]
|
|
205
|
+
})
|
|
206
|
+
]
|
|
207
|
+
})] }));
|
|
208
|
+
SheetContent.displayName = "SheetContent";
|
|
209
|
+
function SheetHeader({ className, ...props }) {
|
|
210
|
+
return /* @__PURE__ */ jsx("div", {
|
|
211
|
+
"data-slot": "sheet-header",
|
|
212
|
+
className: cn("flex flex-col gap-2 text-center sm:text-left", className),
|
|
213
|
+
...props
|
|
214
|
+
});
|
|
215
|
+
}
|
|
216
|
+
function SheetFooter({ className, ...props }) {
|
|
217
|
+
return /* @__PURE__ */ jsx("div", {
|
|
218
|
+
"data-slot": "sheet-footer",
|
|
219
|
+
className: cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end mt-auto pt-4", className),
|
|
220
|
+
...props
|
|
221
|
+
});
|
|
222
|
+
}
|
|
223
|
+
var SheetTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(DialogPrimitive.Title, {
|
|
224
|
+
ref,
|
|
225
|
+
"data-slot": "sheet-title",
|
|
226
|
+
className: cn("text-lg md:text-xl font-semibold leading-none tracking-tight", className),
|
|
227
|
+
style: { color: "var(--text-primary)" },
|
|
228
|
+
...props
|
|
229
|
+
}));
|
|
230
|
+
SheetTitle.displayName = "SheetTitle";
|
|
231
|
+
var SheetDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(DialogPrimitive.Description, {
|
|
232
|
+
ref,
|
|
233
|
+
"data-slot": "sheet-description",
|
|
234
|
+
className: cn("text-sm", className),
|
|
235
|
+
style: { color: "var(--text-muted)" },
|
|
236
|
+
...props
|
|
237
|
+
}));
|
|
238
|
+
SheetDescription.displayName = "SheetDescription";
|
|
239
|
+
function SheetClose({ ...props }) {
|
|
240
|
+
return /* @__PURE__ */ jsx(DialogPrimitive.Close, {
|
|
241
|
+
"data-slot": "sheet-close",
|
|
242
|
+
...props
|
|
243
|
+
});
|
|
244
|
+
}
|
|
245
|
+
const SheetGlass = {
|
|
246
|
+
Root: SheetRoot,
|
|
247
|
+
Trigger: SheetTrigger,
|
|
248
|
+
Portal: SheetPortal,
|
|
249
|
+
Overlay: SheetOverlay,
|
|
250
|
+
Content: SheetContent,
|
|
251
|
+
Header: SheetHeader,
|
|
252
|
+
Footer: SheetFooter,
|
|
253
|
+
Title: SheetTitle,
|
|
254
|
+
Description: SheetDescription,
|
|
255
|
+
Close: SheetClose
|
|
256
|
+
};
|
|
257
|
+
const Sheet = SheetRoot;
|
|
102
258
|
const stepperRootVariants = cva("flex w-full", {
|
|
103
259
|
variants: { orientation: {
|
|
104
260
|
horizontal: "flex-col",
|
|
@@ -1556,6 +1712,6 @@ const buttonVariants = cva("inline-flex items-center justify-center gap-2 whites
|
|
|
1556
1712
|
size: "default"
|
|
1557
1713
|
}
|
|
1558
1714
|
});
|
|
1559
|
-
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 };
|
|
1715
|
+
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, 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, sheetVariants, skeletonVariants, sparklineBarVariants, sparklineContainerVariants, statusSizes, stepperConnectorVariants, stepperContentVariants, stepperDescriptionVariants, stepperIndicatorVariants, stepperLabelVariants, stepperListVariants, stepperRootVariants, stepperStepContainerVariants, toggleSizes, tooltipPositions, useChart, useFocus, useHover, useResponsive, useSidebar, useSplitLayout, useSplitLayoutOptional, useTheme, useWallpaperTint };
|
|
1560
1716
|
|
|
1561
1717
|
//# sourceMappingURL=index.mjs.map
|
package/dist/r/modal-glass.json
CHANGED
|
@@ -7,7 +7,8 @@
|
|
|
7
7
|
"dependencies": [
|
|
8
8
|
"@radix-ui/react-dialog",
|
|
9
9
|
"lucide-react",
|
|
10
|
-
"react"
|
|
10
|
+
"react",
|
|
11
|
+
"shadcn-glass-ui"
|
|
11
12
|
],
|
|
12
13
|
"registryDependencies": [
|
|
13
14
|
"cn",
|
|
@@ -18,7 +19,7 @@
|
|
|
18
19
|
{
|
|
19
20
|
"path": "components/glass/ui/modal-glass.tsx",
|
|
20
21
|
"type": "registry:component",
|
|
21
|
-
"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"
|
|
22
|
+
"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"
|
|
22
23
|
}
|
|
23
24
|
],
|
|
24
25
|
"categories": [
|