revotech-ui-kit 0.0.0 → 0.0.1-beta-01

Sign up to get free protection for your applications and to get access to all the features.
Files changed (375) hide show
  1. package/dist/revotech-ui-kit.cjs +2293 -0
  2. package/dist/revotech-ui-kit.js +5608 -0
  3. package/dist/src/assets/icons/arrows.icon.d.ts +1 -0
  4. package/dist/src/assets/icons/arrows.icon.js +20 -0
  5. package/dist/src/assets/icons/arrows.icon.js.map +1 -0
  6. package/dist/src/assets/icons/index.d.ts +3 -0
  7. package/dist/src/assets/icons/index.js +4 -0
  8. package/dist/src/assets/icons/index.js.map +1 -0
  9. package/dist/src/assets/icons/search.icon.d.ts +1 -0
  10. package/dist/src/assets/icons/search.icon.js +19 -0
  11. package/dist/src/assets/icons/search.icon.js.map +1 -0
  12. package/dist/src/assets/icons/tick.icon.d.ts +1 -0
  13. package/dist/src/assets/icons/tick.icon.js +20 -0
  14. package/dist/src/assets/icons/tick.icon.js.map +1 -0
  15. package/dist/src/components/atoms/alert/alert-description.d.ts +5 -0
  16. package/dist/src/components/atoms/alert/alert-description.js +18 -0
  17. package/dist/src/components/atoms/alert/alert-description.js.map +1 -0
  18. package/dist/src/components/atoms/alert/alert-title.d.ts +5 -0
  19. package/dist/src/components/atoms/alert/alert-title.js +20 -0
  20. package/dist/src/components/atoms/alert/alert-title.js.map +1 -0
  21. package/dist/src/components/atoms/alert/alert.atom.d.ts +15 -0
  22. package/dist/src/components/atoms/alert/alert.atom.js +55 -0
  23. package/dist/src/components/atoms/alert/alert.atom.js.map +1 -0
  24. package/dist/src/components/atoms/alert/alert.stories.d.ts +6 -0
  25. package/dist/src/components/atoms/alert/alert.stories.js +62 -0
  26. package/dist/src/components/atoms/alert/alert.stories.js.map +1 -0
  27. package/dist/src/components/atoms/alert/alert.styles.d.ts +4 -0
  28. package/dist/src/components/atoms/alert/alert.styles.js +21 -0
  29. package/dist/src/components/atoms/alert/alert.styles.js.map +1 -0
  30. package/dist/src/components/atoms/alert/alert.types.d.ts +1 -0
  31. package/dist/src/components/atoms/alert/alert.types.js +2 -0
  32. package/dist/src/components/atoms/alert/alert.types.js.map +1 -0
  33. package/dist/src/components/atoms/badge/badge.atom.d.ts +16 -0
  34. package/dist/src/components/atoms/badge/badge.atom.js +43 -0
  35. package/dist/src/components/atoms/badge/badge.atom.js.map +1 -0
  36. package/dist/src/components/atoms/badge/badge.stories.d.ts +6 -0
  37. package/dist/src/components/atoms/badge/badge.stories.js +110 -0
  38. package/dist/src/components/atoms/badge/badge.stories.js.map +1 -0
  39. package/dist/src/components/atoms/badge/badge.style.d.ts +3 -0
  40. package/dist/src/components/atoms/badge/badge.style.js +17 -0
  41. package/dist/src/components/atoms/badge/badge.style.js.map +1 -0
  42. package/dist/src/components/atoms/badge/badge.type.d.ts +1 -0
  43. package/dist/src/components/atoms/badge/badge.type.js +2 -0
  44. package/dist/src/components/atoms/badge/badge.type.js.map +1 -0
  45. package/dist/src/components/atoms/button/button.atom.d.ts +22 -0
  46. package/dist/src/components/atoms/button/button.atom.js +67 -0
  47. package/dist/src/components/atoms/button/button.atom.js.map +1 -0
  48. package/dist/src/components/atoms/button/button.stories.d.ts +6 -0
  49. package/dist/src/components/atoms/button/button.stories.js +204 -0
  50. package/dist/src/components/atoms/button/button.stories.js.map +1 -0
  51. package/dist/src/components/atoms/button/button.style.d.ts +4 -0
  52. package/dist/src/components/atoms/button/button.style.js +24 -0
  53. package/dist/src/components/atoms/button/button.style.js.map +1 -0
  54. package/{src/components/atoms/button/button.type.ts → dist/src/components/atoms/button/button.type.d.ts} +1 -8
  55. package/dist/src/components/atoms/button/button.type.js +2 -0
  56. package/dist/src/components/atoms/button/button.type.js.map +1 -0
  57. package/dist/src/components/atoms/card/card-content.d.ts +5 -0
  58. package/dist/src/components/atoms/card/card-content.js +17 -0
  59. package/dist/src/components/atoms/card/card-content.js.map +1 -0
  60. package/dist/src/components/atoms/card/card-description.d.ts +5 -0
  61. package/dist/src/components/atoms/card/card-description.js +17 -0
  62. package/dist/src/components/atoms/card/card-description.js.map +1 -0
  63. package/dist/src/components/atoms/card/card-footer.d.ts +5 -0
  64. package/dist/src/components/atoms/card/card-footer.js +17 -0
  65. package/dist/src/components/atoms/card/card-footer.js.map +1 -0
  66. package/dist/src/components/atoms/card/card-header.d.ts +5 -0
  67. package/dist/src/components/atoms/card/card-header.js +17 -0
  68. package/dist/src/components/atoms/card/card-header.js.map +1 -0
  69. package/dist/src/components/atoms/card/card-title.d.ts +5 -0
  70. package/dist/src/components/atoms/card/card-title.js +17 -0
  71. package/dist/src/components/atoms/card/card-title.js.map +1 -0
  72. package/dist/src/components/atoms/card/card.atom.d.ts +11 -0
  73. package/dist/src/components/atoms/card/card.atom.js +25 -0
  74. package/dist/src/components/atoms/card/card.atom.js.map +1 -0
  75. package/dist/src/components/atoms/card/card.stories.d.ts +6 -0
  76. package/dist/src/components/atoms/card/card.stories.js +136 -0
  77. package/dist/src/components/atoms/card/card.stories.js.map +1 -0
  78. package/dist/src/components/atoms/checkbox/checkbox.atom.d.ts +13 -0
  79. package/dist/src/components/atoms/checkbox/checkbox.atom.js +87 -0
  80. package/dist/src/components/atoms/checkbox/checkbox.atom.js.map +1 -0
  81. package/dist/src/components/atoms/checkbox/checkbox.stories.d.ts +8 -0
  82. package/dist/src/components/atoms/checkbox/checkbox.stories.js +244 -0
  83. package/dist/src/components/atoms/checkbox/checkbox.stories.js.map +1 -0
  84. package/dist/src/components/atoms/checkbox/checkbox.style.d.ts +2 -0
  85. package/dist/src/components/atoms/checkbox/checkbox.style.js +3 -0
  86. package/dist/src/components/atoms/checkbox/checkbox.style.js.map +1 -0
  87. package/dist/src/components/atoms/checkbox/checkbox.type.d.ts +21 -0
  88. package/dist/src/components/atoms/checkbox/checkbox.type.js +2 -0
  89. package/dist/src/components/atoms/checkbox/checkbox.type.js.map +1 -0
  90. package/dist/src/components/atoms/combo-box/combo-box-input.d.ts +8 -0
  91. package/dist/src/components/atoms/combo-box/combo-box-input.js +47 -0
  92. package/dist/src/components/atoms/combo-box/combo-box-input.js.map +1 -0
  93. package/dist/src/components/atoms/combo-box/combo-box-item.d.ts +12 -0
  94. package/dist/src/components/atoms/combo-box/combo-box-item.js +85 -0
  95. package/dist/src/components/atoms/combo-box/combo-box-item.js.map +1 -0
  96. package/dist/src/components/atoms/combo-box/combo-box-list.d.ts +9 -0
  97. package/dist/src/components/atoms/combo-box/combo-box-list.js +67 -0
  98. package/dist/src/components/atoms/combo-box/combo-box-list.js.map +1 -0
  99. package/dist/src/components/atoms/combo-box/combo-box.atom.d.ts +23 -0
  100. package/dist/src/components/atoms/combo-box/combo-box.atom.js +199 -0
  101. package/dist/src/components/atoms/combo-box/combo-box.atom.js.map +1 -0
  102. package/dist/src/components/atoms/combo-box/combo-box.stories.d.ts +9 -0
  103. package/dist/src/components/atoms/combo-box/combo-box.stories.js +86 -0
  104. package/dist/src/components/atoms/combo-box/combo-box.stories.js.map +1 -0
  105. package/dist/src/components/atoms/command-empty/command-empty.atom.d.ts +9 -0
  106. package/dist/src/components/atoms/command-empty/command-empty.atom.js +53 -0
  107. package/dist/src/components/atoms/command-empty/command-empty.atom.js.map +1 -0
  108. package/dist/src/components/atoms/command-group/command-group.atom.d.ts +10 -0
  109. package/dist/src/components/atoms/command-group/command-group.atom.js +70 -0
  110. package/dist/src/components/atoms/command-group/command-group.atom.js.map +1 -0
  111. package/dist/src/components/atoms/command-item/command-item.atom.d.ts +12 -0
  112. package/dist/src/components/atoms/command-item/command-item.atom.js +78 -0
  113. package/dist/src/components/atoms/command-item/command-item.atom.js.map +1 -0
  114. package/dist/src/components/atoms/command-list/command-list.atom.d.ts +6 -0
  115. package/dist/src/components/atoms/command-list/command-list.atom.js +35 -0
  116. package/dist/src/components/atoms/command-list/command-list.atom.js.map +1 -0
  117. package/dist/src/components/atoms/command-separator/command-separator.atom.d.ts +9 -0
  118. package/dist/src/components/atoms/command-separator/command-separator.atom.js +51 -0
  119. package/dist/src/components/atoms/command-separator/command-separator.atom.js.map +1 -0
  120. package/dist/src/components/atoms/dialog/dialog-close.d.ts +7 -0
  121. package/dist/src/components/atoms/dialog/dialog-close.js +46 -0
  122. package/dist/src/components/atoms/dialog/dialog-close.js.map +1 -0
  123. package/dist/src/components/atoms/dialog/dialog-content.d.ts +8 -0
  124. package/dist/src/components/atoms/dialog/dialog-content.js +72 -0
  125. package/dist/src/components/atoms/dialog/dialog-content.js.map +1 -0
  126. package/dist/src/components/atoms/dialog/dialog-footer.d.ts +5 -0
  127. package/dist/src/components/atoms/dialog/dialog-footer.js +22 -0
  128. package/dist/src/components/atoms/dialog/dialog-footer.js.map +1 -0
  129. package/dist/src/components/atoms/dialog/dialog-header.d.ts +7 -0
  130. package/dist/src/components/atoms/dialog/dialog-header.js +40 -0
  131. package/dist/src/components/atoms/dialog/dialog-header.js.map +1 -0
  132. package/dist/src/components/atoms/dialog/dialog-overly.d.ts +5 -0
  133. package/dist/src/components/atoms/dialog/dialog-overly.js +20 -0
  134. package/dist/src/components/atoms/dialog/dialog-overly.js.map +1 -0
  135. package/dist/src/components/atoms/dialog/dialog-trigger.d.ts +8 -0
  136. package/dist/src/components/atoms/dialog/dialog-trigger.js +53 -0
  137. package/dist/src/components/atoms/dialog/dialog-trigger.js.map +1 -0
  138. package/dist/src/components/atoms/dialog/dialog.atom.d.ts +8 -0
  139. package/dist/src/components/atoms/dialog/dialog.atom.js +78 -0
  140. package/dist/src/components/atoms/dialog/dialog.atom.js.map +1 -0
  141. package/dist/src/components/atoms/dialog/dialog.stories.d.ts +16 -0
  142. package/{src/components/atoms/dialog/dialog.stories.ts → dist/src/components/atoms/dialog/dialog.stories.js} +18 -16
  143. package/dist/src/components/atoms/dialog/dialog.stories.js.map +1 -0
  144. package/dist/src/components/atoms/dropdownMenu/dropdown-menu-checkbox-Item.d.ts +15 -0
  145. package/dist/src/components/atoms/dropdownMenu/dropdown-menu-checkbox-Item.js +115 -0
  146. package/dist/src/components/atoms/dropdownMenu/dropdown-menu-checkbox-Item.js.map +1 -0
  147. package/dist/src/components/atoms/dropdownMenu/dropdown-menu-content.d.ts +13 -0
  148. package/dist/src/components/atoms/dropdownMenu/dropdown-menu-content.js +80 -0
  149. package/dist/src/components/atoms/dropdownMenu/dropdown-menu-content.js.map +1 -0
  150. package/dist/src/components/atoms/dropdownMenu/dropdown-menu-group.d.ts +10 -0
  151. package/dist/src/components/atoms/dropdownMenu/dropdown-menu-group.js +70 -0
  152. package/dist/src/components/atoms/dropdownMenu/dropdown-menu-group.js.map +1 -0
  153. package/dist/src/components/atoms/dropdownMenu/dropdown-menu-item.d.ts +12 -0
  154. package/dist/src/components/atoms/dropdownMenu/dropdown-menu-item.js +78 -0
  155. package/dist/src/components/atoms/dropdownMenu/dropdown-menu-item.js.map +1 -0
  156. package/dist/src/components/atoms/dropdownMenu/dropdown-menu-radio-item.d.ts +15 -0
  157. package/dist/src/components/atoms/dropdownMenu/dropdown-menu-radio-item.js +116 -0
  158. package/dist/src/components/atoms/dropdownMenu/dropdown-menu-radio-item.js.map +1 -0
  159. package/dist/src/components/atoms/dropdownMenu/dropdown-menu-seperator.d.ts +9 -0
  160. package/dist/src/components/atoms/dropdownMenu/dropdown-menu-seperator.js +51 -0
  161. package/dist/src/components/atoms/dropdownMenu/dropdown-menu-seperator.js.map +1 -0
  162. package/dist/src/components/atoms/dropdownMenu/dropdown-menu-shortcut.d.ts +5 -0
  163. package/dist/src/components/atoms/dropdownMenu/dropdown-menu-shortcut.js +20 -0
  164. package/dist/src/components/atoms/dropdownMenu/dropdown-menu-shortcut.js.map +1 -0
  165. package/dist/src/components/atoms/dropdownMenu/dropdown-menu.atom.d.ts +14 -0
  166. package/dist/src/components/atoms/dropdownMenu/dropdown-menu.atom.js +77 -0
  167. package/dist/src/components/atoms/dropdownMenu/dropdown-menu.atom.js.map +1 -0
  168. package/dist/src/components/atoms/dropdownMenu/dropdownMenu.stories.d.ts +15 -0
  169. package/dist/src/components/atoms/dropdownMenu/dropdownMenu.stories.js +211 -0
  170. package/dist/src/components/atoms/dropdownMenu/dropdownMenu.stories.js.map +1 -0
  171. package/dist/src/components/atoms/dropdownMenu/dropdownMenu.style.d.ts +2 -0
  172. package/dist/src/components/atoms/dropdownMenu/dropdownMenu.style.js +4 -0
  173. package/dist/src/components/atoms/dropdownMenu/dropdownMenu.style.js.map +1 -0
  174. package/{src/components/atoms/index.ts → dist/src/components/atoms/index.d.ts} +3 -0
  175. package/dist/src/components/atoms/index.js +14 -0
  176. package/dist/src/components/atoms/index.js.map +1 -0
  177. package/dist/src/components/atoms/input/input.atom.d.ts +21 -0
  178. package/dist/src/components/atoms/input/input.atom.js +93 -0
  179. package/dist/src/components/atoms/input/input.atom.js.map +1 -0
  180. package/dist/src/components/atoms/input/input.stories.d.ts +8 -0
  181. package/dist/src/components/atoms/input/input.stories.js +382 -0
  182. package/dist/src/components/atoms/input/input.stories.js.map +1 -0
  183. package/dist/src/components/atoms/input/input.styles.d.ts +1 -0
  184. package/dist/src/components/atoms/input/input.styles.js +2 -0
  185. package/dist/src/components/atoms/input/input.styles.js.map +1 -0
  186. package/dist/src/components/atoms/input/input.type.d.ts +21 -0
  187. package/dist/src/components/atoms/input/input.type.js +2 -0
  188. package/dist/src/components/atoms/input/input.type.js.map +1 -0
  189. package/dist/src/components/atoms/label/label.atom.d.ts +11 -0
  190. package/dist/src/components/atoms/label/label.atom.js +67 -0
  191. package/dist/src/components/atoms/label/label.atom.js.map +1 -0
  192. package/dist/src/components/atoms/label/label.stories.d.ts +6 -0
  193. package/dist/src/components/atoms/label/label.stories.js +85 -0
  194. package/dist/src/components/atoms/label/label.stories.js.map +1 -0
  195. package/dist/src/components/atoms/label/label.style.d.ts +1 -0
  196. package/dist/src/components/atoms/label/label.style.js +3 -0
  197. package/dist/src/components/atoms/label/label.style.js.map +1 -0
  198. package/dist/src/components/atoms/popover/popover-content.d.ts +11 -0
  199. package/dist/src/components/atoms/popover/popover-content.js +62 -0
  200. package/dist/src/components/atoms/popover/popover-content.js.map +1 -0
  201. package/dist/src/components/atoms/popover/popover-trigger.d.ts +9 -0
  202. package/dist/src/components/atoms/popover/popover-trigger.js +50 -0
  203. package/dist/src/components/atoms/popover/popover-trigger.js.map +1 -0
  204. package/dist/src/components/atoms/popover/popover.atom.d.ts +8 -0
  205. package/dist/src/components/atoms/popover/popover.atom.js +40 -0
  206. package/dist/src/components/atoms/popover/popover.atom.js.map +1 -0
  207. package/dist/src/components/atoms/popover/popover.stories.d.ts +10 -0
  208. package/dist/src/components/atoms/popover/popover.stories.js +69 -0
  209. package/dist/src/components/atoms/popover/popover.stories.js.map +1 -0
  210. package/dist/src/components/atoms/popover/popover.style.d.ts +5 -0
  211. package/dist/src/components/atoms/popover/popover.style.js +21 -0
  212. package/dist/src/components/atoms/popover/popover.style.js.map +1 -0
  213. package/dist/src/components/atoms/popover/popover.types.d.ts +2 -0
  214. package/dist/src/components/atoms/popover/popover.types.js +4 -0
  215. package/dist/src/components/atoms/popover/popover.types.js.map +1 -0
  216. package/dist/src/components/atoms/toggle/defs.d.ts +27 -0
  217. package/dist/src/components/atoms/toggle/defs.js +30 -0
  218. package/dist/src/components/atoms/toggle/defs.js.map +1 -0
  219. package/dist/src/components/atoms/toggle/toggle.atom.d.ts +19 -0
  220. package/dist/src/components/atoms/toggle/toggle.atom.js +72 -0
  221. package/dist/src/components/atoms/toggle/toggle.atom.js.map +1 -0
  222. package/dist/src/components/atoms/toggle/toggle.stories.d.ts +6 -0
  223. package/dist/src/components/atoms/toggle/toggle.stories.js +189 -0
  224. package/dist/src/components/atoms/toggle/toggle.stories.js.map +1 -0
  225. package/dist/src/components/atoms/toggle/toggle.style.d.ts +4 -0
  226. package/dist/src/components/atoms/toggle/toggle.style.js +19 -0
  227. package/dist/src/components/atoms/toggle/toggle.style.js.map +1 -0
  228. package/dist/src/components/command/command.d.ts +56 -0
  229. package/dist/src/components/command/command.js +402 -0
  230. package/dist/src/components/command/command.js.map +1 -0
  231. package/dist/src/components/command/command.stories.d.ts +5 -0
  232. package/{src/components/command/command.stories.ts → dist/src/components/command/command.stories.js} +6 -7
  233. package/dist/src/components/command/command.stories.js.map +1 -0
  234. package/dist/src/components/index.js +3 -0
  235. package/dist/src/components/index.js.map +1 -0
  236. package/dist/src/components/molecules/command/command.molecules.d.ts +6 -0
  237. package/dist/src/components/molecules/command/command.molecules.js +27 -0
  238. package/dist/src/components/molecules/command/command.molecules.js.map +1 -0
  239. package/dist/src/components/molecules/command-input/command-input.atom.d.ts +10 -0
  240. package/dist/src/components/molecules/command-input/command-input.atom.js +125 -0
  241. package/dist/src/components/molecules/command-input/command-input.atom.js.map +1 -0
  242. package/dist/src/components/molecules/dropdownMenu/dropdownMenu.molecules.js +2 -0
  243. package/dist/src/components/molecules/dropdownMenu/dropdownMenu.molecules.js.map +1 -0
  244. package/dist/src/components/molecules/index.js +2 -0
  245. package/dist/src/components/molecules/index.js.map +1 -0
  246. package/dist/src/helpers/base-element.d.ts +10 -0
  247. package/dist/src/helpers/base-element.js +62 -0
  248. package/dist/src/helpers/base-element.js.map +1 -0
  249. package/{src/helpers/index.ts → dist/src/helpers/index.d.ts} +1 -0
  250. package/dist/src/helpers/index.js +4 -0
  251. package/dist/src/helpers/index.js.map +1 -0
  252. package/dist/src/helpers/mouse-conroller.helper.d.ts +14 -0
  253. package/dist/src/helpers/mouse-conroller.helper.js +33 -0
  254. package/dist/src/helpers/mouse-conroller.helper.js.map +1 -0
  255. package/dist/src/helpers/style.helpers.d.ts +2 -0
  256. package/dist/src/helpers/style.helpers.js +6 -0
  257. package/dist/src/helpers/style.helpers.js.map +1 -0
  258. package/dist/src/index.d.ts +4 -0
  259. package/dist/src/index.js +5 -0
  260. package/dist/src/index.js.map +1 -0
  261. package/dist/src/interfaces/actionable.interface.d.ts +5 -0
  262. package/dist/src/interfaces/actionable.interface.js +2 -0
  263. package/dist/src/interfaces/actionable.interface.js.map +1 -0
  264. package/dist/src/interfaces/atomic.interface.d.ts +6 -0
  265. package/dist/src/interfaces/atomic.interface.js +2 -0
  266. package/dist/src/interfaces/atomic.interface.js.map +1 -0
  267. package/{src/interfaces/changeable.interface.ts → dist/src/interfaces/changeable.interface.d.ts} +7 -14
  268. package/dist/src/interfaces/changeable.interface.js +2 -0
  269. package/dist/src/interfaces/changeable.interface.js.map +1 -0
  270. package/{src/interfaces/child-support-atomic.interface.ts → dist/src/interfaces/child-support-atomic.interface.d.ts} +4 -5
  271. package/dist/src/interfaces/child-support-atomic.interface.js +2 -0
  272. package/dist/src/interfaces/child-support-atomic.interface.js.map +1 -0
  273. package/dist/src/interfaces/index.js +7 -0
  274. package/dist/src/interfaces/index.js.map +1 -0
  275. package/dist/src/interfaces/intractable.interface.d.ts +6 -0
  276. package/dist/src/interfaces/intractable.interface.js +2 -0
  277. package/dist/src/interfaces/intractable.interface.js.map +1 -0
  278. package/{src/interfaces/variant.interface.ts → dist/src/interfaces/variant.interface.d.ts} +1 -1
  279. package/dist/src/interfaces/variant.interface.js +2 -0
  280. package/dist/src/interfaces/variant.interface.js.map +1 -0
  281. package/dist/src/lib/index.js +2 -0
  282. package/dist/src/lib/index.js.map +1 -0
  283. package/dist/src/lib/next/next.lib.js +2 -0
  284. package/dist/src/lib/next/next.lib.js.map +1 -0
  285. package/dist/src/lib/react/react.lib.d.ts +5 -0
  286. package/dist/src/lib/react/react.lib.js +16 -0
  287. package/dist/src/lib/react/react.lib.js.map +1 -0
  288. package/dist/src/lib/tw-styles.d.ts +1 -0
  289. package/{src/globals.css → dist/src/lib/tw-styles.js} +294 -144
  290. package/dist/src/lib/tw-styles.js.map +1 -0
  291. package/dist/src/styles/index.js +2 -0
  292. package/dist/src/styles/index.js.map +1 -0
  293. package/dist/src/styles/tw.styles.d.ts +1 -0
  294. package/dist/src/styles/tw.styles.js +2218 -0
  295. package/dist/src/styles/tw.styles.js.map +1 -0
  296. package/dist/src/wc-ui-app.d.ts +6 -0
  297. package/{src/wc-ui-app.ts → dist/src/wc-ui-app.js} +42 -35
  298. package/dist/src/wc-ui-app.js.map +1 -0
  299. package/dist/test/wc-ui-app.test.d.ts +0 -0
  300. package/dist/test/wc-ui-app.test.js +18 -0
  301. package/dist/test/wc-ui-app.test.js.map +1 -0
  302. package/dist/tsconfig.tsbuildinfo +1 -0
  303. package/dist/vite.config.d.ts +2 -0
  304. package/dist/vite.config.js +29 -0
  305. package/dist/vite.config.js.map +1 -0
  306. package/package.json +38 -20
  307. package/.editorconfig +0 -29
  308. package/.eslintrc +0 -10
  309. package/.storybook/main.ts +0 -17
  310. package/.storybook/preview-head.html +0 -1
  311. package/.storybook/preview.ts +0 -17
  312. package/assets/fonts/Geist/Geist-Black.otf +0 -0
  313. package/assets/fonts/Geist/Geist-Black.woff2 +0 -0
  314. package/assets/fonts/Geist/Geist-Bold.otf +0 -0
  315. package/assets/fonts/Geist/Geist-Bold.woff2 +0 -0
  316. package/assets/fonts/Geist/Geist-Light.otf +0 -0
  317. package/assets/fonts/Geist/Geist-Light.woff2 +0 -0
  318. package/assets/fonts/Geist/Geist-Medium.otf +0 -0
  319. package/assets/fonts/Geist/Geist-Medium.woff2 +0 -0
  320. package/assets/fonts/Geist/Geist-Regular.otf +0 -0
  321. package/assets/fonts/Geist/Geist-Regular.woff2 +0 -0
  322. package/assets/fonts/Geist/Geist-SemiBold.otf +0 -0
  323. package/assets/fonts/Geist/Geist-SemiBold.woff2 +0 -0
  324. package/assets/fonts/Geist/Geist-Thin.otf +0 -0
  325. package/assets/fonts/Geist/Geist-Thin.woff2 +0 -0
  326. package/assets/fonts/Geist/Geist-UltraBlack.otf +0 -0
  327. package/assets/fonts/Geist/Geist-UltraBlack.woff2 +0 -0
  328. package/assets/fonts/Geist/Geist-UltraLight.otf +0 -0
  329. package/assets/fonts/Geist/Geist-UltraLight.woff2 +0 -0
  330. package/assets/fonts/Geist/GeistVariableVF.ttf +0 -0
  331. package/assets/fonts/Geist/GeistVariableVF.woff2 +0 -0
  332. package/assets/fonts/Geist/LICENSE.TXT +0 -92
  333. package/assets/open-wc-logo.svg +0 -29
  334. package/index.html +0 -362
  335. package/rollup.config.js +0 -71
  336. package/src/components/atoms/button/button.atom.ts +0 -39
  337. package/src/components/atoms/button/button.stories.ts +0 -186
  338. package/src/components/atoms/button/button.style.ts +0 -31
  339. package/src/components/atoms/checkbox/checkbox.atom.ts +0 -62
  340. package/src/components/atoms/checkbox/checkbox.stories.ts +0 -42
  341. package/src/components/atoms/command-empty/command-empty.atom.ts +0 -44
  342. package/src/components/atoms/command-group/command-group.atom.ts +0 -60
  343. package/src/components/atoms/command-item/command-item.atom.ts +0 -74
  344. package/src/components/atoms/command-list/command-list.atom.ts +0 -37
  345. package/src/components/atoms/command-separator/command-separator.atom.ts +0 -42
  346. package/src/components/atoms/dialog/dialog.atom.ts +0 -301
  347. package/src/components/atoms/input/input.atom.ts +0 -34
  348. package/src/components/atoms/input/input.stories.ts +0 -89
  349. package/src/components/atoms/input/input.type.ts +0 -24
  350. package/src/components/atoms/label/label.atom.ts +0 -40
  351. package/src/components/atoms/label/label.stories.ts +0 -18
  352. package/src/components/atoms/label/label.style.ts +0 -5
  353. package/src/components/command/command.ts +0 -391
  354. package/src/components/molecules/command/command.molecules.ts +0 -31
  355. package/src/components/molecules/command-input/command-input.atom.ts +0 -130
  356. package/src/components/popover.ts +0 -247
  357. package/src/helpers/mouse-conroller.helper.ts +0 -42
  358. package/src/helpers/style.helpers.ts +0 -6
  359. package/src/interfaces/actionable.interface.ts +0 -6
  360. package/src/interfaces/atomic.interface.ts +0 -6
  361. package/src/interfaces/intractable.interface.ts +0 -6
  362. package/src/styles/tw.styles.ts +0 -1867
  363. package/src/tailwind-lib.css +0 -95
  364. package/tailwind.config.js +0 -81
  365. package/test/wc-ui-app.test.ts +0 -22
  366. package/tsconfig.json +0 -25
  367. package/web-dev-server.config.mjs +0 -26
  368. package/web-test-runner.config.mjs +0 -41
  369. /package/{src/components/index.ts → dist/src/components/index.d.ts} +0 -0
  370. /package/{src/lib/index.ts → dist/src/components/molecules/dropdownMenu/dropdownMenu.molecules.d.ts} +0 -0
  371. /package/{src/components/molecules/index.ts → dist/src/components/molecules/index.d.ts} +0 -0
  372. /package/{src/interfaces/index.ts → dist/src/interfaces/index.d.ts} +0 -0
  373. /package/{src/lib/next/next.lib.ts → dist/src/lib/index.d.ts} +0 -0
  374. /package/{src/lib/react/react.lib.ts → dist/src/lib/next/next.lib.d.ts} +0 -0
  375. /package/{src/styles/index.ts → dist/src/styles/index.d.ts} +0 -0
