@blueshift-gg/ui-components 0.1.7 → 0.1.8

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 (194) hide show
  1. package/dist/Alert.d.mts +1 -1
  2. package/dist/Alert.d.ts +1 -1
  3. package/dist/Avatar.d.mts +5 -5
  4. package/dist/Avatar.d.ts +5 -5
  5. package/dist/Avatar.js +18 -12
  6. package/dist/Avatar.js.map +1 -1
  7. package/dist/Avatar.mjs +18 -12
  8. package/dist/Avatar.mjs.map +1 -1
  9. package/dist/Badge.d.mts +1 -1
  10. package/dist/Badge.d.ts +1 -1
  11. package/dist/Button.d.mts +4 -2
  12. package/dist/Button.d.ts +4 -2
  13. package/dist/Button.js +9 -3
  14. package/dist/Button.js.map +1 -1
  15. package/dist/Button.mjs +9 -3
  16. package/dist/Button.mjs.map +1 -1
  17. package/dist/DecryptText.js +0 -18
  18. package/dist/DecryptText.js.map +1 -1
  19. package/dist/DecryptText.mjs +0 -18
  20. package/dist/DecryptText.mjs.map +1 -1
  21. package/dist/Dropdown.d.mts +18 -17
  22. package/dist/Dropdown.d.ts +18 -17
  23. package/dist/Dropdown.js +246 -31
  24. package/dist/Dropdown.js.map +1 -1
  25. package/dist/Dropdown.mjs +246 -31
  26. package/dist/Dropdown.mjs.map +1 -1
  27. package/dist/{Icon-CTxwWbdC.d.mts → Icon-BlNfHVtM.d.mts} +3 -0
  28. package/dist/{Icon-llWd6yMa.d.ts → Icon-CyRhTGIG.d.ts} +3 -0
  29. package/dist/Icon.d.mts +1 -1
  30. package/dist/Icon.d.ts +1 -1
  31. package/dist/Input.d.mts +1 -1
  32. package/dist/Input.d.ts +1 -1
  33. package/dist/Slider.d.mts +1 -1
  34. package/dist/Slider.d.ts +1 -1
  35. package/dist/Tabs.d.mts +1 -1
  36. package/dist/Tabs.d.ts +1 -1
  37. package/dist/Toast.d.mts +1 -1
  38. package/dist/Toast.d.ts +1 -1
  39. package/dist/icons/Anchor.d.mts +1 -1
  40. package/dist/icons/Anchor.d.ts +1 -1
  41. package/dist/icons/ArrowLeft.d.mts +1 -1
  42. package/dist/icons/ArrowLeft.d.ts +1 -1
  43. package/dist/icons/ArrowRight.d.mts +1 -1
  44. package/dist/icons/ArrowRight.d.ts +1 -1
  45. package/dist/icons/Assembly.d.mts +1 -1
  46. package/dist/icons/Assembly.d.ts +1 -1
  47. package/dist/icons/Brave.d.mts +7 -0
  48. package/dist/icons/Brave.d.ts +7 -0
  49. package/dist/icons/Brave.js +60 -0
  50. package/dist/icons/Brave.js.map +1 -0
  51. package/dist/icons/Brave.mjs +58 -0
  52. package/dist/icons/Brave.mjs.map +1 -0
  53. package/dist/icons/Challenge.d.mts +1 -1
  54. package/dist/icons/Challenge.d.ts +1 -1
  55. package/dist/icons/Chevron.d.mts +1 -1
  56. package/dist/icons/Chevron.d.ts +1 -1
  57. package/dist/icons/ChevronLeft.d.mts +1 -1
  58. package/dist/icons/ChevronLeft.d.ts +1 -1
  59. package/dist/icons/ChevronRight.d.mts +1 -1
  60. package/dist/icons/ChevronRight.d.ts +1 -1
  61. package/dist/icons/Claim.d.mts +1 -1
  62. package/dist/icons/Claim.d.ts +1 -1
  63. package/dist/icons/Claimed.d.mts +1 -1
  64. package/dist/icons/Claimed.d.ts +1 -1
  65. package/dist/icons/Close.d.mts +1 -1
  66. package/dist/icons/Close.d.ts +1 -1
  67. package/dist/icons/Code.d.mts +1 -1
  68. package/dist/icons/Code.d.ts +1 -1
  69. package/dist/icons/Copy.d.mts +1 -1
  70. package/dist/icons/Copy.d.ts +1 -1
  71. package/dist/icons/Developer.d.mts +1 -1
  72. package/dist/icons/Developer.d.ts +1 -1
  73. package/dist/icons/Difficulty.d.mts +1 -1
  74. package/dist/icons/Difficulty.d.ts +1 -1
  75. package/dist/icons/Discord.d.mts +1 -1
  76. package/dist/icons/Discord.d.ts +1 -1
  77. package/dist/icons/Dollar.d.mts +1 -1
  78. package/dist/icons/Dollar.d.ts +1 -1
  79. package/dist/icons/DoubleArrow.d.mts +1 -1
  80. package/dist/icons/DoubleArrow.d.ts +1 -1
  81. package/dist/icons/EVM.d.mts +1 -1
  82. package/dist/icons/EVM.d.ts +1 -1
  83. package/dist/icons/Email.d.mts +1 -1
  84. package/dist/icons/Email.d.ts +1 -1
  85. package/dist/icons/Error.d.mts +1 -1
  86. package/dist/icons/Error.d.ts +1 -1
  87. package/dist/icons/External.d.mts +1 -1
  88. package/dist/icons/External.d.ts +1 -1
  89. package/dist/icons/Filter.d.mts +1 -1
  90. package/dist/icons/Filter.d.ts +1 -1
  91. package/dist/icons/Firmware.d.mts +1 -1
  92. package/dist/icons/Firmware.d.ts +1 -1
  93. package/dist/icons/Flag.d.mts +1 -1
  94. package/dist/icons/Flag.d.ts +1 -1
  95. package/dist/icons/Flame.d.mts +1 -1
  96. package/dist/icons/Flame.d.ts +1 -1
  97. package/dist/icons/Flexible.d.mts +1 -1
  98. package/dist/icons/Flexible.d.ts +1 -1
  99. package/dist/icons/Free.d.mts +1 -1
  100. package/dist/icons/Free.d.ts +1 -1
  101. package/dist/icons/General.d.mts +1 -1
  102. package/dist/icons/General.d.ts +1 -1
  103. package/dist/icons/Github.d.mts +1 -1
  104. package/dist/icons/Github.d.ts +1 -1
  105. package/dist/icons/GridView.d.mts +1 -1
  106. package/dist/icons/GridView.d.ts +1 -1
  107. package/dist/icons/Heart.d.mts +1 -1
  108. package/dist/icons/Heart.d.ts +1 -1
  109. package/dist/icons/Info.d.mts +1 -1
  110. package/dist/icons/Info.d.ts +1 -1
  111. package/dist/icons/Language.d.mts +1 -1
  112. package/dist/icons/Language.d.ts +1 -1
  113. package/dist/icons/Lessons.d.mts +1 -1
  114. package/dist/icons/Lessons.d.ts +1 -1
  115. package/dist/icons/Link.d.mts +1 -1
  116. package/dist/icons/Link.d.ts +1 -1
  117. package/dist/icons/ListView.d.mts +1 -1
  118. package/dist/icons/ListView.d.ts +1 -1
  119. package/dist/icons/Loading.d.mts +1 -1
  120. package/dist/icons/Loading.d.ts +1 -1
  121. package/dist/icons/Locked.d.mts +1 -1
  122. package/dist/icons/Locked.d.ts +1 -1
  123. package/dist/icons/Mentor.d.mts +1 -1
  124. package/dist/icons/Mentor.d.ts +1 -1
  125. package/dist/icons/Modular.d.mts +1 -1
  126. package/dist/icons/Modular.d.ts +1 -1
  127. package/dist/icons/NFT.d.mts +1 -1
  128. package/dist/icons/NFT.d.ts +1 -1
  129. package/dist/icons/Online.d.mts +1 -1
  130. package/dist/icons/Online.d.ts +1 -1
  131. package/dist/icons/Password.d.mts +1 -1
  132. package/dist/icons/Password.d.ts +1 -1
  133. package/dist/icons/Phantom.d.mts +7 -0
  134. package/dist/icons/Phantom.d.ts +7 -0
  135. package/dist/icons/Phantom.js +28 -0
  136. package/dist/icons/Phantom.js.map +1 -0
  137. package/dist/icons/Phantom.mjs +26 -0
  138. package/dist/icons/Phantom.mjs.map +1 -0
  139. package/dist/icons/Product.d.mts +1 -1
  140. package/dist/icons/Product.d.ts +1 -1
  141. package/dist/icons/Progress.d.mts +1 -1
  142. package/dist/icons/Progress.d.ts +1 -1
  143. package/dist/icons/Protocol.d.mts +1 -1
  144. package/dist/icons/Protocol.d.ts +1 -1
  145. package/dist/icons/Rewards.d.mts +1 -1
  146. package/dist/icons/Rewards.d.ts +1 -1
  147. package/dist/icons/Rust.d.mts +1 -1
  148. package/dist/icons/Rust.d.ts +1 -1
  149. package/dist/icons/Search.d.mts +1 -1
  150. package/dist/icons/Search.d.ts +1 -1
  151. package/dist/icons/SmartContract.d.mts +1 -1
  152. package/dist/icons/SmartContract.d.ts +1 -1
  153. package/dist/icons/Solana.d.mts +1 -1
  154. package/dist/icons/Solana.d.ts +1 -1
  155. package/dist/icons/Solflare.d.mts +7 -0
  156. package/dist/icons/Solflare.d.ts +7 -0
  157. package/dist/icons/Solflare.js +28 -0
  158. package/dist/icons/Solflare.js.map +1 -0
  159. package/dist/icons/Solflare.mjs +26 -0
  160. package/dist/icons/Solflare.mjs.map +1 -0
  161. package/dist/icons/Success.d.mts +1 -1
  162. package/dist/icons/Success.d.ts +1 -1
  163. package/dist/icons/SuccessCircle.d.mts +1 -1
  164. package/dist/icons/SuccessCircle.d.ts +1 -1
  165. package/dist/icons/Table.d.mts +1 -1
  166. package/dist/icons/Table.d.ts +1 -1
  167. package/dist/icons/Target.d.mts +1 -1
  168. package/dist/icons/Target.d.ts +1 -1
  169. package/dist/icons/Training.d.mts +1 -1
  170. package/dist/icons/Training.d.ts +1 -1
  171. package/dist/icons/Typescript.d.mts +1 -1
  172. package/dist/icons/Typescript.d.ts +1 -1
  173. package/dist/icons/Unclaimed.d.mts +1 -1
  174. package/dist/icons/Unclaimed.d.ts +1 -1
  175. package/dist/icons/Upload.d.mts +1 -1
  176. package/dist/icons/Upload.d.ts +1 -1
  177. package/dist/icons/Wallet.d.mts +1 -1
  178. package/dist/icons/Wallet.d.ts +1 -1
  179. package/dist/icons/WalletSmall.d.mts +1 -1
  180. package/dist/icons/WalletSmall.d.ts +1 -1
  181. package/dist/icons/Warning.d.mts +1 -1
  182. package/dist/icons/Warning.d.ts +1 -1
  183. package/dist/icons/X.d.mts +1 -1
  184. package/dist/icons/X.d.ts +1 -1
  185. package/dist/icons/index.d.mts +1 -1
  186. package/dist/icons/index.d.ts +1 -1
  187. package/dist/icons/index.js +7 -1
  188. package/dist/icons/index.js.map +1 -1
  189. package/dist/icons/index.mjs +7 -1
  190. package/dist/icons/index.mjs.map +1 -1
  191. package/dist/index.d.mts +1 -1
  192. package/dist/index.d.ts +1 -1
  193. package/package.json +1 -1
  194. package/src/theme.css +10 -0
