@shipfox/react-ui 0.3.0 → 0.5.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 (314) hide show
  1. package/.storybook/main.ts +20 -10
  2. package/.storybook/preview.tsx +1 -1
  3. package/.storybook/vitest.setup.ts +4 -0
  4. package/.turbo/turbo-build.log +2 -2
  5. package/.turbo/turbo-check.log +2 -2
  6. package/.turbo/turbo-type.log +1 -1
  7. package/CHANGELOG.md +18 -0
  8. package/README.md +40 -1
  9. package/argos.config.ts +33 -0
  10. package/dist/components/alert/alert.d.ts +2 -2
  11. package/dist/components/alert/alert.js +3 -3
  12. package/dist/components/alert/alert.js.map +1 -1
  13. package/dist/components/alert/alert.stories.js +2 -2
  14. package/dist/components/alert/alert.stories.js.map +1 -1
  15. package/dist/components/avatar/avatar-group.js +3 -3
  16. package/dist/components/avatar/avatar-group.js.map +1 -1
  17. package/dist/components/avatar/avatar.d.ts +4 -1
  18. package/dist/components/avatar/avatar.d.ts.map +1 -1
  19. package/dist/components/avatar/avatar.js +7 -8
  20. package/dist/components/avatar/avatar.js.map +1 -1
  21. package/dist/components/avatar/avatar.stories.js +15 -3
  22. package/dist/components/avatar/avatar.stories.js.map +1 -1
  23. package/dist/components/badge/badge.d.ts +48 -0
  24. package/dist/components/badge/badge.d.ts.map +1 -0
  25. package/dist/components/badge/badge.js +72 -0
  26. package/dist/components/badge/badge.js.map +1 -0
  27. package/dist/components/badge/badge.stories.js +802 -0
  28. package/dist/components/badge/badge.stories.js.map +1 -0
  29. package/dist/components/badge/icon-badge.d.ts +9 -0
  30. package/dist/components/badge/icon-badge.d.ts.map +1 -0
  31. package/dist/components/badge/icon-badge.js +32 -0
  32. package/dist/components/badge/icon-badge.js.map +1 -0
  33. package/dist/components/badge/index.d.ts +5 -0
  34. package/dist/components/badge/index.d.ts.map +1 -0
  35. package/dist/components/badge/index.js +6 -0
  36. package/dist/components/badge/index.js.map +1 -0
  37. package/dist/components/badge/status-badge.d.ts +9 -0
  38. package/dist/components/badge/status-badge.d.ts.map +1 -0
  39. package/dist/components/badge/status-badge.js +29 -0
  40. package/dist/components/badge/status-badge.js.map +1 -0
  41. package/dist/components/badge/user-badge.d.ts +8 -0
  42. package/dist/components/badge/user-badge.d.ts.map +1 -0
  43. package/dist/components/badge/user-badge.js +24 -0
  44. package/dist/components/badge/user-badge.js.map +1 -0
  45. package/dist/components/button/button-link.d.ts +14 -0
  46. package/dist/components/button/button-link.d.ts.map +1 -0
  47. package/dist/components/button/button-link.js +63 -0
  48. package/dist/components/button/button-link.js.map +1 -0
  49. package/dist/components/button/button-link.stories.js +127 -0
  50. package/dist/components/button/button-link.stories.js.map +1 -0
  51. package/dist/components/{button.d.ts → button/button.d.ts} +2 -2
  52. package/dist/components/button/button.d.ts.map +1 -0
  53. package/dist/components/{button.js → button/button.js} +9 -8
  54. package/dist/components/button/button.js.map +1 -0
  55. package/dist/components/{button.stories.js → button/button.stories.js} +2 -14
  56. package/dist/components/button/button.stories.js.map +1 -0
  57. package/dist/components/button/icon-button.d.ts +14 -0
  58. package/dist/components/button/icon-button.d.ts.map +1 -0
  59. package/dist/components/button/icon-button.js +53 -0
  60. package/dist/components/button/icon-button.js.map +1 -0
  61. package/dist/components/button/icon-button.stories.js +254 -0
  62. package/dist/components/button/icon-button.stories.js.map +1 -0
  63. package/dist/components/button/index.d.ts +4 -0
  64. package/dist/components/button/index.d.ts.map +1 -0
  65. package/dist/components/button/index.js +5 -0
  66. package/dist/components/button/index.js.map +1 -0
  67. package/dist/components/checkbox/checkbox-label.d.ts +14 -0
  68. package/dist/components/checkbox/checkbox-label.d.ts.map +1 -0
  69. package/dist/components/checkbox/checkbox-label.js +82 -0
  70. package/dist/components/checkbox/checkbox-label.js.map +1 -0
  71. package/dist/components/checkbox/checkbox-links.d.ts +18 -0
  72. package/dist/components/checkbox/checkbox-links.d.ts.map +1 -0
  73. package/dist/components/checkbox/checkbox-links.js +58 -0
  74. package/dist/components/checkbox/checkbox-links.js.map +1 -0
  75. package/dist/components/checkbox/checkbox.d.ts +9 -0
  76. package/dist/components/checkbox/checkbox.d.ts.map +1 -0
  77. package/dist/components/checkbox/checkbox.js +49 -0
  78. package/dist/components/checkbox/checkbox.js.map +1 -0
  79. package/dist/components/checkbox/checkbox.stories.js +566 -0
  80. package/dist/components/checkbox/checkbox.stories.js.map +1 -0
  81. package/dist/components/checkbox/index.d.ts +4 -0
  82. package/dist/components/checkbox/index.d.ts.map +1 -0
  83. package/dist/components/checkbox/index.js +5 -0
  84. package/dist/components/checkbox/index.js.map +1 -0
  85. package/dist/components/code-block/code-block-footer.d.ts +26 -0
  86. package/dist/components/code-block/code-block-footer.d.ts.map +1 -0
  87. package/dist/components/code-block/code-block-footer.js +86 -0
  88. package/dist/components/code-block/code-block-footer.js.map +1 -0
  89. package/dist/components/code-block/code-block.d.ts +50 -0
  90. package/dist/components/code-block/code-block.d.ts.map +1 -0
  91. package/dist/components/code-block/code-block.js +142 -0
  92. package/dist/components/code-block/code-block.js.map +1 -0
  93. package/dist/components/code-block/code-block.stories.js +341 -0
  94. package/dist/components/code-block/code-block.stories.js.map +1 -0
  95. package/dist/components/code-block/code-content.d.ts +11 -0
  96. package/dist/components/code-block/code-content.d.ts.map +1 -0
  97. package/dist/components/code-block/code-content.js +29 -0
  98. package/dist/components/code-block/code-content.js.map +1 -0
  99. package/dist/components/code-block/code-copy-button.d.ts +11 -0
  100. package/dist/components/code-block/code-copy-button.d.ts.map +1 -0
  101. package/dist/components/code-block/code-copy-button.js +49 -0
  102. package/dist/components/code-block/code-copy-button.js.map +1 -0
  103. package/dist/components/code-block/code-tabs.d.ts +16 -0
  104. package/dist/components/code-block/code-tabs.d.ts.map +1 -0
  105. package/dist/components/code-block/code-tabs.js +98 -0
  106. package/dist/components/code-block/code-tabs.js.map +1 -0
  107. package/dist/components/code-block/index.d.ts +4 -0
  108. package/dist/components/code-block/index.d.ts.map +1 -0
  109. package/dist/components/code-block/index.js +5 -0
  110. package/dist/components/code-block/index.js.map +1 -0
  111. package/dist/components/dynamic-item/dynamic-item.d.ts +13 -0
  112. package/dist/components/dynamic-item/dynamic-item.d.ts.map +1 -0
  113. package/dist/components/dynamic-item/dynamic-item.js +43 -0
  114. package/dist/components/dynamic-item/dynamic-item.js.map +1 -0
  115. package/dist/components/dynamic-item/dynamic-item.stories.js +375 -0
  116. package/dist/components/dynamic-item/dynamic-item.stories.js.map +1 -0
  117. package/dist/components/dynamic-item/index.d.ts +2 -0
  118. package/dist/components/dynamic-item/index.d.ts.map +1 -0
  119. package/dist/components/dynamic-item/index.js +3 -0
  120. package/dist/components/dynamic-item/index.js.map +1 -0
  121. package/dist/components/icon/custom/index.d.ts +2 -0
  122. package/dist/components/icon/custom/index.d.ts.map +1 -1
  123. package/dist/components/icon/custom/index.js +2 -0
  124. package/dist/components/icon/custom/index.js.map +1 -1
  125. package/dist/components/icon/custom/slack-logo.d.ts +6 -0
  126. package/dist/components/icon/custom/slack-logo.d.ts.map +1 -0
  127. package/dist/components/icon/custom/slack-logo.js +34 -0
  128. package/dist/components/icon/custom/slack-logo.js.map +1 -0
  129. package/dist/components/icon/custom/stripe-logo.d.ts +8 -0
  130. package/dist/components/icon/custom/stripe-logo.d.ts.map +1 -0
  131. package/dist/components/icon/custom/stripe-logo.js +24 -0
  132. package/dist/components/icon/custom/stripe-logo.js.map +1 -0
  133. package/dist/components/icon/icon.d.ts +13 -2
  134. package/dist/components/icon/icon.d.ts.map +1 -1
  135. package/dist/components/icon/icon.js +14 -3
  136. package/dist/components/icon/icon.js.map +1 -1
  137. package/dist/components/icon/icon.stories.js +6 -3
  138. package/dist/components/icon/icon.stories.js.map +1 -1
  139. package/dist/components/index.d.ts +9 -1
  140. package/dist/components/index.d.ts.map +1 -1
  141. package/dist/components/index.js +10 -2
  142. package/dist/components/index.js.map +1 -1
  143. package/dist/components/inline-tips/inline-tips.d.ts +1 -1
  144. package/dist/components/inline-tips/inline-tips.d.ts.map +1 -1
  145. package/dist/components/inline-tips/inline-tips.js +1 -1
  146. package/dist/components/inline-tips/inline-tips.js.map +1 -1
  147. package/dist/components/inline-tips/inline-tips.stories.js +5 -5
  148. package/dist/components/inline-tips/inline-tips.stories.js.map +1 -1
  149. package/dist/components/input/index.d.ts +2 -0
  150. package/dist/components/input/index.d.ts.map +1 -0
  151. package/dist/components/input/index.js +3 -0
  152. package/dist/components/input/index.js.map +1 -0
  153. package/dist/components/input/input.d.ts.map +1 -0
  154. package/dist/components/{input.js → input/input.js} +2 -2
  155. package/dist/components/input/input.js.map +1 -0
  156. package/dist/components/{input.stories.js → input/input.stories.js} +1 -1
  157. package/dist/components/input/input.stories.js.map +1 -0
  158. package/dist/components/item/index.d.ts +2 -0
  159. package/dist/components/item/index.d.ts.map +1 -0
  160. package/dist/components/item/index.js +3 -0
  161. package/dist/components/item/index.js.map +1 -0
  162. package/dist/components/item/item.d.ts +32 -0
  163. package/dist/components/item/item.d.ts.map +1 -0
  164. package/dist/components/item/item.js +120 -0
  165. package/dist/components/item/item.js.map +1 -0
  166. package/dist/components/item/item.stories.js +232 -0
  167. package/dist/components/item/item.stories.js.map +1 -0
  168. package/dist/components/label/index.d.ts +2 -0
  169. package/dist/components/label/index.d.ts.map +1 -0
  170. package/dist/components/label/index.js +3 -0
  171. package/dist/components/label/index.js.map +1 -0
  172. package/dist/components/label/label.d.ts +7 -0
  173. package/dist/components/label/label.d.ts.map +1 -0
  174. package/dist/components/label/label.js +13 -0
  175. package/dist/components/label/label.js.map +1 -0
  176. package/dist/components/label/label.stories.js +105 -0
  177. package/dist/components/label/label.stories.js.map +1 -0
  178. package/dist/components/moving-border/moving-border.d.ts +9 -0
  179. package/dist/components/moving-border/moving-border.d.ts.map +1 -0
  180. package/dist/components/moving-border/moving-border.js +54 -0
  181. package/dist/components/moving-border/moving-border.js.map +1 -0
  182. package/dist/components/textarea/textarea.js +1 -1
  183. package/dist/components/textarea/textarea.js.map +1 -1
  184. package/dist/components/theme/index.d.ts +2 -0
  185. package/dist/components/theme/index.d.ts.map +1 -0
  186. package/dist/components/theme/index.js +3 -0
  187. package/dist/components/theme/index.js.map +1 -0
  188. package/dist/components/{theme-provider.d.ts → theme/theme-provider.d.ts} +1 -1
  189. package/dist/components/theme/theme-provider.d.ts.map +1 -0
  190. package/dist/components/{theme-provider.js → theme/theme-provider.js} +1 -1
  191. package/dist/components/theme/theme-provider.js.map +1 -0
  192. package/dist/components/toast/index.d.ts +3 -0
  193. package/dist/components/toast/index.d.ts.map +1 -0
  194. package/dist/components/toast/index.js +4 -0
  195. package/dist/components/toast/index.js.map +1 -0
  196. package/dist/components/toast/toast-custom.d.ts +19 -0
  197. package/dist/components/toast/toast-custom.d.ts.map +1 -0
  198. package/dist/components/toast/toast-custom.js +134 -0
  199. package/dist/components/toast/toast-custom.js.map +1 -0
  200. package/dist/components/toast/toast.d.ts +5 -0
  201. package/dist/components/toast/toast.d.ts.map +1 -0
  202. package/dist/components/toast/toast.js +40 -0
  203. package/dist/components/toast/toast.js.map +1 -0
  204. package/dist/components/toast/toast.stories.js +326 -0
  205. package/dist/components/toast/toast.stories.js.map +1 -0
  206. package/dist/components/tooltip/index.d.ts +2 -0
  207. package/dist/components/tooltip/index.d.ts.map +1 -0
  208. package/dist/components/tooltip/index.js +3 -0
  209. package/dist/components/tooltip/index.js.map +1 -0
  210. package/dist/components/tooltip/tooltip.d.ts +18 -5
  211. package/dist/components/tooltip/tooltip.d.ts.map +1 -1
  212. package/dist/components/tooltip/tooltip.js +63 -3
  213. package/dist/components/tooltip/tooltip.js.map +1 -1
  214. package/dist/components/tooltip/tooltip.stories.js +560 -0
  215. package/dist/components/tooltip/tooltip.stories.js.map +1 -0
  216. package/dist/hooks/index.d.ts +3 -0
  217. package/dist/hooks/index.d.ts.map +1 -1
  218. package/dist/hooks/index.js +3 -0
  219. package/dist/hooks/index.js.map +1 -1
  220. package/dist/hooks/useResolvedTheme.d.ts +2 -0
  221. package/dist/hooks/useResolvedTheme.d.ts.map +1 -0
  222. package/dist/hooks/useResolvedTheme.js +24 -0
  223. package/dist/hooks/useResolvedTheme.js.map +1 -0
  224. package/dist/hooks/useShikiHighlight.d.ts +28 -0
  225. package/dist/hooks/useShikiHighlight.d.ts.map +1 -0
  226. package/dist/hooks/useShikiHighlight.js +106 -0
  227. package/dist/hooks/useShikiHighlight.js.map +1 -0
  228. package/dist/hooks/useShikiStyleInjection.d.ts +2 -0
  229. package/dist/hooks/useShikiStyleInjection.d.ts.map +1 -0
  230. package/dist/hooks/useShikiStyleInjection.js +34 -0
  231. package/dist/hooks/useShikiStyleInjection.js.map +1 -0
  232. package/dist/onboarding/sign-in.stories.js +93 -0
  233. package/dist/onboarding/sign-in.stories.js.map +1 -0
  234. package/index.css +130 -12
  235. package/package.json +14 -3
  236. package/src/assets/illustration-1.svg +92 -0
  237. package/src/assets/illustration-2.svg +14 -0
  238. package/src/assets/illustration-gradient.svg +7049 -0
  239. package/src/components/alert/alert.stories.tsx +2 -2
  240. package/src/components/alert/alert.tsx +3 -3
  241. package/src/components/avatar/avatar-group.tsx +3 -3
  242. package/src/components/avatar/avatar.stories.tsx +9 -2
  243. package/src/components/avatar/avatar.tsx +10 -6
  244. package/src/components/badge/badge.stories.tsx +468 -0
  245. package/src/components/badge/badge.tsx +147 -0
  246. package/src/components/badge/icon-badge.tsx +43 -0
  247. package/src/components/badge/index.ts +4 -0
  248. package/src/components/badge/status-badge.tsx +43 -0
  249. package/src/components/badge/user-badge.tsx +34 -0
  250. package/src/components/button/button-link.stories.tsx +86 -0
  251. package/src/components/button/button-link.tsx +76 -0
  252. package/src/components/{button.stories.tsx → button/button.stories.tsx} +1 -7
  253. package/src/components/{button.tsx → button/button.tsx} +9 -7
  254. package/src/components/button/icon-button.stories.tsx +182 -0
  255. package/src/components/button/icon-button.tsx +69 -0
  256. package/src/components/button/index.ts +3 -0
  257. package/src/components/checkbox/checkbox-label.tsx +125 -0
  258. package/src/components/checkbox/checkbox-links.tsx +90 -0
  259. package/src/components/checkbox/checkbox.stories.tsx +375 -0
  260. package/src/components/checkbox/checkbox.tsx +71 -0
  261. package/src/components/checkbox/index.ts +3 -0
  262. package/src/components/code-block/code-block-footer.tsx +173 -0
  263. package/src/components/code-block/code-block.stories.tsx +323 -0
  264. package/src/components/code-block/code-block.tsx +283 -0
  265. package/src/components/code-block/code-content.tsx +63 -0
  266. package/src/components/code-block/code-copy-button.tsx +73 -0
  267. package/src/components/code-block/code-tabs.tsx +170 -0
  268. package/src/components/code-block/index.ts +3 -0
  269. package/src/components/dynamic-item/dynamic-item.stories.tsx +261 -0
  270. package/src/components/dynamic-item/dynamic-item.tsx +68 -0
  271. package/src/components/dynamic-item/index.ts +1 -0
  272. package/src/components/icon/custom/index.ts +2 -0
  273. package/src/components/icon/custom/slack-logo.tsx +35 -0
  274. package/src/components/icon/custom/stripe-logo.tsx +27 -0
  275. package/src/components/icon/icon.stories.tsx +3 -1
  276. package/src/components/icon/icon.tsx +23 -1
  277. package/src/components/index.ts +9 -1
  278. package/src/components/inline-tips/inline-tips.stories.tsx +3 -3
  279. package/src/components/inline-tips/inline-tips.tsx +2 -2
  280. package/src/components/input/index.ts +1 -0
  281. package/src/components/{input.tsx → input/input.tsx} +1 -1
  282. package/src/components/item/index.ts +1 -0
  283. package/src/components/item/item.stories.tsx +150 -0
  284. package/src/components/item/item.tsx +182 -0
  285. package/src/components/label/index.ts +1 -0
  286. package/src/components/label/label.stories.tsx +67 -0
  287. package/src/components/label/label.tsx +15 -0
  288. package/src/components/moving-border/moving-border.tsx +67 -0
  289. package/src/components/textarea/textarea.tsx +1 -1
  290. package/src/components/theme/index.ts +1 -0
  291. package/src/components/toast/index.ts +2 -0
  292. package/src/components/toast/toast-custom.tsx +154 -0
  293. package/src/components/toast/toast.stories.tsx +369 -0
  294. package/src/components/toast/toast.tsx +41 -0
  295. package/src/components/tooltip/index.ts +1 -0
  296. package/src/components/tooltip/tooltip.stories.tsx +284 -0
  297. package/src/components/tooltip/tooltip.tsx +79 -10
  298. package/src/hooks/index.ts +3 -0
  299. package/src/hooks/useResolvedTheme.ts +34 -0
  300. package/src/hooks/useShikiHighlight.ts +140 -0
  301. package/src/hooks/useShikiStyleInjection.ts +34 -0
  302. package/src/onboarding/sign-in.stories.tsx +73 -0
  303. package/vitest.config.ts +30 -3
  304. package/dist/components/button.d.ts.map +0 -1
  305. package/dist/components/button.js.map +0 -1
  306. package/dist/components/button.stories.js.map +0 -1
  307. package/dist/components/input.d.ts.map +0 -1
  308. package/dist/components/input.js.map +0 -1
  309. package/dist/components/input.stories.js.map +0 -1
  310. package/dist/components/theme-provider.d.ts.map +0 -1
  311. package/dist/components/theme-provider.js.map +0 -1
  312. /package/dist/components/{input.d.ts → input/input.d.ts} +0 -0
  313. /package/src/components/{input.stories.tsx → input/input.stories.tsx} +0 -0
  314. /package/src/components/{theme-provider.tsx → theme/theme-provider.tsx} +0 -0
