stargazer-ui 1.2.1 → 1.3.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 (353) hide show
  1. package/Bar/Bar.type.d.ts +6 -0
  2. package/Bar/index.js +2 -0
  3. package/Bar/index.js.map +1 -0
  4. package/Bar/package.json +1 -0
  5. package/Button/Button.js +12 -0
  6. package/Button/Button.js.map +1 -0
  7. package/{types/components/Button → Button}/Button.types.d.ts +1 -2
  8. package/Button/index.d.ts +3 -0
  9. package/Button/index.js +7 -0
  10. package/Button/index.js.map +1 -0
  11. package/Button/package.json +1 -0
  12. package/ButtonGroup/ButtonGroup.d.ts +4 -0
  13. package/ButtonGroup/ButtonGroup.js +10 -0
  14. package/ButtonGroup/ButtonGroup.js.map +1 -0
  15. package/ButtonGroup/ButtonGroup.types.d.ts +7 -0
  16. package/ButtonGroup/index.d.ts +3 -0
  17. package/ButtonGroup/index.js +7 -0
  18. package/ButtonGroup/index.js.map +1 -0
  19. package/ButtonGroup/package.json +1 -0
  20. package/Card/Card.js +41 -0
  21. package/Card/Card.js.map +1 -0
  22. package/{types/components/Card → Card}/Card.types.d.ts +3 -1
  23. package/Card/index.d.ts +3 -0
  24. package/Card/index.js +7 -0
  25. package/Card/index.js.map +1 -0
  26. package/Card/package.json +1 -0
  27. package/CloseButton/CloseButton.js +11 -0
  28. package/CloseButton/CloseButton.js.map +1 -0
  29. package/{types/components/CloseButton → CloseButton}/CloseButton.types.d.ts +1 -1
  30. package/CloseButton/index.d.ts +3 -0
  31. package/CloseButton/index.js +7 -0
  32. package/CloseButton/index.js.map +1 -0
  33. package/CloseButton/package.json +1 -0
  34. package/Dropdown/Dropdown.js +309 -0
  35. package/Dropdown/Dropdown.js.map +1 -0
  36. package/{types/components/Dropdown → Dropdown}/Dropdown.types.d.ts +3 -10
  37. package/Dropdown/index.d.ts +4 -0
  38. package/Dropdown/index.js +8 -0
  39. package/Dropdown/index.js.map +1 -0
  40. package/Dropdown/package.json +1 -0
  41. package/FileUploadButton/FileUploadButton.d.ts +4 -0
  42. package/FileUploadButton/FileUploadButton.js +21 -0
  43. package/FileUploadButton/FileUploadButton.js.map +1 -0
  44. package/FileUploadButton/FileUploadButton.types.d.ts +7 -0
  45. package/FileUploadButton/index.d.ts +3 -0
  46. package/FileUploadButton/index.js +7 -0
  47. package/FileUploadButton/index.js.map +1 -0
  48. package/FileUploadButton/package.json +1 -0
  49. package/FloatingLabel/FloatingLabel.js +17 -0
  50. package/FloatingLabel/FloatingLabel.js.map +1 -0
  51. package/{types/components/FloatingLabel → FloatingLabel}/FloatingLabel.types.d.ts +1 -1
  52. package/FloatingLabel/index.d.ts +3 -0
  53. package/FloatingLabel/index.js +7 -0
  54. package/FloatingLabel/index.js.map +1 -0
  55. package/FloatingLabel/package.json +1 -0
  56. package/Form/Form.d.ts +42 -0
  57. package/Form/Form.js +370 -0
  58. package/Form/Form.js.map +1 -0
  59. package/Form/Form.types.d.ts +135 -0
  60. package/Form/index.d.ts +4 -0
  61. package/Form/index.js +8 -0
  62. package/Form/index.js.map +1 -0
  63. package/Form/package.json +1 -0
  64. package/InputGroup/InputGroup.d.ts +7 -0
  65. package/InputGroup/InputGroup.js +31 -0
  66. package/InputGroup/InputGroup.js.map +1 -0
  67. package/InputGroup/InputGroup.types.d.ts +16 -0
  68. package/InputGroup/index.d.ts +4 -0
  69. package/InputGroup/index.js +7 -0
  70. package/InputGroup/index.js.map +1 -0
  71. package/InputGroup/package.json +1 -0
  72. package/List/List.d.ts +14 -0
  73. package/List/List.js +76 -0
  74. package/List/List.js.map +1 -0
  75. package/List/List.types.d.ts +28 -0
  76. package/List/index.d.ts +3 -0
  77. package/List/index.js +7 -0
  78. package/List/index.js.map +1 -0
  79. package/List/package.json +1 -0
  80. package/{types/components/Modal → Modal}/Modal.d.ts +1 -1
  81. package/Modal/Modal.js +160 -0
  82. package/Modal/Modal.js.map +1 -0
  83. package/{types/components/Modal → Modal}/Modal.types.d.ts +3 -2
  84. package/Modal/index.d.ts +3 -0
  85. package/Modal/index.js +7 -0
  86. package/Modal/index.js.map +1 -0
  87. package/Modal/package.json +1 -0
  88. package/Nav/Nav.js +28 -0
  89. package/Nav/Nav.js.map +1 -0
  90. package/{types/components/Nav → Nav}/Nav.types.d.ts +1 -1
  91. package/Nav/index.d.ts +4 -0
  92. package/Nav/index.js +7 -0
  93. package/Nav/index.js.map +1 -0
  94. package/Nav/package.json +1 -0
  95. package/{types/components/NavBar → NavBar}/Navbar.d.ts +1 -2
  96. package/NavBar/Navbar.js +36 -0
  97. package/NavBar/Navbar.js.map +1 -0
  98. package/{types/components/NavBar → NavBar}/Navbar.types.d.ts +2 -1
  99. package/NavBar/index.d.ts +4 -0
  100. package/NavBar/index.js +8 -0
  101. package/NavBar/index.js.map +1 -0
  102. package/NavBar/package.json +1 -0
  103. package/{types/components/NavDropdown → NavDropdown}/NavDropdown.d.ts +2 -2
  104. package/NavDropdown/NavDropdown.js +77 -0
  105. package/NavDropdown/NavDropdown.js.map +1 -0
  106. package/NavDropdown/index.d.ts +3 -0
  107. package/NavDropdown/index.js +7 -0
  108. package/NavDropdown/index.js.map +1 -0
  109. package/NavDropdown/package.json +1 -0
  110. package/Overlay/Overlay.d.ts +4 -0
  111. package/Overlay/Overlay.js +236 -0
  112. package/Overlay/Overlay.js.map +1 -0
  113. package/Overlay/Overlay.types.d.ts +22 -0
  114. package/{src/Overlay/index.ts → Overlay/index.d.ts} +3 -3
  115. package/Overlay/index.js +7 -0
  116. package/Overlay/index.js.map +1 -0
  117. package/Overlay/package.json +1 -0
  118. package/Popout/Popout.js +110 -0
  119. package/Popout/Popout.js.map +1 -0
  120. package/{types/components/Popout → Popout}/Popout.types.d.ts +1 -1
  121. package/Popout/index.d.ts +3 -0
  122. package/Popout/index.js +7 -0
  123. package/Popout/index.js.map +1 -0
  124. package/Popout/package.json +1 -0
  125. package/Spinner/Spinner.js +12 -0
  126. package/Spinner/Spinner.js.map +1 -0
  127. package/Spinner/index.d.ts +3 -0
  128. package/Spinner/index.js +7 -0
  129. package/Spinner/index.js.map +1 -0
  130. package/Spinner/package.json +1 -0
  131. package/Table/Table.js +11 -0
  132. package/Table/Table.js.map +1 -0
  133. package/{types/components/Table → Table}/Table.types.d.ts +1 -1
  134. package/Table/index.d.ts +3 -0
  135. package/Table/index.js +7 -0
  136. package/Table/index.js.map +1 -0
  137. package/Table/package.json +1 -0
  138. package/Tabs/Tabs.js +168 -0
  139. package/Tabs/Tabs.js.map +1 -0
  140. package/{types/components/Tabs → Tabs}/Tabs.types.d.ts +12 -1
  141. package/Tabs/index.d.ts +3 -0
  142. package/Tabs/index.js +7 -0
  143. package/Tabs/index.js.map +1 -0
  144. package/Tabs/package.json +1 -0
  145. package/ToggleButton/ToggleButton.d.ts +4 -0
  146. package/ToggleButton/ToggleButton.js +17 -0
  147. package/ToggleButton/ToggleButton.js.map +1 -0
  148. package/ToggleButton/ToggleButton.types.d.ts +7 -0
  149. package/ToggleButton/index.d.ts +3 -0
  150. package/ToggleButton/index.js +7 -0
  151. package/ToggleButton/index.js.map +1 -0
  152. package/ToggleButton/package.json +1 -0
  153. package/{src/hooks/index.ts → hooks/index.d.ts} +6 -6
  154. package/hooks/index.js +7 -0
  155. package/hooks/index.js.map +1 -0
  156. package/hooks/package.json +1 -0
  157. package/hooks/useClassname.d.ts +2 -0
  158. package/hooks/useClassname.js +7 -0
  159. package/hooks/useClassname.js.map +1 -0
  160. package/hooks/useDraggable.d.ts +23 -0
  161. package/hooks/useDraggable.js +147 -0
  162. package/hooks/useDraggable.js.map +1 -0
  163. package/hooks/useKeepElementFocused.d.ts +2 -0
  164. package/hooks/useKeepElementFocused.js +37 -0
  165. package/hooks/useKeepElementFocused.js.map +1 -0
  166. package/hooks/useQueryParams.d.ts +2 -0
  167. package/hooks/useQueryParams.js +13 -0
  168. package/hooks/useQueryParams.js.map +1 -0
  169. package/hooks/useScreenSize.d.ts +5 -0
  170. package/hooks/useScreenSize.js +21 -0
  171. package/hooks/useScreenSize.js.map +1 -0
  172. package/index.d.ts +18 -0
  173. package/index.js +19 -0
  174. package/index.js.map +1 -0
  175. package/package.json +1 -79
  176. package/styles/stargazerui.css +6513 -0
  177. package/styles/stargazerui.css.map +1 -0
  178. package/{src/utils/BaseTypes.ts → utils/BaseTypes.d.ts} +24 -30
  179. package/utils/ContrastingColor.d.ts +1 -0
  180. package/utils/MergeClassnames.d.ts +2 -0
  181. package/utils/MergeClassnames.js +7 -0
  182. package/utils/MergeClassnames.js.map +1 -0
  183. package/utils/MergeRefs.d.ts +2 -0
  184. package/utils/MergeRefs.js +16 -0
  185. package/utils/MergeRefs.js.map +1 -0
  186. package/.babelrc.json +0 -10
  187. package/.eslintrc.cjs +0 -18
  188. package/.gitattributes +0 -2
  189. package/LICENSE +0 -21
  190. package/dev/index.html +0 -12
  191. package/dev/index.jsx +0 -49
  192. package/dev/index.scss +0 -59
  193. package/dev/pages/ButtonPage.jsx +0 -44
  194. package/dev/pages/CardPage.jsx +0 -81
  195. package/dev/pages/DropdownPage.jsx +0 -31
  196. package/dev/pages/FormPage.jsx +0 -130
  197. package/dev/pages/ListPage.jsx +0 -52
  198. package/dev/pages/ModalPage.jsx +0 -37
  199. package/dev/pages/OverlayPage.jsx +0 -35
  200. package/dev/pages/components.jsx +0 -19
  201. package/dev/stargazerui.css +0 -3762
  202. package/dev/stargazerui.css.map +0 -1
  203. package/dev/test.jsx +0 -88
  204. package/rollup.config.js +0 -140
  205. package/scripts/writePackageJsons.js +0 -42
  206. package/src/Bar/Bar.tsx +0 -0
  207. package/src/Bar/Bar.type.ts +0 -9
  208. package/src/Bar/index.ts +0 -0
  209. package/src/Button/Button.tsx +0 -17
  210. package/src/Button/Button.types.ts +0 -8
  211. package/src/Button/index.ts +0 -3
  212. package/src/ButtonGroup/ButtonGroup.tsx +0 -14
  213. package/src/ButtonGroup/ButtonGroup.types.ts +0 -8
  214. package/src/ButtonGroup/index.ts +0 -3
  215. package/src/Card/Card.tsx +0 -70
  216. package/src/Card/Card.types.ts +0 -33
  217. package/src/Card/index.ts +0 -3
  218. package/src/CloseButton/CloseButton.tsx +0 -14
  219. package/src/CloseButton/CloseButton.types.ts +0 -6
  220. package/src/CloseButton/index.ts +0 -3
  221. package/src/Dropdown/Dropdown.tsx +0 -358
  222. package/src/Dropdown/Dropdown.types.ts +0 -52
  223. package/src/Dropdown/index.ts +0 -4
  224. package/src/FileUploadButton/FileUploadButton.tsx +0 -27
  225. package/src/FileUploadButton/FileUploadButton.types.ts +0 -9
  226. package/src/FileUploadButton/index.ts +0 -3
  227. package/src/FloatingLabel/FloatingLabel.tsx +0 -22
  228. package/src/FloatingLabel/FloatingLabel.types.ts +0 -11
  229. package/src/FloatingLabel/index.ts +0 -3
  230. package/src/Form/Form.tsx +0 -445
  231. package/src/Form/Form.types.ts +0 -117
  232. package/src/Form/index.ts +0 -4
  233. package/src/InputGroup/InputGroup.tsx +0 -46
  234. package/src/InputGroup/InputGroup.types.ts +0 -21
  235. package/src/InputGroup/index.ts +0 -4
  236. package/src/List/List.tsx +0 -112
  237. package/src/List/List.types.ts +0 -34
  238. package/src/List/index.ts +0 -4
  239. package/src/Modal/Modal.tsx +0 -220
  240. package/src/Modal/Modal.types.ts +0 -49
  241. package/src/Modal/index.ts +0 -4
  242. package/src/Nav/Nav.tsx +0 -43
  243. package/src/Nav/Nav.types.ts +0 -21
  244. package/src/Nav/index.ts +0 -4
  245. package/src/NavBar/Navbar.tsx +0 -57
  246. package/src/NavBar/Navbar.types.ts +0 -24
  247. package/src/NavBar/index.ts +0 -4
  248. package/src/NavDropdown/NavDropdown.tsx +0 -93
  249. package/src/NavDropdown/NavDropdown.types.ts +0 -6
  250. package/src/NavDropdown/index.ts +0 -3
  251. package/src/Overlay/Overlay.tsx +0 -277
  252. package/src/Overlay/Overlay.types.ts +0 -20
  253. package/src/Popout/Popout.tsx +0 -155
  254. package/src/Popout/Popout.types.ts +0 -42
  255. package/src/Popout/index.ts +0 -3
  256. package/src/Spinner/Spinner.tsx +0 -15
  257. package/src/Spinner/Spinner.types.ts +0 -7
  258. package/src/Spinner/index.ts +0 -3
  259. package/src/Table/Table.tsx +0 -16
  260. package/src/Table/Table.types.ts +0 -9
  261. package/src/Table/index.ts +0 -3
  262. package/src/Tabs/Tabs.tsx +0 -215
  263. package/src/Tabs/Tabs.types.ts +0 -49
  264. package/src/Tabs/index.ts +0 -3
  265. package/src/ToggleButton/ToggleButton.tsx +0 -21
  266. package/src/ToggleButton/ToggleButton.types.ts +0 -8
  267. package/src/ToggleButton/index.ts +0 -3
  268. package/src/hooks/useClassname.ts +0 -5
  269. package/src/hooks/useDraggable.ts +0 -186
  270. package/src/hooks/useKeepElementFocused.ts +0 -37
  271. package/src/hooks/useScreenSize.ts +0 -24
  272. package/src/index.ts +0 -21
  273. package/src/styles/_Card.scss +0 -166
  274. package/src/styles/_CloseButton.scss +0 -51
  275. package/src/styles/_CustomButton.scss +0 -132
  276. package/src/styles/_Dropdown.scss +0 -120
  277. package/src/styles/_FloatingLabel.scss +0 -56
  278. package/src/styles/_Forms.scss +0 -7
  279. package/src/styles/_Grid.scss +0 -178
  280. package/src/styles/_InputGroup.scss +0 -71
  281. package/src/styles/_List.scss +0 -62
  282. package/src/styles/_Modal.scss +0 -234
  283. package/src/styles/_ModalOld.scss +0 -242
  284. package/src/styles/_Nav.scss +0 -36
  285. package/src/styles/_NavBar.scss +0 -116
  286. package/src/styles/_NavDropdown.scss +0 -34
  287. package/src/styles/_OffCanvas.scss +0 -260
  288. package/src/styles/_OverLay.scss +0 -56
  289. package/src/styles/_Popout.scss +0 -75
  290. package/src/styles/_Spinner.scss +0 -19
  291. package/src/styles/_Table.scss +0 -34
  292. package/src/styles/_Tabs.scss +0 -129
  293. package/src/styles/_colors.scss +0 -510
  294. package/src/styles/_components.scss +0 -40
  295. package/src/styles/_functions.scss +0 -134
  296. package/src/styles/_mixins.scss +0 -26
  297. package/src/styles/_reset.scss +0 -231
  298. package/src/styles/_utilities.scss +0 -2480
  299. package/src/styles/_variables.scss +0 -146
  300. package/src/styles/forms/_FormCheck.scss +0 -269
  301. package/src/styles/forms/_FormControl.scss +0 -102
  302. package/src/styles/forms/_FormGroup.scss +0 -21
  303. package/src/styles/forms/_FormLabel.scss +0 -3
  304. package/src/styles/forms/_FormSelect.scss +0 -164
  305. package/src/styles/forms/_FormSlider.scss +0 -116
  306. package/src/styles/forms/_FormText.scss +0 -6
  307. package/src/utils/ContrastingColor.ts +0 -25
  308. package/src/utils/FileImportExport.js +0 -50
  309. package/src/utils/MergeClassnames.ts +0 -5
  310. package/src/utils/MergeRefs.ts +0 -12
  311. package/src/vite-env.d.ts +0 -1
  312. package/tsconfig-build.json +0 -4
  313. package/tsconfig.json +0 -79
  314. package/tsconfig.node.json +0 -10
  315. package/types/BaseTypes.d.ts +0 -19
  316. package/types/components/Button/index.d.ts +0 -1
  317. package/types/components/Card/index.d.ts +0 -1
  318. package/types/components/CloseButton/index.d.ts +0 -1
  319. package/types/components/Dropdown/index.d.ts +0 -1
  320. package/types/components/FloatingLabel/index.d.ts +0 -1
  321. package/types/components/Form/Form.d.ts +0 -17
  322. package/types/components/Form/Form.types.d.ts +0 -50
  323. package/types/components/Form/index.d.ts +0 -1
  324. package/types/components/InputGroup/InputGroup.d.ts +0 -6
  325. package/types/components/InputGroup/InputGroup.types.d.ts +0 -10
  326. package/types/components/InputGroup/index.d.ts +0 -1
  327. package/types/components/Modal/index.d.ts +0 -1
  328. package/types/components/Nav/index.d.ts +0 -1
  329. package/types/components/NavBar/index.d.ts +0 -1
  330. package/types/components/NavDropdown/index.d.ts +0 -1
  331. package/types/components/Popout/index.d.ts +0 -1
  332. package/types/components/Spinner/index.d.ts +0 -1
  333. package/types/components/Table/index.d.ts +0 -1
  334. package/types/components/Tabs/index.d.ts +0 -1
  335. package/types/components/ToggleButton/ToggleButton.d.ts +0 -9
  336. package/types/components/ToggleButton/ToggleButton.types.d.ts +0 -0
  337. package/types/components/ToggleButton/index.d.ts +0 -1
  338. package/types/components/index.d.ts +0 -16
  339. package/types/index.d.ts +0 -1
  340. package/vite.config.js +0 -57
  341. package/vite.config.js.timestamp-1708777378490-e94428ceb2bf9.mjs +0 -42
  342. /package/{types/components/Button → Button}/Button.d.ts +0 -0
  343. /package/{types/components/Card → Card}/Card.d.ts +0 -0
  344. /package/{types/components/CloseButton → CloseButton}/CloseButton.d.ts +0 -0
  345. /package/{types/components/Dropdown → Dropdown}/Dropdown.d.ts +0 -0
  346. /package/{types/components/FloatingLabel → FloatingLabel}/FloatingLabel.d.ts +0 -0
  347. /package/{types/components/Nav → Nav}/Nav.d.ts +0 -0
  348. /package/{types/components/NavDropdown → NavDropdown}/NavDropdown.types.d.ts +0 -0
  349. /package/{types/components/Popout → Popout}/Popout.d.ts +0 -0
  350. /package/{types/components/Spinner → Spinner}/Spinner.d.ts +0 -0
  351. /package/{types/components/Spinner → Spinner}/Spinner.types.d.ts +0 -0
  352. /package/{types/components/Table → Table}/Table.d.ts +0 -0
  353. /package/{types/components/Tabs → Tabs}/Tabs.d.ts +0 -0