package/dist/Alert.d.mts CHANGED
@@ -1,6 +1,6 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import { MotionProps } from 'motion/react';
3
- import { a as IconProps } from './Icon-CTxwWbdC.mjs';
3
+ import { a as IconProps } from './Icon-BlNfHVtM.mjs';
4
4
  import './utils/colours.mjs';
5
5
 
6
6
  type AlertProps = {
package/dist/Alert.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import { MotionProps } from 'motion/react';
3
- import { a as IconProps } from './Icon-llWd6yMa.js';
3
+ import { a as IconProps } from './Icon-CyRhTGIG.js';
4
4
  import './utils/colours.js';
5
5
 
6
6
  type AlertProps = {
package/dist/Avatar.d.mts CHANGED
@@ -1,17 +1,17 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
- import { c as IconName } from './Icon-CTxwWbdC.mjs';
2
+ import { a as IconProps } from './Icon-BlNfHVtM.mjs';
3
+ import { CrosshairCornersProps } from './CrossHair.mjs';
3
4
  import { MotionProps } from 'motion/react';
4
5
  import { BrandColour } from './utils/colours.mjs';
5
6
 
6
7
  type AvatarProps = {
7
8
  className?: string;
8
- icon: IconName;
9
+ icon: IconProps;
9
10
  variant?: BrandColour;
10
- iconClassName?: string;
11
- crosshair?: "corners" | "cross" | "bordered";
11
+ crosshair?: CrosshairCornersProps;
12
12
  thickness: number;
13
13
  animation?: MotionProps;
14
14
  };
15
- declare const Avatar: ({ className, icon, iconClassName, crosshair, thickness, variant, animation, }: AvatarProps) => react_jsx_runtime.JSX.Element;
15
+ declare const Avatar: ({ className, icon, crosshair, thickness, variant, animation, }: AvatarProps) => react_jsx_runtime.JSX.Element;
16
16
 
17
17
  export { Avatar, type AvatarProps };
package/dist/Avatar.d.ts CHANGED
@@ -1,17 +1,17 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
- import { c as IconName } from './Icon-llWd6yMa.js';
2
+ import { a as IconProps } from './Icon-CyRhTGIG.js';
3
+ import { CrosshairCornersProps } from './CrossHair.js';
3
4
  import { MotionProps } from 'motion/react';
4
5
  import { BrandColour } from './utils/colours.js';
5
6
 
6
7
  type AvatarProps = {
7
8
  className?: string;
8
- icon: IconName;
9
+ icon: IconProps;
9
10
  variant?: BrandColour;
10
- iconClassName?: string;
11
- crosshair?: "corners" | "cross" | "bordered";
11
+ crosshair?: CrosshairCornersProps;
12
12
  thickness: number;
13
13
  animation?: MotionProps;
14
14
  };
15
- declare const Avatar: ({ className, icon, iconClassName, crosshair, thickness, variant, animation, }: AvatarProps) => react_jsx_runtime.JSX.Element;
15
+ declare const Avatar: ({ className, icon, crosshair, thickness, variant, animation, }: AvatarProps) => react_jsx_runtime.JSX.Element;
16
16
 
17
17
  export { Avatar, type AvatarProps };
package/dist/Avatar.js CHANGED
@@ -14,7 +14,6 @@ var classNames__default = /*#__PURE__*/_interopDefault(classNames);
14
14
  const Avatar = ({
15
15
  className,
16
16
  icon,
17
- iconClassName,
18
17
  crosshair,
19
18
  thickness = 1.5,
20
19
  variant,
@@ -24,14 +23,14 @@ const Avatar = ({
24
23
  react.motion.div,
25
24
  {
26
25
  className: classNames__default.default(
27
- "flex items-center justify-center relative border-current/15 bg-current/5",
28
- (crosshair === "corners" || crosshair === "cross") && "p-2",
29
- crosshair === "bordered" && "px-3 py-2",
26
+ "text-shade-secondary flex items-center justify-center relative border-current/15 bg-current/5 shadow-[inset_0px_0px_12px] shadow-current/15",
27
+ (crosshair?.variant === "corners" || crosshair?.variant === "cross") && "p-2",
28
+ crosshair?.variant === "bordered" && "px-3 py-2",
30
29
  className
31
30
  ),
32
31
  style: {
33
32
  borderWidth: thickness,
34
- color: colours.BRAND_COLOURS[variant ?? "Secondary"]
33
+ color: variant ? colours.BRAND_COLOURS[variant] : void 0
35
34
  },
36
35
  ...animation,
37
36
  children: [
@@ -40,22 +39,29 @@ const Avatar = ({
40
39
  {
41
40
  className: classNames__default.default(
42
41
  "text-current absolute inset-0",
43
- crosshair !== "bordered" && "absolute !-inset-[1.5px]"
42
+ crosshair?.variant !== "bordered" && "absolute !-inset-[1.5px]"
44
43
  ),
45
44
  children: /* @__PURE__ */ jsxRuntime.jsx(
46
45
  CrossHair.CrosshairCorners,
47
46
  {
48
- variant: crosshair,
47
+ variant: crosshair?.variant,
49
48
  className: classNames__default.default("text-current"),
50
- animationDelay: 0,
51
- animationDuration: 1.5,
52
- size: 6
49
+ animationDelay: crosshair?.animationDelay || 0,
50
+ animationDuration: crosshair?.animationDuration || 1.5,
51
+ size: crosshair?.size || 6
53
52
  },
54
- icon
53
+ icon.name
55
54
  )
56
55
  }
57
56
  ),
58
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center h-[32px] w-[32px]", children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: icon, className: iconClassName, size: 24 }) })
57
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center p-1", children: /* @__PURE__ */ jsxRuntime.jsx(
58
+ Icon.Icon,
59
+ {
60
+ name: icon.name,
61
+ className: icon.className,
62
+ size: icon.size || 24
63
+ }
64
+ ) })
59
65
  ]
60
66
  }
61
67
  );
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/Avatar.tsx"],"names":["jsxs","motion","classNames","BRAND_COLOURS","jsx","CrosshairCorners","Icon"],"mappings":";;;;;;;;;;;;;AAmBO,MAAM,SAAS,CAAC;AAAA,EACrB,SAAA;AAAA,EACA,IAAA;AAAA,EACA,aAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA,GAAY,GAAA;AAAA,EACZ,OAAA;AAAA,EACA;AACF,CAAA,KAAmB;AACjB,EAAA,uBACEA,eAAA;AAAA,IAACC,YAAA,CAAO,GAAA;AAAA,IAAP;AAAA,MACC,SAAA,EAAWC,2BAAA;AAAA,QACT,0EAAA;AAAA,QAAA,CACC,SAAA,KAAc,SAAA,IAAa,SAAA,KAAc,OAAA,KAAY,KAAA;AAAA,QACtD,cAAc,UAAA,IAAc,WAAA;AAAA,QAC5B;AAAA,OACF;AAAA,MACA,KAAA,EAAO;AAAA,QACL,WAAA,EAAa,SAAA;AAAA,QACb,KAAA,EAAOC,qBAAA,CAAc,OAAA,IAAW,WAAW;AAAA,OAC7C;AAAA,MACC,GAAG,SAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAAC,cAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAWF,2BAAA;AAAA,cACT,+BAAA;AAAA,cACA,cAAc,UAAA,IAAc;AAAA,aAC9B;AAAA,YAEA,QAAA,kBAAAE,cAAA;AAAA,cAACC,0BAAA;AAAA,cAAA;AAAA,gBAEC,OAAA,EAAS,SAAA;AAAA,gBACT,SAAA,EAAWH,4BAAW,cAAc,CAAA;AAAA,gBACpC,cAAA,EAAgB,CAAA;AAAA,gBAChB,iBAAA,EAAmB,GAAA;AAAA,gBACnB,IAAA,EAAM;AAAA,eAAA;AAAA,cALD;AAAA;AAMP;AAAA,SACF;AAAA,wBACAE,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,oDAAA,EACb,QAAA,kBAAAA,cAAA,CAACE,SAAA,EAAA,EAAK,IAAA,EAAM,IAAA,EAAkB,SAAA,EAAW,aAAA,EAAe,IAAA,EAAM,EAAA,EAAI,CAAA,EACpE;AAAA;AAAA;AAAA,GACF;AAEJ","file":"Avatar.js","sourcesContent":["\"use client\";\n\nimport classNames from \"classnames\";\nimport { Icon } from \"./Icon\";\nimport { IconName } from \"./icons\";\nimport { CrosshairCorners } from \"./CrossHair\";\nimport { motion, MotionProps } from \"motion/react\";\nimport { BRAND_COLOURS, BrandColour } from \"./utils/colours\";\n\nexport type AvatarProps = {\n className?: string;\n icon: IconName;\n variant?: BrandColour;\n iconClassName?: string;\n crosshair?: \"corners\" | \"cross\" | \"bordered\";\n thickness: number;\n animation?: MotionProps;\n};\n\nexport const Avatar = ({\n className,\n icon,\n iconClassName,\n crosshair,\n thickness = 1.5,\n variant,\n animation,\n}: AvatarProps) => {\n return (\n <motion.div\n className={classNames(\n \"flex items-center justify-center relative border-current/15 bg-current/5\",\n (crosshair === \"corners\" || crosshair === \"cross\") && \"p-2\",\n crosshair === \"bordered\" && \"px-3 py-2\",\n className\n )}\n style={{\n borderWidth: thickness,\n color: BRAND_COLOURS[variant ?? \"Secondary\"],\n }}\n {...animation}\n >\n <div\n className={classNames(\n \"text-current absolute inset-0\",\n crosshair !== \"bordered\" && \"absolute !-inset-[1.5px]\"\n )}\n >\n <CrosshairCorners\n key={icon}\n variant={crosshair}\n className={classNames(\"text-current\")}\n animationDelay={0}\n animationDuration={1.5}\n size={6}\n />\n </div>\n <div className=\"flex items-center justify-center h-[32px] w-[32px]\">\n <Icon name={icon as IconName} className={iconClassName} size={24} />\n </div>\n </motion.div>\n );\n};\n"]}
1
+ {"version":3,"sources":["../src/Avatar.tsx"],"names":["jsxs","motion","classNames","BRAND_COLOURS","jsx","CrosshairCorners","Icon"],"mappings":";;;;;;;;;;;;;AAkBO,MAAM,SAAS,CAAC;AAAA,EACrB,SAAA;AAAA,EACA,IAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA,GAAY,GAAA;AAAA,EACZ,OAAA;AAAA,EACA;AACF,CAAA,KAAmB;AACjB,EAAA,uBACEA,eAAA;AAAA,IAACC,YAAA,CAAO,GAAA;AAAA,IAAP;AAAA,MACC,SAAA,EAAWC,2BAAA;AAAA,QACT,6IAAA;AAAA,QAAA,CACC,SAAA,EAAW,OAAA,KAAY,SAAA,IAAa,SAAA,EAAW,YAAY,OAAA,KAC1D,KAAA;AAAA,QACF,SAAA,EAAW,YAAY,UAAA,IAAc,WAAA;AAAA,QACrC;AAAA,OACF;AAAA,MACA,KAAA,EAAO;AAAA,QACL,WAAA,EAAa,SAAA;AAAA,QACb,KAAA,EAAO,OAAA,GAAUC,qBAAA,CAAc,OAAO,CAAA,GAAI;AAAA,OAC5C;AAAA,MACC,GAAG,SAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAAC,cAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAWF,2BAAA;AAAA,cACT,+BAAA;AAAA,cACA,SAAA,EAAW,YAAY,UAAA,IAAc;AAAA,aACvC;AAAA,YAEA,QAAA,kBAAAE,cAAA;AAAA,cAACC,0BAAA;AAAA,cAAA;AAAA,gBAEC,SAAS,SAAA,EAAW,OAAA;AAAA,gBACpB,SAAA,EAAWH,4BAAW,cAAc,CAAA;AAAA,gBACpC,cAAA,EAAgB,WAAW,cAAA,IAAkB,CAAA;AAAA,gBAC7C,iBAAA,EAAmB,WAAW,iBAAA,IAAqB,GAAA;AAAA,gBACnD,IAAA,EAAM,WAAW,IAAA,IAAQ;AAAA,eAAA;AAAA,cALpB,IAAA,CAAK;AAAA;AAMZ;AAAA,SACF;AAAA,wBACAE,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,sCAAA,EACb,QAAA,kBAAAA,cAAA;AAAA,UAACE,SAAA;AAAA,UAAA;AAAA,YACC,MAAM,IAAA,CAAK,IAAA;AAAA,YACX,WAAW,IAAA,CAAK,SAAA;AAAA,YAChB,IAAA,EAAM,KAAK,IAAA,IAAQ;AAAA;AAAA,SACrB,EACF;AAAA;AAAA;AAAA,GACF;AAEJ","file":"Avatar.js","sourcesContent":["\"use client\";\n\nimport classNames from \"classnames\";\nimport { Icon, IconProps } from \"./Icon\";\nimport { IconName } from \"./icons\";\nimport { CrosshairCorners, CrosshairCornersProps } from \"./CrossHair\";\nimport { motion, MotionProps } from \"motion/react\";\nimport { BRAND_COLOURS, BrandColour } from \"./utils/colours\";\n\nexport type AvatarProps = {\n className?: string;\n icon: IconProps;\n variant?: BrandColour;\n crosshair?: CrosshairCornersProps;\n thickness: number;\n animation?: MotionProps;\n};\n\nexport const Avatar = ({\n className,\n icon,\n crosshair,\n thickness = 1.5,\n variant,\n animation,\n}: AvatarProps) => {\n return (\n <motion.div\n className={classNames(\n \"text-shade-secondary flex items-center justify-center relative border-current/15 bg-current/5 shadow-[inset_0px_0px_12px] shadow-current/15\",\n (crosshair?.variant === \"corners\" || crosshair?.variant === \"cross\") &&\n \"p-2\",\n crosshair?.variant === \"bordered\" && \"px-3 py-2\",\n className\n )}\n style={{\n borderWidth: thickness,\n color: variant ? BRAND_COLOURS[variant] : undefined,\n }}\n {...animation}\n >\n <div\n className={classNames(\n \"text-current absolute inset-0\",\n crosshair?.variant !== \"bordered\" && \"absolute !-inset-[1.5px]\"\n )}\n >\n <CrosshairCorners\n key={icon.name}\n variant={crosshair?.variant}\n className={classNames(\"text-current\")}\n animationDelay={crosshair?.animationDelay || 0}\n animationDuration={crosshair?.animationDuration || 1.5}\n size={crosshair?.size || 6}\n />\n </div>\n <div className=\"flex items-center justify-center p-1\">\n <Icon\n name={icon.name as IconName}\n className={icon.className}\n size={icon.size || 24}\n />\n </div>\n </motion.div>\n );\n};\n"]}
package/dist/Avatar.mjs CHANGED
@@ -8,7 +8,6 @@ import { BRAND_COLOURS } from './utils/colours';
8
8
  const Avatar = ({
9
9
  className,
10
10
  icon,
11
- iconClassName,
12
11
  crosshair,
13
12
  thickness = 1.5,
14
13
  variant,
@@ -18,14 +17,14 @@ const Avatar = ({
18
17
  motion.div,
19
18
  {
20
19
  className: classNames(
21
- "flex items-center justify-center relative border-current/15 bg-current/5",
22
- (crosshair === "corners" || crosshair === "cross") && "p-2",
23
- crosshair === "bordered" && "px-3 py-2",
20
+ "text-shade-secondary flex items-center justify-center relative border-current/15 bg-current/5 shadow-[inset_0px_0px_12px] shadow-current/15",
21
+ (crosshair?.variant === "corners" || crosshair?.variant === "cross") && "p-2",
22
+ crosshair?.variant === "bordered" && "px-3 py-2",
24
23
  className
25
24
  ),
26
25
  style: {
27
26
  borderWidth: thickness,
28
- color: BRAND_COLOURS[variant ?? "Secondary"]
27
+ color: variant ? BRAND_COLOURS[variant] : void 0
29
28
  },
30
29
  ...animation,
31
30
  children: [
@@ -34,22 +33,29 @@ const Avatar = ({
34
33
  {
35
34
  className: classNames(
36
35
  "text-current absolute inset-0",
37
- crosshair !== "bordered" && "absolute !-inset-[1.5px]"
36
+ crosshair?.variant !== "bordered" && "absolute !-inset-[1.5px]"
38
37
  ),
39
38
  children: /* @__PURE__ */ jsx(
40
39
  CrosshairCorners,
41
40
  {
42
- variant: crosshair,
41
+ variant: crosshair?.variant,
43
42
  className: classNames("text-current"),
44
- animationDelay: 0,
45
- animationDuration: 1.5,
46
- size: 6
43
+ animationDelay: crosshair?.animationDelay || 0,
44
+ animationDuration: crosshair?.animationDuration || 1.5,
45
+ size: crosshair?.size || 6
47
46
  },
48
- icon
47
+ icon.name
49
48
  )
50
49
  }
51
50
  ),
52
- /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-[32px] w-[32px]", children: /* @__PURE__ */ jsx(Icon, { name: icon, className: iconClassName, size: 24 }) })
51
+ /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center p-1", children: /* @__PURE__ */ jsx(
52
+ Icon,
53
+ {
54
+ name: icon.name,
55
+ className: icon.className,
56
+ size: icon.size || 24
57
+ }
58
+ ) })
53
59
  ]
54
60
  }
55
61
  );
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/Avatar.tsx"],"names":[],"mappings":";;;;;;;AAmBO,MAAM,SAAS,CAAC;AAAA,EACrB,SAAA;AAAA,EACA,IAAA;AAAA,EACA,aAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA,GAAY,GAAA;AAAA,EACZ,OAAA;AAAA,EACA;AACF,CAAA,KAAmB;AACjB,EAAA,uBACE,IAAA;AAAA,IAAC,MAAA,CAAO,GAAA;AAAA,IAAP;AAAA,MACC,SAAA,EAAW,UAAA;AAAA,QACT,0EAAA;AAAA,QAAA,CACC,SAAA,KAAc,SAAA,IAAa,SAAA,KAAc,OAAA,KAAY,KAAA;AAAA,QACtD,cAAc,UAAA,IAAc,WAAA;AAAA,QAC5B;AAAA,OACF;AAAA,MACA,KAAA,EAAO;AAAA,QACL,WAAA,EAAa,SAAA;AAAA,QACb,KAAA,EAAO,aAAA,CAAc,OAAA,IAAW,WAAW;AAAA,OAC7C;AAAA,MACC,GAAG,SAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,UAAA;AAAA,cACT,+BAAA;AAAA,cACA,cAAc,UAAA,IAAc;AAAA,aAC9B;AAAA,YAEA,QAAA,kBAAA,GAAA;AAAA,cAAC,gBAAA;AAAA,cAAA;AAAA,gBAEC,OAAA,EAAS,SAAA;AAAA,gBACT,SAAA,EAAW,WAAW,cAAc,CAAA;AAAA,gBACpC,cAAA,EAAgB,CAAA;AAAA,gBAChB,iBAAA,EAAmB,GAAA;AAAA,gBACnB,IAAA,EAAM;AAAA,eAAA;AAAA,cALD;AAAA;AAMP;AAAA,SACF;AAAA,wBACA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,oDAAA,EACb,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,IAAA,EAAM,IAAA,EAAkB,SAAA,EAAW,aAAA,EAAe,IAAA,EAAM,EAAA,EAAI,CAAA,EACpE;AAAA;AAAA;AAAA,GACF;AAEJ","file":"Avatar.mjs","sourcesContent":["\"use client\";\n\nimport classNames from \"classnames\";\nimport { Icon } from \"./Icon\";\nimport { IconName } from \"./icons\";\nimport { CrosshairCorners } from \"./CrossHair\";\nimport { motion, MotionProps } from \"motion/react\";\nimport { BRAND_COLOURS, BrandColour } from \"./utils/colours\";\n\nexport type AvatarProps = {\n className?: string;\n icon: IconName;\n variant?: BrandColour;\n iconClassName?: string;\n crosshair?: \"corners\" | \"cross\" | \"bordered\";\n thickness: number;\n animation?: MotionProps;\n};\n\nexport const Avatar = ({\n className,\n icon,\n iconClassName,\n crosshair,\n thickness = 1.5,\n variant,\n animation,\n}: AvatarProps) => {\n return (\n <motion.div\n className={classNames(\n \"flex items-center justify-center relative border-current/15 bg-current/5\",\n (crosshair === \"corners\" || crosshair === \"cross\") && \"p-2\",\n crosshair === \"bordered\" && \"px-3 py-2\",\n className\n )}\n style={{\n borderWidth: thickness,\n color: BRAND_COLOURS[variant ?? \"Secondary\"],\n }}\n {...animation}\n >\n <div\n className={classNames(\n \"text-current absolute inset-0\",\n crosshair !== \"bordered\" && \"absolute !-inset-[1.5px]\"\n )}\n >\n <CrosshairCorners\n key={icon}\n variant={crosshair}\n className={classNames(\"text-current\")}\n animationDelay={0}\n animationDuration={1.5}\n size={6}\n />\n </div>\n <div className=\"flex items-center justify-center h-[32px] w-[32px]\">\n <Icon name={icon as IconName} className={iconClassName} size={24} />\n </div>\n </motion.div>\n );\n};\n"]}
1
+ {"version":3,"sources":["../src/Avatar.tsx"],"names":[],"mappings":";;;;;;;AAkBO,MAAM,SAAS,CAAC;AAAA,EACrB,SAAA;AAAA,EACA,IAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA,GAAY,GAAA;AAAA,EACZ,OAAA;AAAA,EACA;AACF,CAAA,KAAmB;AACjB,EAAA,uBACE,IAAA;AAAA,IAAC,MAAA,CAAO,GAAA;AAAA,IAAP;AAAA,MACC,SAAA,EAAW,UAAA;AAAA,QACT,6IAAA;AAAA,QAAA,CACC,SAAA,EAAW,OAAA,KAAY,SAAA,IAAa,SAAA,EAAW,YAAY,OAAA,KAC1D,KAAA;AAAA,QACF,SAAA,EAAW,YAAY,UAAA,IAAc,WAAA;AAAA,QACrC;AAAA,OACF;AAAA,MACA,KAAA,EAAO;AAAA,QACL,WAAA,EAAa,SAAA;AAAA,QACb,KAAA,EAAO,OAAA,GAAU,aAAA,CAAc,OAAO,CAAA,GAAI;AAAA,OAC5C;AAAA,MACC,GAAG,SAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,UAAA;AAAA,cACT,+BAAA;AAAA,cACA,SAAA,EAAW,YAAY,UAAA,IAAc;AAAA,aACvC;AAAA,YAEA,QAAA,kBAAA,GAAA;AAAA,cAAC,gBAAA;AAAA,cAAA;AAAA,gBAEC,SAAS,SAAA,EAAW,OAAA;AAAA,gBACpB,SAAA,EAAW,WAAW,cAAc,CAAA;AAAA,gBACpC,cAAA,EAAgB,WAAW,cAAA,IAAkB,CAAA;AAAA,gBAC7C,iBAAA,EAAmB,WAAW,iBAAA,IAAqB,GAAA;AAAA,gBACnD,IAAA,EAAM,WAAW,IAAA,IAAQ;AAAA,eAAA;AAAA,cALpB,IAAA,CAAK;AAAA;AAMZ;AAAA,SACF;AAAA,wBACA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,sCAAA,EACb,QAAA,kBAAA,GAAA;AAAA,UAAC,IAAA;AAAA,UAAA;AAAA,YACC,MAAM,IAAA,CAAK,IAAA;AAAA,YACX,WAAW,IAAA,CAAK,SAAA;AAAA,YAChB,IAAA,EAAM,KAAK,IAAA,IAAQ;AAAA;AAAA,SACrB,EACF;AAAA;AAAA;AAAA,GACF;AAEJ","file":"Avatar.mjs","sourcesContent":["\"use client\";\n\nimport classNames from \"classnames\";\nimport { Icon, IconProps } from \"./Icon\";\nimport { IconName } from \"./icons\";\nimport { CrosshairCorners, CrosshairCornersProps } from \"./CrossHair\";\nimport { motion, MotionProps } from \"motion/react\";\nimport { BRAND_COLOURS, BrandColour } from \"./utils/colours\";\n\nexport type AvatarProps = {\n className?: string;\n icon: IconProps;\n variant?: BrandColour;\n crosshair?: CrosshairCornersProps;\n thickness: number;\n animation?: MotionProps;\n};\n\nexport const Avatar = ({\n className,\n icon,\n crosshair,\n thickness = 1.5,\n variant,\n animation,\n}: AvatarProps) => {\n return (\n <motion.div\n className={classNames(\n \"text-shade-secondary flex items-center justify-center relative border-current/15 bg-current/5 shadow-[inset_0px_0px_12px] shadow-current/15\",\n (crosshair?.variant === \"corners\" || crosshair?.variant === \"cross\") &&\n \"p-2\",\n crosshair?.variant === \"bordered\" && \"px-3 py-2\",\n className\n )}\n style={{\n borderWidth: thickness,\n color: variant ? BRAND_COLOURS[variant] : undefined,\n }}\n {...animation}\n >\n <div\n className={classNames(\n \"text-current absolute inset-0\",\n crosshair?.variant !== \"bordered\" && \"absolute !-inset-[1.5px]\"\n )}\n >\n <CrosshairCorners\n key={icon.name}\n variant={crosshair?.variant}\n className={classNames(\"text-current\")}\n animationDelay={crosshair?.animationDelay || 0}\n animationDuration={crosshair?.animationDuration || 1.5}\n size={crosshair?.size || 6}\n />\n </div>\n <div className=\"flex items-center justify-center p-1\">\n <Icon\n name={icon.name as IconName}\n className={icon.className}\n size={icon.size || 24}\n />\n </div>\n </motion.div>\n );\n};\n"]}
package/dist/Badge.d.mts CHANGED
@@ -1,6 +1,6 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import { BrandColour } from './utils/colours.mjs';
3
- import { a as IconProps } from './Icon-CTxwWbdC.mjs';
3
+ import { a as IconProps } from './Icon-BlNfHVtM.mjs';
4
4
  import { CrosshairCornersProps } from './CrossHair.mjs';
