monobill-mintui 0.3.76 → 0.4.1

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 (292) hide show
  1. package/README.md +175 -207
  2. package/dist/icons/edit.svg +1 -1
  3. package/dist/index.cjs +41 -174
  4. package/dist/index.js +2729 -9179
  5. package/package.json +61 -38
  6. package/dist/caret-right-BsS-59-c.cjs +0 -1
  7. package/dist/caret-right-DsNN5Epe.js +0 -83
  8. package/dist/components/alert/Alert.d.ts +0 -32
  9. package/dist/components/alert/Alert.d.ts.map +0 -1
  10. package/dist/components/alert/index.d.ts +0 -3
  11. package/dist/components/alert/index.d.ts.map +0 -1
  12. package/dist/components/back-button/BackButton.d.ts +0 -18
  13. package/dist/components/back-button/BackButton.d.ts.map +0 -1
  14. package/dist/components/back-button/index.d.ts +0 -3
  15. package/dist/components/back-button/index.d.ts.map +0 -1
  16. package/dist/components/button/Button.d.ts +0 -44
  17. package/dist/components/button/Button.d.ts.map +0 -1
  18. package/dist/components/button/index.d.ts +0 -3
  19. package/dist/components/button/index.d.ts.map +0 -1
  20. package/dist/components/card/Card.d.ts +0 -17
  21. package/dist/components/card/Card.d.ts.map +0 -1
  22. package/dist/components/card/index.d.ts +0 -3
  23. package/dist/components/card/index.d.ts.map +0 -1
  24. package/dist/components/chart/Chart.d.ts +0 -277
  25. package/dist/components/chart/Chart.d.ts.map +0 -1
  26. package/dist/components/chart/index.d.ts +0 -3
  27. package/dist/components/chart/index.d.ts.map +0 -1
  28. package/dist/components/checkbox/Checkbox.d.ts +0 -41
  29. package/dist/components/checkbox/Checkbox.d.ts.map +0 -1
  30. package/dist/components/checkbox/index.d.ts +0 -3
  31. package/dist/components/checkbox/index.d.ts.map +0 -1
  32. package/dist/components/chip/Chip.d.ts +0 -15
  33. package/dist/components/chip/Chip.d.ts.map +0 -1
  34. package/dist/components/chip/index.d.ts +0 -3
  35. package/dist/components/chip/index.d.ts.map +0 -1
  36. package/dist/components/choice/Choice.d.ts +0 -27
  37. package/dist/components/choice/Choice.d.ts.map +0 -1
  38. package/dist/components/choice/ChoiceOption.d.ts +0 -30
  39. package/dist/components/choice/ChoiceOption.d.ts.map +0 -1
  40. package/dist/components/choice/index.d.ts +0 -5
  41. package/dist/components/choice/index.d.ts.map +0 -1
  42. package/dist/components/clickable/Clickable.d.ts +0 -14
  43. package/dist/components/clickable/Clickable.d.ts.map +0 -1
  44. package/dist/components/clickable/index.d.ts +0 -3
  45. package/dist/components/clickable/index.d.ts.map +0 -1
  46. package/dist/components/date-picker/DatePicker.d.ts +0 -130
  47. package/dist/components/date-picker/DatePicker.d.ts.map +0 -1
  48. package/dist/components/date-picker/index.d.ts +0 -3
  49. package/dist/components/date-picker/index.d.ts.map +0 -1
  50. package/dist/components/dropzone/Dropzone.d.ts +0 -59
  51. package/dist/components/dropzone/Dropzone.d.ts.map +0 -1
  52. package/dist/components/dropzone/index.d.ts +0 -3
  53. package/dist/components/dropzone/index.d.ts.map +0 -1
  54. package/dist/components/form/Form.d.ts +0 -106
  55. package/dist/components/form/Form.d.ts.map +0 -1
  56. package/dist/components/form/index.d.ts +0 -3
  57. package/dist/components/form/index.d.ts.map +0 -1
  58. package/dist/components/grid/Grid.d.ts +0 -16
  59. package/dist/components/grid/Grid.d.ts.map +0 -1
  60. package/dist/components/grid/index.d.ts +0 -3
  61. package/dist/components/grid/index.d.ts.map +0 -1
  62. package/dist/components/icon/Icon.d.ts +0 -15
  63. package/dist/components/icon/Icon.d.ts.map +0 -1
  64. package/dist/components/icon/build-icons.d.ts +0 -2
  65. package/dist/components/icon/build-icons.d.ts.map +0 -1
  66. package/dist/components/icon/icons/archive.d.ts +0 -3
  67. package/dist/components/icon/icons/archive.d.ts.map +0 -1
  68. package/dist/components/icon/icons/arrow-down.d.ts +0 -3
  69. package/dist/components/icon/icons/arrow-down.d.ts.map +0 -1
  70. package/dist/components/icon/icons/arrow-left.d.ts +0 -3
  71. package/dist/components/icon/icons/arrow-left.d.ts.map +0 -1
  72. package/dist/components/icon/icons/arrow-right.d.ts +0 -3
  73. package/dist/components/icon/icons/arrow-right.d.ts.map +0 -1
  74. package/dist/components/icon/icons/arrow-up.d.ts +0 -3
  75. package/dist/components/icon/icons/arrow-up.d.ts.map +0 -1
  76. package/dist/components/icon/icons/attach.d.ts +0 -3
  77. package/dist/components/icon/icons/attach.d.ts.map +0 -1
  78. package/dist/components/icon/icons/barcode.d.ts +0 -3
  79. package/dist/components/icon/icons/barcode.d.ts.map +0 -1
  80. package/dist/components/icon/icons/bookmark.d.ts +0 -3
  81. package/dist/components/icon/icons/bookmark.d.ts.map +0 -1
  82. package/dist/components/icon/icons/calendar-day.d.ts +0 -3
  83. package/dist/components/icon/icons/calendar-day.d.ts.map +0 -1
  84. package/dist/components/icon/icons/calendar-empty.d.ts +0 -3
  85. package/dist/components/icon/icons/calendar-empty.d.ts.map +0 -1
  86. package/dist/components/icon/icons/calendar-week.d.ts +0 -3
  87. package/dist/components/icon/icons/calendar-week.d.ts.map +0 -1
  88. package/dist/components/icon/icons/calendar.d.ts +0 -3
  89. package/dist/components/icon/icons/calendar.d.ts.map +0 -1
  90. package/dist/components/icon/icons/caret-down.d.ts +0 -3
  91. package/dist/components/icon/icons/caret-down.d.ts.map +0 -1
  92. package/dist/components/icon/icons/caret-left.d.ts +0 -3
  93. package/dist/components/icon/icons/caret-left.d.ts.map +0 -1
  94. package/dist/components/icon/icons/caret-right.d.ts +0 -3
  95. package/dist/components/icon/icons/caret-right.d.ts.map +0 -1
  96. package/dist/components/icon/icons/caret-up.d.ts +0 -3
  97. package/dist/components/icon/icons/caret-up.d.ts.map +0 -1
  98. package/dist/components/icon/icons/chat.d.ts +0 -3
  99. package/dist/components/icon/icons/chat.d.ts.map +0 -1
  100. package/dist/components/icon/icons/check.d.ts +0 -3
  101. package/dist/components/icon/icons/check.d.ts.map +0 -1
  102. package/dist/components/icon/icons/clock.d.ts +0 -3
  103. package/dist/components/icon/icons/clock.d.ts.map +0 -1
  104. package/dist/components/icon/icons/close.d.ts +0 -3
  105. package/dist/components/icon/icons/close.d.ts.map +0 -1
  106. package/dist/components/icon/icons/copy.d.ts +0 -3
  107. package/dist/components/icon/icons/copy.d.ts.map +0 -1
  108. package/dist/components/icon/icons/delete.d.ts +0 -3
  109. package/dist/components/icon/icons/delete.d.ts.map +0 -1
  110. package/dist/components/icon/icons/documentation.d.ts +0 -3
  111. package/dist/components/icon/icons/documentation.d.ts.map +0 -1
  112. package/dist/components/icon/icons/download.d.ts +0 -3
  113. package/dist/components/icon/icons/download.d.ts.map +0 -1
  114. package/dist/components/icon/icons/duplicate.d.ts +0 -3
  115. package/dist/components/icon/icons/duplicate.d.ts.map +0 -1
  116. package/dist/components/icon/icons/edit.d.ts +0 -3
  117. package/dist/components/icon/icons/edit.d.ts.map +0 -1
  118. package/dist/components/icon/icons/ellipsis.d.ts +0 -3
  119. package/dist/components/icon/icons/ellipsis.d.ts.map +0 -1
  120. package/dist/components/icon/icons/error.d.ts +0 -3
  121. package/dist/components/icon/icons/error.d.ts.map +0 -1
  122. package/dist/components/icon/icons/external-link.d.ts +0 -3
  123. package/dist/components/icon/icons/external-link.d.ts.map +0 -1
  124. package/dist/components/icon/icons/file.d.ts +0 -3
  125. package/dist/components/icon/icons/file.d.ts.map +0 -1
  126. package/dist/components/icon/icons/filter.d.ts +0 -3
  127. package/dist/components/icon/icons/filter.d.ts.map +0 -1
  128. package/dist/components/icon/icons/folder.d.ts +0 -3
  129. package/dist/components/icon/icons/folder.d.ts.map +0 -1
  130. package/dist/components/icon/icons/grid.d.ts +0 -3
  131. package/dist/components/icon/icons/grid.d.ts.map +0 -1
  132. package/dist/components/icon/icons/help.d.ts +0 -3
  133. package/dist/components/icon/icons/help.d.ts.map +0 -1
  134. package/dist/components/icon/icons/home.d.ts +0 -3
  135. package/dist/components/icon/icons/home.d.ts.map +0 -1
  136. package/dist/components/icon/icons/image.d.ts +0 -3
  137. package/dist/components/icon/icons/image.d.ts.map +0 -1
  138. package/dist/components/icon/icons/index.cjs +0 -4
  139. package/dist/components/icon/icons/index.d.ts +0 -75
  140. package/dist/components/icon/icons/index.d.ts.map +0 -1
  141. package/dist/components/icon/icons/index.js +0 -689
  142. package/dist/components/icon/icons/info.d.ts +0 -3
  143. package/dist/components/icon/icons/info.d.ts.map +0 -1
  144. package/dist/components/icon/icons/language.d.ts +0 -3
  145. package/dist/components/icon/icons/language.d.ts.map +0 -1
  146. package/dist/components/icon/icons/link.d.ts +0 -3
  147. package/dist/components/icon/icons/link.d.ts.map +0 -1
  148. package/dist/components/icon/icons/list.d.ts +0 -3
  149. package/dist/components/icon/icons/list.d.ts.map +0 -1
  150. package/dist/components/icon/icons/location.d.ts +0 -3
  151. package/dist/components/icon/icons/location.d.ts.map +0 -1
  152. package/dist/components/icon/icons/lock.d.ts +0 -3
  153. package/dist/components/icon/icons/lock.d.ts.map +0 -1
  154. package/dist/components/icon/icons/login.d.ts +0 -3
  155. package/dist/components/icon/icons/login.d.ts.map +0 -1
  156. package/dist/components/icon/icons/logout.d.ts +0 -3
  157. package/dist/components/icon/icons/logout.d.ts.map +0 -1
  158. package/dist/components/icon/icons/mail.d.ts +0 -3
  159. package/dist/components/icon/icons/mail.d.ts.map +0 -1
  160. package/dist/components/icon/icons/map.d.ts +0 -3
  161. package/dist/components/icon/icons/map.d.ts.map +0 -1
  162. package/dist/components/icon/icons/menu.d.ts +0 -3
  163. package/dist/components/icon/icons/menu.d.ts.map +0 -1
  164. package/dist/components/icon/icons/moon.d.ts +0 -3
  165. package/dist/components/icon/icons/moon.d.ts.map +0 -1
  166. package/dist/components/icon/icons/notifications.d.ts +0 -3
  167. package/dist/components/icon/icons/notifications.d.ts.map +0 -1
  168. package/dist/components/icon/icons/paste.d.ts +0 -3
  169. package/dist/components/icon/icons/paste.d.ts.map +0 -1
  170. package/dist/components/icon/icons/pin.d.ts +0 -3
  171. package/dist/components/icon/icons/pin.d.ts.map +0 -1
  172. package/dist/components/icon/icons/plus.d.ts +0 -3
  173. package/dist/components/icon/icons/plus.d.ts.map +0 -1
  174. package/dist/components/icon/icons/print.d.ts +0 -3
  175. package/dist/components/icon/icons/print.d.ts.map +0 -1
  176. package/dist/components/icon/icons/refresh.d.ts +0 -3
  177. package/dist/components/icon/icons/refresh.d.ts.map +0 -1
  178. package/dist/components/icon/icons/remove.d.ts +0 -3
  179. package/dist/components/icon/icons/remove.d.ts.map +0 -1
  180. package/dist/components/icon/icons/save.d.ts +0 -3
  181. package/dist/components/icon/icons/save.d.ts.map +0 -1
  182. package/dist/components/icon/icons/search.d.ts +0 -3
  183. package/dist/components/icon/icons/search.d.ts.map +0 -1
  184. package/dist/components/icon/icons/settings.d.ts +0 -3
  185. package/dist/components/icon/icons/settings.d.ts.map +0 -1
  186. package/dist/components/icon/icons/share.d.ts +0 -3
  187. package/dist/components/icon/icons/share.d.ts.map +0 -1
  188. package/dist/components/icon/icons/sort-arrows.d.ts +0 -3
  189. package/dist/components/icon/icons/sort-arrows.d.ts.map +0 -1
  190. package/dist/components/icon/icons/sort.d.ts +0 -3
  191. package/dist/components/icon/icons/sort.d.ts.map +0 -1
  192. package/dist/components/icon/icons/star.d.ts +0 -3
  193. package/dist/components/icon/icons/star.d.ts.map +0 -1
  194. package/dist/components/icon/icons/success.d.ts +0 -3
  195. package/dist/components/icon/icons/success.d.ts.map +0 -1
  196. package/dist/components/icon/icons/sun.d.ts +0 -3
  197. package/dist/components/icon/icons/sun.d.ts.map +0 -1
  198. package/dist/components/icon/icons/table.d.ts +0 -3
  199. package/dist/components/icon/icons/table.d.ts.map +0 -1
  200. package/dist/components/icon/icons/tag.d.ts +0 -3
  201. package/dist/components/icon/icons/tag.d.ts.map +0 -1
  202. package/dist/components/icon/icons/trash.d.ts +0 -3
  203. package/dist/components/icon/icons/trash.d.ts.map +0 -1
  204. package/dist/components/icon/icons/unlock.d.ts +0 -3
  205. package/dist/components/icon/icons/unlock.d.ts.map +0 -1
  206. package/dist/components/icon/icons/upload.d.ts +0 -3
  207. package/dist/components/icon/icons/upload.d.ts.map +0 -1
  208. package/dist/components/icon/icons/user-add.d.ts +0 -3
  209. package/dist/components/icon/icons/user-add.d.ts.map +0 -1
  210. package/dist/components/icon/icons/user.d.ts +0 -3
  211. package/dist/components/icon/icons/user.d.ts.map +0 -1
  212. package/dist/components/icon/icons/users.d.ts +0 -3
  213. package/dist/components/icon/icons/users.d.ts.map +0 -1
  214. package/dist/components/icon/icons/video.d.ts +0 -3
  215. package/dist/components/icon/icons/video.d.ts.map +0 -1
  216. package/dist/components/icon/icons/warning.d.ts +0 -3
  217. package/dist/components/icon/icons/warning.d.ts.map +0 -1
  218. package/dist/components/icon/index.d.ts +0 -3
  219. package/dist/components/icon/index.d.ts.map +0 -1
  220. package/dist/components/icon/registry.d.ts +0 -15
  221. package/dist/components/icon/registry.d.ts.map +0 -1
  222. package/dist/components/input/Input.d.ts +0 -56
  223. package/dist/components/input/Input.d.ts.map +0 -1
  224. package/dist/components/input/index.d.ts +0 -3
  225. package/dist/components/input/index.d.ts.map +0 -1
  226. package/dist/components/link/Link.d.ts +0 -16
  227. package/dist/components/link/Link.d.ts.map +0 -1
  228. package/dist/components/link/index.d.ts +0 -3
  229. package/dist/components/link/index.d.ts.map +0 -1
  230. package/dist/components/modal/Modal.d.ts +0 -32
  231. package/dist/components/modal/Modal.d.ts.map +0 -1
  232. package/dist/components/modal/index.d.ts +0 -3
  233. package/dist/components/modal/index.d.ts.map +0 -1
  234. package/dist/components/off-canvas/OffCanvas.d.ts +0 -42
  235. package/dist/components/off-canvas/OffCanvas.d.ts.map +0 -1
  236. package/dist/components/off-canvas/index.d.ts +0 -3
  237. package/dist/components/off-canvas/index.d.ts.map +0 -1
  238. package/dist/components/page/Page.d.ts +0 -29
  239. package/dist/components/page/Page.d.ts.map +0 -1
  240. package/dist/components/page/index.d.ts +0 -3
  241. package/dist/components/page/index.d.ts.map +0 -1
  242. package/dist/components/popover/Popover.d.ts +0 -48
  243. package/dist/components/popover/Popover.d.ts.map +0 -1
  244. package/dist/components/popover/index.d.ts +0 -3
  245. package/dist/components/popover/index.d.ts.map +0 -1
  246. package/dist/components/resource-table/ResourceTable.d.ts +0 -159
  247. package/dist/components/resource-table/ResourceTable.d.ts.map +0 -1
  248. package/dist/components/resource-table/index.d.ts +0 -3
  249. package/dist/components/resource-table/index.d.ts.map +0 -1
  250. package/dist/components/select/Select.d.ts +0 -34
  251. package/dist/components/select/Select.d.ts.map +0 -1
  252. package/dist/components/select/index.d.ts +0 -3
  253. package/dist/components/select/index.d.ts.map +0 -1
  254. package/dist/components/spinner/Spinner.d.ts +0 -13
  255. package/dist/components/spinner/Spinner.d.ts.map +0 -1
  256. package/dist/components/spinner/index.d.ts +0 -3
  257. package/dist/components/spinner/index.d.ts.map +0 -1
  258. package/dist/components/stack/Stack.d.ts +0 -20
  259. package/dist/components/stack/Stack.d.ts.map +0 -1
  260. package/dist/components/stack/index.d.ts +0 -3
  261. package/dist/components/stack/index.d.ts.map +0 -1
  262. package/dist/components/switch/Switch.d.ts +0 -32
  263. package/dist/components/switch/Switch.d.ts.map +0 -1
  264. package/dist/components/switch/index.d.ts +0 -3
  265. package/dist/components/switch/index.d.ts.map +0 -1
  266. package/dist/components/table/Table.d.ts +0 -15
  267. package/dist/components/table/Table.d.ts.map +0 -1
  268. package/dist/components/table/index.d.ts +0 -3
  269. package/dist/components/table/index.d.ts.map +0 -1
  270. package/dist/components/tabs/Tab.d.ts +0 -19
  271. package/dist/components/tabs/Tab.d.ts.map +0 -1
  272. package/dist/components/tabs/TabContent.d.ts +0 -13
  273. package/dist/components/tabs/TabContent.d.ts.map +0 -1
  274. package/dist/components/tabs/TabList.d.ts +0 -12
  275. package/dist/components/tabs/TabList.d.ts.map +0 -1
  276. package/dist/components/tabs/Tabs.d.ts +0 -20
  277. package/dist/components/tabs/Tabs.d.ts.map +0 -1
  278. package/dist/components/tabs/index.d.ts +0 -9
  279. package/dist/components/tabs/index.d.ts.map +0 -1
  280. package/dist/components/tags/Tags.d.ts +0 -57
  281. package/dist/components/tags/Tags.d.ts.map +0 -1
  282. package/dist/components/tags/index.d.ts +0 -3
  283. package/dist/components/tags/index.d.ts.map +0 -1
  284. package/dist/components/text/Text.d.ts +0 -25
  285. package/dist/components/text/Text.d.ts.map +0 -1
  286. package/dist/components/text/index.d.ts +0 -3
  287. package/dist/components/text/index.d.ts.map +0 -1
  288. package/dist/icons/sort-arrows.svg +0 -3
  289. package/dist/index.d.ts +0 -63
  290. package/dist/index.d.ts.map +0 -1
  291. package/tailwind.preset.cjs +0 -24
  292. package/tailwind.preset.js +0 -24