package/dist/components/badge/badge.stories.js ADDED
@@ -0,0 +1,802 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { Code } from '../../components/typography/index.js';
3
+ import React from 'react';
4
+ import { Badge, IconBadge, StatusBadge, UserBadge } from './index.js';
5
+ const meta = {
6
+ title: 'Components/Badge',
7
+ component: Badge,
8
+ parameters: {
9
+ layout: 'centered'
10
+ },
11
+ tags: [
12
+ 'autodocs'
13
+ ]
14
+ };
15
+ export default meta;
16
+ export const AllVariants = {
17
+ render: ()=>/*#__PURE__*/ _jsxs("div", {
18
+ className: "flex flex-col gap-32",
19
+ children: [
20
+ /*#__PURE__*/ _jsxs("div", {
21
+ children: [
22
+ /*#__PURE__*/ _jsx(Code, {
23
+ variant: "label",
24
+ className: "mb-16",
25
+ children: "Status Badge"
26
+ }),
27
+ /*#__PURE__*/ _jsxs("div", {
28
+ className: "flex gap-16",
29
+ children: [
30
+ /*#__PURE__*/ _jsx(StatusBadge, {
31
+ variant: "neutral",
32
+ children: "Badge"
33
+ }),
34
+ /*#__PURE__*/ _jsx(StatusBadge, {
35
+ variant: "info",
36
+ children: "Badge"
37
+ }),
38
+ /*#__PURE__*/ _jsx(StatusBadge, {
39
+ variant: "feature",
40
+ children: "Badge"
41
+ }),
42
+ /*#__PURE__*/ _jsx(StatusBadge, {
43
+ variant: "success",
44
+ dotClassName: "size-5 rounded-full",
45
+ children: "Badge"
46
+ }),
47
+ /*#__PURE__*/ _jsx(StatusBadge, {
48
+ variant: "warning",
49
+ children: "Badge"
50
+ }),
51
+ /*#__PURE__*/ _jsx(StatusBadge, {
52
+ variant: "error",
53
+ children: "Badge"
54
+ })
55
+ ]
56
+ })
57
+ ]
58
+ }),
59
+ /*#__PURE__*/ _jsxs("div", {
60
+ children: [
61
+ /*#__PURE__*/ _jsx(Code, {
62
+ variant: "label",
63
+ className: "mb-16",
64
+ children: "User Badge"
65
+ }),
66
+ /*#__PURE__*/ _jsxs("div", {
67
+ className: "flex gap-16",
68
+ children: [
69
+ /*#__PURE__*/ _jsx(UserBadge, {
70
+ name: "Thierry Abalea",
71
+ avatarSrc: "https://avatars.githubusercontent.com/u/1290899?v=4"
72
+ }),
73
+ /*#__PURE__*/ _jsx(UserBadge, {
74
+ name: "Kyle Nguyen",
75
+ avatarSrc: "https://avatars.githubusercontent.com/u/89263955?v=4"
76
+ }),
77
+ /*#__PURE__*/ _jsx(UserBadge, {
78
+ name: "Noe Charmet",
79
+ avatarSrc: "https://avatars.githubusercontent.com/u/59678972?v=4"
80
+ })
81
+ ]
82
+ })
83
+ ]
84
+ }),
85
+ /*#__PURE__*/ _jsxs("div", {
86
+ children: [
87
+ /*#__PURE__*/ _jsx(Code, {
88
+ variant: "label",
89
+ className: "mb-16",
90
+ children: "Icon Badge"
91
+ }),
92
+ /*#__PURE__*/ _jsxs("div", {
93
+ className: "flex gap-16",
94
+ children: [
95
+ /*#__PURE__*/ _jsx(IconBadge, {
96
+ variant: "neutral",
97
+ name: "homeSmile"
98
+ }),
99
+ /*#__PURE__*/ _jsx(IconBadge, {
100
+ variant: "info",
101
+ name: "homeSmile"
102
+ }),
103
+ /*#__PURE__*/ _jsx(IconBadge, {
104
+ variant: "feature",
105
+ name: "homeSmile"
106
+ }),
107
+ /*#__PURE__*/ _jsx(IconBadge, {
108
+ variant: "success",
109
+ name: "homeSmile"
110
+ }),
111
+ /*#__PURE__*/ _jsx(IconBadge, {
112
+ variant: "primary",
113
+ name: "homeSmile"
114
+ }),
115
+ /*#__PURE__*/ _jsx(IconBadge, {
116
+ variant: "error",
117
+ name: "homeSmile"
118
+ })
119
+ ]
120
+ })
121
+ ]
122
+ }),
123
+ /*#__PURE__*/ _jsxs("div", {
124
+ children: [
125
+ /*#__PURE__*/ _jsx(Code, {
126
+ variant: "label",
127
+ className: "mb-16",
128
+ children: "Badge - 2XS Size"
129
+ }),
130
+ /*#__PURE__*/ _jsxs("div", {
131
+ className: "flex flex-col gap-16",
132
+ children: [
133
+ /*#__PURE__*/ _jsxs("div", {
134
+ className: "flex gap-16",
135
+ children: [
136
+ /*#__PURE__*/ _jsx(Badge, {
137
+ variant: "neutral",
138
+ size: "2xs",
139
+ children: "Badge"
140
+ }),
141
+ /*#__PURE__*/ _jsx(Badge, {
142
+ variant: "info",
143
+ size: "2xs",
144
+ children: "Badge"
145
+ }),
146
+ /*#__PURE__*/ _jsx(Badge, {
147
+ variant: "feature",
148
+ size: "2xs",
149
+ children: "Badge"
150
+ }),
151
+ /*#__PURE__*/ _jsx(Badge, {
152
+ variant: "success",
153
+ size: "2xs",
154
+ children: "Badge"
155
+ }),
156
+ /*#__PURE__*/ _jsx(Badge, {
157
+ variant: "warning",
158
+ size: "2xs",
159
+ children: "Badge"
160
+ }),
161
+ /*#__PURE__*/ _jsx(Badge, {
162
+ variant: "error",
163
+ size: "2xs",
164
+ children: "Badge"
165
+ })
166
+ ]
167
+ }),
168
+ /*#__PURE__*/ _jsxs("div", {
169
+ className: "flex gap-16",
170
+ children: [
171
+ /*#__PURE__*/ _jsx(Badge, {
172
+ variant: "neutral",
173
+ size: "2xs",
174
+ iconRight: "close",
175
+ children: "Badge"
176
+ }),
177
+ /*#__PURE__*/ _jsx(Badge, {
178
+ variant: "info",
179
+ size: "2xs",
180
+ iconRight: "close",
181
+ children: "Badge"
182
+ }),
183
+ /*#__PURE__*/ _jsx(Badge, {
184
+ variant: "feature",
185
+ size: "2xs",
186
+ iconRight: "close",
187
+ children: "Badge"
188
+ }),
189
+ /*#__PURE__*/ _jsx(Badge, {
190
+ variant: "success",
191
+ size: "2xs",
192
+ iconRight: "close",
193
+ children: "Badge"
194
+ }),
195
+ /*#__PURE__*/ _jsx(Badge, {
196
+ variant: "warning",
197
+ size: "2xs",
198
+ iconRight: "close",
199
+ children: "Badge"
200
+ }),
201
+ /*#__PURE__*/ _jsx(Badge, {
202
+ variant: "error",
203
+ size: "2xs",
204
+ iconRight: "close",
205
+ children: "Badge"
206
+ })
207
+ ]
208
+ }),
209
+ /*#__PURE__*/ _jsxs("div", {
210
+ className: "flex gap-16",
211
+ children: [
212
+ /*#__PURE__*/ _jsx(Badge, {
213
+ variant: "neutral",
214
+ size: "2xs",
215
+ iconLeft: "close",
216
+ children: "Badge"
217
+ }),
218
+ /*#__PURE__*/ _jsx(Badge, {
219
+ variant: "info",
220
+ size: "2xs",
221
+ iconLeft: "close",
222
+ children: "Badge"
223
+ }),
224
+ /*#__PURE__*/ _jsx(Badge, {
225
+ variant: "feature",
226
+ size: "2xs",
227
+ iconLeft: "close",
228
+ children: "Badge"
229
+ }),
230
+ /*#__PURE__*/ _jsx(Badge, {
231
+ variant: "success",
232
+ size: "2xs",
233
+ iconLeft: "close",
234
+ children: "Badge"
235
+ }),
236
+ /*#__PURE__*/ _jsx(Badge, {
237
+ variant: "warning",
238
+ size: "2xs",
239
+ iconLeft: "close",
240
+ children: "Badge"
241
+ }),
242
+ /*#__PURE__*/ _jsx(Badge, {
243
+ variant: "error",
244
+ size: "2xs",
245
+ iconLeft: "close",
246
+ children: "Badge"
247
+ })
248
+ ]
249
+ })
250
+ ]
251
+ })
252
+ ]
253
+ }),
254
+ /*#__PURE__*/ _jsxs("div", {
255
+ children: [
256
+ /*#__PURE__*/ _jsx(Code, {
257
+ variant: "label",
258
+ className: "mb-16",
259
+ children: "Badge - XS Size"
260
+ }),
261
+ /*#__PURE__*/ _jsxs("div", {
262
+ className: "flex flex-col gap-16",
263
+ children: [
264
+ /*#__PURE__*/ _jsxs("div", {
265
+ className: "flex gap-16",
266
+ children: [
267
+ /*#__PURE__*/ _jsx(Badge, {
268
+ variant: "neutral",
269
+ size: "xs",
270
+ children: "Badge"
271
+ }),
272
+ /*#__PURE__*/ _jsx(Badge, {
273
+ variant: "info",
274
+ size: "xs",
275
+ children: "Badge"
276
+ }),
277
+ /*#__PURE__*/ _jsx(Badge, {
278
+ variant: "feature",
279
+ size: "xs",
280
+ children: "Badge"
281
+ }),
282
+ /*#__PURE__*/ _jsx(Badge, {
283
+ variant: "success",
284
+ size: "xs",
285
+ children: "Badge"
286
+ }),
287
+ /*#__PURE__*/ _jsx(Badge, {
288
+ variant: "warning",
289
+ size: "xs",
290
+ children: "Badge"
291
+ }),
292
+ /*#__PURE__*/ _jsx(Badge, {
293
+ variant: "error",
294
+ size: "xs",
295
+ children: "Badge"
296
+ })
297
+ ]
298
+ }),
299
+ /*#__PURE__*/ _jsxs("div", {
300
+ className: "flex gap-16",
301
+ children: [
302
+ /*#__PURE__*/ _jsx(Badge, {
303
+ variant: "neutral",
304
+ size: "xs",
305
+ iconRight: "close",
306
+ children: "Badge"
307
+ }),
308
+ /*#__PURE__*/ _jsx(Badge, {
309
+ variant: "info",
310
+ size: "xs",
311
+ iconRight: "close",
312
+ children: "Badge"
313
+ }),
314
+ /*#__PURE__*/ _jsx(Badge, {
315
+ variant: "feature",
316
+ size: "xs",
317
+ iconRight: "close",
318
+ children: "Badge"
319
+ }),
320
+ /*#__PURE__*/ _jsx(Badge, {
321
+ variant: "success",
322
+ size: "xs",
323
+ iconRight: "close",
324
+ children: "Badge"
325
+ }),
326
+ /*#__PURE__*/ _jsx(Badge, {
327
+ variant: "warning",
328
+ size: "xs",
329
+ iconRight: "close",
330
+ children: "Badge"
331
+ }),
332
+ /*#__PURE__*/ _jsx(Badge, {
333
+ variant: "error",
334
+ size: "xs",
335
+ iconRight: "close",
336
+ children: "Badge"
337
+ })
338
+ ]
339
+ }),
340
+ /*#__PURE__*/ _jsxs("div", {
341
+ className: "flex gap-16",
342
+ children: [
343
+ /*#__PURE__*/ _jsx(Badge, {
344
+ variant: "neutral",
345
+ size: "xs",
346
+ iconLeft: "close",
347
+ children: "Badge"
348
+ }),
349
+ /*#__PURE__*/ _jsx(Badge, {
350
+ variant: "info",
351
+ size: "xs",
352
+ iconLeft: "close",
353
+ children: "Badge"
354
+ }),
355
+ /*#__PURE__*/ _jsx(Badge, {
356
+ variant: "feature",
357
+ size: "xs",
358
+ iconLeft: "close",
359
+ children: "Badge"
360
+ }),
361
+ /*#__PURE__*/ _jsx(Badge, {
362
+ variant: "success",
363
+ size: "xs",
364
+ iconLeft: "close",
365
+ children: "Badge"
366
+ }),
367
+ /*#__PURE__*/ _jsx(Badge, {
368
+ variant: "warning",
369
+ size: "xs",
370
+ iconLeft: "close",
371
+ children: "Badge"
372
+ }),
373
+ /*#__PURE__*/ _jsx(Badge, {
374
+ variant: "error",
375
+ size: "xs",
376
+ iconLeft: "close",
377
+ children: "Badge"
378
+ })
379
+ ]
380
+ })
381
+ ]
382
+ })
383
+ ]
384
+ }),
385
+ /*#__PURE__*/ _jsxs("div", {
386
+ children: [
387
+ /*#__PURE__*/ _jsx(Code, {
388
+ variant: "label",
389
+ className: "mb-16",
390
+ children: "Badge - Rounded"
391
+ }),
392
+ /*#__PURE__*/ _jsxs("div", {
393
+ className: "flex flex-col gap-16",
394
+ children: [
395
+ /*#__PURE__*/ _jsxs("div", {
396
+ className: "flex gap-16",
397
+ children: [
398
+ /*#__PURE__*/ _jsx(Badge, {
399
+ variant: "neutral",
400
+ size: "2xs",
401
+ radius: "rounded",
402
+ children: "Badge"
403
+ }),
404
+ /*#__PURE__*/ _jsx(Badge, {
405
+ variant: "info",
406
+ size: "2xs",
407
+ radius: "rounded",
408
+ children: "Badge"
409
+ }),
410
+ /*#__PURE__*/ _jsx(Badge, {
411
+ variant: "feature",
412
+ size: "2xs",
413
+ radius: "rounded",
414
+ children: "Badge"
415
+ }),
416
+ /*#__PURE__*/ _jsx(Badge, {
417
+ variant: "success",
418
+ size: "2xs",
419
+ radius: "rounded",
420
+ children: "Badge"
421
+ }),
422
+ /*#__PURE__*/ _jsx(Badge, {
423
+ variant: "warning",
424
+ size: "2xs",
425
+ radius: "rounded",
426
+ children: "Badge"
427
+ }),
428
+ /*#__PURE__*/ _jsx(Badge, {
429
+ variant: "error",
430
+ size: "2xs",
431
+ radius: "rounded",
432
+ children: "Badge"
433
+ })
434
+ ]
435
+ }),
436
+ /*#__PURE__*/ _jsxs("div", {
437
+ className: "flex gap-16",
438
+ children: [
439
+ /*#__PURE__*/ _jsx(Badge, {
440
+ variant: "neutral",
441
+ size: "xs",
442
+ radius: "rounded",
443
+ children: "Badge"
444
+ }),
445
+ /*#__PURE__*/ _jsx(Badge, {
446
+ variant: "info",
447
+ size: "xs",
448
+ radius: "rounded",
449
+ children: "Badge"
450
+ }),
451
+ /*#__PURE__*/ _jsx(Badge, {
452
+ variant: "feature",
453
+ size: "xs",
454
+ radius: "rounded",
455
+ children: "Badge"
456
+ }),
457
+ /*#__PURE__*/ _jsx(Badge, {
458
+ variant: "success",
459
+ size: "xs",
460
+ radius: "rounded",
461
+ children: "Badge"
462
+ }),
463
+ /*#__PURE__*/ _jsx(Badge, {
464
+ variant: "warning",
465
+ size: "xs",
466
+ radius: "rounded",
467
+ children: "Badge"
468
+ }),
469
+ /*#__PURE__*/ _jsx(Badge, {
470
+ variant: "error",
471
+ size: "xs",
472
+ radius: "rounded",
473
+ children: "Badge"
474
+ })
475
+ ]
476
+ }),
477
+ /*#__PURE__*/ _jsxs("div", {
478
+ className: "flex gap-16",
479
+ children: [
480
+ /*#__PURE__*/ _jsx(Badge, {
481
+ variant: "neutral",
482
+ size: "2xs",
483
+ radius: "rounded",
484
+ iconRight: "close",
485
+ children: "Badge"
486
+ }),
487
+ /*#__PURE__*/ _jsx(Badge, {
488
+ variant: "info",
489
+ size: "2xs",
490
+ radius: "rounded",
491
+ iconRight: "close",
492
+ children: "Badge"
493
+ }),
494
+ /*#__PURE__*/ _jsx(Badge, {
495
+ variant: "feature",
496
+ size: "2xs",
497
+ radius: "rounded",
498
+ iconRight: "close",
499
+ children: "Badge"
500
+ }),
501
+ /*#__PURE__*/ _jsx(Badge, {
502
+ variant: "success",
503
+ size: "2xs",
504
+ radius: "rounded",
505
+ iconRight: "close",
506
+ children: "Badge"
507
+ }),
508
+ /*#__PURE__*/ _jsx(Badge, {
509
+ variant: "warning",
510
+ size: "2xs",
511
+ radius: "rounded",
512
+ iconRight: "close",
513
+ children: "Badge"
514
+ }),
515
+ /*#__PURE__*/ _jsx(Badge, {
516
+ variant: "error",
517
+ size: "2xs",
518
+ radius: "rounded",
519
+ iconRight: "close",
520
+ children: "Badge"
521
+ })
522
+ ]
523
+ }),
524
+ /*#__PURE__*/ _jsxs("div", {
525
+ className: "flex gap-16",
526
+ children: [
527
+ /*#__PURE__*/ _jsx(Badge, {
528
+ variant: "neutral",
529
+ size: "xs",
530
+ radius: "rounded",
531
+ iconRight: "close",
532
+ children: "Badge"
533
+ }),
534
+ /*#__PURE__*/ _jsx(Badge, {
535
+ variant: "info",
536
+ size: "xs",
537
+ radius: "rounded",
538
+ iconRight: "close",
539
+ children: "Badge"
540
+ }),
541
+ /*#__PURE__*/ _jsx(Badge, {
542
+ variant: "feature",
543
+ size: "xs",
544
+ radius: "rounded",
545
+ iconRight: "close",
546
+ children: "Badge"
547
+ }),
548
+ /*#__PURE__*/ _jsx(Badge, {
549
+ variant: "success",
550
+ size: "xs",
551
+ radius: "rounded",
552
+ iconRight: "close",
553
+ children: "Badge"
554
+ }),
555
+ /*#__PURE__*/ _jsx(Badge, {
556
+ variant: "warning",
557
+ size: "xs",
558
+ radius: "rounded",
559
+ iconRight: "close",
560
+ children: "Badge"
561
+ }),
562
+ /*#__PURE__*/ _jsx(Badge, {
563
+ variant: "error",
564
+ size: "xs",
565
+ radius: "rounded",
566
+ iconRight: "close",
567
+ children: "Badge"
568
+ })
569
+ ]
570
+ }),
571
+ /*#__PURE__*/ _jsxs("div", {
572
+ className: "flex gap-16",
573
+ children: [
574
+ /*#__PURE__*/ _jsx(Badge, {
575
+ variant: "neutral",
576
+ size: "2xs",
577
+ radius: "rounded",
578
+ iconLeft: "close",
579
+ children: "Badge"
580
+ }),
581
+ /*#__PURE__*/ _jsx(Badge, {
582
+ variant: "info",
583
+ size: "2xs",
584
+ radius: "rounded",
585
+ iconLeft: "close",
586
+ children: "Badge"
587
+ }),
588
+ /*#__PURE__*/ _jsx(Badge, {
589
+ variant: "feature",
590
+ size: "2xs",
591
+ radius: "rounded",
592
+ iconLeft: "close",
593
+ children: "Badge"
594
+ }),
595
+ /*#__PURE__*/ _jsx(Badge, {
596
+ variant: "success",
597
+ size: "2xs",
598
+ radius: "rounded",
599
+ iconLeft: "close",
600
+ children: "Badge"
601
+ }),
602
+ /*#__PURE__*/ _jsx(Badge, {
603
+ variant: "warning",
604
+ size: "2xs",
605
+ radius: "rounded",
606
+ iconLeft: "close",
607
+ children: "Badge"
608
+ }),
609
+ /*#__PURE__*/ _jsx(Badge, {
610
+ variant: "error",
611
+ size: "2xs",
612
+ radius: "rounded",
613
+ iconLeft: "close",
614
+ children: "Badge"
615
+ })
616
+ ]
617
+ }),
618
+ /*#__PURE__*/ _jsxs("div", {
619
+ className: "flex gap-16",
620
+ children: [
621
+ /*#__PURE__*/ _jsx(Badge, {
622
+ variant: "neutral",
623
+ size: "xs",
624
+ radius: "rounded",
625
+ iconLeft: "close",
626
+ children: "Badge"
627
+ }),
628
+ /*#__PURE__*/ _jsx(Badge, {
629
+ variant: "info",
630
+ size: "xs",
631
+ radius: "rounded",
632
+ iconLeft: "close",
633
+ children: "Badge"
634
+ }),
635
+ /*#__PURE__*/ _jsx(Badge, {
636
+ variant: "feature",
637
+ size: "xs",
638
+ radius: "rounded",
639
+ iconLeft: "close",
640
+ children: "Badge"
641
+ }),
642
+ /*#__PURE__*/ _jsx(Badge, {
643
+ variant: "success",
644
+ size: "xs",
645
+ radius: "rounded",
646
+ iconLeft: "close",
647
+ children: "Badge"
648
+ }),
649
+ /*#__PURE__*/ _jsx(Badge, {
650
+ variant: "warning",
651
+ size: "xs",
652
+ radius: "rounded",
653
+ iconLeft: "close",
654
+ children: "Badge"
655
+ }),
656
+ /*#__PURE__*/ _jsx(Badge, {
657
+ variant: "error",
658
+ size: "xs",
659
+ radius: "rounded",
660
+ iconLeft: "close",
661
+ children: "Badge"
662
+ })
663
+ ]
664
+ })
665
+ ]
666
+ })
667
+ ]
668
+ }),
669
+ /*#__PURE__*/ _jsxs("div", {
670
+ children: [
671
+ /*#__PURE__*/ _jsx(Code, {
672
+ variant: "label",
673
+ className: "mb-16",
674
+ children: "Beta Badge"
675
+ }),
676
+ /*#__PURE__*/ _jsx("div", {
677
+ className: "flex gap-16",
678
+ children: /*#__PURE__*/ _jsx(Badge, {
679
+ variant: "info",
680
+ size: "2xs",
681
+ radius: "rounded",
682
+ children: "Beta"
683
+ })
684
+ })
685
+ ]
686
+ })
687
+ ]
688
+ })
689
+ };
690
+ // Interactive badges with click handlers
691
+ function InteractiveBadgesComponent() {
692
+ const [tags, setTags] = React.useState([
693
+ 'React',
694
+ 'TypeScript',
695
+ 'Next.js',
696
+ 'Tailwind'
697
+ ]);
698
+ const removeTag = (tagToRemove)=>{
699
+ setTags(tags.filter((tag)=>tag !== tagToRemove));
700
+ };
701
+ return /*#__PURE__*/ _jsxs("div", {
702
+ className: "flex flex-col gap-32",
703
+ children: [
704
+ /*#__PURE__*/ _jsxs("div", {
705
+ children: [
706
+ /*#__PURE__*/ _jsx(Code, {
707
+ variant: "label",
708
+ className: "mb-16",
709
+ children: "Interactive Badges - Removable Tags"
710
+ }),
711
+ /*#__PURE__*/ _jsx("div", {
712
+ className: "flex flex-wrap gap-8",
713
+ children: tags.map((tag)=>/*#__PURE__*/ _jsx(Badge, {
714
+ variant: "neutral",
715
+ size: "xs",
716
+ radius: "rounded",
717
+ iconRight: "close",
718
+ onIconRightClick: ()=>removeTag(tag),
719
+ iconRightAriaLabel: `Remove ${tag} tag`,
720
+ children: tag
721
+ }, tag))
722
+ })
723
+ ]
724
+ }),
725
+ /*#__PURE__*/ _jsxs("div", {
726
+ children: [
727
+ /*#__PURE__*/ _jsx(Code, {
728
+ variant: "label",
729
+ className: "mb-16",
730
+ children: "Interactive Badges - Different Variants"
731
+ }),
732
+ /*#__PURE__*/ _jsxs("div", {
733
+ className: "flex flex-wrap gap-8",
734
+ children: [
735
+ /*#__PURE__*/ _jsx(Badge, {
736
+ variant: "success",
737
+ size: "xs",
738
+ iconRight: "close",
739
+ onIconRightClick: ()=>alert('Success badge clicked!'),
740
+ iconRightAriaLabel: "Remove success badge",
741
+ children: "Completed"
742
+ }),
743
+ /*#__PURE__*/ _jsx(Badge, {
744
+ variant: "warning",
745
+ size: "xs",
746
+ iconRight: "close",
747
+ onIconRightClick: ()=>alert('Warning badge clicked!'),
748
+ iconRightAriaLabel: "Remove warning badge",
749
+ children: "Pending"
750
+ }),
751
+ /*#__PURE__*/ _jsx(Badge, {
752
+ variant: "error",
753
+ size: "xs",
754
+ iconRight: "close",
755
+ onIconRightClick: ()=>alert('Error badge clicked!'),
756
+ iconRightAriaLabel: "Remove error badge",
757
+ children: "Failed"
758
+ })
759
+ ]
760
+ })
761
+ ]
762
+ }),
763
+ /*#__PURE__*/ _jsxs("div", {
764
+ children: [
765
+ /*#__PURE__*/ _jsx(Code, {
766
+ variant: "label",
767
+ className: "mb-16",
768
+ children: "Static Icons (Non-interactive)"
769
+ }),
770
+ /*#__PURE__*/ _jsxs("div", {
771
+ className: "flex flex-wrap gap-8",
772
+ children: [
773
+ /*#__PURE__*/ _jsx(Badge, {
774
+ variant: "info",
775
+ size: "xs",
776
+ iconLeft: "info",
777
+ children: "Information"
778
+ }),
779
+ /*#__PURE__*/ _jsx(Badge, {
780
+ variant: "success",
781
+ size: "xs",
782
+ iconLeft: "check",
783
+ children: "Verified"
784
+ }),
785
+ /*#__PURE__*/ _jsx(Badge, {
786
+ variant: "feature",
787
+ size: "xs",
788
+ iconLeft: "money",
789
+ children: "Premium"
790
+ })
791
+ ]
792
+ })
793
+ ]
794
+ })
795
+ ]
796
+ });
797
+ }
798
+ export const InteractiveBadges = {
799
+ render: ()=>/*#__PURE__*/ _jsx(InteractiveBadgesComponent, {})
800
+ };
801
+
802
+ //# sourceMappingURL=badge.stories.js.map