@mdigital_ui/ui 0.4.8 → 0.5.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 (227) hide show
  1. package/README.md +279 -247
  2. package/dist/alert/index.d.ts.map +1 -1
  3. package/dist/alert/index.js +1 -1
  4. package/dist/autocomplete/index.d.ts.map +1 -1
  5. package/dist/autocomplete/index.js +3 -2
  6. package/dist/avatar/index.d.ts.map +1 -1
  7. package/dist/avatar/index.js +1 -1
  8. package/dist/breadcrumbs/index.js +4 -4
  9. package/dist/button/index.js +2 -2
  10. package/dist/calendar/index.d.ts.map +1 -1
  11. package/dist/calendar/index.js +2 -1
  12. package/dist/cascader/index.d.ts.map +1 -1
  13. package/dist/cascader/index.js +1 -1
  14. package/dist/checkbox/index.d.ts.map +1 -1
  15. package/dist/checkbox/index.js +1 -1
  16. package/dist/checkbox/types.d.ts +2 -0
  17. package/dist/checkbox/types.d.ts.map +1 -1
  18. package/dist/{chunk-Z3DIBMBQ.js → chunk-3K4GIXFA.js} +178 -118
  19. package/dist/chunk-3K4GIXFA.js.map +1 -0
  20. package/dist/{chunk-SJLH5ZDW.js → chunk-4QLYRAW2.js} +3 -3
  21. package/dist/{chunk-SJLH5ZDW.js.map → chunk-4QLYRAW2.js.map} +1 -1
  22. package/dist/{chunk-4TEZWGX7.js → chunk-64OCJYSH.js} +17 -8
  23. package/dist/chunk-64OCJYSH.js.map +1 -0
  24. package/dist/{chunk-5YEC6FDN.js → chunk-6CMHCCDO.js} +14 -7
  25. package/dist/chunk-6CMHCCDO.js.map +1 -0
  26. package/dist/{chunk-7RT65ZGV.js → chunk-6H2Y3QKP.js} +75 -23
  27. package/dist/chunk-6H2Y3QKP.js.map +1 -0
  28. package/dist/{chunk-UFYG3HKL.js → chunk-6K6RGQNL.js} +193 -94
  29. package/dist/chunk-6K6RGQNL.js.map +1 -0
  30. package/dist/{chunk-ROQGBDET.js → chunk-6XXAZ6P2.js} +15 -7
  31. package/dist/chunk-6XXAZ6P2.js.map +1 -0
  32. package/dist/{chunk-3Z7RLVWD.js → chunk-75T5BISG.js} +7 -13
  33. package/dist/chunk-75T5BISG.js.map +1 -0
  34. package/dist/{chunk-XAM5EKOS.js → chunk-7SKAAKBC.js} +13 -12
  35. package/dist/chunk-7SKAAKBC.js.map +1 -0
  36. package/dist/{chunk-6RZEJRTC.js → chunk-7ZUIX4NK.js} +3 -3
  37. package/dist/{chunk-6RZEJRTC.js.map → chunk-7ZUIX4NK.js.map} +1 -1
  38. package/dist/{chunk-NPK4ESMA.js → chunk-B75ICJCX.js} +9 -16
  39. package/dist/chunk-B75ICJCX.js.map +1 -0
  40. package/dist/chunk-CB7YOZWV.js +50 -0
  41. package/dist/chunk-CB7YOZWV.js.map +1 -0
  42. package/dist/{chunk-UFC3RGIN.js → chunk-DXAOZB6J.js} +4 -4
  43. package/dist/chunk-DXAOZB6J.js.map +1 -0
  44. package/dist/{chunk-75N6T3IS.js → chunk-ECBTSKES.js} +13 -10
  45. package/dist/chunk-ECBTSKES.js.map +1 -0
  46. package/dist/{chunk-J2WIZULN.js → chunk-FCIK35OY.js} +3 -3
  47. package/dist/{chunk-J2WIZULN.js.map → chunk-FCIK35OY.js.map} +1 -1
  48. package/dist/{chunk-FY2TZ2NT.js → chunk-GP7R3AFC.js} +58 -30
  49. package/dist/chunk-GP7R3AFC.js.map +1 -0
  50. package/dist/{chunk-ED4CQZ72.js → chunk-GQM5WLP5.js} +4 -4
  51. package/dist/{chunk-ED4CQZ72.js.map → chunk-GQM5WLP5.js.map} +1 -1
  52. package/dist/{chunk-TBKPQOXF.js → chunk-GSLNACUF.js} +3 -3
  53. package/dist/{chunk-TBKPQOXF.js.map → chunk-GSLNACUF.js.map} +1 -1
  54. package/dist/{chunk-OJAHIPPP.js → chunk-HGWD63IR.js} +3 -3
  55. package/dist/{chunk-OJAHIPPP.js.map → chunk-HGWD63IR.js.map} +1 -1
  56. package/dist/chunk-HKQOAEFY.js +1 -1
  57. package/dist/{chunk-PD3O6ZH4.js → chunk-JXOLZBXF.js} +19 -8
  58. package/dist/chunk-JXOLZBXF.js.map +1 -0
  59. package/dist/{chunk-CUXQZRDI.js → chunk-JZCONCJS.js} +13 -3
  60. package/dist/chunk-JZCONCJS.js.map +1 -0
  61. package/dist/{chunk-TDPJYCNI.js → chunk-KBT6UQNA.js} +14 -35
  62. package/dist/chunk-KBT6UQNA.js.map +1 -0
  63. package/dist/{chunk-VNH6R5EU.js → chunk-KR3GBSVA.js} +4 -6
  64. package/dist/chunk-KR3GBSVA.js.map +1 -0
  65. package/dist/{chunk-JWYBDNC6.js → chunk-KTK7LSKX.js} +7 -8
  66. package/dist/chunk-KTK7LSKX.js.map +1 -0
  67. package/dist/{chunk-J4SAIKKZ.js → chunk-L3ZFNHVX.js} +25 -22
  68. package/dist/chunk-L3ZFNHVX.js.map +1 -0
  69. package/dist/{chunk-PB5VGXS5.js → chunk-LBOQJHFH.js} +3 -3
  70. package/dist/{chunk-PB5VGXS5.js.map → chunk-LBOQJHFH.js.map} +1 -1
  71. package/dist/{chunk-XCK62GVU.js → chunk-LZ2MHSYF.js} +8 -5
  72. package/dist/chunk-LZ2MHSYF.js.map +1 -0
  73. package/dist/{chunk-LHZJ2GJU.js → chunk-MHRSK2QC.js} +8 -6
  74. package/dist/chunk-MHRSK2QC.js.map +1 -0
  75. package/dist/{chunk-JIXINKUJ.js → chunk-N742SARE.js} +8 -7
  76. package/dist/chunk-N742SARE.js.map +1 -0
  77. package/dist/{chunk-3XOHSE3X.js → chunk-NA6EVQ6T.js} +3 -3
  78. package/dist/{chunk-3XOHSE3X.js.map → chunk-NA6EVQ6T.js.map} +1 -1
  79. package/dist/{chunk-6ROGWFQ2.js → chunk-NKLKTAUP.js} +3 -3
  80. package/dist/{chunk-6ROGWFQ2.js.map → chunk-NKLKTAUP.js.map} +1 -1
  81. package/dist/{chunk-S6HO7HUY.js → chunk-OSD63E6O.js} +15 -19
  82. package/dist/chunk-OSD63E6O.js.map +1 -0
  83. package/dist/{chunk-QDJ5PZPP.js → chunk-PHA7SLBY.js} +3 -3
  84. package/dist/chunk-PHA7SLBY.js.map +1 -0
  85. package/dist/{chunk-6NXZWLSM.js → chunk-S4BF3Z6O.js} +4 -4
  86. package/dist/{chunk-6NXZWLSM.js.map → chunk-S4BF3Z6O.js.map} +1 -1
  87. package/dist/{chunk-C65SCJD6.js → chunk-SK6YMTMA.js} +5 -12
  88. package/dist/chunk-SK6YMTMA.js.map +1 -0
  89. package/dist/{chunk-DBPLQZJ2.js → chunk-SSISBOLO.js} +75 -22
  90. package/dist/chunk-SSISBOLO.js.map +1 -0
  91. package/dist/{chunk-LWYZCSX4.js → chunk-UBJK5623.js} +12 -11
  92. package/dist/chunk-UBJK5623.js.map +1 -0
  93. package/dist/{chunk-74AF6PO2.js → chunk-UEQ3NEVL.js} +48 -12
  94. package/dist/chunk-UEQ3NEVL.js.map +1 -0
  95. package/dist/{chunk-A4MYCEGM.js → chunk-UHHCUCEE.js} +19 -8
  96. package/dist/chunk-UHHCUCEE.js.map +1 -0
  97. package/dist/{chunk-X7JN7WPF.js → chunk-UIPDAD62.js} +3 -3
  98. package/dist/chunk-UIPDAD62.js.map +1 -0
  99. package/dist/{chunk-YUACN5GJ.js → chunk-UPBKLI62.js} +20 -13
  100. package/dist/chunk-UPBKLI62.js.map +1 -0
  101. package/dist/{chunk-3B32X5PU.js → chunk-UUXSTLOY.js} +7 -5
  102. package/dist/chunk-UUXSTLOY.js.map +1 -0
  103. package/dist/{chunk-HSMO2BR4.js → chunk-VNB7ZHCZ.js} +4 -13
  104. package/dist/chunk-VNB7ZHCZ.js.map +1 -0
  105. package/dist/{chunk-TQEMGWZ2.js → chunk-W4RYNHAG.js} +3 -3
  106. package/dist/{chunk-TQEMGWZ2.js.map → chunk-W4RYNHAG.js.map} +1 -1
  107. package/dist/{chunk-PRDJLQLB.js → chunk-XNV3YAJK.js} +5 -5
  108. package/dist/chunk-XNV3YAJK.js.map +1 -0
  109. package/dist/{chunk-I7HJBHQU.js → chunk-Y3PVWMUN.js} +7 -7
  110. package/dist/chunk-Y3PVWMUN.js.map +1 -0
  111. package/dist/clipboard/index.js +2 -2
  112. package/dist/collapse/index.js +2 -2
  113. package/dist/color-picker/index.d.ts +3 -3
  114. package/dist/color-picker/index.d.ts.map +1 -1
  115. package/dist/color-picker/index.js +3 -2
  116. package/dist/context-menu/index.d.ts +4 -6
  117. package/dist/context-menu/index.d.ts.map +1 -1
  118. package/dist/context-menu/index.js +2 -2
  119. package/dist/date-picker/PickerWrapper.d.ts +3 -3
  120. package/dist/date-picker/PickerWrapper.d.ts.map +1 -1
  121. package/dist/date-picker/index.d.ts.map +1 -1
  122. package/dist/date-picker/index.js +3 -2
  123. package/dist/descriptions/index.js +1 -1
  124. package/dist/dropdown/index.js +3 -3
  125. package/dist/hooks/useControllable.d.ts +9 -2
  126. package/dist/hooks/useControllable.d.ts.map +1 -1
  127. package/dist/hooks/useRipple.d.ts +0 -6
  128. package/dist/hooks/useRipple.d.ts.map +1 -1
  129. package/dist/index.js +46 -46
  130. package/dist/input/index.js +1 -1
  131. package/dist/input-password/index.js +2 -2
  132. package/dist/mentions/index.d.ts.map +1 -1
  133. package/dist/mentions/index.js +2 -1
  134. package/dist/menubar/index.js +2 -2
  135. package/dist/multi-select/index.d.ts.map +1 -1
  136. package/dist/multi-select/index.js +4 -4
  137. package/dist/navigation-menu/index.d.ts.map +1 -1
  138. package/dist/navigation-menu/index.js +1 -1
  139. package/dist/number-input/index.d.ts.map +1 -1
  140. package/dist/number-input/index.js +3 -3
  141. package/dist/pagination/index.js +2 -2
  142. package/dist/popover/index.d.ts +16 -1
  143. package/dist/popover/index.d.ts.map +1 -1
  144. package/dist/popover/index.js +1 -1
  145. package/dist/qr-code/index.d.ts +3 -3
  146. package/dist/qr-code/index.d.ts.map +1 -1
  147. package/dist/qr-code/index.js +1 -1
  148. package/dist/radio/index.d.ts.map +1 -1
  149. package/dist/radio/index.js +1 -1
  150. package/dist/rating/index.js +2 -2
  151. package/dist/resizable/index.d.ts +4 -3
  152. package/dist/resizable/index.d.ts.map +1 -1
  153. package/dist/resizable/index.js +1 -1
  154. package/dist/result/index.d.ts.map +1 -1
  155. package/dist/result/index.js +1 -1
  156. package/dist/select/index.d.ts.map +1 -1
  157. package/dist/select/index.js +4 -4
  158. package/dist/skeleton/index.d.ts +3 -3
  159. package/dist/skeleton/index.d.ts.map +1 -1
  160. package/dist/skeleton/index.js +1 -1
  161. package/dist/table/index.d.ts.map +1 -1
  162. package/dist/table/index.js +8 -8
  163. package/dist/table/types.d.ts +16 -2
  164. package/dist/table/types.d.ts.map +1 -1
  165. package/dist/tags-input/index.d.ts.map +1 -1
  166. package/dist/tags-input/index.js +2 -1
  167. package/dist/textarea/index.d.ts +3 -3
  168. package/dist/textarea/index.d.ts.map +1 -1
  169. package/dist/textarea/index.js +1 -1
  170. package/dist/theme/ThemeProvider.d.ts +18 -2
  171. package/dist/theme/ThemeProvider.d.ts.map +1 -1
  172. package/dist/theme/index.d.ts +1 -1
  173. package/dist/theme/index.d.ts.map +1 -1
  174. package/dist/theme/index.js +1 -1
  175. package/dist/timeline/index.d.ts.map +1 -1
  176. package/dist/timeline/index.js +1 -1
  177. package/dist/toggle/index.d.ts.map +1 -1
  178. package/dist/toggle/index.js +2 -2
  179. package/dist/toggle-group/index.d.ts.map +1 -1
  180. package/dist/toggle-group/index.js +2 -2
  181. package/dist/tour/index.d.ts.map +1 -1
  182. package/dist/tour/index.js +1 -1
  183. package/dist/transfer/index.js +2 -2
  184. package/dist/tree-select/index.js +2 -2
  185. package/dist/typography/index.d.ts.map +1 -1
  186. package/dist/typography/index.js +1 -1
  187. package/dist/upload/index.d.ts.map +1 -1
  188. package/dist/upload/index.js +2 -2
  189. package/package.json +4 -3
  190. package/styles/datepicker.css +126 -0
  191. package/styles/global.css +1 -113
  192. package/dist/chunk-3B32X5PU.js.map +0 -1
  193. package/dist/chunk-3Z7RLVWD.js.map +0 -1
  194. package/dist/chunk-4TEZWGX7.js.map +0 -1
  195. package/dist/chunk-5YEC6FDN.js.map +0 -1
  196. package/dist/chunk-74AF6PO2.js.map +0 -1
  197. package/dist/chunk-75N6T3IS.js.map +0 -1
  198. package/dist/chunk-7RT65ZGV.js.map +0 -1
  199. package/dist/chunk-A4MYCEGM.js.map +0 -1
  200. package/dist/chunk-C65SCJD6.js.map +0 -1
  201. package/dist/chunk-CUXQZRDI.js.map +0 -1
  202. package/dist/chunk-DBPLQZJ2.js.map +0 -1
  203. package/dist/chunk-FY2TZ2NT.js.map +0 -1
  204. package/dist/chunk-HSMO2BR4.js.map +0 -1
  205. package/dist/chunk-I7HJBHQU.js.map +0 -1
  206. package/dist/chunk-J4SAIKKZ.js.map +0 -1
  207. package/dist/chunk-JIXINKUJ.js.map +0 -1
  208. package/dist/chunk-JWYBDNC6.js.map +0 -1
  209. package/dist/chunk-LHZJ2GJU.js.map +0 -1
  210. package/dist/chunk-LWYZCSX4.js.map +0 -1
  211. package/dist/chunk-NPK4ESMA.js.map +0 -1
  212. package/dist/chunk-PD3O6ZH4.js.map +0 -1
  213. package/dist/chunk-PQOIW5CM.js +0 -27
  214. package/dist/chunk-PQOIW5CM.js.map +0 -1
  215. package/dist/chunk-PRDJLQLB.js.map +0 -1
  216. package/dist/chunk-QDJ5PZPP.js.map +0 -1
  217. package/dist/chunk-ROQGBDET.js.map +0 -1
  218. package/dist/chunk-S6HO7HUY.js.map +0 -1
  219. package/dist/chunk-TDPJYCNI.js.map +0 -1
  220. package/dist/chunk-UFC3RGIN.js.map +0 -1
  221. package/dist/chunk-UFYG3HKL.js.map +0 -1
  222. package/dist/chunk-VNH6R5EU.js.map +0 -1
  223. package/dist/chunk-X7JN7WPF.js.map +0 -1
  224. package/dist/chunk-XAM5EKOS.js.map +0 -1
  225. package/dist/chunk-XCK62GVU.js.map +0 -1
  226. package/dist/chunk-YUACN5GJ.js.map +0 -1
  227. package/dist/chunk-Z3DIBMBQ.js.map +0 -1