package/README.md CHANGED
@@ -1,4 +1,4 @@
1
- # MintUI
1
+ # Monobill MintUI
2
2
 
3
3
  A modern **framework-agnostic** UI kit built as **pure JavaScript Web Components** (no framework dependencies). Works in Vue, React, Angular, Svelte, or vanilla JavaScript!
4
4
 
@@ -8,86 +8,25 @@ A modern **framework-agnostic** UI kit built as **pure JavaScript Web Components
8
8
 
9
9
  ## Installation
10
10
 
11
- ```bash
12
- npm install monobill-mintui
13
- ```
14
-
15
- ## ⚠️ IMPORTANT: Tailwind Configuration Required
16
-
17
- **After installing, you MUST configure Tailwind CSS to scan the mintui package files.** Without this, Tailwind classes won't work!
18
-
19
- ### Basic Configuration
20
-
21
- Add this to your `tailwind.config.js`:
22
-
23
- ```js
24
- import mintuiPreset from 'monobill-mintui/tailwind-preset'
25
-
26
- export default {
27
- presets: [mintuiPreset], // ⚠️ REQUIRED: Enforces dark mode color (#0A0A0A)
28
- content: [
29
- "./src/**/*.{vue,js,ts,jsx,tsx,html}",
30
- "./node_modules/monobill-mintui/dist/**/*.js", // ⚠️ REQUIRED: Add this line
31
- ],
32
- // ... rest of your config
33
- }
34
- ```
35
-
36
- **CommonJS format:**
37
-
38
- ```js
39
- const mintuiPreset = require('monobill-mintui/tailwind-preset')
40
-
41
- module.exports = {
42
- presets: [mintuiPreset], // ⚠️ REQUIRED: Enforces dark mode color (#0A0A0A)
43
- content: [
44
- "./src/**/*.{vue,js,ts,jsx,tsx,html}",
45
- "./node_modules/monobill-mintui/dist/**/*.js", // ⚠️ REQUIRED: Add this line
46
- ],
47
- // ... rest of your config
48
- }
49
- ```
50
-
51
- **After updating your Tailwind config, rebuild your CSS** (restart your dev server or rebuild your Tailwind output).
52
-
53
- ### Dark Mode Color
54
-
55
- The mintui preset enforces the base dark mode color `#0A0A0A` for `gray-900`. This ensures consistent dark mode styling across all apps using mintui. The preset automatically sets this color, so all components will use the correct dark mode background.
56
-
57
- ## Icon Configuration
58
-
59
- Icons are loaded from SVG files. By default, icons load from the CDN at `https://assets.gomonobill.com/mintui/icons/` for optimal caching and performance.
60
-
61
- ### Configuring Icon Source
62
-
63
- You can configure where icons are loaded from using a meta tag:
64
-
65
- **Default (CDN):**
66
- ```html
67
- <!-- Icons load from CDN by default -->
68
- <mint-icon name="caret-up"></mint-icon>
69
- ```
11
+ Install components individually via NPM. All components are version-locked together to ensure styling consistency.
70
12
 
