@nqlib/nqui 0.1.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.
Files changed (219) hide show
  1. package/INSTALLATION.md +221 -0
  2. package/README.md +276 -0
  3. package/dist/App.d.ts +3 -0
  4. package/dist/App.d.ts.map +1 -0
  5. package/dist/components/AppLayout.d.ts +2 -0
  6. package/dist/components/AppLayout.d.ts.map +1 -0
  7. package/dist/components/app-sidebar.d.ts +4 -0
  8. package/dist/components/app-sidebar.d.ts.map +1 -0
  9. package/dist/components/component-example.d.ts +2 -0
  10. package/dist/components/component-example.d.ts.map +1 -0
  11. package/dist/components/custom/color-picker.d.ts +9 -0
  12. package/dist/components/custom/color-picker.d.ts.map +1 -0
  13. package/dist/components/custom/color-slider.d.ts +22 -0
  14. package/dist/components/custom/color-slider.d.ts.map +1 -0
  15. package/dist/components/custom/enhanced-button.d.ts +34 -0
  16. package/dist/components/custom/enhanced-button.d.ts.map +1 -0
  17. package/dist/components/custom/enhanced-checkbox.d.ts +28 -0
  18. package/dist/components/custom/enhanced-checkbox.d.ts.map +1 -0
  19. package/dist/components/custom/enhanced-radio-group.d.ts +36 -0
  20. package/dist/components/custom/enhanced-radio-group.d.ts.map +1 -0
  21. package/dist/components/custom/enhanced-scroll-area.d.ts +34 -0
  22. package/dist/components/custom/enhanced-scroll-area.d.ts.map +1 -0
  23. package/dist/components/custom/enhanced-separator.d.ts +36 -0
  24. package/dist/components/custom/enhanced-separator.d.ts.map +1 -0
  25. package/dist/components/custom/nqui-logo.d.ts +9 -0
  26. package/dist/components/custom/nqui-logo.d.ts.map +1 -0
  27. package/dist/components/custom/rating.d.ts +60 -0
  28. package/dist/components/custom/rating.d.ts.map +1 -0
  29. package/dist/components/custom/table-of-contents.d.ts +77 -0
  30. package/dist/components/custom/table-of-contents.d.ts.map +1 -0
  31. package/dist/components/debug/crosshair.d.ts +5 -0
  32. package/dist/components/debug/crosshair.d.ts.map +1 -0
  33. package/dist/components/debug/debug-panel.d.ts +5 -0
  34. package/dist/components/debug/debug-panel.d.ts.map +1 -0
  35. package/dist/components/debug/dependencies.d.ts +23 -0
  36. package/dist/components/debug/dependencies.d.ts.map +1 -0
  37. package/dist/components/debug/index.d.ts +17 -0
  38. package/dist/components/debug/index.d.ts.map +1 -0
  39. package/dist/components/debug/magnifier.d.ts +9 -0
  40. package/dist/components/debug/magnifier.d.ts.map +1 -0
  41. package/dist/components/debug/ui-tester.d.ts +13 -0
  42. package/dist/components/debug/ui-tester.d.ts.map +1 -0
  43. package/dist/components/debug/utils/css-variable-parser.d.ts +28 -0
  44. package/dist/components/debug/utils/css-variable-parser.d.ts.map +1 -0
  45. package/dist/components/debug/utils/element-selector.d.ts +24 -0
  46. package/dist/components/debug/utils/element-selector.d.ts.map +1 -0
  47. package/dist/components/debug/utils/style-injector.d.ts +40 -0
  48. package/dist/components/debug/utils/style-injector.d.ts.map +1 -0
  49. package/dist/components/debug/utils/style-parser.d.ts +53 -0
  50. package/dist/components/debug/utils/style-parser.d.ts.map +1 -0
  51. package/dist/components/example.d.ts +7 -0
  52. package/dist/components/example.d.ts.map +1 -0
  53. package/dist/components/login-form.d.ts +2 -0
  54. package/dist/components/login-form.d.ts.map +1 -0
  55. package/dist/components/nav-user.d.ts +8 -0
  56. package/dist/components/nav-user.d.ts.map +1 -0
  57. package/dist/components/showcase/app-builder/app-builder-context.d.ts +16 -0
  58. package/dist/components/showcase/app-builder/app-builder-context.d.ts.map +1 -0
  59. package/dist/components/showcase/app-builder/app-canvas.d.ts +11 -0
  60. package/dist/components/showcase/app-builder/app-canvas.d.ts.map +1 -0
  61. package/dist/components/showcase/app-builder/widget-configurator.d.ts +10 -0
  62. package/dist/components/showcase/app-builder/widget-configurator.d.ts.map +1 -0
  63. package/dist/components/showcase/app-builder/widget-palette.d.ts +6 -0
  64. package/dist/components/showcase/app-builder/widget-palette.d.ts.map +1 -0
  65. package/dist/components/showcase/app-builder/widget-registry.d.ts +29 -0
  66. package/dist/components/showcase/app-builder/widget-registry.d.ts.map +1 -0
  67. package/dist/components/showcase/app-builder/widget-renderer.d.ts +7 -0
  68. package/dist/components/showcase/app-builder/widget-renderer.d.ts.map +1 -0
  69. package/dist/components/theme-toggle.d.ts +2 -0
  70. package/dist/components/theme-toggle.d.ts.map +1 -0
  71. package/dist/components/ui/accordion.d.ts +8 -0
  72. package/dist/components/ui/accordion.d.ts.map +1 -0
  73. package/dist/components/ui/alert-dialog.d.ts +19 -0
  74. package/dist/components/ui/alert-dialog.d.ts.map +1 -0
  75. package/dist/components/ui/alert.d.ts +11 -0
  76. package/dist/components/ui/alert.d.ts.map +1 -0
  77. package/dist/components/ui/aspect-ratio.d.ts +4 -0
  78. package/dist/components/ui/aspect-ratio.d.ts.map +1 -0
  79. package/dist/components/ui/avatar.d.ts +7 -0
  80. package/dist/components/ui/avatar.d.ts.map +1 -0
  81. package/dist/components/ui/badge.d.ts +10 -0
  82. package/dist/components/ui/badge.d.ts.map +1 -0
  83. package/dist/components/ui/breadcrumb.d.ts +20 -0
  84. package/dist/components/ui/breadcrumb.d.ts.map +1 -0
  85. package/dist/components/ui/button-group.d.ts +12 -0
  86. package/dist/components/ui/button-group.d.ts.map +1 -0
  87. package/dist/components/ui/button.d.ts +12 -0
  88. package/dist/components/ui/button.d.ts.map +1 -0
  89. package/dist/components/ui/calendar.d.ts +9 -0
  90. package/dist/components/ui/calendar.d.ts.map +1 -0
  91. package/dist/components/ui/card.d.ts +9 -0
  92. package/dist/components/ui/card.d.ts.map +1 -0
  93. package/dist/components/ui/carousel.d.ts +29 -0
  94. package/dist/components/ui/carousel.d.ts.map +1 -0
  95. package/dist/components/ui/chart.d.ts +41 -0
  96. package/dist/components/ui/chart.d.ts.map +1 -0
  97. package/dist/components/ui/checkbox.d.ts +5 -0
  98. package/dist/components/ui/checkbox.d.ts.map +1 -0
  99. package/dist/components/ui/collapsible.d.ts +6 -0
  100. package/dist/components/ui/collapsible.d.ts.map +1 -0
  101. package/dist/components/ui/combobox.d.ts +25 -0
  102. package/dist/components/ui/combobox.d.ts.map +1 -0
  103. package/dist/components/ui/command.d.ts +19 -0
  104. package/dist/components/ui/command.d.ts.map +1 -0
  105. package/dist/components/ui/context-menu.d.ts +28 -0
  106. package/dist/components/ui/context-menu.d.ts.map +1 -0
  107. package/dist/components/ui/dialog.d.ts +18 -0
  108. package/dist/components/ui/dialog.d.ts.map +1 -0
  109. package/dist/components/ui/drawer.d.ts +14 -0
  110. package/dist/components/ui/drawer.d.ts.map +1 -0
  111. package/dist/components/ui/dropdown-menu.d.ts +28 -0
  112. package/dist/components/ui/dropdown-menu.d.ts.map +1 -0
  113. package/dist/components/ui/empty.d.ts +12 -0
  114. package/dist/components/ui/empty.d.ts.map +1 -0
  115. package/dist/components/ui/field.d.ts +25 -0
  116. package/dist/components/ui/field.d.ts.map +1 -0
  117. package/dist/components/ui/hover-card.d.ts +7 -0
  118. package/dist/components/ui/hover-card.d.ts.map +1 -0
  119. package/dist/components/ui/input-group.d.ts +17 -0
  120. package/dist/components/ui/input-group.d.ts.map +1 -0
  121. package/dist/components/ui/input-otp.d.ts +12 -0
  122. package/dist/components/ui/input-otp.d.ts.map +1 -0
  123. package/dist/components/ui/input.d.ts +4 -0
  124. package/dist/components/ui/input.d.ts.map +1 -0
  125. package/dist/components/ui/item.d.ts +24 -0
  126. package/dist/components/ui/item.d.ts.map +1 -0
  127. package/dist/components/ui/kbd.d.ts +4 -0
  128. package/dist/components/ui/kbd.d.ts.map +1 -0
  129. package/dist/components/ui/label.d.ts +6 -0
  130. package/dist/components/ui/label.d.ts.map +1 -0
  131. package/dist/components/ui/menubar.d.ts +27 -0
  132. package/dist/components/ui/menubar.d.ts.map +1 -0
  133. package/dist/components/ui/native-select.d.ts +9 -0
  134. package/dist/components/ui/native-select.d.ts.map +1 -0
  135. package/dist/components/ui/navigation-menu.d.ts +15 -0
  136. package/dist/components/ui/navigation-menu.d.ts.map +1 -0
  137. package/dist/components/ui/pagination.d.ts +14 -0
  138. package/dist/components/ui/pagination.d.ts.map +1 -0
  139. package/dist/components/ui/popover.d.ts +11 -0
  140. package/dist/components/ui/popover.d.ts.map +1 -0
  141. package/dist/components/ui/progress.d.ts +5 -0
  142. package/dist/components/ui/progress.d.ts.map +1 -0
  143. package/dist/components/ui/radio-group.d.ts +6 -0
  144. package/dist/components/ui/radio-group.d.ts.map +1 -0
  145. package/dist/components/ui/resizable.d.ts +8 -0
  146. package/dist/components/ui/resizable.d.ts.map +1 -0
  147. package/dist/components/ui/scroll-area.d.ts +6 -0
  148. package/dist/components/ui/scroll-area.d.ts.map +1 -0
  149. package/dist/components/ui/select.d.ts +16 -0
  150. package/dist/components/ui/select.d.ts.map +1 -0
  151. package/dist/components/ui/separator.d.ts +5 -0
  152. package/dist/components/ui/separator.d.ts.map +1 -0
  153. package/dist/components/ui/sheet.d.ts +26 -0
  154. package/dist/components/ui/sheet.d.ts.map +1 -0
  155. package/dist/components/ui/sidebar.d.ts +66 -0
  156. package/dist/components/ui/sidebar.d.ts.map +1 -0
  157. package/dist/components/ui/skeleton.d.ts +3 -0
  158. package/dist/components/ui/skeleton.d.ts.map +1 -0
  159. package/dist/components/ui/slider.d.ts +5 -0
  160. package/dist/components/ui/slider.d.ts.map +1 -0
  161. package/dist/components/ui/sonner.d.ts +4 -0
  162. package/dist/components/ui/sonner.d.ts.map +1 -0
  163. package/dist/components/ui/spinner.d.ts +3 -0
  164. package/dist/components/ui/spinner.d.ts.map +1 -0
  165. package/dist/components/ui/switch.d.ts +5 -0
  166. package/dist/components/ui/switch.d.ts.map +1 -0
  167. package/dist/components/ui/table.d.ts +11 -0
  168. package/dist/components/ui/table.d.ts.map +1 -0
  169. package/dist/components/ui/tabs.d.ts +12 -0
  170. package/dist/components/ui/tabs.d.ts.map +1 -0
  171. package/dist/components/ui/textarea.d.ts +4 -0
  172. package/dist/components/ui/textarea.d.ts.map +1 -0
  173. package/dist/components/ui/toggle-group.d.ts +11 -0
  174. package/dist/components/ui/toggle-group.d.ts.map +1 -0
  175. package/dist/components/ui/toggle.d.ts +10 -0
  176. package/dist/components/ui/toggle.d.ts.map +1 -0
  177. package/dist/components/ui/tooltip.d.ts +8 -0
  178. package/dist/components/ui/tooltip.d.ts.map +1 -0
  179. package/dist/hooks/use-mobile.d.ts +2 -0
  180. package/dist/hooks/use-mobile.d.ts.map +1 -0
  181. package/dist/hooks/use-scroll-spy.d.ts +50 -0
  182. package/dist/hooks/use-scroll-spy.d.ts.map +1 -0
  183. package/dist/index.d.ts +80 -0
  184. package/dist/index.d.ts.map +1 -0
  185. package/dist/lib/utils.d.ts +3 -0
  186. package/dist/lib/utils.d.ts.map +1 -0
  187. package/dist/main.d.ts +3 -0
  188. package/dist/main.d.ts.map +1 -0
  189. package/dist/mockdata/toc.d.ts +11 -0
  190. package/dist/mockdata/toc.d.ts.map +1 -0
  191. package/dist/nqui.cjs.js +521 -0
  192. package/dist/nqui.css +148 -0
  193. package/dist/nqui.es.js +35453 -0
  194. package/dist/pages/AppBuilder.d.ts +2 -0
  195. package/dist/pages/AppBuilder.d.ts.map +1 -0
  196. package/dist/pages/Dashboard.d.ts +2 -0
  197. package/dist/pages/Dashboard.d.ts.map +1 -0
  198. package/dist/pages/Drafts.d.ts +2 -0
  199. package/dist/pages/Drafts.d.ts.map +1 -0
  200. package/dist/pages/Inbox.d.ts +2 -0
  201. package/dist/pages/Inbox.d.ts.map +1 -0
  202. package/dist/pages/Junk.d.ts +2 -0
  203. package/dist/pages/Junk.d.ts.map +1 -0
  204. package/dist/pages/Sent.d.ts +2 -0
  205. package/dist/pages/Sent.d.ts.map +1 -0
  206. package/dist/pages/Settings.d.ts +2 -0
  207. package/dist/pages/Settings.d.ts.map +1 -0
  208. package/dist/pages/Trash.d.ts +2 -0
  209. package/dist/pages/Trash.d.ts.map +1 -0
  210. package/dist/styles.css +544 -0
  211. package/dist/vite.svg +1 -0
  212. package/package.json +128 -0
  213. package/scripts/build-styles.js +205 -0
  214. package/scripts/examples/nextjs-layout.tsx +30 -0
  215. package/scripts/examples/nextjs-page.tsx +66 -0
  216. package/scripts/init-css.js +568 -0
  217. package/scripts/init-debug-css.js +123 -0
  218. package/scripts/publish-npmjs.js +87 -0
  219. package/scripts/validate-exports.mjs +117 -0