package/README.md CHANGED
@@ -1,53 +1,110 @@
1
+ <div align="center">
2
+
1
3
  # @mdigital_ui/ui
2
4
 
3
- React component library. 76 components. Tailwind CSS v4, CVA, Radix UI.
5
+ **A modern React component library built for speed.**
6
+
7
+ 76 components · Tailwind CSS v4 · Slot-based theming · Tree-shakeable
8
+
9
+ [![CI](https://github.com/mstrluke/mdigital_uikit/actions/workflows/ci.yml/badge.svg)](https://github.com/mstrluke/mdigital_uikit/actions/workflows/ci.yml)
10
+ [![npm](https://img.shields.io/npm/v/@mdigital_ui/ui?color=blue)](https://www.npmjs.com/package/@mdigital_ui/ui)
11
+ [![downloads](https://img.shields.io/npm/dm/@mdigital_ui/ui?color=green)](https://www.npmjs.com/package/@mdigital_ui/ui)
12
+ [![bundle size](https://img.shields.io/bundlephobia/minzip/@mdigital_ui/ui)](https://bundlephobia.com/package/@mdigital_ui/ui)
13
+ [![license](https://img.shields.io/github/license/mstrluke/mdigital_uikit)](https://github.com/mstrluke/mdigital_uikit/blob/main/LICENSE)
14
+
15
+ [Changelog](https://github.com/mstrluke/mdigital_uikit/releases) · [Report Bug](https://github.com/mstrluke/mdigital_uikit/issues/new?template=bug_report.md) · [Request Feature](https://github.com/mstrluke/mdigital_uikit/issues/new?template=feature_request.md)
16
+
17
+ </div>
18
+
19
+ ---
20
+
21
+ ## Why This Library?
22
+
23
+ | | @mdigital_ui/ui | shadcn/ui | Ant Design | Chakra UI |
24
+ |---|---|---|---|---|
25
+ | **Theming** | Slot-based color system — 1 prop themes everything | Copy-paste, manual | Token config object | colorScheme prop |
26
+ | **Tailwind** | v4 native (`@theme`, `@source`) | v3 with config | No Tailwind | No Tailwind |
27
+ | **Bundle** | Tree-shake per component | Copy into project | 300KB+ full bundle | 200KB+ full bundle |
28
+ | **Dark mode** | Zero-config CSS variables | Manual `dark:` classes | ConfigProvider | ColorModeProvider |
29
+ | **Components** | 76 production-ready | ~50 primitives | 60+ | 60+ |
30
+ | **Tests** | 1,556 tests | Community | Extensive | Moderate |
31
+
32
+ ### The Slot Color System
33
+
34
+ One `color` prop. Every part of the component responds — backgrounds, borders, text, hover states, focus rings. No manual mapping. No 49 color variants hardcoded per component.
35
+
36
+ ```tsx
37
+ <Button color="primary">Submit</Button>
38
+ <Button color="error">Delete</Button>
39
+ <Alert color="warning">Watch out</Alert>
40
+ <Badge color="success">Active</Badge>
41
+ ```
42
+
43
+ Under the hood, `color="primary"` sets a single CSS variable `--_c`. Every slot utility (`bg-slot`, `text-slot`, `border-slot-30`, `bg-slot-10`) derives from it automatically. Add a new color to your theme → every component supports it instantly.
44
+
45
+ ### Tailwind CSS v4 Native
46
+
47
+ Not "works with Tailwind" — **built on v4's architecture**:
48
+
49
+ - `@theme` block defines all tokens as CSS custom properties
50
+ - `@source` auto-scans compiled components — no manual safelist
51
+ - `@custom-variant dark` — dark mode via `.dark` class on `<html>`
52
+ - `@utility` defines the slot color system as real Tailwind utilities
53
+ - When Tailwind ships new features, you get them. No wrapper layer in the way.
54
+
55
+ ### Per-Component Imports
56
+
57
+ Every component is its own entry point. Import what you use, ship only what you use:
58
+
59
+ ```tsx
60
+ import Button from '@mdigital_ui/ui/button' // just Button
61
+ import Table from '@mdigital_ui/ui/table' // just Table
62
+ import { useTheme } from '@mdigital_ui/ui/theme' // just the hook
63
+ ```
64
+
65
+ ---
4
66
 
5
- ## Install
67
+ ## Quick Start
6
68
 
7
69
  ```bash
8
70
  npm install @mdigital_ui/ui
9
71
  ```
10
72
 
11
- Peer deps: `react`, `react-dom`, `lucide-react`, `tailwindcss` (v4+)
73
+ > **Peer deps:** `react` ≥18, `react-dom` ≥18, `lucide-react` ≥0.400, `tailwindcss` ≥4.0
12
74
 
13
- ## Setup
75
+ ### CSS Setup
14
76
 
15
- Your project needs Tailwind CSS v4 with either `@tailwindcss/vite` or `@tailwindcss/postcss`.
16
-
17
- In your CSS entry point:
77
+ Your project needs Tailwind CSS v4 with `@tailwindcss/vite` or `@tailwindcss/postcss`.
18
78
 
19
79
  ```css
20
80
  @import "tailwindcss";
21
81
  @import "@mdigital_ui/ui/styles/global.css";
22
82
  ```
23
83
 
24
- That's it. Our CSS provides:
25
- - `@theme` — all design tokens as CSS variables (override in `:root`)
26
- - `@source "../dist"` — Tailwind auto-scans our compiled components for class names
27
- - `@custom-variant dark` — dark mode via `.dark` class
28
- - `@utility` — slot-based color system, stroke utilities
29
- - Component-specific styles (datepicker, animations)
30
-
31
- Your Tailwind build processes everything. When Tailwind ships new utilities or features, you get them immediately.
84
+ That's it. One import. Tokens, dark mode, utilities, component styles — all included.
32
85
 
33
- ## Usage
86
+ ### Use It
34
87
 
35
88
  ```tsx
36
89
  import Button from '@mdigital_ui/ui/button'
37
90
  import Input from '@mdigital_ui/ui/input'
38
- import { Card, CardHeader, CardTitle, CardContent } from '@mdigital_ui/ui/card'
91
+ import Select from '@mdigital_ui/ui/select'
92
+
93
+ function App() {
94
+ return (
95
+ <div className="flex gap-3">
96
+ <Input placeholder="Search..." />
97
+ <Select options={[{ label: 'React', value: 'react' }]} />
98
+ <Button color="primary">Go</Button>
99
+ </div>
100
+ )
101
+ }
39
102
  ```
40
103
 
41
- Barrel import also works:
42
-
43
- ```tsx
44
- import { Button, Input, Card } from '@mdigital_ui/ui'
45
- ```
104
+ ---
46
105
 
47
106
  ## Dark Mode
48
107
 
49
- Toggle `.dark` class on `<html>`:
50
-
51
108
  ```tsx
52
109
  import { ThemeProvider, useTheme } from '@mdigital_ui/ui/theme'
53
110
 
@@ -55,258 +112,254 @@ import { ThemeProvider, useTheme } from '@mdigital_ui/ui/theme'
55
112
  <App />
56
113
  </ThemeProvider>
57
114
 
58
- // anywhere:
59
- const { theme, setTheme, resolvedTheme } = useTheme()
115
+ // Toggle anywhere:
116
+ const { setTheme } = useTheme()
60
117
  setTheme('dark') // 'light' | 'dark' | 'system'
61
118
  ```
62
119
 
63
120
  SSR flash prevention — add to `<head>`:
64
121
 
65
122
  ```tsx
66
- import { themeScript } from '@mdigital_ui/ui/theme'
123
+ import { getThemeScript } from '@mdigital_ui/ui/theme'
67
124
 
68
- <script dangerouslySetInnerHTML={{ __html: themeScript }} />
125
+ <script dangerouslySetInnerHTML={{ __html: getThemeScript() }} />
69
126
  ```
70
127
 
71
- All components use CSS custom properties. Dark mode swaps values at `:root` level. No `dark:` prefixes needed.
128
+ All components use CSS custom properties. Dark mode swaps values at `:root`. Zero `dark:` prefixes in component code.
72
129
 
73
130
  ## Theme Presets
74
131
 
75
- ```tsx
76
- import '@mdigital_ui/ui/styles/global.css'
77
- import '@mdigital_ui/ui/styles/themes/presets/corporate.css'
132
+ ```css
133
+ @import "@mdigital_ui/ui/styles/global.css";
134
+ @import "@mdigital_ui/ui/styles/themes/presets/corporate.css";
78
135
  ```
79
136
 
80
137
  ```html
81
138
  <html data-theme="corporate" class="dark">
82
139
  ```
83
140
 
84
- Presets: `corporate`, `vibrant`, `minimal`. Independent of dark/light — combine freely.
141
+ Available: `corporate`, `vibrant`, `minimal`. Mix with dark/light freely.
85
142
 
86
143
  ## Custom Tokens
87
144
 
88
- All tokens live in one `@theme` block. Override after our import:
145
+ Override after our import:
89
146
 
90
147
  ```css
91
148
  :root {
92
149
  --color-primary: oklch(0.55 0.22 270);
93
150
  --color-primary-hover: oklch(0.50 0.24 270);
94
151
  --color-primary-foreground: oklch(1 0 0);
95
-
96
152
  --color-background: oklch(0.98 0 0);
97
- --color-surface: oklch(0.95 0 0);
98
- --color-border: oklch(0.90 0 0);
99
- --color-text-primary: oklch(0.15 0 0);
100
- --color-text-secondary: oklch(0.45 0 0);
101
-
102
- --button-height-md: 2.5rem;
103
- --input-height-md: 2.5rem;
104
153
  --font-sans: 'Inter', system-ui, sans-serif;
154
+ --button-height-md: 2.5rem;
105
155
  }
106
156
  ```
107
157
 
108
- Full token list in [CSS Variables](#css-variables).
158
+ Every token is a CSS variable. Change one, it propagates everywhere.
109
159
 
110
- ## Common Props
160
+ ---
111
161
 
112
- ### color
162
+ ## Common API
163
+
164
+ ### `color`
113
165
 
114
166
  ```
115
167
  'default' | 'primary' | 'secondary' | 'accent' | 'success' | 'error' | 'warning' | 'info'
116
168
  ```
117
169
 
118
- ### size
170
+ ### `size`
119
171
 
120
172
  ```
121
173
  'xs' | 'sm' | 'md' | 'lg'
122
174
  ```
123
175
 
124
- ### variant
176
+ ### `variant`
125
177
 
126
- Per-component. Examples:
127
- - Button: `solid`, `outline`, `soft`, `dashed`, `link`, `ghost`
128
- - Card: `default`, `solid`, `outline`, `soft`, `ghost`, `elevated`
129
- - Input: `outline`, `filled`
130
- - Badge/Tag: `default`, `solid`, `outline`, `soft`
178
+ Per-component:
179
+ - **Button:** `solid` `outline` `soft` `dashed` `link` `ghost`
180
+ - **Card:** `default` `solid` `outline` `soft` `ghost` `elevated`
181
+ - **Checkbox / Toggle:** `solid` `outline` `soft`
182
+ - **Input:** `outline` `filled`
183
+ - **Badge / Tag:** `default` `solid` `outline` `soft`
131
184
 
132
185
  ### Validation
133
186
 
134
- Form components accept validation as string (message) or boolean:
135
-
136
187
  ```tsx
137
188
  <Input error="Required field" />
138
189
  <Input warning="Weak password" />
139
190
  <Input success />
140
191
  ```
141
192
 
142
- ## Styling
193
+ ### Styling Escape Hatches
143
194
 
144
- ### className
195
+ ```tsx
196
+ // Root element
197
+ <Button className="shadow-lg">Submit</Button>
145
198
 
146
- Root element:
199
+ // Internal parts
200
+ <Input classNames={{ root: 'mb-4', label: 'font-bold', input: 'tracking-wide' }} />
147
201
 
148
- ```tsx
149
- <Button className="shadow-lg mt-4">Submit</Button>
202
+ // CSS selectors — every part has a semantic class + data-slot
203
+ .input_label { font-weight: 700; }
204
+ [data-slot="trigger"] { min-width: 200px; }
150
205
  ```
151
206
 
152
- ### classNames
207
+ ---
153
208
 
154
- Target internal parts:
209
+ ## All 76 Components
155
210
 
156
- ```tsx
157
- <Input
158
- classNames={{
159
- root: 'mb-4',
160
- label: 'font-bold',
161
- input: 'tracking-wide',
162
- helper: 'italic',
163
- }}
164
- />
165
- ```
211
+ <details>
212
+ <summary><b>Data Entry (27)</b></summary>
213
+
214
+ | Component | Import |
215
+ |-----------|--------|
216
+ | Input | `@mdigital_ui/ui/input` |
217
+ | FloatInput | `@mdigital_ui/ui/float-input` |
218
+ | InputPassword | `@mdigital_ui/ui/input-password` |
219
+ | InputOTP | `@mdigital_ui/ui/input-otp` |
220
+ | InputGroup | `@mdigital_ui/ui/input-group` |
221
+ | NumberInput | `@mdigital_ui/ui/number-input` |
222
+ | Textarea | `@mdigital_ui/ui/textarea` |
223
+ | Select | `@mdigital_ui/ui/select` |
224
+ | MultiSelect | `@mdigital_ui/ui/multi-select` |
225
+ | Cascader | `@mdigital_ui/ui/cascader` |
226
+ | TreeSelect | `@mdigital_ui/ui/tree-select` |
227
+ | DatePicker | `@mdigital_ui/ui/date-picker` |
228
+ | ColorPicker | `@mdigital_ui/ui/color-picker` |
229
+ | Autocomplete | `@mdigital_ui/ui/autocomplete` |
230
+ | Mentions | `@mdigital_ui/ui/mentions` |
231
+ | Checkbox | `@mdigital_ui/ui/checkbox` |
232
+ | CheckboxGroup | `@mdigital_ui/ui/checkbox-group` |
233
+ | Radio | `@mdigital_ui/ui/radio` |
234
+ | RadioGroup | `@mdigital_ui/ui/radio-group` |
235
+ | Switch | `@mdigital_ui/ui/switch` |
236
+ | Slider | `@mdigital_ui/ui/slider` |
237
+ | Rating | `@mdigital_ui/ui/rating` |
238
+ | Toggle | `@mdigital_ui/ui/toggle` |
239
+ | ToggleGroup | `@mdigital_ui/ui/toggle-group` |
240
+ | Upload | `@mdigital_ui/ui/upload` |
241
+ | Clipboard | `@mdigital_ui/ui/clipboard` |
242
+ | TagsInput | `@mdigital_ui/ui/tags-input` |
166
243
 
167
- ### CSS selectors
244
+ </details>
168
245
 
169
- Every part gets a semantic class and `data-slot`:
246
+ <details>
247
+ <summary><b>Layout (9)</b></summary>
248
+
249
+ | Component | Import |
250
+ |-----------|--------|
251
+ | Button | `@mdigital_ui/ui/button` |
252
+ | ButtonGroup | `@mdigital_ui/ui/button-group` |
253
+ | Card | `@mdigital_ui/ui/card` |
254
+ | Grid | `@mdigital_ui/ui/grid` |
255
+ | Divider | `@mdigital_ui/ui/divider` |
256
+ | Collapse | `@mdigital_ui/ui/collapse` |
257
+ | Accordion | `@mdigital_ui/ui/accordion` |
258
+ | ScrollArea | `@mdigital_ui/ui/scroll-area` |
259
+ | Resizable | `@mdigital_ui/ui/resizable` |
170
260
 
171
- ```css
172
- .button_root { border-radius: 12px; }
173
- .input_label { font-weight: 700; }
174
- [data-slot="trigger"] { min-width: 200px; }
175
- ```
261
+ </details>
262
+
263
+ <details>
264
+ <summary><b>Navigation (12)</b></summary>
265
+
266
+ | Component | Import |
267
+ |-----------|--------|
268
+ | Tabs | `@mdigital_ui/ui/tabs` |
269
+ | Breadcrumbs | `@mdigital_ui/ui/breadcrumbs` |
270
+ | Pagination | `@mdigital_ui/ui/pagination` |
271
+ | Stepper | `@mdigital_ui/ui/stepper` |
272
+ | Dropdown | `@mdigital_ui/ui/dropdown` |
273
+ | ContextMenu | `@mdigital_ui/ui/context-menu` |
274
+ | Menubar | `@mdigital_ui/ui/menubar` |
275
+ | NavigationMenu | `@mdigital_ui/ui/navigation-menu` |
276
+ | Command | `@mdigital_ui/ui/command` |
277
+ | Anchor | `@mdigital_ui/ui/anchor` |
278
+ | Link | `@mdigital_ui/ui/link` |
279
+ | FloatButton | `@mdigital_ui/ui/float-button` |
176
280
 
177
- ## Components
178
-
179
- ### Inputs
180
-
181
- | Component | Path |
182
- |-----------|------|
183
- | Input | `input` |
184
- | FloatInput | `float-input` |
185
- | InputPassword | `input-password` |
186
- | InputOTP | `input-otp` |
187
- | InputGroup | `input-group` |
188
- | NumberInput | `number-input` |
189
- | Textarea | `textarea` |
190
- | Select | `select` |
191
- | MultiSelect | `multi-select` |
192
- | Cascader | `cascader` |
193
- | TreeSelect | `tree-select` |
194
- | DatePicker | `date-picker` |
195
- | ColorPicker | `color-picker` |
196
- | Autocomplete | `autocomplete` |
197
- | Mentions | `mentions` |
198
- | Checkbox | `checkbox` |
199
- | CheckboxGroup | `checkbox-group` |
200
- | Radio | `radio` |
201
- | RadioGroup | `radio-group` |
202
- | Switch | `switch` |
203
- | Slider | `slider` |
204
- | Rating | `rating` |
205
- | Toggle | `toggle` |
206
- | ToggleGroup | `toggle-group` |
207
- | Upload | `upload` |
208
- | Clipboard | `clipboard` |
209
- | TagsInput | `tags-input` |
210
-
211
- ### Layout
212
-
213
- | Component | Path |
214
- |-----------|------|
215
- | Button | `button` |
216
- | ButtonGroup | `button-group` |
217
- | Card | `card` |
218
- | Grid | `grid` |
219
- | Divider | `divider` |
220
- | Collapse | `collapse` |
221
- | Accordion | `accordion` |
222
- | ScrollArea | `scroll-area` |
223
- | Resizable | `resizable` |
224
-
225
- ### Navigation
226
-
227
- | Component | Path |
228
- |-----------|------|
229
- | Tabs | `tabs` |
230
- | Breadcrumbs | `breadcrumbs` |
231
- | Pagination | `pagination` |
232
- | Stepper | `stepper` |
233
- | Dropdown | `dropdown` |
234
- | ContextMenu | `context-menu` |
235
- | Menubar | `menubar` |
236
- | NavigationMenu | `navigation-menu` |
237
- | Command | `command` |
238
- | Anchor | `anchor` |
239
- | Link | `link` |
240
- | FloatButton | `float-button` |
241
-
242
- ### Overlays
243
-
244
- | Component | Path |
245
- |-----------|------|
246
- | Modal | `modal` |
247
- | Drawer | `drawer` |
248
- | Tooltip | `tooltip` |
249
- | Popover | `popover` |
250
- | Tour | `tour` |
251
-
252
- ### Feedback
253
-
254
- | Component | Path |
255
- |-----------|------|
256
- | Notification | `notification` |
257
- | Alert | `alert` |
258
- | Toast | `toast` |
259
- | Progress | `progress` |
260
- | Spinner | `spinner` |
261
- | Skeleton | `skeleton` |
262
- | Result | `result` |
263
- | FetchingOverlay | `fetching-overlay` |
264
-
265
- ### Data
266
-
267
- | Component | Path |
268
- |-----------|------|
269
- | Table | `table` |
270
- | Tree | `tree` |
271
- | Calendar | `calendar` |
272
- | Descriptions | `descriptions` |
273
- | Timeline | `timeline` |
274
- | Transfer | `transfer` |
275
- | Carousel | `carousel` |
276
- | Image | `image` |
277
- | QRCode | `qr-code` |
278
-
279
- ### Display
280
-
281
- | Component | Path |
282
- |-----------|------|
283
- | Badge | `badge` |
284
- | Tag | `tag` |
285
- | Avatar | `avatar` |
286
- | Kbd | `kbd` |
287
- | Typography | `typography` |
288
- | Watermark | `watermark` |
289
-
290
- ### Theme
291
-
292
- | Export | Path |
293
- |--------|------|
294
- | ThemeProvider, useTheme, themeScript | `theme` |
295
-
296
- ### Hooks
297
-
298
- | Hook | Path |
299
- |------|------|
300
- | useControllable | `hooks/useControllable` |
301
- | useDebounce | `hooks/useDebounce` |
302
- | useThrottle | `hooks/useThrottle` |
303
- | useMediaQuery | `hooks/useMediaQuery` |
304
- | useRipple | `hooks/useRipple` |
305
-
306
- ## CSS Variables
281
+ </details>
307
282
 
308
283
  <details>
309
- <summary>Colors</summary>
284
+ <summary><b>Overlays (5)</b></summary>
285
+
286
+ | Component | Import |
287
+ |-----------|--------|
288
+ | Modal | `@mdigital_ui/ui/modal` |
289
+ | Drawer | `@mdigital_ui/ui/drawer` |
290
+ | Tooltip | `@mdigital_ui/ui/tooltip` |
291
+ | Popover | `@mdigital_ui/ui/popover` |
292
+ | Tour | `@mdigital_ui/ui/tour` |
293
+
294
+ </details>
295
+
296
+ <details>
297
+ <summary><b>Feedback (8)</b></summary>
298
+
299
+ | Component | Import |
300
+ |-----------|--------|
301
+ | Notification | `@mdigital_ui/ui/notification` |
302
+ | Alert | `@mdigital_ui/ui/alert` |
303
+ | Toast | `@mdigital_ui/ui/toast` |
304
+ | Progress | `@mdigital_ui/ui/progress` |
305
+ | Spinner | `@mdigital_ui/ui/spinner` |
306
+ | Skeleton | `@mdigital_ui/ui/skeleton` |
307
+ | Result | `@mdigital_ui/ui/result` |
308
+ | FetchingOverlay | `@mdigital_ui/ui/fetching-overlay` |
309
+
310
+ </details>
311
+
312
+ <details>
313
+ <summary><b>Data Display (9)</b></summary>
314
+
315
+ | Component | Import |
316
+ |-----------|--------|
317
+ | Table | `@mdigital_ui/ui/table` |
318
+ | Tree | `@mdigital_ui/ui/tree` |
319
+ | Calendar | `@mdigital_ui/ui/calendar` |
320
+ | Descriptions | `@mdigital_ui/ui/descriptions` |
321
+ | Timeline | `@mdigital_ui/ui/timeline` |
322
+ | Transfer | `@mdigital_ui/ui/transfer` |
323
+ | Carousel | `@mdigital_ui/ui/carousel` |
324
+ | Image | `@mdigital_ui/ui/image` |
325
+ | QRCode | `@mdigital_ui/ui/qr-code` |
326
+
327
+ </details>
328
+
329
+ <details>
330
+ <summary><b>General (6)</b></summary>
331
+
332
+ | Component | Import |
333
+ |-----------|--------|
334
+ | Badge | `@mdigital_ui/ui/badge` |
335
+ | Tag | `@mdigital_ui/ui/tag` |
336
+ | Avatar | `@mdigital_ui/ui/avatar` |
337
+ | Kbd | `@mdigital_ui/ui/kbd` |
338
+ | Typography | `@mdigital_ui/ui/typography` |
339
+ | Watermark | `@mdigital_ui/ui/watermark` |
340
+
341
+ </details>
342
+
343
+ <details>
344
+ <summary><b>Theme & Hooks</b></summary>
345
+
346
+ | Export | Import |
347
+ |--------|--------|
348
+ | ThemeProvider, useTheme, getThemeScript | `@mdigital_ui/ui/theme` |
349
+ | useControllable | `@mdigital_ui/ui/hooks/useControllable` |
350
+ | useDebounce | `@mdigital_ui/ui/hooks/useDebounce` |
351
+ | useThrottle | `@mdigital_ui/ui/hooks/useThrottle` |
352
+ | useMediaQuery | `@mdigital_ui/ui/hooks/useMediaQuery` |
353
+ | useRipple | `@mdigital_ui/ui/hooks/useRipple` |
354
+
355
+ </details>
356
+
357
+ ---
358
+
359
+ ## CSS Variables Reference
360
+
361
+ <details>
362
+ <summary><b>Colors</b></summary>
310
363
 
311
364
  ```
312
365
  --color-primary / -hover / -active / -foreground
@@ -322,10 +375,7 @@ Every part gets a semantic class and `data-slot`:
322
375
  --color-card / -foreground
323
376
  --color-border / -primary / -hover / -focus
324
377
 
325
- --color-text-primary
326
- --color-text-secondary
327
- --color-text-muted
328
- --color-text-disabled
378
+ --color-text-primary / -secondary / -muted / -disabled
329
379
 
330
380
  --color-input-bg / -text / -placeholder / -border / -border-focus / -border-error
331
381
  --color-focus / -ring
@@ -336,61 +386,43 @@ Every part gets a semantic class and `data-slot`:
336
386
  </details>
337
387
 
338
388
  <details>
339
- <summary>Sizing</summary>
389
+ <summary><b>Sizing</b></summary>
340
390
 
341
391
  ```
342
- --size-xs / -sm / -md / -lg (shared base heights)
343
-
344
- --button-height-xs/sm/md/lg
345
- --button-padding-x-xs/sm/md/lg
346
-
347
- --input-height-xs/sm/md/lg
348
- --input-padding-x-xs/sm/md/lg
349
-
350
- --select-height-xs/sm/md/lg
351
- --select-padding-x-xs/sm/md/lg
352
-
353
- --toggle-height-xs/sm/md/lg
354
- --toggle-padding-x-xs/sm/md/lg
355
-
392
+ --button-height-xs/sm/md/lg --button-padding-x-xs/sm/md/lg
393
+ --input-height-xs/sm/md/lg --input-padding-x-xs/sm/md/lg
394
+ --select-height-xs/sm/md/lg --select-padding-x-xs/sm/md/lg
395
+ --toggle-height-xs/sm/md/lg --toggle-padding-x-xs/sm/md/lg
356
396
  --textarea-min-height-xs/sm/md/lg
357
- --textarea-padding-xs/sm/md/lg
358
-
359
397
  --checkbox-size-xs/sm/md/lg
360
- --switch-width-xs/sm/md/lg
361
- --switch-height-xs/sm/md/lg
398
+ --switch-width-xs/sm/md/lg --switch-height-xs/sm/md/lg
362
399
  --otp-size-xs/sm/md/lg
363
-
364
400
  --accordion-padding-x-xs/sm/md/lg
365
- --accordion-padding-y-xs/sm/md/lg
366
401
  ```
367
402
 
368
403
  </details>
369
404
 
370
405
  <details>
371
- <summary>Effects & Layout</summary>
406
+ <summary><b>Effects & Z-Index</b></summary>
372
407
 
373
408
  ```
374
409
  --shadow-sm / -md / -lg / -xl / -2xl
375
- --overlay-stripe
376
-
377
- --z-dropdown (1000)
378
- --z-sticky (1020)
379
- --z-modal (1040)
380
- --z-popover (1050)
381
- --z-tooltip (1060)
382
- --z-overlay (1070)
410
+
411
+ --z-dropdown (1000) --z-sticky (1020)
412
+ --z-modal (1040) --z-popover (1050)
413
+ --z-tooltip (1060) --z-overlay (1070)
383
414
  ```
384
415
 
385
416
  </details>
386
417
 
418
+ ---
419
+
387
420
  ## TypeScript
388
421
 
389
- All props and types exported:
422
+ Full type coverage. Every prop, variant, and callback is typed:
390
423
 
391
424
  ```tsx
392
- import type { ButtonProps, InputProps, SelectProps } from '@mdigital_ui/ui'
393
- import type { TableProps, ModalClassNames, CardVariant } from '@mdigital_ui/ui'
425
+ import type { ButtonProps, SelectOption, TableColumn } from '@mdigital_ui/ui'
394
426
  ```
395
427
 
396
428
  ## Browser Support
@@ -399,4 +431,4 @@ Chrome, Firefox, Safari, Edge — last 2 versions.
399
431
 
400
432
  ## License
401
433
 
402
- MIT
434
+ [MIT](./LICENSE)
package/dist/alert/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/alert/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAmCzC,QAAA,MAAM,KAAK,wCA6FV,CAAA;AAID,mBAAmB,SAAS,CAAA;AAC5B,eAAe,KAAK,CAAA"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/alert/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AA4BzC,QAAA,MAAM,KAAK,wCA2FV,CAAA;AAID,mBAAmB,SAAS,CAAA;AAC5B,eAAe,KAAK,CAAA"}
package/dist/alert/index.js CHANGED
@@ -1,4 +1,4 @@
1
- export { alert_default as default } from '../chunk-C65SCJD6.js';
1
+ export { alert_default as default } from '../chunk-SK6YMTMA.js';
2
2
  import '../chunk-G6QIIWKU.js';
3
3
  import '../chunk-RAS6HUEI.js';
4
4
  //# sourceMappingURL=index.js.map
package/dist/autocomplete/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/autocomplete/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,OAAO,KAAK,EAAsB,iBAAiB,EAAE,MAAM,SAAS,CAAA;AA0CpE,QAAA,MAAM,YAAY,+CAqQjB,CAAA;AAID,mBAAmB,SAAS,CAAA;AAC5B,eAAe,YAAY,CAAA"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/autocomplete/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,OAAO,KAAK,EAAsB,iBAAiB,EAAE,MAAM,SAAS,CAAA;AA0CpE,QAAA,MAAM,YAAY,+CAkQjB,CAAA;AAID,mBAAmB,SAAS,CAAA;AAC5B,eAAe,YAAY,CAAA"}
package/dist/autocomplete/index.js CHANGED
@@ -1,5 +1,6 @@
1
- export { autocomplete_default as default } from '../chunk-JWYBDNC6.js';
2
- import '../chunk-ROQGBDET.js';
1
+ export { autocomplete_default as default } from '../chunk-KTK7LSKX.js';
2
+ import '../chunk-CB7YOZWV.js';
3
+ import '../chunk-6XXAZ6P2.js';
3
4
  import '../chunk-G6QIIWKU.js';
4
5
  import '../chunk-RAS6HUEI.js';
5
6
  //# sourceMappingURL=index.js.map