5
5
  import { MotionProps } from 'motion/react';
6
6
 
package/dist/Badge.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import { BrandColour } from './utils/colours.js';
3
- import { a as IconProps } from './Icon-llWd6yMa.js';
3
+ import { a as IconProps } from './Icon-CyRhTGIG.js';
4
4
  import { CrosshairCornersProps } from './CrossHair.js';
5
5
  import { MotionProps } from 'motion/react';
6
6
 
package/dist/Button.d.mts CHANGED
@@ -2,11 +2,12 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import { MotionProps } from 'motion/react';
3
3
  import { CrosshairCornersProps } from './CrossHair.mjs';
4
4
  import { courseDifficulty } from './utils/colours.mjs';
5
- import { c as IconName } from './Icon-CTxwWbdC.mjs';
5
+ import { c as IconName } from './Icon-BlNfHVtM.mjs';
6
6
 
7
7
  type ButtonProps = {
8
8
  className?: string;
9
9
  disabled?: boolean;
10
+ children?: React.ReactNode;
10
11
  icon?: {
11
12
  name: IconName;
12
13
  className?: string;
@@ -25,7 +26,8 @@ type ButtonProps = {
25
26
  crosshairProps?: CrosshairCornersProps;
26
27
  useHoverEffect?: boolean;
27
28
  animation?: MotionProps;
29
+ useDecryptAnimation?: boolean;
28
30
  };
29
- declare const Button: ({ label, variant, size, className, onClick, disabled, icon, iconPosition, loading, crosshairProps, hideLabel, animation, useHoverEffect, onMouseEnter, onMouseLeave, }: ButtonProps) => react_jsx_runtime.JSX.Element;
31
+ declare const Button: ({ label, variant, size, className, onClick, disabled, icon, iconPosition, loading, crosshairProps, hideLabel, animation, useHoverEffect, onMouseEnter, onMouseLeave, children, useDecryptAnimation, }: ButtonProps) => react_jsx_runtime.JSX.Element;
30
32
 
31
33
  export { Button, type ButtonProps };
package/dist/Button.d.ts CHANGED
@@ -2,11 +2,12 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import { MotionProps } from 'motion/react';
3
3
  import { CrosshairCornersProps } from './CrossHair.js';
4
4
  import { courseDifficulty } from './utils/colours.js';
5
- import { c as IconName } from './Icon-llWd6yMa.js';
5
+ import { c as IconName } from './Icon-CyRhTGIG.js';
6
6
 
7
7
  type ButtonProps = {
8
8
  className?: string;
9
9
  disabled?: boolean;
10
+ children?: React.ReactNode;
10
11
  icon?: {
11
12
  name: IconName;
12
13
  className?: string;
@@ -25,7 +26,8 @@ type ButtonProps = {
25
26
  crosshairProps?: CrosshairCornersProps;
26
27
  useHoverEffect?: boolean;
27
28
  animation?: MotionProps;
29
+ useDecryptAnimation?: boolean;
28
30
  };
29
- declare const Button: ({ label, variant, size, className, onClick, disabled, icon, iconPosition, loading, crosshairProps, hideLabel, animation, useHoverEffect, onMouseEnter, onMouseLeave, }: ButtonProps) => react_jsx_runtime.JSX.Element;
31
+ declare const Button: ({ label, variant, size, className, onClick, disabled, icon, iconPosition, loading, crosshairProps, hideLabel, animation, useHoverEffect, onMouseEnter, onMouseLeave, children, useDecryptAnimation, }: ButtonProps) => react_jsx_runtime.JSX.Element;
30
32
 
31
33
  export { Button, type ButtonProps };
package/dist/Button.js CHANGED
@@ -30,7 +30,9 @@ const Button = ({
30
30
  animation,
31
31
  useHoverEffect = true,
32
32
  onMouseEnter,
33
- onMouseLeave
33
+ onMouseLeave,
34
+ children,
35
+ useDecryptAnimation = true
34
36
  }) => {
35
37
  const [isHovering, setIsHovering] = react.useState(false);
36
38
  return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -80,7 +82,10 @@ const Button = ({
80
82
  "will-change-transform absolute transition-all duration-50 ease-glide inset-0",
81
83
  variant === "secondary" && "text-shade-mute",
82
84
  variant === "primary" && "text-background",
83
- crosshairProps.variant === "corners" && useHoverEffect && "inset-0.5 group-enabled:group-active:inset-1 group-enabled:group-hover:inset-[-4px] group-enabled:group-hover:text-shade-primary group-enabled:group-active:text-current",
85
+ crosshairProps.variant === "corners" && useHoverEffect && "inset-0.5 group-enabled:group-active:inset-1 group-enabled:group-hover:text-shade-primary group-enabled:group-active:text-current",
86
+ crosshairProps.variant === "corners" && useHoverEffect && size === "lg" && "group-enabled:group-hover:inset-[-4px]",
87
+ crosshairProps.variant === "corners" && useHoverEffect && size === "md" && "group-enabled:group-hover:inset-[-3px]",
88
+ crosshairProps.variant === "corners" && useHoverEffect && size !== "lg" && size !== "md" && "group-enabled:group-hover:inset-[-2px]",
84
89
  crosshairProps.variant === "cross" && useHoverEffect && "-inset-1 text-shade-primary",
85
90
  crosshairProps.variant === "bordered" && useHoverEffect && "inset-0.5 group-enabled:group-active:inset-1 group-enabled:group-hover:inset-[-4px] group-enabled:group-hover:text-shade-primary group-enabled:group-active:text-current"
86
91
  ),
@@ -105,11 +110,12 @@ const Button = ({
105
110
  difficulties: icon.difficulties
106
111
  }
107
112
  ),
113
+ children && children,
108
114
  !hideLabel && label && /* @__PURE__ */ jsxRuntime.jsx(
109
115
  DecryptedText__default.default,
110
116
  {
111
117
  speed: label.length / 0.6,
112
- isHovering,
118
+ isHovering: isHovering && !disabled && useDecryptAnimation,
113
119
  text: label
114
120
  }
115
121
  ),
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/Button.tsx"],"names":["useState","jsxs","motion","classNames","jsx","CrosshairCorners","Icon","DecryptedText"],"mappings":"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","file":"Button.js","sourcesContent":["\"use client\";\n\nimport { motion, MotionProps } from \"motion/react\";\nimport classNames from \"classnames\";\nimport { Icon } from \"./Icon\";\nimport { CrosshairCorners, type CrosshairCornersProps } from \"./CrossHair\";\nimport DecryptedText from \"./DecryptText\";\nimport { useState } from \"react\";\nimport { courseDifficulty } from \"./utils/colours\";\nimport { IconName } from \"./icons\";\n\nexport type ButtonProps = {\n className?: string;\n disabled?: boolean;\n icon?: {\n name: IconName;\n className?: string;\n size?: number;\n difficulties?: Array<keyof typeof courseDifficulty>;\n };\n iconPosition?: \"left\" | \"right\";\n hideLabel?: boolean;\n label?: string;\n loading?: boolean;\n onClick?: () => void;\n onMouseEnter?: () => void;\n onMouseLeave?: () => void;\n size?: \"xs\" | \"sm\" | \"md\" | \"lg\";\n variant?: \"primary\" | \"secondary\";\n crosshairProps?: CrosshairCornersProps;\n useHoverEffect?: boolean;\n animation?: MotionProps;\n};\n\nexport const Button = ({\n label,\n variant = \"primary\",\n size = \"lg\",\n className = \"\",\n onClick,\n disabled = false,\n icon,\n iconPosition = \"left\",\n loading = false,\n crosshairProps = {\n variant: \"corners\",\n },\n hideLabel,\n animation,\n useHoverEffect = true,\n onMouseEnter,\n onMouseLeave,\n}: ButtonProps) => {\n const [isHovering, setIsHovering] = useState(false);\n return (\n <motion.button\n disabled={disabled}\n onClick={onClick}\n onMouseEnter={() => {\n setIsHovering(true);\n onMouseEnter?.();\n }}\n onMouseLeave={() => {\n setIsHovering(false);\n onMouseLeave?.();\n }}\n className={classNames(\n // Animation\n \"relative enabled:cursor-pointer group enabled:active:scale-[0.97] transition-all duration-100 ease-glide font-mono\",\n // Base Styles\n \"disabled:opacity-40 flex items-center justify-center gap-x-2 leading-[18px]\",\n // Themes\n variant === \"primary\" &&\n \"bg-primary-button text-background gradient-border before:bg-primary-button-border\",\n variant === \"secondary\" &&\n \"bg-card-foreground text-shade-secondary gradient-border before:bg-secondary-button-border\",\n // Sizes\n size === \"lg\" && \"py-4 pl-6 pr-6 text-base\",\n size === \"md\" && \"py-3 pl-4 pr-4 text-sm\",\n size === \"sm\" && \"py-2 pl-3 pr-3 text-sm leading-[20px]\",\n size === \"xs\" && \"text-[10px] px-3 py-1.5\",\n size === \"lg\" &&\n hideLabel &&\n \"h-[50px] w-[50px] justify-center !pr-0 !pl-0\",\n size === \"md\" &&\n hideLabel &&\n \"h-[42px] w-[42px] justify-center !pr-0 !pl-0\",\n size === \"sm\" &&\n hideLabel &&\n \"h-[36px] w-[36px] justify-center !pr-0 !pl-0\",\n // Icon offsets\n size === \"lg\" && icon && iconPosition === \"right\" && \"pl-6 pr-[22px]\",\n size === \"lg\" && icon && iconPosition === \"left\" && \"pl-[22px] pr-6\",\n size === \"md\" && icon && iconPosition === \"right\" && \"pl-4 pr-[18px]\",\n size === \"md\" && icon && iconPosition === \"left\" && \"pl-[18px] pr-4\",\n size === \"sm\" && icon && iconPosition === \"right\" && \"pl-3 pr-[14px]\",\n size === \"sm\" && icon && iconPosition === \"left\" && \"pl-[14px] pr-3\",\n className\n )}\n {...animation}\n >\n {crosshairProps && (\n <div\n className={classNames(\n \"will-change-transform absolute transition-all duration-50 ease-glide inset-0\",\n variant === \"secondary\" && \"text-shade-mute\",\n variant === \"primary\" && \"text-background\",\n crosshairProps.variant === \"corners\" &&\n useHoverEffect &&\n \"inset-0.5 group-enabled:group-active:inset-1 group-enabled:group-hover:inset-[-4px] group-enabled:group-hover:text-shade-primary group-enabled:group-active:text-current\",\n crosshairProps.variant === \"cross\" &&\n useHoverEffect &&\n \"-inset-1 text-shade-primary\",\n crosshairProps.variant === \"bordered\" &&\n useHoverEffect &&\n \"inset-0.5 group-enabled:group-active:inset-1 group-enabled:group-hover:inset-[-4px] group-enabled:group-hover:text-shade-primary group-enabled:group-active:text-current\"\n )}\n >\n <CrosshairCorners\n size={size === \"xs\" ? 3 : size === \"sm\" ? 4 : 6}\n animationDelay={0}\n variant={crosshairProps.variant}\n animationDuration={1.5}\n {...crosshairProps}\n />\n </div>\n )}\n {icon && iconPosition === \"left\" && size !== \"xs\" && (\n <Icon\n size={icon.size}\n name={loading ? \"Loading\" : icon.name}\n className={classNames(icon.className, \"flex-shrink-0\")}\n difficulties={icon.difficulties}\n />\n )}\n {!hideLabel && label && (\n <DecryptedText\n speed={label.length / 0.6}\n isHovering={isHovering}\n text={label}\n />\n )}\n {icon && iconPosition === \"right\" && size !== \"xs\" && (\n <Icon\n size={icon.size}\n name={loading ? \"Loading\" : icon.name}\n className={classNames(icon.className, \"flex-shrink-0\")}\n difficulties={icon.difficulties}\n />\n )}\n </motion.button>\n );\n};\n"]}
1
+ {"version":3,"sources":["../src/Button.tsx"],"names":["useState","jsxs","motion","classNames","jsx","CrosshairCorners","Icon","DecryptedText"],"mappings":"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","file":"Button.js","sourcesContent":["\"use client\";\n\nimport { motion, MotionProps } from \"motion/react\";\nimport classNames from \"classnames\";\nimport { Icon } from \"./Icon\";\nimport { CrosshairCorners, type CrosshairCornersProps } from \"./CrossHair\";\nimport DecryptedText from \"./DecryptText\";\nimport { useState } from \"react\";\nimport { courseDifficulty } from \"./utils/colours\";\nimport { IconName } from \"./icons\";\n\nexport type ButtonProps = {\n className?: string;\n disabled?: boolean;\n children?: React.ReactNode;\n icon?: {\n name: IconName;\n className?: string;\n size?: number;\n difficulties?: Array<keyof typeof courseDifficulty>;\n };\n iconPosition?: \"left\" | \"right\";\n hideLabel?: boolean;\n label?: string;\n loading?: boolean;\n onClick?: () => void;\n onMouseEnter?: () => void;\n onMouseLeave?: () => void;\n size?: \"xs\" | \"sm\" | \"md\" | \"lg\";\n variant?: \"primary\" | \"secondary\";\n crosshairProps?: CrosshairCornersProps;\n useHoverEffect?: boolean;\n animation?: MotionProps;\n useDecryptAnimation?: boolean;\n};\n\nexport const Button = ({\n label,\n variant = \"primary\",\n size = \"lg\",\n className = \"\",\n onClick,\n disabled = false,\n icon,\n iconPosition = \"left\",\n loading = false,\n crosshairProps = {\n variant: \"corners\",\n },\n hideLabel,\n animation,\n useHoverEffect = true,\n onMouseEnter,\n onMouseLeave,\n children,\n useDecryptAnimation = true,\n}: ButtonProps) => {\n const [isHovering, setIsHovering] = useState(false);\n return (\n <motion.button\n disabled={disabled}\n onClick={onClick}\n onMouseEnter={() => {\n setIsHovering(true);\n onMouseEnter?.();\n }}\n onMouseLeave={() => {\n setIsHovering(false);\n onMouseLeave?.();\n }}\n className={classNames(\n // Animation\n \"relative enabled:cursor-pointer group enabled:active:scale-[0.97] transition-all duration-100 ease-glide font-mono\",\n // Base Styles\n \"disabled:opacity-40 flex items-center justify-center gap-x-2 leading-[18px]\",\n // Themes\n variant === \"primary\" &&\n \"bg-primary-button text-background gradient-border before:bg-primary-button-border\",\n variant === \"secondary\" &&\n \"bg-card-foreground text-shade-secondary gradient-border before:bg-secondary-button-border\",\n // Sizes\n size === \"lg\" && \"py-4 pl-6 pr-6 text-base\",\n size === \"md\" && \"py-3 pl-4 pr-4 text-sm\",\n size === \"sm\" && \"py-2 pl-3 pr-3 text-sm leading-[20px]\",\n size === \"xs\" && \"text-[10px] px-3 py-1.5\",\n size === \"lg\" &&\n hideLabel &&\n \"h-[50px] w-[50px] justify-center !pr-0 !pl-0\",\n size === \"md\" &&\n hideLabel &&\n \"h-[42px] w-[42px] justify-center !pr-0 !pl-0\",\n size === \"sm\" &&\n hideLabel &&\n \"h-[36px] w-[36px] justify-center !pr-0 !pl-0\",\n // Icon offsets\n size === \"lg\" && icon && iconPosition === \"right\" && \"pl-6 pr-[22px]\",\n size === \"lg\" && icon && iconPosition === \"left\" && \"pl-[22px] pr-6\",\n size === \"md\" && icon && iconPosition === \"right\" && \"pl-4 pr-[18px]\",\n size === \"md\" && icon && iconPosition === \"left\" && \"pl-[18px] pr-4\",\n size === \"sm\" && icon && iconPosition === \"right\" && \"pl-3 pr-[14px]\",\n size === \"sm\" && icon && iconPosition === \"left\" && \"pl-[14px] pr-3\",\n className\n )}\n {...animation}\n >\n {crosshairProps && (\n <div\n className={classNames(\n \"will-change-transform absolute transition-all duration-50 ease-glide inset-0\",\n variant === \"secondary\" && \"text-shade-mute\",\n variant === \"primary\" && \"text-background\",\n crosshairProps.variant === \"corners\" &&\n useHoverEffect &&\n \"inset-0.5 group-enabled:group-active:inset-1 group-enabled:group-hover:text-shade-primary group-enabled:group-active:text-current\",\n crosshairProps.variant === \"corners\" &&\n useHoverEffect &&\n size === \"lg\" &&\n \"group-enabled:group-hover:inset-[-4px]\",\n crosshairProps.variant === \"corners\" &&\n useHoverEffect &&\n size === \"md\" &&\n \"group-enabled:group-hover:inset-[-3px]\",\n crosshairProps.variant === \"corners\" &&\n useHoverEffect &&\n size !== \"lg\" &&\n size !== \"md\" &&\n \"group-enabled:group-hover:inset-[-2px]\",\n crosshairProps.variant === \"cross\" &&\n useHoverEffect &&\n \"-inset-1 text-shade-primary\",\n crosshairProps.variant === \"bordered\" &&\n useHoverEffect &&\n \"inset-0.5 group-enabled:group-active:inset-1 group-enabled:group-hover:inset-[-4px] group-enabled:group-hover:text-shade-primary group-enabled:group-active:text-current\"\n )}\n >\n <CrosshairCorners\n size={size === \"xs\" ? 3 : size === \"sm\" ? 4 : 6}\n animationDelay={0}\n variant={crosshairProps.variant}\n animationDuration={1.5}\n {...crosshairProps}\n />\n </div>\n )}\n {icon && iconPosition === \"left\" && size !== \"xs\" && (\n <Icon\n size={icon.size}\n name={loading ? \"Loading\" : icon.name}\n className={classNames(icon.className, \"flex-shrink-0\")}\n difficulties={icon.difficulties}\n />\n )}\n {children && children}\n {!hideLabel && label && (\n <DecryptedText\n speed={label.length / 0.6}\n isHovering={isHovering && !disabled && useDecryptAnimation}\n text={label}\n />\n )}\n {icon && iconPosition === \"right\" && size !== \"xs\" && (\n <Icon\n size={icon.size}\n name={loading ? \"Loading\" : icon.name}\n className={classNames(icon.className, \"flex-shrink-0\")}\n difficulties={icon.difficulties}\n />\n )}\n </motion.button>\n );\n};\n"]}
package/dist/Button.mjs CHANGED
@@ -23,7 +23,9 @@ const Button = ({
23
23
  animation,
24
24
  useHoverEffect = true,
25
25
  onMouseEnter,
26
- onMouseLeave
26
+ onMouseLeave,
27
+ children,
28
+ useDecryptAnimation = true
27
29
  }) => {
28
30
  const [isHovering, setIsHovering] = useState(false);
29
31
  return /* @__PURE__ */ jsxs(
@@ -73,7 +75,10 @@ const Button = ({
73
75
  "will-change-transform absolute transition-all duration-50 ease-glide inset-0",
74
76
  variant === "secondary" && "text-shade-mute",
75
77
  variant === "primary" && "text-background",
76
- crosshairProps.variant === "corners" && useHoverEffect && "inset-0.5 group-enabled:group-active:inset-1 group-enabled:group-hover:inset-[-4px] group-enabled:group-hover:text-shade-primary group-enabled:group-active:text-current",
78
+ crosshairProps.variant === "corners" && useHoverEffect && "inset-0.5 group-enabled:group-active:inset-1 group-enabled:group-hover:text-shade-primary group-enabled:group-active:text-current",
79
+ crosshairProps.variant === "corners" && useHoverEffect && size === "lg" && "group-enabled:group-hover:inset-[-4px]",
80
+ crosshairProps.variant === "corners" && useHoverEffect && size === "md" && "group-enabled:group-hover:inset-[-3px]",
81
+ crosshairProps.variant === "corners" && useHoverEffect && size !== "lg" && size !== "md" && "group-enabled:group-hover:inset-[-2px]",
77
82
  crosshairProps.variant === "cross" && useHoverEffect && "-inset-1 text-shade-primary",
78
83
  crosshairProps.variant === "bordered" && useHoverEffect && "inset-0.5 group-enabled:group-active:inset-1 group-enabled:group-hover:inset-[-4px] group-enabled:group-hover:text-shade-primary group-enabled:group-active:text-current"
79
84
  ),
@@ -98,11 +103,12 @@ const Button = ({
98
103
  difficulties: icon.difficulties
99
104
  }
100
105
  ),
106
+ children && children,
101
107
  !hideLabel && label && /* @__PURE__ */ jsx(
102
108
  DecryptedText,
103
109
  {
104
110
  speed: label.length / 0.6,
105
- isHovering,
111
+ isHovering: isHovering && !disabled && useDecryptAnimation,
106
112
  text: label
107
113
  }
108
114
  ),
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/Button.tsx"],"names":[],"mappings":"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","file":"Button.mjs","sourcesContent":["\"use client\";\n\nimport { motion, MotionProps } from \"motion/react\";\nimport classNames from \"classnames\";\nimport { Icon } from \"./Icon\";\nimport { CrosshairCorners, type CrosshairCornersProps } from \"./CrossHair\";\nimport DecryptedText from \"./DecryptText\";\nimport { useState } from \"react\";\nimport { courseDifficulty } from \"./utils/colours\";\nimport { IconName } from \"./icons\";\n\nexport type ButtonProps = {\n className?: string;\n disabled?: boolean;\n icon?: {\n name: IconName;\n className?: string;\n size?: number;\n difficulties?: Array<keyof typeof courseDifficulty>;\n };\n iconPosition?: \"left\" | \"right\";\n hideLabel?: boolean;\n label?: string;\n loading?: boolean;\n onClick?: () => void;\n onMouseEnter?: () => void;\n onMouseLeave?: () => void;\n size?: \"xs\" | \"sm\" | \"md\" | \"lg\";\n variant?: \"primary\" | \"secondary\";\n crosshairProps?: CrosshairCornersProps;\n useHoverEffect?: boolean;\n animation?: MotionProps;\n};\n\nexport const Button = ({\n label,\n variant = \"primary\",\n size = \"lg\",\n className = \"\",\n onClick,\n disabled = false,\n icon,\n iconPosition = \"left\",\n loading = false,\n crosshairProps = {\n variant: \"corners\",\n },\n hideLabel,\n animation,\n useHoverEffect = true,\n onMouseEnter,\n onMouseLeave,\n}: ButtonProps) => {\n const [isHovering, setIsHovering] = useState(false);\n return (\n <motion.button\n disabled={disabled}\n onClick={onClick}\n onMouseEnter={() => {\n setIsHovering(true);\n onMouseEnter?.();\n }}\n onMouseLeave={() => {\n setIsHovering(false);\n onMouseLeave?.();\n }}\n className={classNames(\n // Animation\n \"relative enabled:cursor-pointer group enabled:active:scale-[0.97] transition-all duration-100 ease-glide font-mono\",\n // Base Styles\n \"disabled:opacity-40 flex items-center justify-center gap-x-2 leading-[18px]\",\n // Themes\n variant === \"primary\" &&\n \"bg-primary-button text-background gradient-border before:bg-primary-button-border\",\n variant === \"secondary\" &&\n \"bg-card-foreground text-shade-secondary gradient-border before:bg-secondary-button-border\",\n // Sizes\n size === \"lg\" && \"py-4 pl-6 pr-6 text-base\",\n size === \"md\" && \"py-3 pl-4 pr-4 text-sm\",\n size === \"sm\" && \"py-2 pl-3 pr-3 text-sm leading-[20px]\",\n size === \"xs\" && \"text-[10px] px-3 py-1.5\",\n size === \"lg\" &&\n hideLabel &&\n \"h-[50px] w-[50px] justify-center !pr-0 !pl-0\",\n size === \"md\" &&\n hideLabel &&\n \"h-[42px] w-[42px] justify-center !pr-0 !pl-0\",\n size === \"sm\" &&\n hideLabel &&\n \"h-[36px] w-[36px] justify-center !pr-0 !pl-0\",\n // Icon offsets\n size === \"lg\" && icon && iconPosition === \"right\" && \"pl-6 pr-[22px]\",\n size === \"lg\" && icon && iconPosition === \"left\" && \"pl-[22px] pr-6\",\n size === \"md\" && icon && iconPosition === \"right\" && \"pl-4 pr-[18px]\",\n size === \"md\" && icon && iconPosition === \"left\" && \"pl-[18px] pr-4\",\n size === \"sm\" && icon && iconPosition === \"right\" && \"pl-3 pr-[14px]\",\n size === \"sm\" && icon && iconPosition === \"left\" && \"pl-[14px] pr-3\",\n className\n )}\n {...animation}\n >\n {crosshairProps && (\n <div\n className={classNames(\n \"will-change-transform absolute transition-all duration-50 ease-glide inset-0\",\n variant === \"secondary\" && \"text-shade-mute\",\n variant === \"primary\" && \"text-background\",\n crosshairProps.variant === \"corners\" &&\n useHoverEffect &&\n \"inset-0.5 group-enabled:group-active:inset-1 group-enabled:group-hover:inset-[-4px] group-enabled:group-hover:text-shade-primary group-enabled:group-active:text-current\",\n crosshairProps.variant === \"cross\" &&\n useHoverEffect &&\n \"-inset-1 text-shade-primary\",\n crosshairProps.variant === \"bordered\" &&\n useHoverEffect &&\n \"inset-0.5 group-enabled:group-active:inset-1 group-enabled:group-hover:inset-[-4px] group-enabled:group-hover:text-shade-primary group-enabled:group-active:text-current\"\n )}\n >\n <CrosshairCorners\n size={size === \"xs\" ? 3 : size === \"sm\" ? 4 : 6}\n animationDelay={0}\n variant={crosshairProps.variant}\n animationDuration={1.5}\n {...crosshairProps}\n />\n </div>\n )}\n {icon && iconPosition === \"left\" && size !== \"xs\" && (\n <Icon\n size={icon.size}\n name={loading ? \"Loading\" : icon.name}\n className={classNames(icon.className, \"flex-shrink-0\")}\n difficulties={icon.difficulties}\n />\n )}\n {!hideLabel && label && (\n <DecryptedText\n speed={label.length / 0.6}\n isHovering={isHovering}\n text={label}\n />\n )}\n {icon && iconPosition === \"right\" && size !== \"xs\" && (\n <Icon\n size={icon.size}\n name={loading ? \"Loading\" : icon.name}\n className={classNames(icon.className, \"flex-shrink-0\")}\n difficulties={icon.difficulties}\n />\n )}\n </motion.button>\n );\n};\n"]}
1
+ {"version":3,"sources":["../src/Button.tsx"],"names":[],"mappings":"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","file":"Button.mjs","sourcesContent":["\"use client\";\n\nimport { motion, MotionProps } from \"motion/react\";\nimport classNames from \"classnames\";\nimport { Icon } from \"./Icon\";\nimport { CrosshairCorners, type CrosshairCornersProps } from \"./CrossHair\";\nimport DecryptedText from \"./DecryptText\";\nimport { useState } from \"react\";\nimport { courseDifficulty } from \"./utils/colours\";\nimport { IconName } from \"./icons\";\n\nexport type ButtonProps = {\n className?: string;\n disabled?: boolean;\n children?: React.ReactNode;\n icon?: {\n name: IconName;\n className?: string;\n size?: number;\n difficulties?: Array<keyof typeof courseDifficulty>;\n };\n iconPosition?: \"left\" | \"right\";\n hideLabel?: boolean;\n label?: string;\n loading?: boolean;\n onClick?: () => void;\n onMouseEnter?: () => void;\n onMouseLeave?: () => void;\n size?: \"xs\" | \"sm\" | \"md\" | \"lg\";\n variant?: \"primary\" | \"secondary\";\n crosshairProps?: CrosshairCornersProps;\n useHoverEffect?: boolean;\n animation?: MotionProps;\n useDecryptAnimation?: boolean;\n};\n\nexport const Button = ({\n label,\n variant = \"primary\",\n size = \"lg\",\n className = \"\",\n onClick,\n disabled = false,\n icon,\n iconPosition = \"left\",\n loading = false,\n crosshairProps = {\n variant: \"corners\",\n },\n hideLabel,\n animation,\n useHoverEffect = true,\n onMouseEnter,\n onMouseLeave,\n children,\n useDecryptAnimation = true,\n}: ButtonProps) => {\n const [isHovering, setIsHovering] = useState(false);\n return (\n <motion.button\n disabled={disabled}\n onClick={onClick}\n onMouseEnter={() => {\n setIsHovering(true);\n onMouseEnter?.();\n }}\n onMouseLeave={() => {\n setIsHovering(false);\n onMouseLeave?.();\n }}\n className={classNames(\n // Animation\n \"relative enabled:cursor-pointer group enabled:active:scale-[0.97] transition-all duration-100 ease-glide font-mono\",\n // Base Styles\n \"disabled:opacity-40 flex items-center justify-center gap-x-2 leading-[18px]\",\n // Themes\n variant === \"primary\" &&\n \"bg-primary-button text-background gradient-border before:bg-primary-button-border\",\n variant === \"secondary\" &&\n \"bg-card-foreground text-shade-secondary gradient-border before:bg-secondary-button-border\",\n // Sizes\n size === \"lg\" && \"py-4 pl-6 pr-6 text-base\",\n size === \"md\" && \"py-3 pl-4 pr-4 text-sm\",\n size === \"sm\" && \"py-2 pl-3 pr-3 text-sm leading-[20px]\",\n size === \"xs\" && \"text-[10px] px-3 py-1.5\",\n size === \"lg\" &&\n hideLabel &&\n \"h-[50px] w-[50px] justify-center !pr-0 !pl-0\",\n size === \"md\" &&\n hideLabel &&\n \"h-[42px] w-[42px] justify-center !pr-0 !pl-0\",\n size === \"sm\" &&\n hideLabel &&\n \"h-[36px] w-[36px] justify-center !pr-0 !pl-0\",\n // Icon offsets\n size === \"lg\" && icon && iconPosition === \"right\" && \"pl-6 pr-[22px]\",\n size === \"lg\" && icon && iconPosition === \"left\" && \"pl-[22px] pr-6\",\n size === \"md\" && icon && iconPosition === \"right\" && \"pl-4 pr-[18px]\",\n size === \"md\" && icon && iconPosition === \"left\" && \"pl-[18px] pr-4\",\n size === \"sm\" && icon && iconPosition === \"right\" && \"pl-3 pr-[14px]\",\n size === \"sm\" && icon && iconPosition === \"left\" && \"pl-[14px] pr-3\",\n className\n )}\n {...animation}\n >\n {crosshairProps && (\n <div\n className={classNames(\n \"will-change-transform absolute transition-all duration-50 ease-glide inset-0\",\n variant === \"secondary\" && \"text-shade-mute\",\n variant === \"primary\" && \"text-background\",\n crosshairProps.variant === \"corners\" &&\n useHoverEffect &&\n \"inset-0.5 group-enabled:group-active:inset-1 group-enabled:group-hover:text-shade-primary group-enabled:group-active:text-current\",\n crosshairProps.variant === \"corners\" &&\n useHoverEffect &&\n size === \"lg\" &&\n \"group-enabled:group-hover:inset-[-4px]\",\n crosshairProps.variant === \"corners\" &&\n useHoverEffect &&\n size === \"md\" &&\n \"group-enabled:group-hover:inset-[-3px]\",\n crosshairProps.variant === \"corners\" &&\n useHoverEffect &&\n size !== \"lg\" &&\n size !== \"md\" &&\n \"group-enabled:group-hover:inset-[-2px]\",\n crosshairProps.variant === \"cross\" &&\n useHoverEffect &&\n \"-inset-1 text-shade-primary\",\n crosshairProps.variant === \"bordered\" &&\n useHoverEffect &&\n \"inset-0.5 group-enabled:group-active:inset-1 group-enabled:group-hover:inset-[-4px] group-enabled:group-hover:text-shade-primary group-enabled:group-active:text-current\"\n )}\n >\n <CrosshairCorners\n size={size === \"xs\" ? 3 : size === \"sm\" ? 4 : 6}\n animationDelay={0}\n variant={crosshairProps.variant}\n animationDuration={1.5}\n {...crosshairProps}\n />\n </div>\n )}\n {icon && iconPosition === \"left\" && size !== \"xs\" && (\n <Icon\n size={icon.size}\n name={loading ? \"Loading\" : icon.name}\n className={classNames(icon.className, \"flex-shrink-0\")}\n difficulties={icon.difficulties}\n />\n )}\n {children && children}\n {!hideLabel && label && (\n <DecryptedText\n speed={label.length / 0.6}\n isHovering={isHovering && !disabled && useDecryptAnimation}\n text={label}\n />\n )}\n {icon && iconPosition === \"right\" && size !== \"xs\" && (\n <Icon\n size={icon.size}\n name={loading ? \"Loading\" : icon.name}\n className={classNames(icon.className, \"flex-shrink-0\")}\n difficulties={icon.difficulties}\n />\n )}\n </motion.button>\n );\n};\n"]}
@@ -65,24 +65,6 @@ function DecryptedText({
65
65
  }
66
66
  });
67
67
  }, speed);
68
- } else if (revealedIndices.size > 0) {
69
- setIsExiting(true);
70
- setIsScrambling(true);
71
- interval = setInterval(() => {
72
- setRevealedIndices((prevRevealed) => {
73
- if (prevRevealed.size > 0) {
74
- const newRevealed = new Set(prevRevealed);
75
- newRevealed.delete(prevRevealed.size - 1);
76
- setDisplayText(shuffleText(newRevealed, true));
77
- return newRevealed;
78
- } else {
79
- clearInterval(interval);
80
- setIsScrambling(false);
81
- setIsExiting(false);
82
- return prevRevealed;
83
- }
84
- });
85
- }, speed);
86
68
  } else {
87
69
  setDisplayText(text);
88
70
  setRevealedIndices(/* @__PURE__ */ new Set());
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/DecryptText.tsx"],"names":["useState","useEffect","isExiting","jsxs","motion","classNames","jsx"],"mappings":"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","file":"DecryptText.js","sourcesContent":["\"use client\";\n\nimport { useEffect, useState } from \"react\";\nimport { motion } from \"motion/react\";\nimport classNames from \"classnames\";\n\ninterface DecryptedTextProps {\n text: string;\n speed?: number;\n className?: string;\n encryptedClassName?: string;\n parentClassName?: string;\n isHovering?: boolean;\n}\n\nexport default function DecryptedText({\n text,\n speed = 20,\n className = \"\",\n parentClassName = \"\",\n encryptedClassName = \"\",\n isHovering = false,\n}: DecryptedTextProps) {\n const [displayText, setDisplayText] = useState<string>(text);\n const [isScrambling, setIsScrambling] = useState<boolean>(false);\n const [revealedIndices, setRevealedIndices] = useState<Set<number>>(\n new Set()\n );\n const [isExiting, setIsExiting] = useState<boolean>(false);\n\n useEffect(() => {\n let interval: NodeJS.Timeout;\n\n const shuffleText = (\n currentRevealed: Set<number>,\n isExiting: boolean = false\n ): string => {\n const positions = text.split(\"\").map((char, i) => ({\n char,\n isSpace: char === \" \",\n index: i,\n isRevealed: isExiting\n ? !currentRevealed.has(i)\n : currentRevealed.has(i),\n }));\n\n const nonSpaceChars = positions\n .filter((p) => !p.isSpace && !p.isRevealed)\n .map((p) => p.char);\n\n for (let i = nonSpaceChars.length - 1; i > 0; i--) {\n const j = Math.floor(Math.random() * (i + 1));\n [nonSpaceChars[i], nonSpaceChars[j]] = [\n nonSpaceChars[j],\n nonSpaceChars[i],\n ];\n }\n\n let charIndex = 0;\n return positions\n .map((p) => {\n if (p.isSpace) return \" \";\n if (p.isRevealed) return text[p.index];\n return nonSpaceChars[charIndex++];\n })\n .join(\"\");\n };\n\n if (isHovering) {\n setIsExiting(false);\n setIsScrambling(true);\n interval = setInterval(() => {\n setRevealedIndices((prevRevealed) => {\n if (prevRevealed.size < text.length) {\n const nextIndex = prevRevealed.size;\n const newRevealed = new Set(prevRevealed);\n newRevealed.add(nextIndex);\n setDisplayText(shuffleText(newRevealed));\n return newRevealed;\n } else {\n clearInterval(interval);\n setIsScrambling(false);\n return prevRevealed;\n }\n });\n }, speed);\n } else if (revealedIndices.size > 0) {\n setIsExiting(true);\n setIsScrambling(true);\n interval = setInterval(() => {\n setRevealedIndices((prevRevealed) => {\n if (prevRevealed.size > 0) {\n const newRevealed = new Set(prevRevealed);\n newRevealed.delete(prevRevealed.size - 1);\n setDisplayText(shuffleText(newRevealed, true));\n return newRevealed;\n } else {\n clearInterval(interval);\n setIsScrambling(false);\n setIsExiting(false);\n return prevRevealed;\n }\n });\n }, speed);\n } else {\n setDisplayText(text);\n setRevealedIndices(new Set());\n setIsScrambling(false);\n setIsExiting(false);\n }\n\n return () => {\n if (interval) clearInterval(interval);\n };\n }, [isHovering, text, speed]);\n\n return (\n <motion.span\n className={classNames(\n \"inline-block whitespace-pre-wrap\",\n parentClassName\n )}\n >\n <span className=\"sr-only\">{displayText}</span>\n\n <span aria-hidden=\"true\" className=\"inline-flex tracking-tight\">\n {displayText.split(\"\").map((char, index) => {\n const isRevealedOrDone =\n (isExiting\n ? !revealedIndices.has(index)\n : revealedIndices.has(index)) ||\n !isScrambling ||\n (!isHovering && !isExiting);\n\n return (\n <span\n key={index}\n className={isRevealedOrDone ? className : encryptedClassName}\n >\n {char}\n </span>\n );\n })}\n </span>\n </motion.span>\n );\n}\n"]}
1
+ {"version":3,"sources":["../src/DecryptText.tsx"],"names":["useState","useEffect","isExiting","jsxs","motion","classNames","jsx"],"mappings":"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","file":"DecryptText.js","sourcesContent":["\"use client\";\n\nimport { useEffect, useState } from \"react\";\nimport { motion } from \"motion/react\";\nimport classNames from \"classnames\";\n\ninterface DecryptedTextProps {\n text: string;\n speed?: number;\n className?: string;\n encryptedClassName?: string;\n parentClassName?: string;\n isHovering?: boolean;\n}\n\nexport default function DecryptedText({\n text,\n speed = 20,\n className = \"\",\n parentClassName = \"\",\n encryptedClassName = \"\",\n isHovering = false,\n}: DecryptedTextProps) {\n const [displayText, setDisplayText] = useState<string>(text);\n const [isScrambling, setIsScrambling] = useState<boolean>(false);\n const [revealedIndices, setRevealedIndices] = useState<Set<number>>(\n new Set()\n );\n const [isExiting, setIsExiting] = useState<boolean>(false);\n\n useEffect(() => {\n let interval: NodeJS.Timeout;\n\n const shuffleText = (\n currentRevealed: Set<number>,\n isExiting: boolean = false\n ): string => {\n const positions = text.split(\"\").map((char, i) => ({\n char,\n isSpace: char === \" \",\n index: i,\n isRevealed: isExiting\n ? !currentRevealed.has(i)\n : currentRevealed.has(i),\n }));\n\n const nonSpaceChars = positions\n .filter((p) => !p.isSpace && !p.isRevealed)\n .map((p) => p.char);\n\n for (let i = nonSpaceChars.length - 1; i > 0; i--) {\n const j = Math.floor(Math.random() * (i + 1));\n [nonSpaceChars[i], nonSpaceChars[j]] = [\n nonSpaceChars[j],\n nonSpaceChars[i],\n ];\n }\n\n let charIndex = 0;\n return positions\n .map((p) => {\n if (p.isSpace) return \" \";\n if (p.isRevealed) return text[p.index];\n return nonSpaceChars[charIndex++];\n })\n .join(\"\");\n };\n\n if (isHovering) {\n setIsExiting(false);\n setIsScrambling(true);\n interval = setInterval(() => {\n setRevealedIndices((prevRevealed) => {\n if (prevRevealed.size < text.length) {\n const nextIndex = prevRevealed.size;\n const newRevealed = new Set(prevRevealed);\n newRevealed.add(nextIndex);\n setDisplayText(shuffleText(newRevealed));\n return newRevealed;\n } else {\n clearInterval(interval);\n setIsScrambling(false);\n return prevRevealed;\n }\n });\n }, speed);\n } else {\n // When not hovering, immediately show the original text without animation\n setDisplayText(text);\n setRevealedIndices(new Set());\n setIsScrambling(false);\n setIsExiting(false);\n }\n\n return () => {\n if (interval) clearInterval(interval);\n };\n }, [isHovering, text, speed]);\n\n return (\n <motion.span\n className={classNames(\n \"inline-block whitespace-pre-wrap\",\n parentClassName\n )}\n >\n <span className=\"sr-only\">{displayText}</span>\n\n <span aria-hidden=\"true\" className=\"inline-flex tracking-tight\">\n {displayText.split(\"\").map((char, index) => {\n const isRevealedOrDone =\n (isExiting\n ? !revealedIndices.has(index)\n : revealedIndices.has(index)) ||\n !isScrambling ||\n (!isHovering && !isExiting);\n\n return (\n <span\n key={index}\n className={isRevealedOrDone ? className : encryptedClassName}\n >\n {char}\n </span>\n );\n })}\n </span>\n </motion.span>\n );\n}\n"]}
@@ -59,24 +59,6 @@ function DecryptedText({
59
59
  }
60
60
  });
