@blueshift-gg/ui-components 0.1.22 → 0.1.23
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.
- package/dist/Button.d.mts +1 -1
- package/dist/Button.d.ts +1 -1
- package/dist/Button.js +2 -1
- package/dist/Button.js.map +1 -1
- package/dist/Button.mjs +2 -1
- package/dist/Button.mjs.map +1 -1
- package/package.json +1 -1
package/dist/Button.d.mts
CHANGED
|
@@ -22,7 +22,7 @@ type ButtonProps = {
|
|
|
22
22
|
onMouseEnter?: () => void;
|
|
23
23
|
onMouseLeave?: () => void;
|
|
24
24
|
size?: "xs" | "sm" | "md" | "lg";
|
|
25
|
-
variant?: "primary" | "secondary";
|
|
25
|
+
variant?: "primary" | "secondary" | "outline";
|
|
26
26
|
crosshairProps?: CrosshairCornersProps;
|
|
27
27
|
useHoverEffect?: boolean;
|
|
28
28
|
animation?: MotionProps;
|
package/dist/Button.d.ts
CHANGED
|
@@ -22,7 +22,7 @@ type ButtonProps = {
|
|
|
22
22
|
onMouseEnter?: () => void;
|
|
23
23
|
onMouseLeave?: () => void;
|
|
24
24
|
size?: "xs" | "sm" | "md" | "lg";
|
|
25
|
-
variant?: "primary" | "secondary";
|
|
25
|
+
variant?: "primary" | "secondary" | "outline";
|
|
26
26
|
crosshairProps?: CrosshairCornersProps;
|
|
27
27
|
useHoverEffect?: boolean;
|
|
28
28
|
animation?: MotionProps;
|
package/dist/Button.js
CHANGED
|
@@ -56,6 +56,7 @@ const Button = ({
|
|
|
56
56
|
// Themes
|
|
57
57
|
variant === "primary" && "bg-primary-button text-background gradient-border before:bg-primary-button-border",
|
|
58
58
|
variant === "secondary" && "bg-card-foreground text-shade-secondary gradient-border before:bg-secondary-button-border",
|
|
59
|
+
variant === "outline" && "bg-background text-shade-secondary gradient-border before:bg-border hover:bg-border-light",
|
|
59
60
|
// Sizes
|
|
60
61
|
size === "lg" && "py-4 pl-6 pr-6 text-base",
|
|
61
62
|
size === "md" && "py-3 pl-4 pr-4 text-sm",
|
|
@@ -75,7 +76,7 @@ const Button = ({
|
|
|
75
76
|
),
|
|
76
77
|
...animation,
|
|
77
78
|
children: [
|
|
78
|
-
crosshairProps && /* @__PURE__ */ jsxRuntime.jsx(
|
|
79
|
+
crosshairProps && variant !== "outline" && /* @__PURE__ */ jsxRuntime.jsx(
|
|
79
80
|
"div",
|
|
80
81
|
{
|
|
81
82
|
className: classNames__default.default(
|
package/dist/Button.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Button.tsx"],"names":["useState","jsxs","motion","classNames","jsx","CrosshairCorners","Icon","DecryptedText"],"mappings":";;;;;;;;;;;;;;;AAoCO,MAAM,SAAS,CAAC;AAAA,EACrB,KAAA;AAAA,EACA,OAAA,GAAU,SAAA;AAAA,EACV,IAAA,GAAO,IAAA;AAAA,EACP,SAAA,GAAY,EAAA;AAAA,EACZ,OAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,IAAA;AAAA,EACA,YAAA,GAAe,MAAA;AAAA,EACf,OAAA,GAAU,KAAA;AAAA,EACV,cAAA,GAAiB;AAAA,IACf,OAAA,EAAS;AAAA,GACX;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,cAAA,GAAiB,IAAA;AAAA,EACjB,YAAA;AAAA,EACA,YAAA;AAAA,EACA,QAAA;AAAA,EACA,mBAAA,GAAsB;AACxB,CAAA,KAAmB;AACjB,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAIA,eAAS,KAAK,CAAA;AAClD,EAAA,uBACEC,eAAA;AAAA,IAACC,cAAA,CAAO,MAAA;AAAA,IAAP;AAAA,MACC,QAAA;AAAA,MACA,OAAA;AAAA,MACA,cAAc,MAAM;AAClB,QAAA,aAAA,CAAc,IAAI,CAAA;AAClB,QAAA,YAAA,IAAe;AAAA,MACjB,CAAA;AAAA,MACA,cAAc,MAAM;AAClB,QAAA,aAAA,CAAc,KAAK,CAAA;AACnB,QAAA,YAAA,IAAe;AAAA,MACjB,CAAA;AAAA,MACA,SAAA,EAAWC,2BAAA;AAAA;AAAA,QAET,oHAAA;AAAA;AAAA,QAEA,6EAAA;AAAA;AAAA,QAEA,YAAY,SAAA,IACV,mFAAA;AAAA,QACF,YAAY,WAAA,IACV,2FAAA;AAAA;AAAA,QAEF,SAAS,IAAA,IAAQ,0BAAA;AAAA,QACjB,SAAS,IAAA,IAAQ,wBAAA;AAAA,QACjB,SAAS,IAAA,IAAQ,uCAAA;AAAA,QACjB,SAAS,IAAA,IAAQ,yBAAA;AAAA,QACjB,IAAA,KAAS,QACP,SAAA,IACA,8CAAA;AAAA,QACF,IAAA,KAAS,QACP,SAAA,IACA,8CAAA;AAAA,QACF,IAAA,KAAS,QACP,SAAA,IACA,8CAAA;AAAA;AAAA,QAEF,IAAA,KAAS,IAAA,IAAQ,IAAA,IAAQ,YAAA,KAAiB,OAAA,IAAW,gBAAA;AAAA,QACrD,IAAA,KAAS,IAAA,IAAQ,IAAA,IAAQ,YAAA,KAAiB,MAAA,IAAU,gBAAA;AAAA,QACpD,IAAA,KAAS,IAAA,IAAQ,IAAA,IAAQ,YAAA,KAAiB,OAAA,IAAW,gBAAA;AAAA,QACrD,IAAA,KAAS,IAAA,IAAQ,IAAA,IAAQ,YAAA,KAAiB,MAAA,IAAU,gBAAA;AAAA,QACpD,IAAA,KAAS,IAAA,IAAQ,IAAA,IAAQ,YAAA,KAAiB,OAAA,IAAW,gBAAA;AAAA,QACrD,IAAA,KAAS,IAAA,IAAQ,IAAA,IAAQ,YAAA,KAAiB,MAAA,IAAU,gBAAA;AAAA,QACpD;AAAA,OACF;AAAA,MACC,GAAG,SAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,cAAA,
|
|
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\" | \"outline\";\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 variant === \"outline\" &&\n \"bg-background text-shade-secondary gradient-border before:bg-border hover:bg-border-light\",\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 && variant !== \"outline\" && (\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
|
@@ -49,6 +49,7 @@ const Button = ({
|
|
|
49
49
|
// Themes
|
|
50
50
|
variant === "primary" && "bg-primary-button text-background gradient-border before:bg-primary-button-border",
|
|
51
51
|
variant === "secondary" && "bg-card-foreground text-shade-secondary gradient-border before:bg-secondary-button-border",
|
|
52
|
+
variant === "outline" && "bg-background text-shade-secondary gradient-border before:bg-border hover:bg-border-light",
|
|
52
53
|
// Sizes
|
|
53
54
|
size === "lg" && "py-4 pl-6 pr-6 text-base",
|
|
54
55
|
size === "md" && "py-3 pl-4 pr-4 text-sm",
|
|
@@ -68,7 +69,7 @@ const Button = ({
|
|
|
68
69
|
),
|
|
69
70
|
...animation,
|
|
70
71
|
children: [
|
|
71
|
-
crosshairProps && /* @__PURE__ */ jsx(
|
|
72
|
+
crosshairProps && variant !== "outline" && /* @__PURE__ */ jsx(
|
|
72
73
|
"div",
|
|
73
74
|
{
|
|
74
75
|
className: classNames(
|
package/dist/Button.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Button.tsx"],"names":[],"mappings":";;;;;;;;AAoCO,MAAM,SAAS,CAAC;AAAA,EACrB,KAAA;AAAA,EACA,OAAA,GAAU,SAAA;AAAA,EACV,IAAA,GAAO,IAAA;AAAA,EACP,SAAA,GAAY,EAAA;AAAA,EACZ,OAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,IAAA;AAAA,EACA,YAAA,GAAe,MAAA;AAAA,EACf,OAAA,GAAU,KAAA;AAAA,EACV,cAAA,GAAiB;AAAA,IACf,OAAA,EAAS;AAAA,GACX;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,cAAA,GAAiB,IAAA;AAAA,EACjB,YAAA;AAAA,EACA,YAAA;AAAA,EACA,QAAA;AAAA,EACA,mBAAA,GAAsB;AACxB,CAAA,KAAmB;AACjB,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAI,SAAS,KAAK,CAAA;AAClD,EAAA,uBACE,IAAA;AAAA,IAAC,MAAA,CAAO,MAAA;AAAA,IAAP;AAAA,MACC,QAAA;AAAA,MACA,OAAA;AAAA,MACA,cAAc,MAAM;AAClB,QAAA,aAAA,CAAc,IAAI,CAAA;AAClB,QAAA,YAAA,IAAe;AAAA,MACjB,CAAA;AAAA,MACA,cAAc,MAAM;AAClB,QAAA,aAAA,CAAc,KAAK,CAAA;AACnB,QAAA,YAAA,IAAe;AAAA,MACjB,CAAA;AAAA,MACA,SAAA,EAAW,UAAA;AAAA;AAAA,QAET,oHAAA;AAAA;AAAA,QAEA,6EAAA;AAAA;AAAA,QAEA,YAAY,SAAA,IACV,mFAAA;AAAA,QACF,YAAY,WAAA,IACV,2FAAA;AAAA;AAAA,QAEF,SAAS,IAAA,IAAQ,0BAAA;AAAA,QACjB,SAAS,IAAA,IAAQ,wBAAA;AAAA,QACjB,SAAS,IAAA,IAAQ,uCAAA;AAAA,QACjB,SAAS,IAAA,IAAQ,yBAAA;AAAA,QACjB,IAAA,KAAS,QACP,SAAA,IACA,8CAAA;AAAA,QACF,IAAA,KAAS,QACP,SAAA,IACA,8CAAA;AAAA,QACF,IAAA,KAAS,QACP,SAAA,IACA,8CAAA;AAAA;AAAA,QAEF,IAAA,KAAS,IAAA,IAAQ,IAAA,IAAQ,YAAA,KAAiB,OAAA,IAAW,gBAAA;AAAA,QACrD,IAAA,KAAS,IAAA,IAAQ,IAAA,IAAQ,YAAA,KAAiB,MAAA,IAAU,gBAAA;AAAA,QACpD,IAAA,KAAS,IAAA,IAAQ,IAAA,IAAQ,YAAA,KAAiB,OAAA,IAAW,gBAAA;AAAA,QACrD,IAAA,KAAS,IAAA,IAAQ,IAAA,IAAQ,YAAA,KAAiB,MAAA,IAAU,gBAAA;AAAA,QACpD,IAAA,KAAS,IAAA,IAAQ,IAAA,IAAQ,YAAA,KAAiB,OAAA,IAAW,gBAAA;AAAA,QACrD,IAAA,KAAS,IAAA,IAAQ,IAAA,IAAQ,YAAA,KAAiB,MAAA,IAAU,gBAAA;AAAA,QACpD;AAAA,OACF;AAAA,MACC,GAAG,SAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,cAAA,
|
|
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\" | \"outline\";\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 variant === \"outline\" &&\n \"bg-background text-shade-secondary gradient-border before:bg-border hover:bg-border-light\",\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 && variant !== \"outline\" && (\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"]}
|