package/index.html DELETED
@@ -1,362 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta
6
- name="viewport"
7
- content="width=device-width, initial-scale=1.0, viewport-fit=cover"
8
- />
9
- <meta name="Description" content="Put your description here." />
10
- <base href="/" />
11
- <link href="./src/globals.css" rel="stylesheet" />
12
- <script src="https://code.iconify.design/iconify-icon/2.0.0/iconify-icon.min.js"></script>
13
-
14
- <style>
15
- html,
16
- body {
17
- margin: 0;
18
- padding: 0;
19
- background-color: white;
20
- }
21
- </style>
22
- <title>wc-ui-app</title>
23
- </head>
24
-
25
- <body>
26
- <div class="container mx-auto my-10">
27
- <h1 class="text-4xl text-center">Web Components</h1>
28
- <h2 class="text-2xl text-center">Button</h2>
29
- </div>
30
- <div class="flex flex-wrap justify-between space-x-4 gap-5 mx-3">
31
- <rtg-button>Primary</rtg-button>
32
- <rtg-button variant="secondary">Secodary</rtg-button>
33
- <rtg-button variant="destructive">Destructive</rtg-button>
34
- <rtg-button variant="outline">Outline</rtg-button>
35
- <rtg-button variant="ghost">Ghost</rtg-button>
36
- <rtg-button variant="link">Link</rtg-button>
37
- <rtg-button variant="outline" size="icon"
38
- ><iconify-icon icon="mdi:home"></iconify-icon
39
- ></rtg-button>
40
- <rtg-button
41
- ><iconify-icon class="mr-2" icon="mdi:home"></iconify-icon> Home
42
- Page</rtg-button
43
- >
44
- <rtg-button disabled
45
- ><iconify-icon class="mr-2 animate-spin" icon="mdi:home"></iconify-icon>
46
- Home Page</rtg-button
47
- >
48
- </div>
49
- <div class="container mx-auto my-10">
50
- <h2 class="text-2xl text-center">Labels</h2>
51
- </div>
52
- <div class="flex items-center space-x-2 mx-2 justify-center">
53
- <rtg-checkbox id="terms"></rtg-checkbox>
54
- <rtg-label for="terms">Accept terms and conditions</rtg-label>
55
- </div>
56
- <div class="container mx-auto my-10">
57
- <h2 class="text-2xl text-center">Inputs</h2>
58
- </div>
59
- <div class="flex flex-wrap space-x-4 gap-5 mx-3">
60
- <rtg-input type="email" placeholder="Email" class="min-w-80"></rtg-input>
61
- <div class="grid w-full max-w-sm items-center gap-1.5 min-w-80">
62
- <rtg-label for="picture">Picture</rtg-label>
63
- <rtg-input id="picture" type="file" placeholder="file"></rtg-input>
64
- </div>
65
- <rtg-input
66
- disabled
67
- type="email"
68
- placeholder="Email"
69
- class="min-w-80"
70
- ></rtg-input>
71
- <div class="grid w-full max-w-sm items-center gap-1.5 min-w-80">
72
- <rtg-label for="email">Email address</rtg-label>
73
- <rtg-input id="email" type="email" placeholder="Email"> </rtg-input>
74
- </div>
75
- <div class="flex flex-nowrap w-full max-w-sm items-center space-x-2">
76
- <rtg-input
77
- id="email"
78
- type="email"
79
- placeholder="Email"
80
- class="min-w-80"
81
- ></rtg-input>
82
- <rtg-button size="default" onclick="javascript:alert('Hello!')">Subscribe</rtg-button>
83
- </div>
84
- </div>
85
- <div class="container mx-auto my-10">
86
- <h2 class="text-2xl text-center">Command</h2>
87
- </div>
88
- <div class="flex flex-nowrap justify-center">
89
- <div class="flex flex-wrap space-x-4 gap-5 mx-3">
90
- <rtg-command class="w-full max-w-md">
91
- <rtg-command-input placeholder="Search ...."></rtg-command-input>
92
- <rtg-command-list>
93
- <rtg-command-empty>No items found!</rtg-command-empty>
94
- <rtg-command-group heading="Suggestions">
95
- <rtg-command-item>
96
- <svg
97
- xmlns="http://www.w3.org/2000/svg"
98
- width="24"
99
- height="24"
100
- viewBox="0 0 24 24"
101
- fill="none"
102
- stroke="currentColor"
103
- stroke-width="2"
104
- stroke-linecap="round"
105
- stroke-linejoin="round"
106
- class="mr-2 h-4 w-4"
107
- >
108
- <rect width="18" height="18" x="3" y="4" rx="2" ry="2"></rect>
109
- <line x1="16" x2="16" y1="2" y2="6"></line>
110
- <line x1="8" x2="8" y1="2" y2="6"></line>
111
- <line x1="3" x2="21" y1="10" y2="10"></line></svg>
112
- <span>Calendar</span>
113
- </rtg-command-item>
114
- <rtg-command-item>
115
- <svg
116
- xmlns="http://www.w3.org/2000/svg"
117
- width="24"
118
- height="24"
119
- viewBox="0 0 24 24"
120
- fill="none"
121
- stroke="currentColor"
122
- stroke-width="2"
123
- stroke-linecap="round"
124
- stroke-linejoin="round"
125
- class="mr-2 h-4 w-4"
126
- >
127
- <circle cx="12" cy="12" r="10"></circle>
128
- <path d="M8 14s1.5 2 4 2 4-2 4-2"></path>
129
- <line x1="9" x2="9.01" y1="9" y2="9"></line>
130
- <line x1="15" x2="15.01" y1="9" y2="9"></line></svg>
131
- <span>Search Emoji</span>
132
- </rtg-command-item>
133
- <rtg-command-item>
134
- <svg
135
- xmlns="http://www.w3.org/2000/svg"
136
- width="24"
137
- height="24"
138
- viewBox="0 0 24 24"
139
- fill="none"
140
- stroke="currentColor"
141
- stroke-width="2"
142
- stroke-linecap="round"
143
- stroke-linejoin="round"
144
- class="mr-2 h-4 w-4"
145
- >
146
- <rect width="16" height="20" x="4" y="2" rx="2"></rect>
147
- <line x1="8" x2="16" y1="6" y2="6"></line>
148
- <line x1="16" x2="16" y1="14" y2="18"></line>
149
- <path d="M16 10h.01"></path>
150
- <path d="M12 10h.01"></path>
151
- <path d="M8 10h.01"></path>
152
- <path d="M12 14h.01"></path>
153
- <path d="M8 14h.01"></path>
154
- <path d="M12 18h.01"></path>
155
- <path d="M8 18h.01"></path></svg>
156
- <span>Calculator</span>
157
- </rtg-command-item>
158
- </rtg-command-group>
159
- <rtg-command-separator></rtg-command-separator>
160
- <rtg-command-group heading="Settings">
161
- <rtg-command-item onclick="javascript:alert('Profile Clicked!')">
162
- <svg
163
- xmlns="http://www.w3.org/2000/svg"
164
- width="24"
165
- height="24"
166
- viewBox="0 0 24 24"
167
- fill="none"
168
- stroke="currentColor"
169
- stroke-width="2"
170
- stroke-linecap="round"
171
- stroke-linejoin="round"
172
- class="mr-2 h-4 w-4"
173
- >
174
- <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path>
175
- <circle cx="12" cy="7" r="4"></circle></svg>
176
- <span>Profile</span>
177
- <span
178
- class="ml-auto text-xs tracking-widest text-muted-foreground"
179
- >⌘P</span>
180
- </rtg-command-item>
181
- <rtg-command-item>
182
- <svg
183
- xmlns="http://www.w3.org/2000/svg"
184
- width="24"
185
- height="24"
186
- viewBox="0 0 24 24"
187
- fill="none"
188
- stroke="currentColor"
189
- stroke-width="2"
190
- stroke-linecap="round"
191
- stroke-linejoin="round"
192
- class="mr-2 h-4 w-4"
193
- >
194
- <rect width="20" height="14" x="2" y="5" rx="2"></rect>
195
- <line x1="2" x2="22" y1="10" y2="10"></line></svg>
196
- <span>Billing</span
197
- ><span
198
- class="ml-auto text-xs tracking-widest text-muted-foreground"
199
- >⌘B</span
200
- >
201
- </rtg-command-item>
202
- <rtg-command-item>
203
- <svg
204
- xmlns="http://www.w3.org/2000/svg"
205
- width="24"
206
- height="24"
207
- viewBox="0 0 24 24"
208
- fill="none"
209
- stroke="currentColor"
210
- stroke-width="2"
211
- stroke-linecap="round"
212
- stroke-linejoin="round"
213
- class="mr-2 h-4 w-4"
214
- >
215
- <path
216
- d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"
217
- ></path>
218
- <circle cx="12" cy="12" r="3"></circle></svg>
219
- <span>Settings</span>
220
- <span
221
- class="ml-auto text-xs tracking-widest text-muted-foreground">
222
- ⌘S</span>
223
- </rtg-command-item>
224
- </rtg-command-group></rtg-command-list
225
- >
226
- </rtg-command>
227
- </div>
228
- </div>
229
- <div class="container mx-auto my-10">
230
- <h2 class="text-2xl text-center">Dialog</h2>
231
- </div>
232
- <div class="flex flex-nowrap justify-center">
233
- <div class="flex flex-wrap space-x-4 gap-5 mx-3">
234
- <rtg-dialog>
235
- <rtg-dialog-trigger>
236
- <rtg-button>Open Dialog</rtg-button>
237
- </rtg-dialog-trigger>
238
- <rtg-dialog-content>
239
- <rtg-dialog-header title="Are you absolutely sure?" description="This action cannot be undone. This will permanently delete your
240
- content.">
241
- <rtg-dialog-title>Are you absolutely sure?</rtg-dialog-title>
242
- <rtg-dialog-description>
243
- This action cannot be undone. This will permanently delete your
244
- content.</rtg-dialog-description
245
- >
246
- </rtg-dialog-header>
247
- <rtg-dialog-footer>
248
- <div class="flex w-full justify-between space-x-1">
249
- <rtg-dialog-close><rtg-button variant="secondary">Close</rtg-button></rtg-dialog-close>
250
- <div class="justify-end">
251
- <rtg-button variant="destructive">Delete</rtg-button>
252
- <rtg-button>Cancel</rtg-button>
253
- </div>
254
- </div>
255
- </rtg-dialog-content>
256
- </rtg-dialog>
257
- <rtg-dialog>
258
- <rtg-dialog-trigger>
259
- <rtg-button variant="outline">Edit Profile</rtg-button>
260
- </rtg-dialog-trigger>
261
- <rtg-dialog-content class="sm:max-w-[425px]">
262
- <rtg-dialog-header title="Edit Profile", description="Make changes to your profile here. Click save when you're done.">
263
- <!-- <rtg-dialog-title>Edit Profile</rtg-dialog-title>
264
- <rtg-dialog-description>
265
- Make changes to your profile here. Click save when you're done.</rtg-dialog-description
266
- > -->
267
- </rtg-dialog-header>
268
- <div class="grid gap-4 py-4">
269
- <div class="grid grid-cols-4 items-center gap-4">
270
- <rtg-label for="name" class="text-right">
271
- Name
272
- </rtg-label>
273
- <rtg-input
274
- id="name"
275
- defaultValue="Pedro Duarte"
276
- class="col-span-3"
277
- />
278
- </div>
279
- <div class="grid grid-cols-4 items-center gap-4">
280
- <rtg-label for="username" class="text-right">
281
- Username
282
- </rtg-label>
283
- <rtg-input
284
- id="username"
285
- defaultValue="@peduarte"
286
- class="col-span-3"
287
- />
288
- </div>
289
- </div>
290
- <rtg-dialog-footer>
291
- <rtg-button type="submit" class="w-full sm:w-min">Save changes</rtg-button>
292
- </rtg-dialog-content>
293
- </rtg-dialog>
294
- </div>
295
- </div>
296
- <div class="container mx-auto my-10">
297
- <h2 class="text-2xl text-center">Popover</h2>
298
- </div>
299
- <div class="flex flex-nowrap justify-center">
300
- <div class="flex flex-wrap space-x-4 gap-5 mx-3">
301
- <rtg-popover>
302
- <rtg-popover-trigger>
303
- <rtg-button variant="outline">Open Popover</rtg-button>
304
- </rtg-popover-trigger>
305
- <rtg-popover-content class="w-80">
306
- <div class="grid gap-4">
307
- <div class="space-y-2">
308
- <h4 class="font-medium leading-none">Dimensions</h4>
309
- <p class="text-sm text-muted-foreground">
310
- Set the dimensions for the layer.
311
- </p>
312
- </div>
313
- <div class="grid gap-2">
314
- <div class="grid grid-cols-3 items-center gap-4">
315
- <rtg-label for="width">Width</rtg-label>
316
- <rtg-input
317
- id="width"
318
- defaultValue="100%"
319
- class="col-span-2 h-8"
320
- />
321
- </div>
322
- <div class="grid grid-cols-3 items-center gap-4">
323
- <rtg-label for="maxWidth">Max. width</rtg-label>
324
- <rtg-input
325
- id="maxWidth"
326
- defaultValue="300px"
327
- class="col-span-2 h-8"
328
- />
329
- </div>
330
- <div class="grid grid-cols-3 items-center gap-4">
331
- <rtg-label htmlFor="height">Height</rtg-label>
332
- <rtg-input
333
- id="height"
334
- defaultValue="25px"
335
- class="col-span-2 h-8"
336
- />
337
- </div>
338
- <div class="grid grid-cols-3 items-center gap-4">
339
- <rtg-label htmlFor="maxHeight">Max. height</rtg-label>
340
- <rtg-input
341
- id="maxHeight"
342
- defaultValue="none"
343
- class="col-span-2 h-8"
344
- />
345
- </div>
346
- </div>
347
- </div>
348
- </rtg-popover-content>
349
- </rtg-popover>
350
- </div>
351
- </div>
352
- <div class="h-9"></div>
353
- </div>
354
- <script type="module" src="./dist/src/wc-ui-app.js"></script>
355
- <script type="module" src="./dist/src/components/"></script>
356
- <!-- <script type="module" src="./dist/src/components/input/input.js"></script>
357
- <script type="module" src="./dist/src/components/label/label.js"></script>
358
- <script type="module" src="./dist/src/components/checkbox/checkbox.js"></script>
359
- <script type="module" src="./dist/src/components/command/command.js"></script>
360
- <script type="module" src="./dist/src/components/dialog/dialog.js"></script> -->
361
- </body>
362
- </html>
package/rollup.config.js DELETED
@@ -1,71 +0,0 @@
1
- import nodeResolve from '@rollup/plugin-node-resolve';
2
- import babel from '@rollup/plugin-babel';
3
- import html from '@web/rollup-plugin-html';
4
- import { importMetaAssets } from '@web/rollup-plugin-import-meta-assets';
5
- import esbuild from 'rollup-plugin-esbuild';
6
- import { generateSW } from 'rollup-plugin-workbox';
7
- import path from 'path';
8
-
9
- export default {
10
- input: 'index.html',
11
- output: {
12
- entryFileNames: '[hash].js',
13
- chunkFileNames: '[hash].js',
14
- assetFileNames: '[hash][extname]',
15
- format: 'es',
16
- dir: 'dist',
17
- },
18
- preserveEntrySignatures: false,
19
-
20
- plugins: [
21
- /** Enable using HTML as rollup entrypoint */
22
- html({
23
- minify: true,
24
- injectServiceWorker: true,
25
- serviceWorkerPath: 'dist/sw.js',
26
- }),
27
- /** Resolve bare module imports */
28
- nodeResolve(),
29
- /** Minify JS, compile JS to a lower language target */
30
- esbuild({
31
- minify: true,
32
- target: ['chrome64', 'firefox67', 'safari11.1'],
33
- }),
34
- /** Bundle assets references via import.meta.url */
35
- importMetaAssets(),
36
- /** Minify html and css tagged template literals */
37
- babel({
38
- plugins: [
39
- [
40
- require.resolve('babel-plugin-template-html-minifier'),
41
- {
42
- modules: { lit: ['html', { name: 'css', encapsulation: 'style' }] },
43
- failOnError: false,
44
- strictCSS: true,
45
- htmlMinifier: {
46
- collapseWhitespace: true,
47
- conservativeCollapse: true,
48
- removeComments: true,
49
- caseSensitive: true,
50
- minifyCSS: true,
51
- },
52
- },
53
- ],
54
- ],
55
- }),
56
- /** Create and inject a service worker */
57
- generateSW({
58
- globIgnores: ['polyfills/*.js', 'nomodule-*.js'],
59
- navigateFallback: '/index.html',
60
- // where to output the generated sw
61
- swDest: path.join('dist', 'sw.js'),
62
- // directory to match patterns against to be precached
63
- globDirectory: path.join('dist'),
64
- // cache any html js and css by default
65
- globPatterns: ['**/*.{html,js,css,webmanifest}'],
66
- skipWaiting: true,
67
- clientsClaim: true,
68
- runtimeCaching: [{ urlPattern: 'polyfills/*.js', handler: 'CacheFirst' }],
69
- }),
70
- ],
71
- };
@@ -1,39 +0,0 @@
1
- import { LitElement, html, css } from 'lit';
2
- import { property, customElement } from 'lit/decorators.js';
3
- import { cn } from '@/helpers';
4
- import { ButtonSize, ButtonType, ButtonVariant } from './button.type';
5
- import { buttonStyle } from './button.style';
6
- import { TWStyles } from '@/styles';
7
-
8
- @customElement('rtg-button')
9
- export class Button extends LitElement {
10
- static buttonVariants = buttonStyle;
11
-
12
- @property({ type: Boolean }) disabled = false;
13
-
14
- @property({ type: String }) type: ButtonType = 'button';
15
-
16
- @property({ type: String }) variant: ButtonVariant = 'default';
17
-
18
- @property({ type: String }) size: ButtonSize = 'default';
19
-
20
- static styles = [css``, TWStyles];
21
-
22
- render() {
23
- return html`
24
- <button
25
- type="${this.type}"
26
- ?disabled=${this.disabled}
27
- class="${cn(
28
- Button.buttonVariants({
29
- variant: this.variant,
30
- size: this.size,
31
- className: this.className,
32
- })
33
- )}"
34
- >
35
- <slot></slot>
36
- </button>
37
- `;
38
- }
39
- }
@@ -1,186 +0,0 @@
1
- import type { Meta, StoryObj } from '@storybook/web-components';
2
- import { action } from '@storybook/addon-actions';
3
- import { html } from 'lit';
4
- import './button.atom';
5
-
6
- const meta: Meta = {
7
- component: 'components/button',
8
- tags: ['autodocs'],
9
- argTypes: {
10
- variant: {
11
- control: {
12
- type: 'select',
13
- },
14
- options: [
15
- 'default',
16
- 'destructive',
17
- 'outline',
18
- 'secondary',
19
- 'ghost',
20
- 'link',
21
- ],
22
- },
23
- size: {
24
- control: {
25
- type: 'select',
26
- },
27
- options: ['default', 'sm', 'lg', 'icon'],
28
- },
29
- disabled: { control: 'boolean' },
30
- onClick: { action: 'button-click' },
31
- },
32
- };
33
- export default meta;
34
- type Story = StoryObj;
35
-
36
- const logger = () => {
37
- console.log('Btn Clicked!');
38
- };
39
-
40
- export const Default: Story = {
41
- args: {
42
- label: 'Default',
43
- variant: 'default',
44
- size: 'lg',
45
- disabled: false,
46
- },
47
-
48
- render: ({ label, variant, size, disabled }) =>
49
- html`<rtg-button
50
- .onClick=${action('button-click')}
51
- variant=${variant}
52
- size=${size}
53
- ?disabled=${disabled}
54
- >
55
- ${label}</rtg-button
56
- >`,
57
- };
58
-
59
- export const Primary: Story = {
60
- args: {
61
- label: 'Primary',
62
- variant: 'default',
63
- size: 'lg',
64
- disabled: false,
65
- },
66
- render: ({ label, variant, size, disabled }) =>
67
- html`<rtg-button
68
- .onClick=${logger}
69
- variant=${variant}
70
- size=${size}
71
- ?disabled=${disabled}
72
- >${label}</rtg-button
73
- > `,
74
- };
75
-
76
- export const Destructive: Story = {
77
- args: {
78
- label: 'Destructive',
79
- variant: 'destructive',
80
- size: 'lg',
81
- disabled: false,
82
- },
83
- render: ({ label, variant, size, disabled }) =>
84
- html`<rtg-button
85
- .onClick=${logger}
86
- variant=${variant}
87
- size=${size}
88
- ?disabled=${disabled}
89
- >${label}</rtg-button
90
- > `,
91
- };
92
-
93
- export const Outline: Story = {
94
- args: {
95
- label: 'Outline',
96
- variant: 'outline',
97
- size: 'lg',
98
- disabled: false,
99
- },
100
- render: ({ label, variant, size, disabled }) =>
101
- html`<rtg-button
102
- .onClick=${logger}
103
- variant=${variant}
104
- size=${size}
105
- ?disabled=${disabled}
106
- >${label}</rtg-button
107
- > `,
108
- };
109
-
110
- export const Ghost: Story = {
111
- args: {
112
- variant: 'ghost',
113
- label: 'Ghost',
114
- size: 'lg',
115
- disabled: false,
116
- },
117
- render: ({ label, variant, size, disabled }) =>
118
- html`<rtg-button
119
- .onClick=${logger}
120
- variant=${variant}
121
- size=${size}
122
- ?disabled=${disabled}
123
- >${label}</rtg-button
124
- > `,
125
- };
126
-
127
- export const Link: Story = {
128
- args: {
129
- variant: 'link',
130
- label: 'Link',
131
- size: 'lg',
132
- disabled: false,
133
- },
134
- render: ({ label, variant, size, disabled }) =>
135
- html`<rtg-button
136
- .onClick=${logger}
137
- variant=${variant}
138
- size=${size}
139
- ?disabled=${disabled}
140
- >${label}</rtg-button
141
- > `,
142
- };
143
-
144
- export const IconButton: Story = {
145
- args: {
146
- variant: 'outline',
147
- size: 'icon',
148
- disabled: false,
149
- },
150
- render: ({ variant, size }) =>
151
- html`<rtg-button .onClick=${logger} variant=${variant} size=${size}>
152
- <iconify-icon icon="mdi:home"></iconify-icon>
153
- </rtg-button> `,
154
- };
155
-
156
- export const ButtonWithIcon: Story = {
157
- args: {
158
- label: 'Home Page',
159
- variant: 'default',
160
- size: 'default',
161
- disabled: false,
162
- },
163
- render: ({ variant, label, size, disabled }) =>
164
- html`
165
- <rtg-button varian=${variant} ?disabled=${disabled} size=${size}
166
- ><iconify-icon class="mr-2" icon="mdi:home"></iconify-icon>
167
- ${label}</rtg-button
168
- >
169
- `,
170
- };
171
-
172
- export const animationButton: Story = {
173
- args: {
174
- label: 'Home Page',
175
- variant: 'default',
176
- size: 'default',
177
- disabled: true,
178
- },
179
- render: ({ variant, label, size, disabled }) =>
180
- html`
181
- <rtg-button varian=${variant} ?disabled=${disabled} size=${size}
182
- ><iconify-icon class="mr-2 animate-spin" icon="mdi:home"></iconify-icon>
183
- ${label}</rtg-button
184
- >
185
- `,
186
- };
@@ -1,31 +0,0 @@
1
- import { cva } from 'class-variance-authority';
2
-
3
- export const buttonStyle = cva(
4
- 'inline-flex items-center justify-center whitespace-nowrap rounded-sm text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
5
- {
6
- variants: {
7
- variant: {
8
- default:
9
- 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
10
- destructive:
11
- 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
12
- outline:
13
- 'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
14
- secondary:
15
- 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
16
- ghost: 'hover:bg-accent hover:text-accent-foreground',
17
- link: 'text-primary underline-offset-4 hover:underline',
18
- },
19
- size: {
20
- default: 'h-8 px-4 py-2',
21
- sm: 'h-7 rounded-sm px-3 text-xs',
22
- lg: 'h-9 rounded-sm px-8',
23
- icon: 'h-8 w-8',
24
- },
25
- },
26
- defaultVariants: {
27
- variant: 'default',
28
- size: 'default',
29
- },
30
- }
31
- );