package/INSTALLATION.md ADDED
@@ -0,0 +1,221 @@
1
+ # nqui Installation Guide
2
+
3
+ ## Quick Start
4
+
5
+ ### 1. Install nqui
6
+
7
+ ```bash
8
+ npm install nqui
9
+ # or
10
+ pnpm add nqui
11
+ # or
12
+ yarn add nqui
13
+ ```
14
+
15
+ ### 2. Setup CSS (Required)
16
+
17
+ nqui components require CSS variables and design tokens. Install them using the CLI:
18
+
19
+ ```bash
20
+ npx nqui init-css
21
+ ```
22
+
23
+ This will automatically:
24
+ - Detect your project type (Next.js, Vite, etc.)
25
+ - Copy the CSS file with all design tokens to the appropriate location
26
+ - Provide next steps
27
+
28
+ **Custom path:**
29
+ ```bash
30
+ npx nqui init-css app/styles/nqui.css
31
+ ```
32
+
33
+ The generated CSS includes:
34
+ - All CSS variables (colors, spacing, radius, etc.)
35
+ - Color scales (primary, success, warning, destructive, info)
36
+ - Light and dark mode support
37
+ - Base layer styles
38
+
39
+ **Important:** This CSS does NOT include Tailwind CSS imports. You must have Tailwind CSS configured in your project separately.
40
+
41
+ ### 3. Import Components
42
+
43
+ ```tsx
44
+ import { Button, DebugPanel } from 'nqui';
45
+ ```
46
+
47
+ ### 4. Setup Debug Tools CSS (Optional)
48
+
49
+ The debug tools require CSS to be imported. You have **three options**:
50
+
51
+ #### Option A: Use CLI Tool (Recommended) ✨
52
+
53
+ ```bash
54
+ npx nqui init-debug-css
55
+ ```
56
+
57
+ This will automatically:
58
+ - Detect your project type (Next.js, Vite, etc.)
59
+ - Copy the CSS file to the appropriate location
60
+ - Provide next steps
61
+
62
+ **Custom path:**
63
+ ```bash
64
+ npx nqui init-debug-css app/styles/debug.css
65
+ ```
66
+
67
+ #### Option B: Import from Package (If Supported)
68
+
69
+ Some bundlers support importing CSS from package exports:
70
+
71
+ ```tsx
72
+ // In your app entry point (e.g., app/layout.tsx, src/main.tsx)
73
+ import 'nqui/debug.css';
74
+ ```
75
+
76
+ **Note:** This may not work in all frameworks (e.g., Next.js). If you get a "Module not found" error, use Option A or C.
77
+
78
+ #### Option C: Manual Copy
79
+
80
+ 1. Copy `node_modules/nqui/dist/nqui.css` to your project:
81
+ ```bash
82
+ cp node_modules/nqui/dist/nqui.css src/nqui-debug.css
83
+ ```
84
+
85
+ 2. Import it in your app:
86
+ ```tsx
87
+ import './nqui-debug.css';
88
+ ```
89
+
90
+ ### 4. Use DebugPanel
91
+
92
+ ```tsx
93
+ 'use client'; // Required for Next.js App Router
94
+
95
+ import { DebugPanel } from 'nqui';
96
+ import './nqui-debug.css'; // If using manual copy
97
+
98
+ export function App() {
99
+ return (
100
+ <>
101
+ <YourApp />
102
+ {process.env.NODE_ENV === 'development' && <DebugPanel />}
103
+ </>
104
+ );
105
+ }
106
+ ```
107
+
108
+ ## Framework-Specific Setup
109
+
110
+ ### Next.js App Router
111
+
112
+ ```tsx
113
+ // app/layout.tsx or components/debug/debug-panel-client.tsx
114
+ 'use client';
115
+
116
+ import { DebugPanel } from 'nqui';
117
+ import '../../node_modules/nqui/dist/nqui.css'; // Direct path import
118
+
119
+ export function DebugPanelClient() {
120
+ const [mounted, setMounted] = useState(false);
121
+
122
+ useEffect(() => {
123
+ setMounted(true);
124
+ }, []);
125
+
126
+ if (process.env.NODE_ENV !== 'development' || !mounted) {
127
+ return null;
128
+ }
129
+
130
+ return <DebugPanel />;
131
+ }
132
+ ```
133
+
134
+ ### Vite / Create React App
135
+
136
+ ```tsx
137
+ // src/main.tsx or src/index.tsx
138
+ import { DebugPanel } from 'nqui';
139
+ import './nqui-debug.css'; // After running init script
140
+
141
+ function App() {
142
+ return (
143
+ <>
144
+ <YourApp />
145
+ {import.meta.env.DEV && <DebugPanel />}
146
+ </>
147
+ );
148
+ }
149
+ ```
150
+
151
+ ### Remix
152
+
153
+ ```tsx
154
+ // app/root.tsx
155
+ import { DebugPanel } from 'nqui';
156
+ import './nqui-debug.css'; // After running init script
157
+
158
+ export default function Root() {
159
+ return (
160
+ <html>
161
+ <head>
162
+ {/* ... */}
163
+ </head>
164
+ <body>
165
+ <Outlet />
166
+ {process.env.NODE_ENV === 'development' && <DebugPanel />}
167
+ </body>
168
+ </html>
169
+ );
170
+ }
171
+ ```
172
+
173
+ ## Troubleshooting
174
+
175
+ ### "Module not found: Can't resolve 'nqui/debug.css'"
176
+
177
+ This error occurs in some frameworks (especially Next.js). **Solution:**
178
+
179
+ 1. Use the CLI tool: `npx nqui init-debug-css`
180
+ 2. Or use a direct path import: `import '../../node_modules/nqui/dist/nqui.css'`
181
+
182
+ ### CSS Not Loading
183
+
184
+ 1. Ensure the CSS file exists in `node_modules/nqui/dist/nqui.css`
185
+ 2. Check that you've imported it in your app entry point
186
+ 3. Verify the import path is correct
187
+
188
+ ### Debug Panel Not Appearing
189
+
190
+ 1. Ensure you're in development mode (`NODE_ENV !== 'production'`)
191
+ 2. Check that the component is rendered in your app
192
+ 3. Verify CSS is imported correctly
193
+
194
+ ## Advanced: Custom CSS Location
195
+
196
+ If you want to customize the CSS or integrate it with your existing styles:
197
+
198
+ 1. Run the init script to get the base CSS
199
+ 2. Copy it to your preferred location
200
+ 3. Modify as needed
201
+ 4. Import in your app
202
+
203
+ ```bash
204
+ npx nqui init-debug-css src/styles/nqui-debug.css
205
+ ```
206
+
207
+ ## Package Exports
208
+
209
+ The package exports CSS via:
210
+
211
+ ```json
212
+ {
213
+ "exports": {
214
+ ".": "./dist/nqui.es.js",
215
+ "./debug.css": "./dist/nqui.css"
216
+ }
217
+ }
218
+ ```
219
+
220
+ This allows importing via `import 'nqui/debug.css'` in frameworks that support it.
221
+
package/README.md ADDED
@@ -0,0 +1,276 @@
1
+ # @nqlib/nqui
2
+
3
+ A React component library with enhanced UI components and developer tools. Built with TypeScript, Tailwind CSS, and Radix UI primitives.
4
+
5
+ ## Installation
6
+
7
+ Install from npmjs.com (recommended - no authentication needed):
8
+
9
+ ```bash
10
+ npm install @nqlib/nqui
11
+ ```
12
+
13
+ **Alternative:** Install from GitHub Packages (requires GitHub account + token):
14
+
15
+ ```bash
16
+ # Create .npmrc in your project
17
+ echo "@nqlib:registry=https://npm.pkg.github.com" > .npmrc
18
+
19
+ # Authenticate with GitHub
20
+ npm login --registry=https://npm.pkg.github.com
21
+
22
+ # Install
23
+ npm install @nqlib/nqui
24
+ ```
25
+
26
+ ## Quick Start
27
+
28
+ ### Option 1: Package Import (Recommended)
29
+
30
+ #### For Next.js
31
+
32
+ 1. **Import CSS in your `app/layout.tsx` or `app/globals.css`:**
33
+
34
+ ```tsx
35
+ // app/globals.css
36
+ @import "tailwindcss";
37
+ @source "./**/*.{js,ts,jsx,tsx,mdx}";
38
+ @source "../components/**/*.{js,ts,jsx,tsx,mdx}";
39
+ @source "../node_modules/@nqlib/nqui/dist/**/*.js";
40
+ @import "../node_modules/tw-animate-css/dist/tw-animate.css";
41
+ @custom-variant dark (&:is(.dark *));
42
+
43
+ @import "@nqlib/nqui/styles";
44
+ ```
45
+
46
+ 2. **Use components:**
47
+
48
+ ```tsx
49
+ "use client";
50
+
51
+ import { Button } from '@nqlib/nqui';
52
+
53
+ export default function Page() {
54
+ return <Button>Click me</Button>;
55
+ }
56
+ ```
57
+
58
+ **Note:** Pages using nqui components must include `"use client"` because nqui components use React hooks.
59
+
60
+ #### For Vite
61
+
62
+ 1. **Import CSS in your `src/main.tsx` or `src/index.css`:**
63
+
64
+ ```css
65
+ /* src/index.css */
66
+ @import "tailwindcss";
67
+ @import "../node_modules/tw-animate-css/dist/tw-animate.css";
68
+ @import "@nqlib/nqui/styles";
69
+ ```
70
+
71
+ 2. **Use components:**
72
+
73
+ ```tsx
74
+ import { Button } from '@nqlib/nqui';
75
+
76
+ function App() {
77
+ return <Button>Click me</Button>;
78
+ }
79
+ ```
80
+
81
+ ### Option 2: Init Script (Alternative)
82
+
83
+ The init script automatically detects your framework and sets up CSS with framework-specific Tailwind directives:
84
+
85
+ ```bash
86
+ npx @nqlib/nqui init-css
87
+ ```
88
+
89
+ This will:
90
+ - Detect your framework (Next.js, Vite, Remix, etc.)
91
+ - Add framework-specific Tailwind setup
92
+ - Copy nqui CSS variables to the appropriate location
93
+ - Provide next steps
94
+
95
+ **For Next.js:** Creates/updates `app/globals.css` with Next.js-specific directives
96
+ **For Vite:** Creates/updates `src/index.css` with Vite-specific directives
97
+
98
+ ## Setup Requirements
99
+
100
+ ### Tailwind CSS Configuration
101
+
102
+ nqui requires Tailwind CSS v4. Ensure you have it installed:
103
+
104
+ ```bash
105
+ npm install tailwindcss@^4.1.0
106
+ ```
107
+
108
+ For **Next.js**, Tailwind CSS v4 works with the new `@import` syntax in CSS files.
109
+
110
+ For **Vite**, install the Tailwind CSS Vite plugin:
111
+
112
+ ```bash
113
+ npm install @tailwindcss/vite
114
+ ```
115
+
116
+ Then add it to your `vite.config.ts`:
117
+
118
+ ```ts
119
+ import tailwindcss from '@tailwindcss/vite';
120
+ import { defineConfig } from 'vite';
121
+
122
+ export default defineConfig({
123
+ plugins: [tailwindcss()],
124
+ });
125
+ ```
126
+
127
+ ### Optional: Debug Tools
128
+
129
+ If you want to use the debug tools in development:
130
+
131
+ ```bash
132
+ npx @nqlib/nqui init-debug-css
133
+ ```
134
+
135
+ Then import in your app:
136
+
137
+ ```tsx
138
+ import { DebugPanel } from '@nqlib/nqui';
139
+ import '@nqlib/nqui/debug.css';
140
+
141
+ function App() {
142
+ return (
143
+ <>
144
+ <YourApp />
145
+ {process.env.NODE_ENV === 'development' && <DebugPanel />}
146
+ </>
147
+ );
148
+ }
149
+ ```
150
+
151
+ ## Usage Examples
152
+
153
+ ### Basic Components
154
+
155
+ ```tsx
156
+ import { Button, Checkbox, Input } from '@nqlib/nqui';
157
+
158
+ function MyForm() {
159
+ return (
160
+ <form>
161
+ <Input placeholder="Enter text" />
162
+ <Checkbox label="Accept terms" />
163
+ <Button variant="default">Submit</Button>
164
+ </form>
165
+ );
166
+ }
167
+ ```
168
+
169
+ ### Enhanced Components
170
+
171
+ nqui includes enhanced versions of common components with additional variants:
172
+
173
+ ```tsx
174
+ import { Button, Separator } from '@nqlib/nqui';
175
+
176
+ function MyComponent() {
177
+ return (
178
+ <>
179
+ <Button variant="success">Success</Button>
180
+ <Button variant="warning">Warning</Button>
181
+ <Button variant="info">Info</Button>
182
+ <Separator variant="shadow-outset" />
183
+ </>
184
+ );
185
+ }
186
+ ```
187
+
188
+ ### Custom Components
189
+
190
+ ```tsx
191
+ import { ColorPicker, Rating, TableOfContents } from '@nqlib/nqui';
192
+
193
+ function MyApp() {
194
+ return (
195
+ <>
196
+ <ColorPicker value="oklch(0.75 0.15 240)" onChange={handleChange} />
197
+ <Rating value={4} onChange={setRating} />
198
+ <TableOfContents items={tocItems} />
199
+ </>
200
+ );
201
+ }
202
+ ```
203
+
204
+ ## Framework Support
205
+
206
+ - ✅ **Next.js** (App Router) - Fully tested and supported
207
+ - ✅ **Vite** - Fully supported
208
+ - ✅ **Remix** - Supported
209
+ - ✅ **Create React App** - Supported
210
+
211
+ All components are framework-agnostic and work with any React setup.
212
+
213
+ ## Features
214
+
215
+ - ✨ **Enhanced UI Components** - Button, Checkbox, RadioGroup, Separator, ScrollArea with additional variants
216
+ - 🎨 **Custom Components** - ColorPicker, Rating, TableOfContents
217
+ - 🛠️ **Debug Tools** - Development tools for inspecting and testing components
218
+ - 🎯 **TypeScript** - Full TypeScript support with exported types
219
+ - ♿ **Accessible** - Built on Radix UI primitives for accessibility
220
+ - 🎨 **Themable** - CSS variables for easy theming
221
+ - 📦 **Tree-shakeable** - Import only what you need
222
+
223
+ ## Documentation
224
+
225
+ - [Installation Guide](./INSTALLATION.md) - Detailed setup instructions
226
+ - [Debug Tools](./src/components/debug/README.md) - Debug panel documentation
227
+ - [AGENTS.md](./AGENTS.md) - Development guidelines for contributors
228
+
229
+ ## Development
230
+
231
+ For contributors:
232
+
233
+ ```bash
234
+ # Install dependencies
235
+ npm install
236
+
237
+ # Run dev server (showcase app)
238
+ npm run dev
239
+
240
+ # Build library
241
+ npm run build:lib
242
+
243
+ # Build showcase app
244
+ npm run build:app
245
+
246
+ # Lint
247
+ npm run lint
248
+ ```
249
+
250
+ ## Publishing
251
+
252
+ For maintainers:
253
+
254
+ **Publish to npmjs.com (recommended):**
255
+ ```bash
256
+ npm version patch|minor|major
257
+ npm run publish:npm
258
+ ```
259
+
260
+ **Publish to GitHub Packages:**
261
+ ```bash
262
+ npm version patch|minor|major
263
+ npm run publish:github
264
+ ```
265
+
266
+ **Publish to both:**
267
+ ```bash
268
+ npm version patch|minor|major
269
+ npm run publish:both
270
+ ```
271
+
272
+ See [PUBLISHING.md](./PUBLISHING.md) for detailed instructions.
273
+
274
+ ## License
275
+
276
+ MIT
package/dist/App.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ export declare function App(): import("react/jsx-runtime").JSX.Element;
2
+ export default App;
3
+ //# sourceMappingURL=App.d.ts.map
package/dist/App.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"App.d.ts","sourceRoot":"","sources":["../src/App.tsx"],"names":[],"mappings":"AAqCA,wBAAgB,GAAG,4CAQlB;AAED,eAAe,GAAG,CAAA"}
package/dist/components/AppLayout.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export declare function AppLayout(): import("react/jsx-runtime").JSX.Element;
2
+ //# sourceMappingURL=AppLayout.d.ts.map
package/dist/components/AppLayout.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"AppLayout.d.ts","sourceRoot":"","sources":["../../src/components/AppLayout.tsx"],"names":[],"mappings":"AAqIA,wBAAgB,SAAS,4CAOxB"}
package/dist/components/app-sidebar.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ import * as React from "react";
2
+ import { Sidebar } from "@/components/ui/sidebar";
3
+ export declare function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>): import("react/jsx-runtime").JSX.Element;
4
+ //# sourceMappingURL=app-sidebar.d.ts.map
package/dist/components/app-sidebar.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"app-sidebar.d.ts","sourceRoot":"","sources":["../../src/components/app-sidebar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAgB9B,OAAO,EACL,OAAO,EAWR,MAAM,yBAAyB,CAAA;AA4IhC,wBAAgB,UAAU,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,OAAO,CAAC,2CA8I5E"}
package/dist/components/component-example.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export declare function ComponentExample(): import("react/jsx-runtime").JSX.Element;
2
+ //# sourceMappingURL=component-example.d.ts.map
package/dist/components/component-example.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"component-example.d.ts","sourceRoot":"","sources":["../../src/components/component-example.tsx"],"names":[],"mappings":"AAqDA,wBAAgB,gBAAgB,4CAoB/B"}
package/dist/components/custom/color-picker.d.ts ADDED
@@ -0,0 +1,9 @@
1
+ export interface ColorPickerProps {
2
+ value?: string;
3
+ onChange?: (color: string) => void;
4
+ className?: string;
5
+ disabled?: boolean;
6
+ variant?: 'popover' | 'inline';
7
+ }
8
+ export declare function ColorPicker({ value, onChange, className, disabled, variant }: ColorPickerProps): import("react/jsx-runtime").JSX.Element;
9
+ //# sourceMappingURL=color-picker.d.ts.map
package/dist/components/custom/color-picker.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"color-picker.d.ts","sourceRoot":"","sources":["../../../src/components/custom/color-picker.tsx"],"names":[],"mappings":"AASA,MAAM,WAAW,gBAAgB;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAA;CAC/B;AAkGD,wBAAgB,WAAW,CAAC,EAAE,KAA6B,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAmB,EAAE,EAAE,gBAAgB,2CAgSlI"}
package/dist/components/custom/color-slider.d.ts ADDED
@@ -0,0 +1,22 @@
1
+ import * as React from "react";
2
+ export interface ColorSliderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {
3
+ value?: number[];
4
+ defaultValue?: number[];
5
+ onValueChange?: (value: number[]) => void;
6
+ min?: number;
7
+ max?: number;
8
+ step?: number;
9
+ disabled?: boolean;
10
+ trackColor?: string;
11
+ rangeColor?: string;
12
+ thumbColor?: string;
13
+ thumbFillColor?: string;
14
+ thumbOutlineColor?: string;
15
+ gradientBackground?: string;
16
+ sliderType?: 'hue' | 'saturation' | 'lightness' | 'custom';
17
+ currentHue?: number;
18
+ currentChroma?: number;
19
+ }
20
+ declare const ColorSlider: React.ForwardRefExoticComponent<ColorSliderProps & React.RefAttributes<HTMLDivElement>>;
21
+ export { ColorSlider };
22
+ //# sourceMappingURL=color-slider.d.ts.map
package/dist/components/custom/color-slider.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"color-slider.d.ts","sourceRoot":"","sources":["../../../src/components/custom/color-slider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,GAAG,cAAc,CAAC;IAC/G,KAAK,CAAC,EAAE,MAAM,EAAE,CAAA;IAChB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAA;IACvB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IACzC,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,UAAU,CAAC,EAAE,KAAK,GAAG,YAAY,GAAG,WAAW,GAAG,QAAQ,CAAA;IAC1D,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB;AAED,QAAA,MAAM,WAAW,yFAgIf,CAAA;AAGF,OAAO,EAAE,WAAW,EAAE,CAAA"}
package/dist/components/custom/enhanced-button.d.ts ADDED
@@ -0,0 +1,34 @@
1
+ import * as React from "react";
2
+ import { type VariantProps } from "class-variance-authority";
3
+ export interface EnhancedButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof enhancedButtonVariants> {
4
+ asChild?: boolean;
5
+ }
6
+ /**
7
+ * Enhanced button variants with meccs-ui styling
8
+ * Base classes match meccs-ui: focus:outline-0, transition-[color,background-color,border-color,box-shadow]
9
+ */
10
+ declare const enhancedButtonVariants: (props?: ({
11
+ variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | "success" | "warning" | "info" | null | undefined;
12
+ size?: "icon" | "default" | "sm" | "lg" | null | undefined;
13
+ } & import("class-variance-authority/types").ClassProp) | undefined) => string;
14
+ /**
15
+ * Enhanced Button component with meccs-ui styling
16
+ *
17
+ * Wraps the base shadcn Button component with enhanced styling:
18
+ * - Borders, gradients, and shadows for dimensional appearance
19
+ * - Enhanced focus and active states with scale animation
20
+ * - Smooth opacity and transform transitions
21
+ *
22
+ * Enhanced variants: default, destructive, secondary, success, warning, info
23
+ * Unchanged variants: outline, ghost, link (fallback to core button)
24
+ *
25
+ * @example
26
+ * ```tsx
27
+ * <EnhancedButton variant="default">Click me</EnhancedButton>
28
+ * <EnhancedButton variant="destructive">Delete</EnhancedButton>
29
+ * ```
30
+ */
31
+ declare const EnhancedButton: React.ForwardRefExoticComponent<EnhancedButtonProps & React.RefAttributes<HTMLButtonElement>>;
32
+ export { EnhancedButton, EnhancedButton as Button, enhancedButtonVariants as buttonVariants };
33
+ export type { EnhancedButtonProps as ButtonProps };
34
+ //# sourceMappingURL=enhanced-button.d.ts.map
package/dist/components/custom/enhanced-button.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"enhanced-button.d.ts","sourceRoot":"","sources":["../../../src/components/custom/enhanced-button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIjE,MAAM,WAAW,mBACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EACnD,YAAY,CAAC,OAAO,sBAAsB,CAAC;IAC7C,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED;;;GAGG;AACH,QAAA,MAAM,sBAAsB;;;8EAkF3B,CAAA;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,QAAA,MAAM,cAAc,+FAoCnB,CAAA;AAID,OAAO,EAAE,cAAc,EAAE,cAAc,IAAI,MAAM,EAAE,sBAAsB,IAAI,cAAc,EAAE,CAAA;AAC7F,YAAY,EAAE,mBAAmB,IAAI,WAAW,EAAE,CAAA"}
package/dist/components/custom/enhanced-checkbox.d.ts ADDED
@@ -0,0 +1,28 @@
1
+ import * as React from "react";
2
+ import { Checkbox as CheckboxPrimitive } from "radix-ui";
3
+ import { type VariantProps } from "class-variance-authority";
4
+ declare const checkboxVariants: (props?: ({
5
+ variant?: "square" | "round" | null | undefined;
6
+ } & import("class-variance-authority/types").ClassProp) | undefined) => string;
7
+ export interface EnhancedCheckboxProps extends React.ComponentProps<typeof CheckboxPrimitive.Root>, VariantProps<typeof checkboxVariants> {
8
+ children?: React.ReactNode;
9
+ }
10
+ /**
11
+ * Enhanced Checkbox component with animation variants
12
+ *
13
+ * Wraps Radix UI CheckboxPrimitive with enhanced styling and animations:
14
+ * - square: Animated checkmark with pulse effect and background expansion
15
+ * - round: Circular checkbox with gooey splash animation
16
+ *
17
+ * Maintains all Radix UI accessibility and state management.
18
+ *
19
+ * @example
20
+ * ```tsx
21
+ * <EnhancedCheckbox variant="square">Accept terms</EnhancedCheckbox>
22
+ * <EnhancedCheckbox variant="round" />
23
+ * ```
24
+ */
25
+ declare const EnhancedCheckbox: React.ForwardRefExoticComponent<Omit<EnhancedCheckboxProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
26
+ export { EnhancedCheckbox, EnhancedCheckbox as Checkbox, checkboxVariants };
27
+ export type { EnhancedCheckboxProps as CheckboxProps };
28
+ //# sourceMappingURL=enhanced-checkbox.d.ts.map
package/dist/components/custom/enhanced-checkbox.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"enhanced-checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/custom/enhanced-checkbox.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,QAAQ,IAAI,iBAAiB,EAAE,MAAM,UAAU,CAAA;AACxD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAwOjE,QAAA,MAAM,gBAAgB;;8EAUpB,CAAA;AAEF,MAAM,WAAW,qBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,iBAAiB,CAAC,IAAI,CAAC,EACzD,YAAY,CAAC,OAAO,gBAAgB,CAAC;IACvC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AAED;;;;;;;;;;;;;;GAcG;AACH,QAAA,MAAM,gBAAgB,8GA+GpB,CAAA;AAIF,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,IAAI,QAAQ,EAAE,gBAAgB,EAAE,CAAA;AAC3E,YAAY,EAAE,qBAAqB,IAAI,aAAa,EAAE,CAAA"}
package/dist/components/custom/enhanced-radio-group.d.ts ADDED
@@ -0,0 +1,36 @@
1
+ import * as React from "react";
2
+ import { RadioGroup as RadioGroupPrimitive } from "radix-ui";
3
+ export interface EnhancedRadioGroupProps extends React.ComponentProps<typeof RadioGroupPrimitive.Root> {
4
+ variant?: "animated" | "sliding" | "bar-left" | "bar-right";
5
+ disabled?: boolean;
6
+ }
7
+ /**
8
+ * Enhanced RadioGroup component with variant support
9
+ *
10
+ * Wraps Radix UI RadioGroup primitives with enhanced styling and variants:
11
+ * - animated: Default variant with Hugeicons and pulse animation
12
+ * - sliding: Sliding indicator background that moves to selected item
13
+ * - bar-left: Vertical bar with left glider indicator
14
+ * - bar-right: Vertical bar with right glider indicator
15
+ *
16
+ * Maintains all Radix UI accessibility and state management.
17
+ *
18
+ * @example
19
+ * ```tsx
20
+ * <EnhancedRadioGroup variant="animated" defaultValue="option1">
21
+ * <EnhancedRadioGroupItem value="option1">Option 1</EnhancedRadioGroupItem>
22
+ * <EnhancedRadioGroupItem value="option2">Option 2</EnhancedRadioGroupItem>
23
+ * </EnhancedRadioGroup>
24
+ * ```
25
+ */
26
+ declare const EnhancedRadioGroup: React.ForwardRefExoticComponent<Omit<EnhancedRadioGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
27
+ export interface EnhancedRadioGroupItemProps extends React.ComponentProps<typeof RadioGroupPrimitive.Item> {
28
+ children?: React.ReactNode;
29
+ }
30
+ /**
31
+ * Enhanced RadioGroupItem component with variant-specific rendering
32
+ */
33
+ declare const EnhancedRadioGroupItem: React.ForwardRefExoticComponent<Omit<EnhancedRadioGroupItemProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
34
+ export { EnhancedRadioGroup, EnhancedRadioGroup as RadioGroup, EnhancedRadioGroupItem, EnhancedRadioGroupItem as RadioGroupItem };
35
+ export type { EnhancedRadioGroupProps as RadioGroupProps, EnhancedRadioGroupItemProps as RadioGroupItemProps };
36
+ //# sourceMappingURL=enhanced-radio-group.d.ts.map
package/dist/components/custom/enhanced-radio-group.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"enhanced-radio-group.d.ts","sourceRoot":"","sources":["../../../src/components/custom/enhanced-radio-group.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,UAAU,IAAI,mBAAmB,EAAE,MAAM,UAAU,CAAA;AAe5D,MAAM,WAAW,uBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,mBAAmB,CAAC,IAAI,CAAC;IAC7D,OAAO,CAAC,EAAE,UAAU,GAAG,SAAS,GAAG,UAAU,GAAG,WAAW,CAAA;IAC3D,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,QAAA,MAAM,kBAAkB,6GA8YtB,CAAA;AAIF,MAAM,WAAW,2BACf,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,mBAAmB,CAAC,IAAI,CAAC;IAC7D,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AAED;;GAEG;AACH,QAAA,MAAM,sBAAsB,oHAmM1B,CAAA;AAIF,OAAO,EAAE,kBAAkB,EAAE,kBAAkB,IAAI,UAAU,EAAE,sBAAsB,EAAE,sBAAsB,IAAI,cAAc,EAAE,CAAA;AACjI,YAAY,EAAE,uBAAuB,IAAI,eAAe,EAAE,2BAA2B,IAAI,mBAAmB,EAAE,CAAA"}