71
- **Load from Local Server:**
72
- ```html
73
- <meta name="mint-icon-base-url" content="local">
74
- ```
13
+ ```bash
14
+ # Install individual components
15
+ npm install @monobill-mintui/button
16
+ npm install @monobill-mintui/switch
75
17
 
76
- **Load from Custom Endpoint:**
77
- ```html
78
- <meta name="mint-icon-base-url" content="/custom/path/to/icons">
79
- <!-- or -->
80
- <meta name="mint-icon-base-url" content="https://your-cdn.com/icons">
18
+ # Or install multiple at once
19
+ npm install @monobill-mintui/button @monobill-mintui/switch
81
20
  ```
82
21
 
83
- **Explicitly Use CDN:**
84
- ```html
85
- <meta name="mint-icon-base-url" content="cdn">
86
- ```
22
+ ### Version Locking
87
23
 
88
- ### Icon Files Setup
24
+ All components share the same version number. When you install `@monobill-mintui/button@1.0.0`, installing `@monobill-mintui/switch` will automatically use version `1.0.0` as well. This ensures:
89
25
 
90
- If using local icons, ensure SVG files are available in your `public/icons/` directory. The icon component expects files named like `/icons/caret-up.svg`, `/icons/caret-down.svg`, etc.
26
+ - ✅ Consistent styling across all components
27
+ - ✅ No version conflicts
28
+ - ✅ Easy updates with `npm update`
29
+ - ✅ Standard NPM versioning workflow
91
30
 
92
31
  ## Usage
93
32
 
@@ -102,7 +41,8 @@ Components are Web Components (Custom Elements) that work in **any framework**:
102
41
  <html>
103
42
  <head>
104
43
  <script type="module">
105
- import 'monobill-mintui'
44
+ import '@monobill-mintui/button'
45
+ import '@monobill-mintui/switch'
106
46
  </script>
107
47
  </head>
108
48
  <body>
@@ -120,82 +60,20 @@ Components are Web Components (Custom Elements) that work in **any framework**:
120
60
 
121
61
  #### Vue 3
122
62
 
123
- **⚠️ IMPORTANT: Configure Vue to recognize custom elements**
124
-
125
- You must configure Vue to treat `mint-*` elements as custom elements, not Vue components.
126
-
127
- **For Vite projects**, add this to your `vite.config.js` or `vite.config.ts`:
128
-
129
- ```js
130
- import { defineConfig } from 'vite'
131
- import vue from '@vitejs/plugin-vue'
132
-
133
- export default defineConfig({
134
- plugins: [
135
- vue({
136
- template: {
137
- compilerOptions: {
138
- isCustomElement: (tag) => tag.startsWith('mint-'),
139
- },
140
- },
141
- }),
142
- ],
143
- })
144
- ```
145
-
146
- **For Vue CLI projects**, add this to your `vue.config.js`:
147
-
148
- ```js
149
- module.exports = {
150
- chainWebpack: (config) => {
151
- config.module
152
- .rule('vue')
153
- .use('vue-loader')
154
- .tap((options) => {
155
- options.compilerOptions = {
156
- ...options.compilerOptions,
157
- isCustomElement: (tag) => tag.startsWith('mint-'),
158
- }
159
- return options
160
- })
161
- },
162
- }
163
- ```
164
-
165
- **For Nuxt 3**, add this to your `nuxt.config.ts`:
166
-
167
- ```ts
168
- export default defineNuxtConfig({
169
- vue: {
170
- compilerOptions: {
171
- isCustomElement: (tag) => tag.startsWith('mint-'),
172
- },
173
- },
174
- })
175
- ```
176
-
177
- **Usage example:**
178
-
179
63
  ```vue
