@nqlib/nqui 0.4.1 → 0.4.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (83) hide show
  1. package/INSTALLATION.md +215 -0
  2. package/README.md +2 -1
  3. package/dist/command-palette-BuYcxPCc.cjs +5 -0
  4. package/dist/command-palette-dEJ9aEk4.js +694 -0
  5. package/dist/command.cjs.js +1 -1
  6. package/dist/command.es.js +1 -1
  7. package/dist/components/custom/enhanced-badge.d.ts +1 -1
  8. package/dist/components/custom/enhanced-button.d.ts +6 -1
  9. package/dist/components/custom/enhanced-button.d.ts.map +1 -1
  10. package/dist/components/custom/enhanced-checkbox.d.ts +11 -0
  11. package/dist/components/custom/enhanced-checkbox.d.ts.map +1 -1
  12. package/dist/components/custom/enhanced-radio-group.d.ts +13 -4
  13. package/dist/components/custom/enhanced-radio-group.d.ts.map +1 -1
  14. package/dist/components/custom/enhanced-sonner.d.ts +5 -6
  15. package/dist/components/custom/enhanced-sonner.d.ts.map +1 -1
  16. package/dist/components/custom/enhanced-tabs.d.ts.map +1 -1
  17. package/dist/components/error-boundary.d.ts +20 -0
  18. package/dist/components/error-boundary.d.ts.map +1 -0
  19. package/dist/components/index.d.ts +102 -0
  20. package/dist/components/index.d.ts.map +1 -0
  21. package/dist/components/ui/badge.d.ts +1 -1
  22. package/dist/components/ui/button.d.ts +1 -1
  23. package/dist/components/ui/checkbox.d.ts +4 -1
  24. package/dist/components/ui/checkbox.d.ts.map +1 -1
  25. package/dist/components/ui/input-group.d.ts +1 -1
  26. package/dist/components/ui/input-group.d.ts.map +1 -1
  27. package/dist/components/ui/radio-group.d.ts +3 -1
  28. package/dist/components/ui/radio-group.d.ts.map +1 -1
  29. package/dist/components/ui/sidebar.d.ts.map +1 -1
  30. package/dist/debug-panel-AjzBdMMz.js +9198 -0
  31. package/dist/debug-panel-NaOmD68t.cjs +171 -0
  32. package/dist/debug.cjs.js +1 -0
  33. package/dist/debug.es.js +7 -0
  34. package/dist/drawer-Cqq0Ozb2.cjs +1 -0
  35. package/dist/{drawer-CU4lkcz7.js → drawer-pUXPg3lF.js} +2 -2
  36. package/dist/drawer.cjs.js +1 -1
  37. package/dist/drawer.es.js +1 -1
  38. package/dist/entries/debug.d.ts +14 -0
  39. package/dist/entries/debug.d.ts.map +1 -0
  40. package/dist/hooks/use-mobile.d.ts.map +1 -1
  41. package/dist/hooks/use-scroll-spy.d.ts.map +1 -1
  42. package/dist/index-CI756mSv.cjs +41 -0
  43. package/dist/index-CgfzsUO6.js +1069 -0
  44. package/dist/index.d.ts +2 -98
  45. package/dist/index.d.ts.map +1 -1
  46. package/dist/lib/index.d.ts +9 -0
  47. package/dist/lib/index.d.ts.map +1 -0
  48. package/dist/nqui.cjs.js +42 -212
  49. package/dist/nqui.es.js +8589 -17780
  50. package/dist/sonner-BtzU00r3.js +248 -0
  51. package/dist/sonner-Dfk26eds.cjs +54 -0
  52. package/dist/sonner.cjs.js +1 -1
  53. package/dist/sonner.es.js +1 -1
  54. package/dist/styles.css +3 -0
  55. package/docs/components/README.md +99 -1
  56. package/docs/components/nqui-card.md +7 -0
  57. package/docs/components/nqui-checkbox.md +23 -1
  58. package/docs/components/nqui-radio-group.md +45 -2
  59. package/docs/components/nqui-tabs.md +11 -1
  60. package/docs/nqui-skills/SKILL.md +95 -0
  61. package/docs/nqui-skills/design-system.md +130 -0
  62. package/docs/nqui-skills/rules/composition.md +183 -0
  63. package/docs/nqui-skills/rules/forms.md +190 -0
  64. package/docs/nqui-skills/rules/icons.md +158 -0
  65. package/docs/nqui-skills/rules/styling.md +192 -0
  66. package/package.json +23 -10
  67. package/scripts/cli.js +1 -0
  68. package/scripts/download-skills.js +91 -0
  69. package/scripts/examples/nextjs-layout-sidebar.tsx +100 -0
  70. package/scripts/examples/nextjs-page-sidebar.tsx +81 -0
  71. package/scripts/examples/vite-app.tsx +135 -0
  72. package/scripts/examples/vite-main.tsx +17 -0
  73. package/scripts/examples.js +92 -6
  74. package/scripts/generate-docs.js +169 -0
  75. package/scripts/init-css.js +34 -14
  76. package/scripts/init-cursor.js +8 -0
  77. package/scripts/post-install.js +41 -9
  78. package/scripts/wizard.js +12 -7
  79. package/dist/command-palette-UHk8zZOg.cjs +0 -45
  80. package/dist/command-palette-d-TrdBsM.js +0 -1778
  81. package/dist/drawer-BcIxWRN8.cjs +0 -1
  82. package/dist/sonner-Co6YpYVs.js +0 -546
  83. package/dist/sonner-DbQhVp8m.cjs +0 -330