package/dev/pages/ListPage.jsx DELETED
@@ -1,52 +0,0 @@
1
- import List from "../../src/List"
2
- import Button from "../../src/Button"
3
- import { useEffect, useRef } from "react"
4
-
5
- const ListPage = () => {
6
- return(
7
- <>
8
- <h4 style={{marginLeft:"1.5rem"}}>List</h4>
9
- <section className="list-container">
10
- <List depth={1} dragdrop={true}>
11
- <List.Item>
12
- <span style={{padding:"0.5rem 1rem", border:"1px solid white"}}>Test 0</span>
13
- </List.Item>
14
- <List.Sublist>
15
- <List.Label id="test-1">
16
- <span style={{padding:"0.5rem 1rem", border:"1px solid white"}}>Sublist 1</span>
17
- </List.Label>
18
- <List depth={2} aria-labelledby="test-1">
19
- <List.Item id="1">
20
- <span style={{padding:"0.5rem 1rem", border:"1px solid white"}}>Test 2</span>
21
- </List.Item>
22
- <List.Item id="2">
23
- <span style={{padding:"0.5rem 1rem", border:"1px solid white"}}>Test 3</span>
24
- </List.Item>
25
- <List.Sublist>
26
- <List.Label id="sublist-test-1">
27
- <span style={{padding:"0.5rem 1rem", border:"1px solid white"}}>Sublist 2</span>
28
- </List.Label>
29
- <List depth={3} aria-labelledby="sublist-test-1">
30
- <List.Item id="1">
31
- <span style={{padding:"0.5rem 1rem", border:"1px solid white"}}>Test 5</span>
32
- </List.Item>
33
- <List.Item id="2">
34
- <span style={{padding:"0.5rem 1rem", border:"1px solid white"}}>Test 6</span>
35
- </List.Item>
36
- </List>
37
- </List.Sublist>
38
- </List>
39
- </List.Sublist>
40
- <List.Item id="test-4">
41
- <span style={{ padding:"0.5rem 1rem", border:"1px solid white"}}>Test 4</span>
42
- </List.Item>
43
- <List.Item id="test-5">
44
- <span style={{ padding:"0.5rem 1rem", border:"1px solid white"}}>Test 5</span>
45
- </List.Item>
46
- </List>
47
- </section>
48
- </>
49
- )
50
- }
51
-
52
- export default ListPage
package/dev/pages/ModalPage.jsx DELETED
@@ -1,37 +0,0 @@
1
- import { useEffect, useState } from 'react'
2
-
3
- import Button from "../../src/Button"
4
- import Modal from "../../src/Modal"
5
- import useScreenSize from "../../src/hooks/useScreenSize"
6
-
7
- const ModalPage = () => {
8
- const [showModal, setShowModal] = useState(false)
9
- const {width} = useScreenSize()
10
- const onHide = (event) => {
11
- setShowModal(false)
12
- }
13
- return (
14
- <>
15
- <Button onClick={(event) => setShowModal(true)}>
16
- Modal
17
- </Button>
18
- <Modal show={showModal} onHide={onHide} size='md'>
19
- <Modal.Header closeButton>
20
- <Modal.Title>Test Modal: {width}</Modal.Title>
21
- </Modal.Header>
22
- <form>
23
- <Modal.Body>
24
- <p>
25
- test
26
- </p>
27
- </Modal.Body>
28
- <Modal.Footer>
29
- <small>Test footer</small>
30
- </Modal.Footer>
31
- </form>
32
- </Modal>
33
- </>
34
- )
35
- }
36
-
37
- export default ModalPage
package/dev/pages/OverlayPage.jsx DELETED
@@ -1,35 +0,0 @@
1
- import { useState } from 'react'
2
-
3
- import Overlay from '../../src/Overlay/Overlay'
4
- import Button from "../../src/Button"
5
-
6
- const OverlayElement = () => {
7
- return (
8
- <div style={{height:"20px", width:"20px", backgroundColor:"red"}}></div>
9
- )
10
- }
11
-
12
- const OverlayPage = () => {
13
- const [show, setShow] = useState(false)
14
- const handleToggle = (event) => {
15
- setShow(prev => !prev)
16
- }
17
- return (
18
- <>
19
- <h4>Overlay</h4>
20
- <section className="overlay-container">
21
- <Overlay overlay={<OverlayElement/>} trigger={"hover"}>
22
- <Button>Click</Button>
23
- </Overlay>
24
- </section>
25
- <h4>Tooltip</h4>
26
- <section className="overlay-container">
27
- <Overlay tooltip={"Testing a tooltip with a long message. This messsage is so long it hsould in theory trigger a wrap."} trigger={"hover"}>
28
- <span>Click</span>
29
- </Overlay>
30
- </section>
31
- </>
32
- )
33
- }
34
-
35
- export default OverlayPage
package/dev/pages/components.jsx DELETED
@@ -1,19 +0,0 @@
1
- export const CodeBlock = ({children, code}) => {
2
- return (
3
- <div className="code-block">
4
- <pre>{code}</pre>
5
- <div>
6
- <dl>
7
- <dt>
8
- Properties:
9
- </dt>
10
- <dd>
11
- <ul>
12
- {children}
13
- </ul>
14
- </dd>
15
- </dl>
16
- </div>
17
- </div>
18
- )
19
- }