180
64
  <template>
181
65
  <mint-button variant="primary" @click="handleClick">
182
66
  Click me
183
67
  </mint-button>
184
68
  <mint-switch :checked="enabled" @change="handleChange" />
185
- <mint-input label="Name" v-model="name" />
186
- <mint-select label="Country" v-model="country">
187
- <option value="us">United States</option>
188
- <option value="ca">Canada</option>
189
- </mint-select>
190
69
  </template>
191
70
 
192
71
  <script setup>
193
72
  import { ref } from 'vue'
194
- import 'monobill-mintui'
73
+ import '@monobill-mintui/button'
74
+ import '@monobill-mintui/switch'
195
75
 
196
76
  const enabled = ref(false)
197
- const name = ref('')
198
- const country = ref('')
199
77
 
200
78
  const handleClick = () => console.log('Clicked!')
201
79
  const handleChange = (e) => {
@@ -208,7 +86,8 @@ const handleChange = (e) => {
208
86
 
209
87
  ```jsx
210
88
  import { useState } from 'react'
211
- import 'monobill-mintui'
89
+ import '@monobill-mintui/button'
90
+ import '@monobill-mintui/switch'
212
91
 
213
92
  function App() {
214
93
  const [enabled, setEnabled] = useState(false)
@@ -222,11 +101,6 @@ function App() {
222
101
  checked={enabled}
223
102
  onChange={(e) => setEnabled(e.detail?.checked ?? e.target.checked)}
224
103
  />
225
- <mint-input label="Name" />
226
- <mint-select label="Country">
227
- <option value="us">United States</option>
228
- <option value="ca">Canada</option>
229
- </mint-select>
230
104
  </>
231
105
  )
232
106
  }
@@ -236,7 +110,8 @@ function App() {
236
110
 
237
111
  ```typescript
238
112
  import { Component } from '@angular/core'
239
- import 'monobill-mintui'
113
+ import '@monobill-mintui/button'
114
+ import '@monobill-mintui/switch'
240
115
 
241
116
  @Component({
242
117
  selector: 'app-root',
@@ -257,29 +132,126 @@ export class AppComponent {
257
132
  }
258
133
  ```
259
134
 
260
- ## Available Components
261
-
262
- - **mint-button** - Button component with multiple variants
263
- - **mint-switch** - Toggle switch component
264
- - **mint-input** - Text input, textarea, and various input types
265
- - **mint-select** - Select dropdown component
266
- - **mint-checkbox** - Checkbox component
267
- - **mint-choice** - Radio button group component (parent container with mint-choice-option children)
268
- - **mint-tags** - Tags input component with add/remove and sorting capabilities
269
- - **mint-date-picker** - Date picker component
270
- - **mint-dropzone** - File upload component
271
- - **mint-form** - Form component with validation
272
- - **mint-icon** - Icon component
273
- - **mint-text** - Text component with typography variants
274
- - **mint-card** - Card component
275
- - **mint-modal** - Modal dialog component
276
- - **mint-popover** - Popover component
277
- - **mint-spinner** - Loading spinner component
278
- - **mint-stack** - Stack layout component
279
- - **mint-grid** - Grid layout component
280
- - **mint-page** - Page container component
281
- - **mint-link** - Link component
282
- - **mint-back-button** - Back button component
135
+ **Note**: Components require Tailwind CSS to be installed and configured in your project. Make sure your `tailwind.config.js` includes the component paths in the `content` array for proper tree-shaking.
136
+
137
+ ### Button Props
138
+
139
+ | Prop | Type | Default | Description |
140
+ |------|------|---------|-------------|
141
+ | `variant` | `'primary' \| 'secondary' \| 'outline' \| 'ghost' \| 'danger'` | `'primary'` | Button style variant |
142
+ | `disabled` | `boolean` | `false` | Disable the button |
143
+ | `loading` | `boolean` | `false` | Show loading spinner |
144
+ | `type` | `'button' \| 'submit' \| 'reset'` | `'button'` | HTML button type |
145
+ | `fullWidth` | `boolean` | `false` | Make button full width |
146
+
147
+ ### Button Events
148
+
149
+ - `@click` - Emitted when button is clicked (not emitted when disabled or loading)
150
+
151
+ ## Development
152
+
153
+ ```bash
154
+ # Install dependencies
155
+ npm install
156
+
157
+ # Build component CSS (required before using components)
158
+ npm run build:css
159
+
160
+ # Run development server
161
+ npm run dev
162
+
163
+ # Build for production
164
+ npm run build
165
+ ```
166
+
167
+ ## Component Structure
168
+
169
+ Each component is a pure JavaScript Web Component:
170
+
171
+ ```
172
+ monobill-mintui/
173
+ ├── src/
174
+ │ ├── components/
175
+ │ │ └── button/
176
+ │ │ ├── Button.js # Pure JavaScript Web Component
177
+ │ │ ├── index.js # Component export
178
+ │ │ ├── README.md # Component documentation
179
+ │ │ └── package.json # Component metadata
180
+ │ └── index.js # Main entry point (tree-shakeable)
181
+ ├── components.json # Component manifest
182
+ ├── scripts/
183
+ │ ├── sync-versions.js # Version synchronization script
184
+ │ ├── prepare-publish.js # Publishing preparation script
185
+ │ └── publish-all.js # Publish all components script
186
+ ├── package.json
187
+ ├── tailwind.config.js # Tailwind config (for development)
188
+ ├── vite.config.js
189
+ └── README.md
190
+ ```
191
+
192
+ ## Version Management
193
+
194
+ ### Installing Components
195
+
196
+ All components are version-locked. When you install a component, it uses the latest version:
197
+
198
+ ```bash
199
+ npm install @monobill-mintui/button
200
+ # Installs latest version (e.g., 1.0.0)
201
+ ```
202
+
203
+ When you install another component, it automatically uses the same version:
204
+
205
+ ```bash
206
+ npm install @monobill-mintui/switch
207
+ # Also installs version 1.0.0 (same as button)
208
+ ```
209
+
210
+ ### Updating Components
211
+
212
+ Update all components to the latest version:
213
+
214
+ ```bash
215
+ npm update @monobill-mintui/button @monobill-mintui/switch
216
+ # Or update all at once
217
+ npm update
218
+ ```
219
+
220
+ ### Pinning Versions
221
+
222
+ Pin to a specific version in your `package.json`:
223
+
224
+ ```json
225
+ {
226
+ "dependencies": {
227
+ "@monobill-mintui/button": "1.0.0",
228
+ "@monobill-mintui/switch": "1.0.0"
229
+ }
230
+ }
231
+ ```
232
+
233
+ All components will stay at the same version, ensuring consistent styling.
234
+
235
+ ## Tree Shaking
236
+
237
+ Since components are installed individually, tree shaking works automatically:
238
+
239
+ ```javascript
240
+ // Only the Button component is included in your bundle
241
+ import '@monobill-mintui/button'
242
+ ```
243
+
244
+ Each component is a separate package, so unused components are never included in your bundle.
245
+
246
+ ## Supported Frameworks
247
+
248
+ These Web Components work in:
249
+ - ✅ **Vanilla JavaScript** - Just import and use
250
+ - ✅ **Vue 2 & 3** - Use as custom elements
251
+ - ✅ **React** - Use as JSX elements
252
+ - ✅ **Angular** - Use in templates
253
+ - ✅ **Svelte** - Use as HTML elements
254
+ - ✅ **Any framework** that supports HTML
283
255
 
284
256
  ## Requirements
285
257
 
@@ -288,62 +260,58 @@ export class AppComponent {
288
260
  - **No JavaScript dependencies!** Built with native Web Component APIs
289
261
  - Modern browser with Web Components support (all modern browsers)
290
262
 
291
- ### ⚠️ Critical: Tailwind Configuration
263
+ ### Tailwind Configuration
292
264
 
293
- **You MUST add the mintui package to your Tailwind content paths AND use the preset**, otherwise the classes won't be included in your CSS and dark mode colors won't be correct:
265
+ Make sure your `tailwind.config.js` includes the component paths:
294
266
 
295
267
  ```js
296
- // tailwind.config.js (ES modules)
297
- import mintuiPreset from 'monobill-mintui/tailwind-preset'
298
-
299
268
  export default {
300
- presets: [mintuiPreset], // ⚠️ REQUIRED: Enforces dark mode color (#0A0A0A)
301
269
  content: [
302
- "./src/**/*.{vue,js,ts,jsx,tsx,html}",
303
- "./node_modules/monobill-mintui/dist/**/*.js", // ⚠️ REQUIRED
270
+ "./src/**/*.{vue,js,ts,jsx,tsx}",
271
+ "./node_modules/@monobill-mintui/**/*.js", // Add this
304
272
  ],
305
- // ... rest of your config
273
+ // ... rest of config
306
274
  }
307
275
  ```
308
276
 
309
- ```js
310
- // tailwind.config.js (CommonJS)
311
- const mintuiPreset = require('monobill-mintui/tailwind-preset')
277
+ ### Tailwind CSS Integration
312
278
 
313
- module.exports = {
314
- presets: [mintuiPreset], // ⚠️ REQUIRED: Enforces dark mode color (#0A0A0A)
315
- content: [
316
- "./src/**/*.{vue,js,ts,jsx,tsx,html}",
317
- "./node_modules/monobill-mintui/dist/**/*.js", // ⚠️ REQUIRED
318
- ],
319
- // ... rest of your config
320
- }
321
- ```
279
+ - Components use Tailwind utility classes
280
+ - Tailwind automatically tree-shakes unused classes
281
+ - Minimal CSS output - only the classes you use are included
282
+ - Integrates seamlessly with your existing Tailwind setup
283
+ - Efficient and optimized bundle size
322
284
 
323
- **After updating your Tailwind config, rebuild your CSS** (restart your dev server or rebuild your Tailwind output).
285
+ ## Styling
324
286
 
325
- ## Troubleshooting
287
+ Components are built using Tailwind CSS utility classes. Your Tailwind build process will:
288
+ - Tree-shake unused classes
289
+ - Generate minimal CSS output
290
+ - Optimize for production
326
291
 
327
- ### Tailwind classes not working?
292
+ Make sure your Tailwind config includes the component paths for proper class detection.
328
293
 
329
- 1. **Check your Tailwind config** - Make sure you've added `./node_modules/monobill-mintui/dist/**/*.js` to the `content` array
330
- 2. **Rebuild your CSS** - Restart your dev server or rebuild your Tailwind output
331
- 3. **Check the package name** - Make sure you're using `monobill-mintui` (not `mintui`) in the path
332
- 4. **Verify the path** - The path should point to `dist/**/*.js` inside the node_modules folder
294
+ ## Publishing
333
295
 
334
- ## Development
296
+ For maintainers, to publish all components:
335
297
 
336
298
  ```bash
337
- # Install dependencies
338
- npm install
299
+ # Sync versions and build CSS
300
+ npm run prepare:publish
339
301
 
340
- # Run development server
341
- npm run dev
302
+ # Publish all components
303
+ node scripts/publish-all.js
342
304
 
343
- # Build for production
344
- npm run build
305
+ # Or publish individually
306
+ cd src/components/button
307
+ npm publish --access public
345
308
  ```
346
309
 
347
- ## License
310
+ The `version` script automatically syncs all component versions when you bump the root version:
311
+
312
+ ```bash
313
+ npm version patch # Bumps to 0.1.1 and syncs all components
314
+ npm version minor # Bumps to 0.2.0 and syncs all components
315
+ npm version major # Bumps to 1.0.0 and syncs all components
316
+ ```
348
317
 
349
- MIT
package/dist/icons/edit.svg CHANGED
@@ -1,3 +1,3 @@
1
1
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
2
- <path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
2
+ <path d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
3
3
  </svg>