@@ -1 +0,0 @@
1
- "use strict";const e=require("react/jsx-runtime");require("react");const t=require("vaul"),o=require("./utils-IjLH3w2e.cjs");function l({...r}){return e.jsx(t.Drawer.Root,{"data-slot":"drawer",...r})}function s({...r}){return e.jsx(t.Drawer.Trigger,{"data-slot":"drawer-trigger",...r})}function d({...r}){return e.jsx(t.Drawer.Portal,{"data-slot":"drawer-portal",...r})}function c({...r}){return e.jsx(t.Drawer.Close,{"data-slot":"drawer-close",...r})}function n({className:r,...a}){return e.jsx(t.Drawer.Overlay,{"data-slot":"drawer-overlay",className:o.cn("data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/80 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-[var(--z-modal-backdrop)]",r),...a})}function u({className:r,children:a,...i}){return e.jsxs(d,{"data-slot":"drawer-portal",children:[e.jsx(n,{}),e.jsxs(t.Drawer.Content,{"data-slot":"drawer-content",className:o.cn("before:bg-background relative flex h-auto flex-col bg-transparent p-2 text-xs/relaxed before:absolute before:inset-2 before:-z-10 before:rounded-xl data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm group/drawer-content fixed z-[var(--z-modal)]",r),...i,children:[e.jsx("div",{className:"bg-muted mx-auto mt-4 hidden h-1.5 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block bg-muted mx-auto hidden shrink-0 group-data-[vaul-drawer-direction=bottom]/drawer-content:block"}),a]})]})}function w({className:r,...a}){return e.jsx("div",{"data-slot":"drawer-header",className:o.cn("gap-1 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:text-left flex flex-col",r),...a})}function x({className:r,...a}){return e.jsx("div",{"data-slot":"drawer-footer",className:o.cn("gap-2 p-4 mt-auto flex flex-col",r),...a})}function m({className:r,...a}){return e.jsx(t.Drawer.Title,{"data-slot":"drawer-title",className:o.cn("text-foreground text-sm font-medium",r),...a})}function f({className:r,...a}){return e.jsx(t.Drawer.Description,{"data-slot":"drawer-description",className:o.cn("text-muted-foreground text-xs/relaxed",r),...a})}exports.Drawer=l;exports.DrawerClose=c;exports.DrawerContent=u;exports.DrawerDescription=f;exports.DrawerFooter=x;exports.DrawerHeader=w;exports.DrawerOverlay=n;exports.DrawerPortal=d;exports.DrawerTitle=m;exports.DrawerTrigger=s;
@@ -1,546 +0,0 @@
1
- import { jsx as r } from "react/jsx-runtime";
2
- import { Toaster as y } from "sonner";
3
- import { HugeiconsIcon as e } from "@hugeicons/react";
4
- import { Loading03Icon as w, MultiplicationSignCircleIcon as S, Alert02Icon as C, InformationCircleIcon as T, CheckmarkCircle02Icon as I } from "@hugeicons/core-free-icons";
5
- import * as g from "react";
6
- var E = (t, l, p, s, u, i, n, a) => {
7
- let c = document.documentElement, v = ["light", "dark"];
8
- function h(o) {
9
- (Array.isArray(t) ? t : [t]).forEach((d) => {
10
- let m = d === "class", b = m && i ? u.map((f) => i[f] || f) : u;
11
- m ? (c.classList.remove(...b), c.classList.add(i && i[o] ? i[o] : o)) : c.setAttribute(d, o);
12
- }), k(o);
13
- }
14
- function k(o) {
15
- a && v.includes(o) && (c.style.colorScheme = o);
16
- }
17
- function x() {
18
- return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
19
- }
20
- if (s) h(s);
21
- else try {
22
- let o = localStorage.getItem(l) || p, d = n && o === "system" ? x() : o;
23
- h(d);
24
- } catch {
25
- }
26
- }, z = g.createContext(void 0), O = { setTheme: (t) => {
27
- }, themes: [] }, N = () => {
28
- var t;
29
- return (t = g.useContext(z)) != null ? t : O;
30
- };
31
- g.memo(({ forcedTheme: t, storageKey: l, attribute: p, enableSystem: s, enableColorScheme: u, defaultTheme: i, value: n, themes: a, nonce: c, scriptProps: v }) => {
32
- let h = JSON.stringify([p, l, i, t, a, n, s, u]).slice(1, -1);
33
- return g.createElement("script", { ...v, suppressHydrationWarning: !0, nonce: typeof window > "u" ? c : "", dangerouslySetInnerHTML: { __html: `(${E.toString()})(${h})` } });
34
- });
35
- const W = ({ ...t }) => {
36
- const { theme: l = "system" } = N();
37
- return g.useEffect(() => {
38
- const p = "enhanced-toast-styles";
39
- if (document.getElementById(p)) {
40
- console.log("[EnhancedToaster] Styles already injected");
41
- return;
42
- }
43
- console.log("[EnhancedToaster] Injecting enhanced toast styles"), fetch("http://127.0.0.1:7256/ingest/f1733c36-d0a8-4cf5-b0fa-c4850768a9d1", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ location: "enhanced-sonner.tsx:29", message: "Injecting styles", data: { styleId: p }, timestamp: Date.now(), sessionId: "debug-session", runId: "run1", hypothesisId: "A" }) }).catch(() => {
44
- });
45
- const s = document.createElement("style");
46
- s.id = p, s.textContent = `
47
- /* Enhanced Toast Base Styles - Higher specificity to override Sonner defaults */
48
- [data-sonner-toast].enhanced-cn-toast,
49
- [data-sonner-toast] .enhanced-cn-toast {
50
- border: 1px solid var(--normal-border) !important;
51
- border-left-width: 4px !important;
52
- background-color: var(--normal-bg) !important;
53
- color: oklch(0.145 0 0) !important;
54
- border-color: var(--normal-border) !important;
55
- border-left-color: var(--normal-border) !important;
56
- border-radius: var(--border-radius) !important;
57
- position: relative;
58
- background-image: var(--button-gradient) !important;
59
- box-shadow: var(--button-shadow),
60
- 0 1px 0 0 color-mix(in oklch, oklch(1 0 0) 20%, transparent) inset,
61
- 0 -1px 0 0 color-mix(in oklch, oklch(0 0 0) 15%, transparent) inset,
62
- 0 1px 2px 0 color-mix(in oklch, oklch(0 0 0) 8%, transparent),
63
- 0 4px 6px -1px color-mix(in oklch, oklch(0 0 0) 12%, transparent),
64
- 0 2px 4px -1px color-mix(in oklch, oklch(0 0 0) 8%, transparent) !important;
65
- border-top-color: color-mix(in oklch, var(--normal-border) 80%, oklch(1 0 0) 20%) !important;
66
- border-left-color: color-mix(in oklch, var(--normal-border) 80%, oklch(1 0 0) 20%) !important;
67
- border-bottom-color: color-mix(in oklch, var(--normal-border) 80%, oklch(0 0 0) 20%) !important;
68
- border-right-color: color-mix(in oklch, var(--normal-border) 80%, oklch(0 0 0) 20%) !important;
69
- transition: all 300ms ease-in-out !important;
70
- cursor: default;
71
- opacity: 0.95 !important;
72
- }
73
-
74
- [data-sonner-toast].enhanced-cn-toast:hover,
75
- [data-sonner-toast] .enhanced-cn-toast:hover {
76
- opacity: 1 !important;
77
- }
78
-
79
- .dark [data-sonner-toast].enhanced-cn-toast,
80
- .dark [data-sonner-toast] .enhanced-cn-toast {
81
- color: oklch(0.985 0 0) !important;
82
- }
83
-
84
- [data-sonner-toast].enhanced-cn-toast:hover,
85
- [data-sonner-toast] .enhanced-cn-toast:hover {
86
- transform: scale(1.02) !important;
87
- }
88
-
89
- [data-sonner-toast].enhanced-cn-toast > *,
90
- [data-sonner-toast] .enhanced-cn-toast > * {
91
- position: relative;
92
- z-index: 1;
93
- }
94
-
95
- /* Enhanced Toast Semantic Color Variants - Higher specificity */
96
- [data-sonner-toast].enhanced-cn-toast.enhanced-toast-success,
97
- [data-sonner-toast] .enhanced-cn-toast.enhanced-toast-success {
98
- background-color: color-mix(in oklch, var(--success-100) 80%, var(--popover) 20%) !important;
99
- border-color: var(--success-400) !important;
100
- border-left-color: var(--success-500) !important;
101
- border-left-width: 4px !important;
102
- color: oklch(0.145 0 0) !important;
103
- position: relative;
104
- background-image: var(--button-gradient) !important;
105
- box-shadow: var(--button-shadow),
106
- 0 1px 0 0 color-mix(in oklch, oklch(1 0 0) 25%, transparent) inset,
107
- 0 -1px 0 0 color-mix(in oklch, var(--success-600) 30%, transparent) inset,
108
- 0 1px 2px 0 color-mix(in oklch, oklch(0 0 0) 10%, transparent),
109
- 0 4px 8px -1px color-mix(in oklch, oklch(0 0 0) 15%, transparent),
110
- 0 2px 4px -1px color-mix(in oklch, oklch(0 0 0) 10%, transparent) !important;
111
- border-top-color: color-mix(in oklch, var(--success-400) 70%, oklch(1 0 0) 30%) !important;
112
- border-left-color: var(--success-500) !important;
113
- border-bottom-color: color-mix(in oklch, var(--success-600) 80%, oklch(0 0 0) 20%) !important;
114
- border-right-color: color-mix(in oklch, var(--success-600) 80%, oklch(0 0 0) 20%) !important;
115
- transition: all 300ms ease-in-out !important;
116
- opacity: 0.95 !important;
117
- }
118
-
119
- [data-sonner-toast].enhanced-cn-toast.enhanced-toast-success:hover,
120
- [data-sonner-toast] .enhanced-cn-toast.enhanced-toast-success:hover {
121
- background-color: color-mix(in oklch, var(--success-200) 80%, var(--popover) 20%) !important;
122
- transform: scale(1.02) !important;
123
- opacity: 1 !important;
124
- }
125
-
126
- .dark [data-sonner-toast].enhanced-cn-toast.enhanced-toast-success,
127
- .dark [data-sonner-toast] .enhanced-cn-toast.enhanced-toast-success {
128
- background-color: color-mix(in oklch, var(--success-900) 80%, var(--popover) 20%) !important;
129
- color: oklch(0.985 0 0) !important;
130
- }
131
-
132
- .dark [data-sonner-toast].enhanced-cn-toast.enhanced-toast-success:hover,
133
- .dark [data-sonner-toast] .enhanced-cn-toast.enhanced-toast-success:hover {
134
- background-color: color-mix(in oklch, var(--success-800) 80%, var(--popover) 20%) !important;
135
- opacity: 1 !important;
136
- }
137
-
138
- .enhanced-toast-success::before {
139
- content: "";
140
- position: absolute;
141
- inset: 0;
142
- background-color: color-mix(in oklch, var(--success) 5%, transparent);
143
- border-radius: var(--border-radius);
144
- pointer-events: none;
145
- z-index: 0;
146
- }
147
-
148
- .enhanced-toast-success .toast-icon-success {
149
- color: var(--success);
150
- }
151
-
152
- [data-sonner-toast].enhanced-cn-toast.enhanced-toast-error,
153
- [data-sonner-toast] .enhanced-cn-toast.enhanced-toast-error {
154
- background-color: color-mix(in oklch, var(--danger-100) 80%, var(--popover) 20%) !important;
155
- border-color: var(--danger-400) !important;
156
- border-left-color: var(--danger-500) !important;
157
- border-left-width: 4px !important;
158
- color: oklch(0.145 0 0) !important;
159
- position: relative;
160
- background-image: var(--button-gradient) !important;
161
- box-shadow: var(--button-shadow),
162
- 0 1px 0 0 color-mix(in oklch, oklch(1 0 0) 25%, transparent) inset,
163
- 0 -1px 0 0 color-mix(in oklch, var(--danger-600) 30%, transparent) inset,
164
- 0 1px 2px 0 color-mix(in oklch, oklch(0 0 0) 10%, transparent),
165
- 0 4px 8px -1px color-mix(in oklch, oklch(0 0 0) 15%, transparent),
166
- 0 2px 4px -1px color-mix(in oklch, oklch(0 0 0) 10%, transparent) !important;
167
- border-top-color: color-mix(in oklch, var(--danger-400) 70%, oklch(1 0 0) 30%) !important;
168
- border-left-color: var(--danger-500) !important;
169
- border-bottom-color: color-mix(in oklch, var(--danger-600) 80%, oklch(0 0 0) 20%) !important;
170
- border-right-color: color-mix(in oklch, var(--danger-600) 80%, oklch(0 0 0) 20%) !important;
171
- transition: all 300ms ease-in-out !important;
172
- opacity: 0.95 !important;
173
- }
174
-
175
- [data-sonner-toast].enhanced-cn-toast.enhanced-toast-error:hover,
176
- [data-sonner-toast] .enhanced-cn-toast.enhanced-toast-error:hover {
177
- background-color: color-mix(in oklch, var(--danger-200) 80%, var(--popover) 20%) !important;
178
- transform: scale(1.02) !important;
179
- opacity: 1 !important;
180
- }
181
-
182
- .dark [data-sonner-toast].enhanced-cn-toast.enhanced-toast-error,
183
- .dark [data-sonner-toast] .enhanced-cn-toast.enhanced-toast-error {
184
- background-color: color-mix(in oklch, var(--danger-900) 80%, var(--popover) 20%) !important;
185
- color: oklch(0.985 0 0) !important;
186
- }
187
-
188
- .dark [data-sonner-toast].enhanced-cn-toast.enhanced-toast-error:hover,
189
- .dark [data-sonner-toast] .enhanced-cn-toast.enhanced-toast-error:hover {
190
- background-color: color-mix(in oklch, var(--danger-800) 80%, var(--popover) 20%) !important;
191
- opacity: 1 !important;
192
- }
193
-
194
- .enhanced-toast-error::before {
195
- content: "";
196
- position: absolute;
197
- inset: 0;
198
- background-color: color-mix(in oklch, var(--destructive) 15%, transparent);
199
- border-radius: var(--border-radius);
200
- pointer-events: none;
201
- z-index: 0;
202
- }
203
-
204
- .enhanced-toast-error .toast-icon-error {
205
- color: var(--destructive);
206
- }
207
-
208
- [data-sonner-toast].enhanced-cn-toast.enhanced-toast-warning,
209
- [data-sonner-toast] .enhanced-cn-toast.enhanced-toast-warning {
210
- background-color: color-mix(in oklch, var(--warning-100) 80%, var(--popover) 20%) !important;
211
- border-color: var(--warning-400) !important;
212
- border-left-color: var(--warning-500) !important;
213
- border-left-width: 4px !important;
214
- color: oklch(0.145 0 0) !important;
215
- position: relative;
216
- background-image: var(--button-gradient) !important;
217
- box-shadow: var(--button-shadow),
218
- 0 1px 0 0 color-mix(in oklch, oklch(1 0 0) 25%, transparent) inset,
219
- 0 -1px 0 0 color-mix(in oklch, var(--warning-600) 30%, transparent) inset,
220
- 0 1px 2px 0 color-mix(in oklch, oklch(0 0 0) 10%, transparent),
221
- 0 4px 8px -1px color-mix(in oklch, oklch(0 0 0) 15%, transparent),
222
- 0 2px 4px -1px color-mix(in oklch, oklch(0 0 0) 10%, transparent) !important;
223
- border-top-color: color-mix(in oklch, var(--warning-400) 70%, oklch(1 0 0) 30%) !important;
224
- border-left-color: var(--warning-500) !important;
225
- border-bottom-color: color-mix(in oklch, var(--warning-600) 80%, oklch(0 0 0) 20%) !important;
226
- border-right-color: color-mix(in oklch, var(--warning-600) 80%, oklch(0 0 0) 20%) !important;
227
- transition: all 300ms ease-in-out !important;
228
- opacity: 0.95 !important;
229
- }
230
-
231
- [data-sonner-toast].enhanced-cn-toast.enhanced-toast-warning:hover,
232
- [data-sonner-toast] .enhanced-cn-toast.enhanced-toast-warning:hover {
233
- background-color: color-mix(in oklch, var(--warning-200) 80%, var(--popover) 20%) !important;
234
- transform: scale(1.02) !important;
235
- opacity: 1 !important;
236
- }
237
-
238
- .dark [data-sonner-toast].enhanced-cn-toast.enhanced-toast-warning,
239
- .dark [data-sonner-toast] .enhanced-cn-toast.enhanced-toast-warning {
240
- background-color: color-mix(in oklch, var(--warning-900) 80%, var(--popover) 20%) !important;
241
- color: oklch(0.985 0 0) !important;
242
- }
243
-
244
- .dark [data-sonner-toast].enhanced-cn-toast.enhanced-toast-warning:hover,
245
- .dark [data-sonner-toast] .enhanced-cn-toast.enhanced-toast-warning:hover {
246
- background-color: color-mix(in oklch, var(--warning-800) 80%, var(--popover) 20%) !important;
247
- opacity: 1 !important;
248
- }
249
-
250
- .enhanced-toast-warning::before {
251
- content: "";
252
- position: absolute;
253
- inset: 0;
254
- background-color: color-mix(in oklch, var(--warning) 10%, transparent);
255
- border-radius: var(--border-radius);
256
- pointer-events: none;
257
- z-index: 0;
258
- }
259
-
260
- .enhanced-toast-warning .toast-icon-warning {
261
- color: var(--warning);
262
- }
263
-
264
- [data-sonner-toast].enhanced-cn-toast.enhanced-toast-info,
265
- [data-sonner-toast] .enhanced-cn-toast.enhanced-toast-info {
266
- background-color: color-mix(in oklch, var(--info-100) 80%, var(--popover) 20%) !important;
267
- border-color: var(--info-400) !important;
268
- border-left-color: var(--info-500) !important;
269
- border-left-width: 4px !important;
270
- color: oklch(0.145 0 0) !important;
271
- position: relative;
272
- background-image: var(--button-gradient) !important;
273
- box-shadow: var(--button-shadow),
274
- 0 1px 0 0 color-mix(in oklch, oklch(1 0 0) 25%, transparent) inset,
275
- 0 -1px 0 0 color-mix(in oklch, var(--info-600) 30%, transparent) inset,
276
- 0 1px 2px 0 color-mix(in oklch, oklch(0 0 0) 10%, transparent),
277
- 0 4px 8px -1px color-mix(in oklch, oklch(0 0 0) 15%, transparent),
278
- 0 2px 4px -1px color-mix(in oklch, oklch(0 0 0) 10%, transparent) !important;
279
- border-top-color: color-mix(in oklch, var(--info-400) 70%, oklch(1 0 0) 30%) !important;
280
- border-left-color: var(--info-500) !important;
281
- border-bottom-color: color-mix(in oklch, var(--info-600) 80%, oklch(0 0 0) 20%) !important;
282
- border-right-color: color-mix(in oklch, var(--info-600) 80%, oklch(0 0 0) 20%) !important;
283
- transition: all 300ms ease-in-out !important;
284
- opacity: 0.95 !important;
285
- }
286
-
287
- [data-sonner-toast].enhanced-cn-toast.enhanced-toast-info:hover,
288
- [data-sonner-toast] .enhanced-cn-toast.enhanced-toast-info:hover {
289
- background-color: color-mix(in oklch, var(--info-200) 80%, var(--popover) 20%) !important;
290
- transform: scale(1.02) !important;
291
- opacity: 1 !important;
292
- }
293
-
294
- .dark [data-sonner-toast].enhanced-cn-toast.enhanced-toast-info,
295
- .dark [data-sonner-toast] .enhanced-cn-toast.enhanced-toast-info {
296
- background-color: color-mix(in oklch, var(--info-900) 80%, var(--popover) 20%) !important;
297
- color: oklch(0.985 0 0) !important;
298
- }
299
-
300
- .dark [data-sonner-toast].enhanced-cn-toast.enhanced-toast-info:hover,
301
- .dark [data-sonner-toast] .enhanced-cn-toast.enhanced-toast-info:hover {
302
- background-color: color-mix(in oklch, var(--info-800) 80%, var(--popover) 20%) !important;
303
- opacity: 1 !important;
304
- }
305
-
306
- .enhanced-toast-info::before {
307
- content: "";
308
- position: absolute;
309
- inset: 0;
310
- background-color: color-mix(in oklch, var(--info) 5%, transparent);
311
- border-radius: var(--border-radius);
312
- pointer-events: none;
313
- z-index: 0;
314
- }
315
-
316
- .enhanced-toast-info .toast-icon-info {
317
- color: var(--info);
318
- }
319
-
320
- [data-sonner-toast].enhanced-cn-toast.enhanced-toast-loading,
321
- [data-sonner-toast] .enhanced-cn-toast.enhanced-toast-loading {
322
- background-color: color-mix(in oklch, var(--primary-100) 80%, var(--popover) 20%) !important;
323
- border-color: var(--primary-400) !important;
324
- border-left-color: var(--primary-500) !important;
325
- border-left-width: 4px !important;
326
- color: oklch(0.145 0 0) !important;
327
- position: relative;
328
- background-image: var(--button-gradient) !important;
329
- box-shadow: var(--button-shadow),
330
- 0 1px 0 0 color-mix(in oklch, oklch(1 0 0) 25%, transparent) inset,
331
- 0 -1px 0 0 color-mix(in oklch, var(--primary-600) 30%, transparent) inset,
332
- 0 1px 2px 0 color-mix(in oklch, oklch(0 0 0) 10%, transparent),
333
- 0 4px 8px -1px color-mix(in oklch, oklch(0 0 0) 15%, transparent),
334
- 0 2px 4px -1px color-mix(in oklch, oklch(0 0 0) 10%, transparent) !important;
335
- border-top-color: color-mix(in oklch, var(--primary-400) 70%, oklch(1 0 0) 30%) !important;
336
- border-left-color: var(--primary-500) !important;
337
- border-bottom-color: color-mix(in oklch, var(--primary-600) 80%, oklch(0 0 0) 20%) !important;
338
- border-right-color: color-mix(in oklch, var(--primary-600) 80%, oklch(0 0 0) 20%) !important;
339
- transition: all 300ms ease-in-out !important;
340
- opacity: 0.95 !important;
341
- }
342
-
343
- [data-sonner-toast].enhanced-cn-toast.enhanced-toast-loading:hover,
344
- [data-sonner-toast] .enhanced-cn-toast.enhanced-toast-loading:hover {
345
- background-color: color-mix(in oklch, var(--primary-200) 80%, var(--popover) 20%) !important;
346
- transform: scale(1.02) !important;
347
- opacity: 1 !important;
348
- }
349
-
350
- .dark [data-sonner-toast].enhanced-cn-toast.enhanced-toast-loading,
351
- .dark [data-sonner-toast] .enhanced-cn-toast.enhanced-toast-loading {
352
- background-color: color-mix(in oklch, var(--primary-900) 80%, var(--popover) 20%) !important;
353
- color: oklch(0.985 0 0) !important;
354
- }
355
-
356
- .dark [data-sonner-toast].enhanced-cn-toast.enhanced-toast-loading:hover,
357
- .dark [data-sonner-toast] .enhanced-cn-toast.enhanced-toast-loading:hover {
358
- background-color: color-mix(in oklch, var(--primary-800) 80%, var(--popover) 20%) !important;
359
- opacity: 1 !important;
360
- }
361
-
362
- .enhanced-toast-loading::before {
363
- content: "";
364
- position: absolute;
365
- inset: 0;
366
- background-color: color-mix(in oklch, var(--primary) 5%, transparent);
367
- border-radius: var(--border-radius);
368
- pointer-events: none;
369
- z-index: 0;
370
- }
371
-
372
- .enhanced-toast-loading .toast-icon-loading {
373
- color: var(--primary);
374
- }
375
- `, document.head.appendChild(s), setTimeout(() => {
376
- const n = getComputedStyle(document.documentElement), a = {
377
- success100: n.getPropertyValue("--success-100"),
378
- danger100: n.getPropertyValue("--danger-100"),
379
- warning100: n.getPropertyValue("--warning-100"),
380
- info100: n.getPropertyValue("--info-100"),
381
- primary100: n.getPropertyValue("--primary-100"),
382
- buttonGradient: n.getPropertyValue("--button-gradient")
383
- };
384
- fetch("http://127.0.0.1:7256/ingest/f1733c36-d0a8-4cf5-b0fa-c4850768a9d1", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ location: "enhanced-sonner.tsx:310", message: "CSS vars check", data: a, timestamp: Date.now(), sessionId: "debug-session", runId: "run1", hypothesisId: "B" }) }).catch(() => {
385
- }), console.log("[EnhancedToaster] CSS vars:", a);
386
- }, 100), new MutationObserver(() => {
387
- document.querySelectorAll("[data-sonner-toast]").forEach((a, c) => {
388
- const v = Array.from(a.classList), h = a.hasAttribute("data-sonner-toast"), k = a.querySelector("div"), x = k ? Array.from(k.classList) : [], o = getComputedStyle(a), d = k ? getComputedStyle(k) : null, m = document.getElementById("enhanced-toast-styles"), b = m ? m.textContent.substring(0, 200) : "NOT FOUND";
389
- fetch("http://127.0.0.1:7256/ingest/f1733c36-d0a8-4cf5-b0fa-c4850768a9d1", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ location: "enhanced-sonner.tsx:330", message: "Toast DOM structure check", data: { index: c, hasDataAttr: h, toastClasses: v, innerClasses: x, toastBg: o.backgroundColor, toastBorderLeft: o.borderLeftWidth, innerBg: d?.backgroundColor, innerBorderLeft: d?.borderLeftWidth, styleSheetExists: !!m, stylePreview: b }, timestamp: Date.now(), sessionId: "debug-session", runId: "post-fix", hypothesisId: "D" }) }).catch(() => {
390
- }), console.log(`[EnhancedToaster] Toast ${c} DOM:`, { hasDataAttr: h, toastClasses: v, innerClasses: x, toastBg: o.backgroundColor, innerBg: d?.backgroundColor, styleSheetExists: !!m });
391
- });
392
- }).observe(document.body, { childList: !0, subtree: !0 });
393
- }, []), /* @__PURE__ */ r(
394
- y,
395
- {
396
- theme: l,
397
- className: "toaster group",
398
- icons: {
399
- success: /* @__PURE__ */ r(
400
- e,
401
- {
402
- icon: I,
403
- strokeWidth: 2,
404
- className: "size-4 text-success toast-icon-success"
405
- }
406
- ),
407
- info: /* @__PURE__ */ r(
408
- e,
409
- {
410
- icon: T,
411
- strokeWidth: 2,
412
- className: "size-4 text-info toast-icon-info"
413
- }
414
- ),
415
- warning: /* @__PURE__ */ r(
416
- e,
417
- {
418
- icon: C,
419
- strokeWidth: 2,
420
- className: "size-4 text-warning toast-icon-warning"
421
- }
422
- ),
423
- error: /* @__PURE__ */ r(
424
- e,
425
- {
426
- icon: S,
427
- strokeWidth: 2,
428
- className: "size-4 text-destructive toast-icon-error"
429
- }
430
- ),
431
- loading: /* @__PURE__ */ r(
432
- e,
433
- {
434
- icon: w,
435
- strokeWidth: 2,
436
- className: "size-4 text-primary toast-icon-loading animate-spin"
437
- }
438
- )
439
- },
440
- style: {
441
- "--normal-bg": "var(--popover)",
442
- "--normal-text": "var(--popover-foreground)",
443
- "--normal-border": "var(--border)",
444
- "--border-radius": "var(--radius)"
445
- },
446
- toastOptions: {
447
- classNames: {
448
- toast: "enhanced-cn-toast",
449
- success: "enhanced-toast-success",
450
- error: "enhanced-toast-error",
451
- warning: "enhanced-toast-warning",
452
- info: "enhanced-toast-info",
453
- loading: "enhanced-toast-loading"
454
- }
455
- },
456
- ...t
457
- }
458
- );
459
- };
460
- W.displayName = "EnhancedToaster";
461
- const D = ({ ...t }) => {
462
- const { theme: l = "system" } = N();
463
- return /* @__PURE__ */ r(
464
- y,
465
- {
466
- theme: l,
467
- className: "toaster group",
468
- icons: {
469
- success: /* @__PURE__ */ r(
470
- e,
471
- {
472
- icon: I,
473
- strokeWidth: 2,
474
- className: "size-4 text-success toast-icon-success"
475
- }
476
- ),
477
- info: /* @__PURE__ */ r(
478
- e,
479
- {
480
- icon: T,
481
- strokeWidth: 2,
482
- className: "size-4 text-info toast-icon-info"
483
- }
484
- ),
485
- warning: /* @__PURE__ */ r(
486
- e,
487
- {
488
- icon: C,
489
- strokeWidth: 2,
490
- className: "size-4 text-warning toast-icon-warning"
491
- }
492
- ),
493
- error: /* @__PURE__ */ r(
494
- e,
495
- {
496
- icon: S,
497
- strokeWidth: 2,
498
- className: "size-4 text-destructive toast-icon-error"
499
- }
500
- ),
501
- loading: /* @__PURE__ */ r(
502
- e,
503
- {
504
- icon: w,
505
- strokeWidth: 2,
506
- className: "size-4 text-primary toast-icon-loading animate-spin"
507
- }
508
- )
509
- },
510
- style: {
511
- "--normal-bg": "var(--popover)",
512
- "--normal-text": "var(--popover-foreground)",
513
- "--normal-border": "var(--border)",
514
- "--border-radius": "var(--radius)",
515
- "--success-bg": "var(--success)",
516
- "--success-text": "var(--success-foreground)",
517
- "--success-border": "var(--success-400)",
518
- "--error-bg": "var(--destructive)",
519
- "--error-text": "var(--destructive-foreground)",
520
- "--error-border": "var(--danger-400)",
521
- "--warning-bg": "var(--warning)",
522
- "--warning-text": "var(--warning-foreground)",
523
- "--warning-border": "var(--warning-400)",
524
- "--info-bg": "var(--info)",
525
- "--info-text": "var(--info-foreground)",
526
- "--info-border": "var(--info-400)"
527
- },
528
- toastOptions: {
529
- classNames: {
530
- toast: "cn-toast",
531
- success: "toast-success",
532
- error: "toast-error",
533
- warning: "toast-warning",
534
- info: "toast-info",
535
- loading: "toast-loading"
536
- }
537
- },
538
- ...t
539
- }
540
- );
541
- };
542
- export {
543
- W as E,
544
- D as T,
545
- N as z
546
- };