61
61
  }, speed);
62
- } else if (revealedIndices.size > 0) {
63
- setIsExiting(true);
64
- setIsScrambling(true);
65
- interval = setInterval(() => {
66
- setRevealedIndices((prevRevealed) => {
67
- if (prevRevealed.size > 0) {
68
- const newRevealed = new Set(prevRevealed);
69
- newRevealed.delete(prevRevealed.size - 1);
70
- setDisplayText(shuffleText(newRevealed, true));
71
- return newRevealed;
72
- } else {
73
- clearInterval(interval);
74
- setIsScrambling(false);
75
- setIsExiting(false);
76
- return prevRevealed;
77
- }
78
- });
79
- }, speed);
80
62
  } else {
81
63
  setDisplayText(text);
82
64
  setRevealedIndices(/* @__PURE__ */ new Set());
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/DecryptText.tsx"],"names":["isExiting"],"mappings":"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","file":"DecryptText.mjs","sourcesContent":["\"use client\";\n\nimport { useEffect, useState } from \"react\";\nimport { motion } from \"motion/react\";\nimport classNames from \"classnames\";\n\ninterface DecryptedTextProps {\n text: string;\n speed?: number;\n className?: string;\n encryptedClassName?: string;\n parentClassName?: string;\n isHovering?: boolean;\n}\n\nexport default function DecryptedText({\n text,\n speed = 20,\n className = \"\",\n parentClassName = \"\",\n encryptedClassName = \"\",\n isHovering = false,\n}: DecryptedTextProps) {\n const [displayText, setDisplayText] = useState<string>(text);\n const [isScrambling, setIsScrambling] = useState<boolean>(false);\n const [revealedIndices, setRevealedIndices] = useState<Set<number>>(\n new Set()\n );\n const [isExiting, setIsExiting] = useState<boolean>(false);\n\n useEffect(() => {\n let interval: NodeJS.Timeout;\n\n const shuffleText = (\n currentRevealed: Set<number>,\n isExiting: boolean = false\n ): string => {\n const positions = text.split(\"\").map((char, i) => ({\n char,\n isSpace: char === \" \",\n index: i,\n isRevealed: isExiting\n ? !currentRevealed.has(i)\n : currentRevealed.has(i),\n }));\n\n const nonSpaceChars = positions\n .filter((p) => !p.isSpace && !p.isRevealed)\n .map((p) => p.char);\n\n for (let i = nonSpaceChars.length - 1; i > 0; i--) {\n const j = Math.floor(Math.random() * (i + 1));\n [nonSpaceChars[i], nonSpaceChars[j]] = [\n nonSpaceChars[j],\n nonSpaceChars[i],\n ];\n }\n\n let charIndex = 0;\n return positions\n .map((p) => {\n if (p.isSpace) return \" \";\n if (p.isRevealed) return text[p.index];\n return nonSpaceChars[charIndex++];\n })\n .join(\"\");\n };\n\n if (isHovering) {\n setIsExiting(false);\n setIsScrambling(true);\n interval = setInterval(() => {\n setRevealedIndices((prevRevealed) => {\n if (prevRevealed.size < text.length) {\n const nextIndex = prevRevealed.size;\n const newRevealed = new Set(prevRevealed);\n newRevealed.add(nextIndex);\n setDisplayText(shuffleText(newRevealed));\n return newRevealed;\n } else {\n clearInterval(interval);\n setIsScrambling(false);\n return prevRevealed;\n }\n });\n }, speed);\n } else if (revealedIndices.size > 0) {\n setIsExiting(true);\n setIsScrambling(true);\n interval = setInterval(() => {\n setRevealedIndices((prevRevealed) => {\n if (prevRevealed.size > 0) {\n const newRevealed = new Set(prevRevealed);\n newRevealed.delete(prevRevealed.size - 1);\n setDisplayText(shuffleText(newRevealed, true));\n return newRevealed;\n } else {\n clearInterval(interval);\n setIsScrambling(false);\n setIsExiting(false);\n return prevRevealed;\n }\n });\n }, speed);\n } else {\n setDisplayText(text);\n setRevealedIndices(new Set());\n setIsScrambling(false);\n setIsExiting(false);\n }\n\n return () => {\n if (interval) clearInterval(interval);\n };\n }, [isHovering, text, speed]);\n\n return (\n <motion.span\n className={classNames(\n \"inline-block whitespace-pre-wrap\",\n parentClassName\n )}\n >\n <span className=\"sr-only\">{displayText}</span>\n\n <span aria-hidden=\"true\" className=\"inline-flex tracking-tight\">\n {displayText.split(\"\").map((char, index) => {\n const isRevealedOrDone =\n (isExiting\n ? !revealedIndices.has(index)\n : revealedIndices.has(index)) ||\n !isScrambling ||\n (!isHovering && !isExiting);\n\n return (\n <span\n key={index}\n className={isRevealedOrDone ? className : encryptedClassName}\n >\n {char}\n </span>\n );\n })}\n </span>\n </motion.span>\n );\n}\n"]}
1
+ {"version":3,"sources":["../src/DecryptText.tsx"],"names":["isExiting"],"mappings":";;;;;AAee,SAAR,aAAA,CAA+B;AAAA,EACpC,IAAA;AAAA,EACA,KAAA,GAAQ,EAAA;AAAA,EACR,SAAA,GAAY,EAAA;AAAA,EACZ,eAAA,GAAkB,EAAA;AAAA,EAClB,kBAAA,GAAqB,EAAA;AAAA,EACrB,UAAA,GAAa;AACf,CAAA,EAAuB;AACrB,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,SAAiB,IAAI,CAAA;AAC3D,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAI,SAAkB,KAAK,CAAA;AAC/D,EAAA,MAAM,CAAC,eAAA,EAAiB,kBAAkB,CAAA,GAAI,QAAA;AAAA,wBACxC,GAAA;AAAI,GACV;AACA,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,SAAkB,KAAK,CAAA;AAEzD,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,QAAA;AAEJ,IAAA,MAAM,WAAA,GAAc,CAClB,eAAA,EACAA,UAAAA,GAAqB,KAAA,KACV;AACX,MAAA,MAAM,SAAA,GAAY,KAAK,KAAA,CAAM,EAAE,EAAE,GAAA,CAAI,CAAC,MAAM,CAAA,MAAO;AAAA,QACjD,IAAA;AAAA,QACA,SAAS,IAAA,KAAS,GAAA;AAAA,QAClB,KAAA,EAAO,CAAA;AAAA,QACP,UAAA,EAAYA,aACR,CAAC,eAAA,CAAgB,IAAI,CAAC,CAAA,GACtB,eAAA,CAAgB,GAAA,CAAI,CAAC;AAAA,OAC3B,CAAE,CAAA;AAEF,MAAA,MAAM,gBAAgB,SAAA,CACnB,MAAA,CAAO,CAAC,CAAA,KAAM,CAAC,CAAA,CAAE,OAAA,IAAW,CAAC,CAAA,CAAE,UAAU,CAAA,CACzC,GAAA,CAAI,CAAC,CAAA,KAAM,EAAE,IAAI,CAAA;AAEpB,MAAA,KAAA,IAAS,IAAI,aAAA,CAAc,MAAA,GAAS,CAAA,EAAG,CAAA,GAAI,GAAG,CAAA,EAAA,EAAK;AACjD,QAAA,MAAM,IAAI,IAAA,CAAK,KAAA,CAAM,KAAK,MAAA,EAAO,IAAK,IAAI,CAAA,CAAE,CAAA;AAC5C,QAAA,CAAC,cAAc,CAAC,CAAA,EAAG,aAAA,CAAc,CAAC,CAAC,CAAA,GAAI;AAAA,UACrC,cAAc,CAAC,CAAA;AAAA,UACf,cAAc,CAAC;AAAA,SACjB;AAAA,MACF;AAEA,MAAA,IAAI,SAAA,GAAY,CAAA;AAChB,MAAA,OAAO,SAAA,CACJ,GAAA,CAAI,CAAC,CAAA,KAAM;AACV,QAAA,IAAI,CAAA,CAAE,SAAS,OAAO,GAAA;AACtB,QAAA,IAAI,CAAA,CAAE,UAAA,EAAY,OAAO,IAAA,CAAK,EAAE,KAAK,CAAA;AACrC,QAAA,OAAO,cAAc,SAAA,EAAW,CAAA;AAAA,MAClC,CAAC,CAAA,CACA,IAAA,CAAK,EAAE,CAAA;AAAA,IACZ,CAAA;AAEA,IAAA,IAAI,UAAA,EAAY;AACd,MAAA,YAAA,CAAa,KAAK,CAAA;AAClB,MAAA,eAAA,CAAgB,IAAI,CAAA;AACpB,MAAA,QAAA,GAAW,YAAY,MAAM;AAC3B,QAAA,kBAAA,CAAmB,CAAC,YAAA,KAAiB;AACnC,UAAA,IAAI,YAAA,CAAa,IAAA,GAAO,IAAA,CAAK,MAAA,EAAQ;AACnC,YAAA,MAAM,YAAY,YAAA,CAAa,IAAA;AAC/B,YAAA,MAAM,WAAA,GAAc,IAAI,GAAA,CAAI,YAAY,CAAA;AACxC,YAAA,WAAA,CAAY,IAAI,SAAS,CAAA;AACzB,YAAA,cAAA,CAAe,WAAA,CAAY,WAAW,CAAC,CAAA;AACvC,YAAA,OAAO,WAAA;AAAA,UACT,CAAA,MAAO;AACL,YAAA,aAAA,CAAc,QAAQ,CAAA;AACtB,YAAA,eAAA,CAAgB,KAAK,CAAA;AACrB,YAAA,OAAO,YAAA;AAAA,UACT;AAAA,QACF,CAAC,CAAA;AAAA,MACH,GAAG,KAAK,CAAA;AAAA,IACV,CAAA,MAAO;AAEL,MAAA,cAAA,CAAe,IAAI,CAAA;AACnB,MAAA,kBAAA,iBAAmB,IAAI,KAAK,CAAA;AAC5B,MAAA,eAAA,CAAgB,KAAK,CAAA;AACrB,MAAA,YAAA,CAAa,KAAK,CAAA;AAAA,IACpB;AAEA,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,QAAA,gBAAwB,QAAQ,CAAA;AAAA,IACtC,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,UAAA,EAAY,IAAA,EAAM,KAAK,CAAC,CAAA;AAE5B,EAAA,uBACE,IAAA;AAAA,IAAC,MAAA,CAAO,IAAA;AAAA,IAAP;AAAA,MACC,SAAA,EAAW,UAAA;AAAA,QACT,kCAAA;AAAA,QACA;AAAA,OACF;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,SAAA,EAAW,QAAA,EAAA,WAAA,EAAY,CAAA;AAAA,wBAEvC,GAAA,CAAC,MAAA,EAAA,EAAK,aAAA,EAAY,MAAA,EAAO,SAAA,EAAU,4BAAA,EAChC,QAAA,EAAA,WAAA,CAAY,KAAA,CAAM,EAAE,CAAA,CAAE,GAAA,CAAI,CAAC,MAAM,KAAA,KAAU;AAC1C,UAAA,MAAM,gBAAA,GAAA,CACH,SAAA,GACG,CAAC,eAAA,CAAgB,IAAI,KAAK,CAAA,GAC1B,eAAA,CAAgB,GAAA,CAAI,KAAK,CAAA,KAC7B,CAAC,YAAA,IACA,CAAC,cAAc,CAAC,SAAA;AAEnB,UAAA,uBACE,GAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cAEC,SAAA,EAAW,mBAAmB,SAAA,GAAY,kBAAA;AAAA,cAEzC,QAAA,EAAA;AAAA,aAAA;AAAA,YAHI;AAAA,WAIP;AAAA,QAEJ,CAAC,CAAA,EACH;AAAA;AAAA;AAAA,GACF;AAEJ","file":"DecryptText.mjs","sourcesContent":["\"use client\";\n\nimport { useEffect, useState } from \"react\";\nimport { motion } from \"motion/react\";\nimport classNames from \"classnames\";\n\ninterface DecryptedTextProps {\n text: string;\n speed?: number;\n className?: string;\n encryptedClassName?: string;\n parentClassName?: string;\n isHovering?: boolean;\n}\n\nexport default function DecryptedText({\n text,\n speed = 20,\n className = \"\",\n parentClassName = \"\",\n encryptedClassName = \"\",\n isHovering = false,\n}: DecryptedTextProps) {\n const [displayText, setDisplayText] = useState<string>(text);\n const [isScrambling, setIsScrambling] = useState<boolean>(false);\n const [revealedIndices, setRevealedIndices] = useState<Set<number>>(\n new Set()\n );\n const [isExiting, setIsExiting] = useState<boolean>(false);\n\n useEffect(() => {\n let interval: NodeJS.Timeout;\n\n const shuffleText = (\n currentRevealed: Set<number>,\n isExiting: boolean = false\n ): string => {\n const positions = text.split(\"\").map((char, i) => ({\n char,\n isSpace: char === \" \",\n index: i,\n isRevealed: isExiting\n ? !currentRevealed.has(i)\n : currentRevealed.has(i),\n }));\n\n const nonSpaceChars = positions\n .filter((p) => !p.isSpace && !p.isRevealed)\n .map((p) => p.char);\n\n for (let i = nonSpaceChars.length - 1; i > 0; i--) {\n const j = Math.floor(Math.random() * (i + 1));\n [nonSpaceChars[i], nonSpaceChars[j]] = [\n nonSpaceChars[j],\n nonSpaceChars[i],\n ];\n }\n\n let charIndex = 0;\n return positions\n .map((p) => {\n if (p.isSpace) return \" \";\n if (p.isRevealed) return text[p.index];\n return nonSpaceChars[charIndex++];\n })\n .join(\"\");\n };\n\n if (isHovering) {\n setIsExiting(false);\n setIsScrambling(true);\n interval = setInterval(() => {\n setRevealedIndices((prevRevealed) => {\n if (prevRevealed.size < text.length) {\n const nextIndex = prevRevealed.size;\n const newRevealed = new Set(prevRevealed);\n newRevealed.add(nextIndex);\n setDisplayText(shuffleText(newRevealed));\n return newRevealed;\n } else {\n clearInterval(interval);\n setIsScrambling(false);\n return prevRevealed;\n }\n });\n }, speed);\n } else {\n // When not hovering, immediately show the original text without animation\n setDisplayText(text);\n setRevealedIndices(new Set());\n setIsScrambling(false);\n setIsExiting(false);\n }\n\n return () => {\n if (interval) clearInterval(interval);\n };\n }, [isHovering, text, speed]);\n\n return (\n <motion.span\n className={classNames(\n \"inline-block whitespace-pre-wrap\",\n parentClassName\n )}\n >\n <span className=\"sr-only\">{displayText}</span>\n\n <span aria-hidden=\"true\" className=\"inline-flex tracking-tight\">\n {displayText.split(\"\").map((char, index) => {\n const isRevealedOrDone =\n (isExiting\n ? !revealedIndices.has(index)\n : revealedIndices.has(index)) ||\n !isScrambling ||\n (!isHovering && !isExiting);\n\n return (\n <span\n key={index}\n className={isRevealedOrDone ? className : encryptedClassName}\n >\n {char}\n </span>\n );\n })}\n </span>\n </motion.span>\n );\n}\n"]}