no-frills-ui 0.0.14-alpha.1 → 0.0.14-alpha.11

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 (222) hide show
  1. package/README.md +28 -22
  2. package/dist/index.js +3418 -2772
  3. package/dist/index.js.map +1 -1
  4. package/lib-esm/components/Accordion/Accordion.d.ts +11 -16
  5. package/lib-esm/components/Accordion/Accordion.js +25 -29
  6. package/lib-esm/components/Accordion/Accordion.js.map +1 -1
  7. package/lib-esm/components/Accordion/AccordionStep.d.ts +22 -22
  8. package/lib-esm/components/Accordion/AccordionStep.js +111 -109
  9. package/lib-esm/components/Accordion/AccordionStep.js.map +1 -1
  10. package/lib-esm/components/Badge/Badge.d.ts +13 -16
  11. package/lib-esm/components/Badge/Badge.js +31 -51
  12. package/lib-esm/components/Badge/Badge.js.map +1 -1
  13. package/lib-esm/components/Button/ActionButton.d.ts +9 -5
  14. package/lib-esm/components/Button/ActionButton.js +18 -38
  15. package/lib-esm/components/Button/ActionButton.js.map +1 -1
  16. package/lib-esm/components/Button/Button.d.ts +9 -5
  17. package/lib-esm/components/Button/Button.js +18 -40
  18. package/lib-esm/components/Button/Button.js.map +1 -1
  19. package/lib-esm/components/Button/IconButton.d.ts +9 -5
  20. package/lib-esm/components/Button/IconButton.js +18 -42
  21. package/lib-esm/components/Button/IconButton.js.map +1 -1
  22. package/lib-esm/components/Button/LinkButton.d.ts +9 -5
  23. package/lib-esm/components/Button/LinkButton.js +18 -32
  24. package/lib-esm/components/Button/LinkButton.js.map +1 -1
  25. package/lib-esm/components/Button/RaisedButton.d.ts +9 -5
  26. package/lib-esm/components/Button/RaisedButton.js +18 -46
  27. package/lib-esm/components/Button/RaisedButton.js.map +1 -1
  28. package/lib-esm/components/Card/Card.d.ts +4 -6
  29. package/lib-esm/components/Card/Card.js +18 -13
  30. package/lib-esm/components/Card/Card.js.map +1 -1
  31. package/lib-esm/components/Chip/Chip.d.ts +6 -3
  32. package/lib-esm/components/Chip/Chip.js +44 -43
  33. package/lib-esm/components/Chip/Chip.js.map +1 -1
  34. package/lib-esm/components/ChipInput/ChipInput.d.ts +28 -30
  35. package/lib-esm/components/ChipInput/ChipInput.js +121 -139
  36. package/lib-esm/components/ChipInput/ChipInput.js.map +1 -1
  37. package/lib-esm/components/Dialog/AlertDialog.d.ts +11 -12
  38. package/lib-esm/components/Dialog/AlertDialog.js +44 -28
  39. package/lib-esm/components/Dialog/AlertDialog.js.map +1 -1
  40. package/lib-esm/components/Dialog/ConfirmDialog.d.ts +13 -14
  41. package/lib-esm/components/Dialog/ConfirmDialog.js +49 -33
  42. package/lib-esm/components/Dialog/ConfirmDialog.js.map +1 -1
  43. package/lib-esm/components/Dialog/Dialog.d.ts +40 -18
  44. package/lib-esm/components/Dialog/Dialog.js +125 -70
  45. package/lib-esm/components/Dialog/Dialog.js.map +1 -1
  46. package/lib-esm/components/Dialog/PromptDialog.d.ts +18 -19
  47. package/lib-esm/components/Dialog/PromptDialog.js +78 -49
  48. package/lib-esm/components/Dialog/PromptDialog.js.map +1 -1
  49. package/lib-esm/components/DragAndDrop/DragAndDrop.d.ts +43 -41
  50. package/lib-esm/components/DragAndDrop/DragAndDrop.js +104 -31
  51. package/lib-esm/components/DragAndDrop/DragAndDrop.js.map +1 -1
  52. package/lib-esm/components/DragAndDrop/DragItem.d.ts +5 -1
  53. package/lib-esm/components/DragAndDrop/DragItem.js +171 -92
  54. package/lib-esm/components/DragAndDrop/DragItem.js.map +1 -1
  55. package/lib-esm/components/DragAndDrop/types.d.ts +22 -3
  56. package/lib-esm/components/DragAndDrop/types.js +9 -6
  57. package/lib-esm/components/DragAndDrop/types.js.map +1 -1
  58. package/lib-esm/components/Drawer/Drawer.d.ts +86 -22
  59. package/lib-esm/components/Drawer/Drawer.js +176 -97
  60. package/lib-esm/components/Drawer/Drawer.js.map +1 -1
  61. package/lib-esm/components/Drawer/index.d.ts +1 -1
  62. package/lib-esm/components/Groups/Group.d.ts +5 -8
  63. package/lib-esm/components/Groups/Group.js +34 -79
  64. package/lib-esm/components/Groups/Group.js.map +1 -1
  65. package/lib-esm/components/Groups/GroupLabel.js +8 -17
  66. package/lib-esm/components/Groups/GroupLabel.js.map +1 -1
  67. package/lib-esm/components/Input/Checkbox.d.ts +12 -15
  68. package/lib-esm/components/Input/Checkbox.js +51 -118
  69. package/lib-esm/components/Input/Checkbox.js.map +1 -1
  70. package/lib-esm/components/Input/Dropdown.d.ts +11 -12
  71. package/lib-esm/components/Input/Dropdown.js +133 -52
  72. package/lib-esm/components/Input/Dropdown.js.map +1 -1
  73. package/lib-esm/components/Input/Input.d.ts +3 -3
  74. package/lib-esm/components/Input/Input.js +61 -109
  75. package/lib-esm/components/Input/Input.js.map +1 -1
  76. package/lib-esm/components/Input/Radio.d.ts +4 -8
  77. package/lib-esm/components/Input/Radio.js +35 -79
  78. package/lib-esm/components/Input/Radio.js.map +1 -1
  79. package/lib-esm/components/Input/RadioButton.d.ts +4 -8
  80. package/lib-esm/components/Input/RadioButton.js +34 -71
  81. package/lib-esm/components/Input/RadioButton.js.map +1 -1
  82. package/lib-esm/components/Input/Select.d.ts +6 -13
  83. package/lib-esm/components/Input/Select.js +75 -122
  84. package/lib-esm/components/Input/Select.js.map +1 -1
  85. package/lib-esm/components/Input/TextArea.d.ts +6 -13
  86. package/lib-esm/components/Input/TextArea.js +64 -108
  87. package/lib-esm/components/Input/TextArea.js.map +1 -1
  88. package/lib-esm/components/Input/Toggle.d.ts +4 -9
  89. package/lib-esm/components/Input/Toggle.js +31 -80
  90. package/lib-esm/components/Input/Toggle.js.map +1 -1
  91. package/lib-esm/components/Menu/Menu.d.ts +8 -6
  92. package/lib-esm/components/Menu/Menu.js +116 -31
  93. package/lib-esm/components/Menu/Menu.js.map +1 -1
  94. package/lib-esm/components/Menu/MenuContext.d.ts +11 -5
  95. package/lib-esm/components/Menu/MenuContext.js +6 -2
  96. package/lib-esm/components/Menu/MenuContext.js.map +1 -1
  97. package/lib-esm/components/Menu/MenuItem.d.ts +7 -4
  98. package/lib-esm/components/Menu/MenuItem.js +46 -47
  99. package/lib-esm/components/Menu/MenuItem.js.map +1 -1
  100. package/lib-esm/components/Modal/Modal.d.ts +75 -16
  101. package/lib-esm/components/Modal/Modal.js +146 -51
  102. package/lib-esm/components/Modal/Modal.js.map +1 -1
  103. package/lib-esm/components/Notification/Notification.d.ts +46 -39
  104. package/lib-esm/components/Notification/Notification.js +80 -87
  105. package/lib-esm/components/Notification/Notification.js.map +1 -1
  106. package/lib-esm/components/Notification/NotificationManager.d.ts +19 -5
  107. package/lib-esm/components/Notification/NotificationManager.js +177 -79
  108. package/lib-esm/components/Notification/NotificationManager.js.map +1 -1
  109. package/lib-esm/components/Notification/style.d.ts +6 -3
  110. package/lib-esm/components/Notification/style.js +64 -140
  111. package/lib-esm/components/Notification/style.js.map +1 -1
  112. package/lib-esm/components/Notification/types.d.ts +2 -0
  113. package/lib-esm/components/Notification/types.js +9 -10
  114. package/lib-esm/components/Notification/types.js.map +1 -1
  115. package/lib-esm/components/Popover/Popover.d.ts +21 -20
  116. package/lib-esm/components/Popover/Popover.js +159 -126
  117. package/lib-esm/components/Popover/Popover.js.map +1 -1
  118. package/lib-esm/components/Spinner/Spinner.d.ts +14 -12
  119. package/lib-esm/components/Spinner/Spinner.js +22 -27
  120. package/lib-esm/components/Spinner/Spinner.js.map +1 -1
  121. package/lib-esm/components/Stepper/Step.d.ts +15 -12
  122. package/lib-esm/components/Stepper/Step.js +18 -25
  123. package/lib-esm/components/Stepper/Step.js.map +1 -1
  124. package/lib-esm/components/Stepper/Stepper.d.ts +11 -17
  125. package/lib-esm/components/Stepper/Stepper.js +104 -102
  126. package/lib-esm/components/Stepper/Stepper.js.map +1 -1
  127. package/lib-esm/components/Tabs/Tab.d.ts +10 -16
  128. package/lib-esm/components/Tabs/Tab.js +9 -15
  129. package/lib-esm/components/Tabs/Tab.js.map +1 -1
  130. package/lib-esm/components/Tabs/Tabs.d.ts +11 -22
  131. package/lib-esm/components/Tabs/Tabs.js +96 -55
  132. package/lib-esm/components/Tabs/Tabs.js.map +1 -1
  133. package/lib-esm/components/Toast/Toast.d.ts +34 -7
  134. package/lib-esm/components/Toast/Toast.js +200 -109
  135. package/lib-esm/components/Toast/Toast.js.map +1 -1
  136. package/lib-esm/components/Toast/ToastStory.d.ts +21 -24
  137. package/lib-esm/components/Tooltip/Tooltip.d.ts +11 -14
  138. package/lib-esm/components/Tooltip/Tooltip.js +52 -67
  139. package/lib-esm/components/Tooltip/Tooltip.js.map +1 -1
  140. package/lib-esm/components/index.d.ts +1 -0
  141. package/lib-esm/icons/CheckCircle.d.ts +1 -1
  142. package/lib-esm/icons/CheckCircle.js +22 -4
  143. package/lib-esm/icons/CheckCircle.js.map +1 -1
  144. package/lib-esm/icons/Close.d.ts +1 -1
  145. package/lib-esm/icons/Close.js +22 -4
  146. package/lib-esm/icons/Close.js.map +1 -1
  147. package/lib-esm/icons/DragIndicator.d.ts +1 -1
  148. package/lib-esm/icons/DragIndicator.js +22 -4
  149. package/lib-esm/icons/DragIndicator.js.map +1 -1
  150. package/lib-esm/icons/ErrorOutline.d.ts +1 -1
  151. package/lib-esm/icons/ErrorOutline.js +16 -4
  152. package/lib-esm/icons/ErrorOutline.js.map +1 -1
  153. package/lib-esm/icons/ExpandMore.d.ts +1 -1
  154. package/lib-esm/icons/ExpandMore.js +22 -4
  155. package/lib-esm/icons/ExpandMore.js.map +1 -1
  156. package/lib-esm/icons/FiberManualRecord.d.ts +1 -1
  157. package/lib-esm/icons/FiberManualRecord.js +24 -4
  158. package/lib-esm/icons/FiberManualRecord.js.map +1 -1
  159. package/lib-esm/icons/Info.d.ts +1 -1
  160. package/lib-esm/icons/Info.js +22 -4
  161. package/lib-esm/icons/Info.js.map +1 -1
  162. package/lib-esm/icons/ReportProblem.d.ts +1 -1
  163. package/lib-esm/icons/ReportProblem.js +22 -4
  164. package/lib-esm/icons/ReportProblem.js.map +1 -1
  165. package/lib-esm/index.js +43 -2
  166. package/lib-esm/index.js.map +1 -1
  167. package/lib-esm/shared/LayerManager.d.ts +34 -4
  168. package/lib-esm/shared/LayerManager.js +248 -114
  169. package/lib-esm/shared/LayerManager.js.map +1 -1
  170. package/lib-esm/shared/constants.d.ts +58 -27
  171. package/lib-esm/shared/constants.js +62 -26
  172. package/lib-esm/shared/constants.js.map +1 -1
  173. package/lib-esm/shared/styles.d.ts +1 -1
  174. package/lib-esm/shared/styles.js +21 -24
  175. package/lib-esm/shared/styles.js.map +1 -1
  176. package/package.json +130 -74
  177. package/lib-esm/components/Accordion/index.js +0 -3
  178. package/lib-esm/components/Accordion/index.js.map +0 -1
  179. package/lib-esm/components/Badge/index.js +0 -2
  180. package/lib-esm/components/Badge/index.js.map +0 -1
  181. package/lib-esm/components/Button/index.js +0 -6
  182. package/lib-esm/components/Button/index.js.map +0 -1
  183. package/lib-esm/components/Card/index.js +0 -3
  184. package/lib-esm/components/Card/index.js.map +0 -1
  185. package/lib-esm/components/Chip/index.js +0 -2
  186. package/lib-esm/components/Chip/index.js.map +0 -1
  187. package/lib-esm/components/ChipInput/index.js +0 -2
  188. package/lib-esm/components/ChipInput/index.js.map +0 -1
  189. package/lib-esm/components/Dialog/index.js +0 -5
  190. package/lib-esm/components/Dialog/index.js.map +0 -1
  191. package/lib-esm/components/DragAndDrop/index.js +0 -3
  192. package/lib-esm/components/DragAndDrop/index.js.map +0 -1
  193. package/lib-esm/components/Drawer/index.js +0 -2
  194. package/lib-esm/components/Drawer/index.js.map +0 -1
  195. package/lib-esm/components/Groups/index.js +0 -3
  196. package/lib-esm/components/Groups/index.js.map +0 -1
  197. package/lib-esm/components/Input/index.js +0 -9
  198. package/lib-esm/components/Input/index.js.map +0 -1
  199. package/lib-esm/components/Menu/index.js +0 -3
  200. package/lib-esm/components/Menu/index.js.map +0 -1
  201. package/lib-esm/components/Modal/index.js +0 -2
  202. package/lib-esm/components/Modal/index.js.map +0 -1
  203. package/lib-esm/components/Notification/index.js +0 -3
  204. package/lib-esm/components/Notification/index.js.map +0 -1
  205. package/lib-esm/components/Popover/index.js +0 -2
  206. package/lib-esm/components/Popover/index.js.map +0 -1
  207. package/lib-esm/components/Spinner/index.js +0 -2
  208. package/lib-esm/components/Spinner/index.js.map +0 -1
  209. package/lib-esm/components/Stepper/index.js +0 -4
  210. package/lib-esm/components/Stepper/index.js.map +0 -1
  211. package/lib-esm/components/Tabs/index.js +0 -3
  212. package/lib-esm/components/Tabs/index.js.map +0 -1
  213. package/lib-esm/components/Toast/ToastStory.js +0 -35
  214. package/lib-esm/components/Toast/ToastStory.js.map +0 -1
  215. package/lib-esm/components/Toast/index.js +0 -2
  216. package/lib-esm/components/Toast/index.js.map +0 -1
  217. package/lib-esm/components/Tooltip/index.js +0 -2
  218. package/lib-esm/components/Tooltip/index.js.map +0 -1
  219. package/lib-esm/components/index.js +0 -20
  220. package/lib-esm/components/index.js.map +0 -1
  221. package/lib-esm/icons/index.js +0 -9
  222. package/lib-esm/icons/index.js.map +0 -1
package/README.md CHANGED
@@ -7,51 +7,52 @@
7
7
 
8
8
  **React components that are made of styled native components. Mostly! 😅**
9
9
 
10
- **Storybook / Documentation:** [https://no-frills-ui.netlify.app/](https://no-frills-ui.netlify.app/)
10
+ **Storybook / Documentation:** [https://nfui.js.org/](https://nfui.js.org/)
11
11
 
12
12
  Most modern UI component libraries come as complete ecosystems—multiple npm packages,
13
- custom design systems, proprietary APIs, and extensive documentation to learn.
14
- They rebuild everything from scratch using divs and spans, adding layers of abstraction
15
- for events, accessibility, and styling. While this gives them complete control, it also
13
+ custom design systems, proprietary APIs, and extensive documentation to learn.
14
+ They rebuild everything from scratch using divs and spans, adding layers of abstraction
15
+ for events, accessibility, and styling. While this gives them complete control, it also
16
16
  means shipping hundreds of kilobytes of JavaScript to recreate what browsers already provide.
17
17
 
18
- No Frills UI takes a different approach: **use what the browser already gives you**.
19
- Instead of div soup with custom event handlers and accessibility bolt-ons, we build components
20
- from actual `<button>`, `<input>`, `<select>`, and `<dialog>` elements. This means you get
18
+ No Frills UI takes a different approach: **use what the browser already gives you**.
19
+ Instead of div soup with custom event handlers and accessibility bolt-ons, we build components
20
+ from actual `<button>`, `<input>`, `<select>`, and `<dialog>` elements. This means you get
21
21
  native keyboard navigation, form behavior, and accessibility features out of the box—no extra code needed.
22
22
 
23
23
  ## Why No Frills UI?
24
24
 
25
- **Smaller bundles, cleaner DOM:** Our components are styled with Emotion, but the underlying
26
- structure is real HTML. No div soup, no bloated abstractions. You're looking at kilobytes,
25
+ **Smaller bundles, cleaner DOM:** Our components are styled with Emotion, but the underlying
26
+ structure is real HTML. No div soup, no bloated abstractions. You're looking at kilobytes,
27
27
  not hundreds of kilobytes.
28
28
 
29
- **Native APIs you already know:** Instead of learning proprietary component APIs across multiple
30
- npm packages, you can use standard HTML props and browser features. A button is a button. An input
29
+ **Native APIs you already know:** Instead of learning proprietary component APIs across multiple
30
+ npm packages, you can use standard HTML props and browser features. A button is a button. An input
31
31
  is an input. If you know HTML, you already know 90% of the API.
32
32
 
33
- **Better semantics by default:** Real HTML elements mean better SEO, better accessibility baseline,
34
- and a DOM that actually makes sense when you inspect it. Your screen reader users (and your future
33
+ **Better semantics by default:** Real HTML elements mean better SEO, better accessibility baseline,
34
+ and a DOM that actually makes sense when you inspect it. Your screen reader users (and your future
35
35
  self debugging in DevTools) will thank you.
36
36
 
37
- **Simple theming:** Everything's themed through CSS variables. No complex theme providers, no
37
+ **Simple theming:** Everything's themed through CSS variables. No complex theme providers, no
38
38
  JavaScript runtime overhead. Just set your colors at the root and you're done.
39
39
 
40
- **Fast to get started:** No boilerplate, no configuration, no learning curve. Import a component
40
+ **Fast to get started:** No boilerplate, no configuration, no learning curve. Import a component
41
41
  and use it. Perfect for POCs, hackathons, and small projects.
42
42
 
43
43
  ## What's the Catch?
44
44
 
45
45
  Let's be real about what this library is and isn't:
46
46
 
47
- **This is a learning project, not a production library.** I built No Frills UI to experiment with
48
- native-first component design and to sharpen my React/TypeScript skills. It's grown into a proper component
49
- library with 20+ components, automated releases, and comprehensive Storybook documentation, but I work on
47
+ **This is a learning project, not a production library.** I built No Frills UI to experiment with
48
+ native-first component design and to sharpen my React/TypeScript skills. It's grown into a proper component
49
+ library with 20+ components, automated releases, and comprehensive Storybook documentation, but I work on
50
50
  this in my spare time for learning—not as a production-grade library.
51
51
 
52
52
  ## When Should You Use This?
53
53
 
54
54
  **Perfect for:**
55
+
55
56
  - Quick POCs and prototypes where you need UI fast
56
57
  - Hackathon projects and weekend hacks
57
58
  - Small personal projects and experiments
@@ -59,16 +60,21 @@ this in my spare time for learning—not as a production-grade library.
59
60
  - Bootstrapping an idea before investing in a full UI system
60
61
 
61
62
  **Not suitable for:**
63
+
62
64
  - Production applications
63
65
  - Enterprise projects requiring support
64
66
  - Projects with strict accessibility requirements (right now)
65
67
  - Teams that need stable, battle-tested components
66
68
  - Anything your business depends on
67
69
 
68
- If you need production-ready components, use established libraries with active maintenance and community support.
69
- But if you're hacking on a side project, need components for a quick demo, or want to explore a simpler approach
70
+ If you need production-ready components, use established libraries with active maintenance and community support.
71
+ But if you're hacking on a side project, need components for a quick demo, or want to explore a simpler approach
70
72
  to React UIs, give No Frills UI a try!
71
73
 
72
- And hey, if you're also learning and want to contribute to the roadmap in
73
- [issue #19](https://github.com/pushkar8723/no-frills-ui/issues/19), pull requests
74
+ And hey, if you're also learning and want to contribute to the roadmap in
75
+ [issue #19](https://github.com/pushkar8723/no-frills-ui/issues/19), pull requests
74
76
  are welcome. We're all learning here! 🚀
77
+
78
+ ## Older Versions
79
+
80
+ We archive the documentation generated for all versions on our [GitHub Pages](https://pushkar8723.github.io/no-frills-ui/).