@blueshift-gg/ui-components 0.1.0 → 0.1.2
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/Avatar.js +1 -3
- package/dist/Avatar.js.map +1 -1
- package/dist/Avatar.mjs +1 -3
- package/dist/Avatar.mjs.map +1 -1
- package/dist/Badge.js +1 -3
- package/dist/Badge.js.map +1 -1
- package/dist/Badge.mjs +1 -3
- package/dist/Badge.mjs.map +1 -1
- package/dist/Button.js.map +1 -1
- package/dist/Button.mjs.map +1 -1
- package/dist/Checkbox.js.map +1 -1
- package/dist/Checkbox.mjs.map +1 -1
- package/dist/Codeblock.js.map +1 -1
- package/dist/Codeblock.mjs.map +1 -1
- package/dist/CrossHair.js.map +1 -1
- package/dist/CrossHair.mjs.map +1 -1
- package/dist/DecryptText.js.map +1 -1
- package/dist/DecryptText.mjs.map +1 -1
- package/dist/Divider.js.map +1 -1
- package/dist/Divider.mjs.map +1 -1
- package/dist/Dropdown.js.map +1 -1
- package/dist/Dropdown.mjs.map +1 -1
- package/dist/GridLines.js +1 -1
- package/dist/GridLines.js.map +1 -1
- package/dist/GridLines.mjs +1 -1
- package/dist/GridLines.mjs.map +1 -1
- package/dist/HeadingReveal.d.mts +15 -0
- package/dist/HeadingReveal.d.ts +15 -0
- package/dist/HeadingReveal.js +68 -0
- package/dist/HeadingReveal.js.map +1 -0
- package/dist/HeadingReveal.mjs +62 -0
- package/dist/HeadingReveal.mjs.map +1 -0
- package/dist/Input.js.map +1 -1
- package/dist/Input.mjs.map +1 -1
- package/dist/Logo.js.map +1 -1
- package/dist/Logo.mjs.map +1 -1
- package/dist/Pagination.js.map +1 -1
- package/dist/Pagination.mjs.map +1 -1
- package/dist/Slider.js.map +1 -1
- package/dist/Slider.mjs.map +1 -1
- package/dist/Tabs.js.map +1 -1
- package/dist/Tabs.mjs.map +1 -1
- package/dist/Toast.js +2 -3
- package/dist/Toast.js.map +1 -1
- package/dist/Toast.mjs +2 -3
- package/dist/Toast.mjs.map +1 -1
- package/dist/Tooltip.js.map +1 -1
- package/dist/Tooltip.mjs.map +1 -1
- package/package.json +14 -13
package/dist/Avatar.js
CHANGED
|
@@ -4,7 +4,6 @@ var jsxRuntime = require('react/jsx-runtime');
|
|
|
4
4
|
var classNames = require('classnames');
|
|
5
5
|
var Icon = require('./Icon');
|
|
6
6
|
var CrossHair = require('./CrossHair');
|
|
7
|
-
var react = require('motion/react');
|
|
8
7
|
var colours = require('./utils/colours');
|
|
9
8
|
|
|
10
9
|
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
@@ -21,7 +20,7 @@ const Avatar = ({
|
|
|
21
20
|
variant
|
|
22
21
|
}) => {
|
|
23
22
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
24
|
-
|
|
23
|
+
"div",
|
|
25
24
|
{
|
|
26
25
|
className: classNames__default.default(
|
|
27
26
|
"flex items-center justify-center relative border-current/15 bg-current/5",
|
|
@@ -33,7 +32,6 @@ const Avatar = ({
|
|
|
33
32
|
borderWidth: thickness,
|
|
34
33
|
color: colours.BRAND_COLOURS[variant ?? "Secondary"]
|
|
35
34
|
},
|
|
36
|
-
...animation,
|
|
37
35
|
children: [
|
|
38
36
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
39
37
|
"div",
|
package/dist/Avatar.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Avatar.tsx"],"names":["jsxs","
|
|
1
|
+
{"version":3,"sources":["../src/Avatar.tsx"],"names":["jsxs","classNames","BRAND_COLOURS","jsx","CrosshairCorners","Icon"],"mappings":";;;;;;;;;;;;AAiBO,MAAM,SAAS,CAAC;AAAA,EACrB,SAAA;AAAA,EACA,IAAA;AAAA,EACA,aAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA,GAAY,GAAA;AAAA,EACZ,SAAA;AAAA,EACA;AACF,CAAA,KAAmB;AACjB,EAAA,uBACEA,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;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,MAEA,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":["import 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 animation,\n variant,\n}: AvatarProps) => {\n return (\n <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 >\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 </div>\n );\n};\n"]}
|
package/dist/Avatar.mjs
CHANGED
|
@@ -2,7 +2,6 @@ import { jsxs, jsx } from 'react/jsx-runtime';
|
|
|
2
2
|
import classNames from 'classnames';
|
|
3
3
|
import { Icon } from './Icon';
|
|
4
4
|
import { CrosshairCorners } from './CrossHair';
|
|
5
|
-
import { motion } from 'motion/react';
|
|
6
5
|
import { BRAND_COLOURS } from './utils/colours';
|
|
7
6
|
|
|
8
7
|
const Avatar = ({
|
|
@@ -15,7 +14,7 @@ const Avatar = ({
|
|
|
15
14
|
variant
|
|
16
15
|
}) => {
|
|
17
16
|
return /* @__PURE__ */ jsxs(
|
|
18
|
-
|
|
17
|
+
"div",
|
|
19
18
|
{
|
|
20
19
|
className: classNames(
|
|
21
20
|
"flex items-center justify-center relative border-current/15 bg-current/5",
|
|
@@ -27,7 +26,6 @@ const Avatar = ({
|
|
|
27
26
|
borderWidth: thickness,
|
|
28
27
|
color: BRAND_COLOURS[variant ?? "Secondary"]
|
|
29
28
|
},
|
|
30
|
-
...animation,
|
|
31
29
|
children: [
|
|
32
30
|
/* @__PURE__ */ jsx(
|
|
33
31
|
"div",
|
package/dist/Avatar.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Avatar.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../src/Avatar.tsx"],"names":[],"mappings":";;;;;;AAiBO,MAAM,SAAS,CAAC;AAAA,EACrB,SAAA;AAAA,EACA,IAAA;AAAA,EACA,aAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA,GAAY,GAAA;AAAA,EACZ,SAAA;AAAA,EACA;AACF,CAAA,KAAmB;AACjB,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;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,MAEA,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":["import 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 animation,\n variant,\n}: AvatarProps) => {\n return (\n <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 >\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 </div>\n );\n};\n"]}
|
package/dist/Badge.js
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
var react = require('motion/react');
|
|
5
4
|
var colours = require('./utils/colours');
|
|
6
5
|
var Icon = require('./Icon');
|
|
7
6
|
var classNames = require('classnames');
|
|
@@ -22,7 +21,7 @@ const Badge = ({
|
|
|
22
21
|
size = "sm"
|
|
23
22
|
}) => {
|
|
24
23
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
25
|
-
|
|
24
|
+
"div",
|
|
26
25
|
{
|
|
27
26
|
style: { color: colours.BRAND_COLOURS[variant ?? "Secondary"] },
|
|
28
27
|
className: classNames__default.default(
|
|
@@ -35,7 +34,6 @@ const Badge = ({
|
|
|
35
34
|
crosshair?.variant === "bordered" && label && iconPosition === "left" && "pl-2.5 pr-3",
|
|
36
35
|
crosshair?.variant === "bordered" && label && iconPosition === "right" && "pl-3 pr-2.5"
|
|
37
36
|
),
|
|
38
|
-
...animation,
|
|
39
37
|
children: [
|
|
40
38
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames__default.default("text-current absolute inset-0"), children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
41
39
|
CrossHair.CrosshairCorners,
|
package/dist/Badge.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Badge.tsx"],"names":["jsxs","
|
|
1
|
+
{"version":3,"sources":["../src/Badge.tsx"],"names":["jsxs","BRAND_COLOURS","classNames","jsx","CrosshairCorners","Icon"],"mappings":";;;;;;;;;;;;AAkBO,MAAM,QAAQ,CAAC;AAAA,EACpB,SAAA;AAAA,EACA,OAAA;AAAA,EACA,IAAA;AAAA,EACA,SAAA;AAAA,EACA,YAAA,GAAe,MAAA;AAAA,EACf,SAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA,GAAO;AACT,CAAA,KAAkB;AAChB,EAAA,uBACEA,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,OAAO,EAAE,KAAA,EAAOC,qBAAA,CAAc,OAAA,IAAW,WAAW,CAAA,EAAE;AAAA,MACtD,SAAA,EAAWC,2BAAA;AAAA,QACT,SAAA;AAAA,QACA,2MAAA;AAAA,QACA,SAAS,IAAA,IAAQ,OAAA;AAAA,QACjB,CAAC,KAAA,IAAS,MAAA;AAAA,QACV,YAAA,KAAiB,UAAU,KAAA,IAAS,aAAA;AAAA,QACpC,YAAA,KAAiB,WAAW,KAAA,IAAS,aAAA;AAAA,QACrC,SAAA,EAAW,OAAA,KAAY,UAAA,IACrB,KAAA,IACA,iBAAiB,MAAA,IACjB,aAAA;AAAA,QACF,SAAA,EAAW,OAAA,KAAY,UAAA,IACrB,KAAA,IACA,iBAAiB,OAAA,IACjB;AAAA,OACJ;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAAC,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAWD,2BAAA,CAAW,+BAA+B,CAAA,EACxD,QAAA,kBAAAC,cAAA;AAAA,UAACC,0BAAA;AAAA,UAAA;AAAA,YAEC,SAAS,SAAA,EAAW,OAAA;AAAA,YACpB,SAAA,EAAWF,2BAAA,CAAW,cAAA,EAAgB,SAAA,EAAW,SAAS,CAAA;AAAA,YAC1D,SAAS,SAAA,EAAW,OAAA;AAAA,YACpB,cAAA,EAAgB,CAAA;AAAA,YAChB,iBAAA,EAAmB,GAAA;AAAA,YACnB,IAAA,EAAM;AAAA,WAAA;AAAA,UAND,IAAA,EAAM;AAAA,SAOb,EACF,CAAA;AAAA,QACC,IAAA,IAAQ,iBAAiB,MAAA,oBACxBC,cAAA;AAAA,UAACE,SAAA;AAAA,UAAA;AAAA,YACC,MAAM,IAAA,CAAK,IAAA;AAAA,YACX,SAAA,EAAWH,2BAAA,CAAW,IAAA,CAAK,SAAA,EAAW,4BAA4B,CAAA;AAAA,YAClE,IAAA,EAAM,KAAK,IAAA,IAAQ,EAAA;AAAA,YACnB,cAAc,IAAA,CAAK;AAAA;AAAA,SACrB;AAAA,QAED,KAAA,oBAASC,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,aAAa,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,QAC5C,IAAA,IAAQ,iBAAiB,OAAA,oBACxBA,cAAA;AAAA,UAACE,SAAA;AAAA,UAAA;AAAA,YACC,MAAM,IAAA,CAAK,IAAA;AAAA,YACX,SAAA,EAAWH,2BAAA,CAAW,IAAA,CAAK,SAAA,EAAW,4BAA4B,CAAA;AAAA,YAClE,IAAA,EAAM,KAAK,IAAA,IAAQ,EAAA;AAAA,YACnB,cAAc,IAAA,CAAK;AAAA;AAAA;AACrB;AAAA;AAAA,GAEJ;AAEJ","file":"Badge.js","sourcesContent":["import { motion, MotionProps } from \"motion/react\";\nimport { BRAND_COLOURS, BrandColour } from \"./utils/colours\";\nimport { IconName } from \"./icons\";\nimport { Icon, IconProps } from \"./Icon\";\nimport classNames from \"classnames\";\nimport { CrosshairCorners, CrosshairCornersProps } from \"./CrossHair\";\n\nexport type BadgeProps = {\n className?: string;\n label?: string;\n variant?: BrandColour;\n icon?: IconProps;\n iconPosition?: \"left\" | \"right\";\n crosshair?: CrosshairCornersProps;\n animation?: MotionProps;\n size?: \"sm\" | \"md\";\n};\n\nexport const Badge = ({\n className,\n variant,\n icon,\n crosshair,\n iconPosition = \"left\",\n animation,\n label,\n size = \"sm\",\n}: BadgeProps) => {\n return (\n <div\n style={{ color: BRAND_COLOURS[variant ?? \"Secondary\"] }}\n className={classNames(\n className,\n \"shadow-[inset_0px_0px_6px] text-sm bg-card-solid/50 shadow-current/25 relative transition-all duration-100 ease-glide gradient-border before:bg-current/8 min-h-[24px] flex items-center gap-x-[5px] py-1\",\n size === \"md\" && \"!py-2\",\n !label && \"!p-2\",\n iconPosition === \"left\" && label && \"pl-1.5 pr-2\",\n iconPosition === \"right\" && label && \"pl-2 pr-1.5\",\n crosshair?.variant === \"bordered\" &&\n label &&\n iconPosition === \"left\" &&\n \"pl-2.5 pr-3\",\n crosshair?.variant === \"bordered\" &&\n label &&\n iconPosition === \"right\" &&\n \"pl-3 pr-2.5\"\n )}\n >\n <div className={classNames(\"text-current absolute inset-0\")}>\n <CrosshairCorners\n key={icon?.name}\n variant={crosshair?.variant}\n className={classNames(\"text-current\", crosshair?.className)}\n corners={crosshair?.corners}\n animationDelay={0}\n animationDuration={1.5}\n size={4}\n />\n </div>\n {icon && iconPosition === \"left\" && (\n <Icon\n name={icon.name}\n className={classNames(icon.className, \"flex-shrink-0 text-current\")}\n size={icon.size || 14}\n difficulties={icon.difficulties}\n />\n )}\n {label && <span className=\"font-mono\">{label}</span>}\n {icon && iconPosition === \"right\" && (\n <Icon\n name={icon.name}\n className={classNames(icon.className, \"flex-shrink-0 text-current\")}\n size={icon.size || 14}\n difficulties={icon.difficulties}\n />\n )}\n </div>\n );\n};\n"]}
|
package/dist/Badge.mjs
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { motion } from 'motion/react';
|
|
3
2
|
import { BRAND_COLOURS } from './utils/colours';
|
|
4
3
|
import { Icon } from './Icon';
|
|
5
4
|
import classNames from 'classnames';
|
|
@@ -16,7 +15,7 @@ const Badge = ({
|
|
|
16
15
|
size = "sm"
|
|
17
16
|
}) => {
|
|
18
17
|
return /* @__PURE__ */ jsxs(
|
|
19
|
-
|
|
18
|
+
"div",
|
|
20
19
|
{
|
|
21
20
|
style: { color: BRAND_COLOURS[variant ?? "Secondary"] },
|
|
22
21
|
className: classNames(
|
|
@@ -29,7 +28,6 @@ const Badge = ({
|
|
|
29
28
|
crosshair?.variant === "bordered" && label && iconPosition === "left" && "pl-2.5 pr-3",
|
|
30
29
|
crosshair?.variant === "bordered" && label && iconPosition === "right" && "pl-3 pr-2.5"
|
|
31
30
|
),
|
|
32
|
-
...animation,
|
|
33
31
|
children: [
|
|
34
32
|
/* @__PURE__ */ jsx("div", { className: classNames("text-current absolute inset-0"), children: /* @__PURE__ */ jsx(
|
|
35
33
|
CrosshairCorners,
|
package/dist/Badge.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Badge.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../src/Badge.tsx"],"names":[],"mappings":";;;;;;AAkBO,MAAM,QAAQ,CAAC;AAAA,EACpB,SAAA;AAAA,EACA,OAAA;AAAA,EACA,IAAA;AAAA,EACA,SAAA;AAAA,EACA,YAAA,GAAe,MAAA;AAAA,EACf,SAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA,GAAO;AACT,CAAA,KAAkB;AAChB,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,OAAO,EAAE,KAAA,EAAO,aAAA,CAAc,OAAA,IAAW,WAAW,CAAA,EAAE;AAAA,MACtD,SAAA,EAAW,UAAA;AAAA,QACT,SAAA;AAAA,QACA,2MAAA;AAAA,QACA,SAAS,IAAA,IAAQ,OAAA;AAAA,QACjB,CAAC,KAAA,IAAS,MAAA;AAAA,QACV,YAAA,KAAiB,UAAU,KAAA,IAAS,aAAA;AAAA,QACpC,YAAA,KAAiB,WAAW,KAAA,IAAS,aAAA;AAAA,QACrC,SAAA,EAAW,OAAA,KAAY,UAAA,IACrB,KAAA,IACA,iBAAiB,MAAA,IACjB,aAAA;AAAA,QACF,SAAA,EAAW,OAAA,KAAY,UAAA,IACrB,KAAA,IACA,iBAAiB,OAAA,IACjB;AAAA,OACJ;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,UAAA,CAAW,+BAA+B,CAAA,EACxD,QAAA,kBAAA,GAAA;AAAA,UAAC,gBAAA;AAAA,UAAA;AAAA,YAEC,SAAS,SAAA,EAAW,OAAA;AAAA,YACpB,SAAA,EAAW,UAAA,CAAW,cAAA,EAAgB,SAAA,EAAW,SAAS,CAAA;AAAA,YAC1D,SAAS,SAAA,EAAW,OAAA;AAAA,YACpB,cAAA,EAAgB,CAAA;AAAA,YAChB,iBAAA,EAAmB,GAAA;AAAA,YACnB,IAAA,EAAM;AAAA,WAAA;AAAA,UAND,IAAA,EAAM;AAAA,SAOb,EACF,CAAA;AAAA,QACC,IAAA,IAAQ,iBAAiB,MAAA,oBACxB,GAAA;AAAA,UAAC,IAAA;AAAA,UAAA;AAAA,YACC,MAAM,IAAA,CAAK,IAAA;AAAA,YACX,SAAA,EAAW,UAAA,CAAW,IAAA,CAAK,SAAA,EAAW,4BAA4B,CAAA;AAAA,YAClE,IAAA,EAAM,KAAK,IAAA,IAAQ,EAAA;AAAA,YACnB,cAAc,IAAA,CAAK;AAAA;AAAA,SACrB;AAAA,QAED,KAAA,oBAAS,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,aAAa,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,QAC5C,IAAA,IAAQ,iBAAiB,OAAA,oBACxB,GAAA;AAAA,UAAC,IAAA;AAAA,UAAA;AAAA,YACC,MAAM,IAAA,CAAK,IAAA;AAAA,YACX,SAAA,EAAW,UAAA,CAAW,IAAA,CAAK,SAAA,EAAW,4BAA4B,CAAA;AAAA,YAClE,IAAA,EAAM,KAAK,IAAA,IAAQ,EAAA;AAAA,YACnB,cAAc,IAAA,CAAK;AAAA;AAAA;AACrB;AAAA;AAAA,GAEJ;AAEJ","file":"Badge.mjs","sourcesContent":["import { motion, MotionProps } from \"motion/react\";\nimport { BRAND_COLOURS, BrandColour } from \"./utils/colours\";\nimport { IconName } from \"./icons\";\nimport { Icon, IconProps } from \"./Icon\";\nimport classNames from \"classnames\";\nimport { CrosshairCorners, CrosshairCornersProps } from \"./CrossHair\";\n\nexport type BadgeProps = {\n className?: string;\n label?: string;\n variant?: BrandColour;\n icon?: IconProps;\n iconPosition?: \"left\" | \"right\";\n crosshair?: CrosshairCornersProps;\n animation?: MotionProps;\n size?: \"sm\" | \"md\";\n};\n\nexport const Badge = ({\n className,\n variant,\n icon,\n crosshair,\n iconPosition = \"left\",\n animation,\n label,\n size = \"sm\",\n}: BadgeProps) => {\n return (\n <div\n style={{ color: BRAND_COLOURS[variant ?? \"Secondary\"] }}\n className={classNames(\n className,\n \"shadow-[inset_0px_0px_6px] text-sm bg-card-solid/50 shadow-current/25 relative transition-all duration-100 ease-glide gradient-border before:bg-current/8 min-h-[24px] flex items-center gap-x-[5px] py-1\",\n size === \"md\" && \"!py-2\",\n !label && \"!p-2\",\n iconPosition === \"left\" && label && \"pl-1.5 pr-2\",\n iconPosition === \"right\" && label && \"pl-2 pr-1.5\",\n crosshair?.variant === \"bordered\" &&\n label &&\n iconPosition === \"left\" &&\n \"pl-2.5 pr-3\",\n crosshair?.variant === \"bordered\" &&\n label &&\n iconPosition === \"right\" &&\n \"pl-3 pr-2.5\"\n )}\n >\n <div className={classNames(\"text-current absolute inset-0\")}>\n <CrosshairCorners\n key={icon?.name}\n variant={crosshair?.variant}\n className={classNames(\"text-current\", crosshair?.className)}\n corners={crosshair?.corners}\n animationDelay={0}\n animationDuration={1.5}\n size={4}\n />\n </div>\n {icon && iconPosition === \"left\" && (\n <Icon\n name={icon.name}\n className={classNames(icon.className, \"flex-shrink-0 text-current\")}\n size={icon.size || 14}\n difficulties={icon.difficulties}\n />\n )}\n {label && <span className=\"font-mono\">{label}</span>}\n {icon && iconPosition === \"right\" && (\n <Icon\n name={icon.name}\n className={classNames(icon.className, \"flex-shrink-0 text-current\")}\n size={icon.size || 14}\n difficulties={icon.difficulties}\n />\n )}\n </div>\n );\n};\n"]}
|
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":";;;;;;;;;;;;;;;
|
|
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"]}
|
package/dist/Button.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Button.tsx"],"names":[],"mappings":";;;;;;;;
|
|
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"]}
|
package/dist/Checkbox.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Checkbox.tsx"],"names":["jsxs","jsx","classNames","AnimatePresence","motion","crisp"],"mappings":";;;;;;;;;;;
|
|
1
|
+
{"version":3,"sources":["../src/Checkbox.tsx"],"names":["jsxs","jsx","classNames","AnimatePresence","motion","crisp"],"mappings":";;;;;;;;;;;AAcO,MAAM,WAAW,CAAC;AAAA,EACvB,OAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,YAAA;AAAA,EACA,KAAA,GAAQ;AACV,CAAA,KAAqB;AACnB,EAAA,MAAM,iBAAA,GAAoB,CAAC,KAAA,KAA+C;AACxE,IAAA,IAAI,YAAA,EAAc;AAChB,MAAA,YAAA,CAAa,KAAA,CAAM,OAAO,OAAO,CAAA;AAAA,IACnC;AAAA,EACF,CAAA;AAEA,EAAA,sCACG,KAAA,EAAA,EAAI,SAAA,EAAU,qDACb,QAAA,kBAAAA,eAAA,CAAC,KAAA,EAAA,EAAI,WAAU,oCAAA,EACb,QAAA,EAAA;AAAA,oBAAAC,cAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACC,IAAA,EAAK,UAAA;AAAA,QACL,OAAA;AAAA,QACA,QAAA;AAAA,QACA,QAAA,EAAU,iBAAA;AAAA,QACV,SAAA,EAAWC,2BAAA;AAAA,UACT,SAAA;AAAA,UACA,4SAAA;AAAA,UACA;AAAA,YACE,6GACE,KAAA,KAAU,SAAA;AAAA,YACZ,2FACE,KAAA,KAAU;AAAA;AACd;AACF;AAAA,KACF;AAAA,IACC,OAAA,oBACCD,cAAA,CAACE,qBAAA,EAAA,EAAgB,IAAA,EAAK,WAAA,EACpB,QAAA,kBAAAF,cAAA;AAAA,MAACG,YAAA,CAAO,GAAA;AAAA,MAAP;AAAA,QACC,OAAA,EAAS,EAAE,OAAA,EAAS,CAAA,EAAG,OAAO,CAAA,EAAE;AAAA,QAChC,OAAA,EAAS,EAAE,OAAA,EAAS,CAAA,EAAG,OAAO,CAAA,EAAE;AAAA,QAChC,UAAA,EAAY,EAAE,QAAA,EAAU,GAAA,EAAK,MAAMC,aAAA,EAAM;AAAA,QACzC,IAAA,EAAM,EAAE,OAAA,EAAS,CAAA,EAAG,OAAO,CAAA,EAAE;AAAA,QAC7B,SAAA,EAAWH,2BAAA;AAAA,UACT,+HAAA;AAAA,UACA;AAAA,YACE,oBAAoB,KAAA,KAAU,SAAA;AAAA,YAC9B,sBAAsB,KAAA,KAAU;AAAA;AAClC;AACF;AAAA,KACD,EACH;AAAA,GAAA,EAEJ,CAAA,EACF,CAAA;AAEJ","file":"Checkbox.js","sourcesContent":["\"use client\";\n\nimport classNames from \"classnames\";\nimport { AnimatePresence, motion } from \"motion/react\";\nimport { crisp } from \"./utils/easings\";\n\nexport type CheckboxProps = {\n checked: boolean;\n className?: string;\n disabled?: boolean;\n handleChange?: (checked: boolean) => void;\n theme?: \"primary\" | \"secondary\";\n};\n\nexport const Checkbox = ({\n checked,\n className,\n disabled,\n handleChange,\n theme = \"primary\",\n}: CheckboxProps) => {\n const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n if (handleChange) {\n handleChange(event.target.checked);\n }\n };\n\n return (\n <div className=\"flex h-[14px] w-[14px] flex-shrink-0 items-center\">\n <div className=\"group grid size-[14px] grid-cols-1\">\n <input\n type=\"checkbox\"\n checked={checked}\n disabled={disabled}\n onChange={handleInputChange}\n className={classNames(\n className,\n \"border-shade-mute col-start-1 row-start-1 appearance-none border-[1.5px] bg-transparent transition duration-100 ease-in-out checked:bg-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:border-[1.5px] disabled:bg-card-solid disabled:opacity-40 forced-colors:appearance-auto\",\n {\n \"checked:border-brand-secondary indeterminate:border-brand-secondary focus-visible:outline-brand-secondary\":\n theme === \"primary\",\n \"checked:border-secondary indeterminate:border-secondary focus-visible:outline-secondary\":\n theme === \"secondary\",\n }\n )}\n />\n {checked && (\n <AnimatePresence mode=\"popLayout\">\n <motion.div\n initial={{ opacity: 0, scale: 0 }}\n animate={{ opacity: 1, scale: 1 }}\n transition={{ duration: 0.1, ease: crisp }}\n exit={{ opacity: 0, scale: 0 }}\n className={classNames(\n \"pointer-events-none col-start-1 row-start-1 size-1 self-center justify-self-center opacity-0 group-has-[:checked]:opacity-100\",\n {\n \"bg-brand-primary\": theme === \"primary\",\n \"bg-shade-secondary\": theme === \"secondary\",\n }\n )}\n ></motion.div>\n </AnimatePresence>\n )}\n </div>\n </div>\n );\n};\n"]}
|
package/dist/Checkbox.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Checkbox.tsx"],"names":[],"mappings":";;;;;
|
|
1
|
+
{"version":3,"sources":["../src/Checkbox.tsx"],"names":[],"mappings":";;;;;AAcO,MAAM,WAAW,CAAC;AAAA,EACvB,OAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,YAAA;AAAA,EACA,KAAA,GAAQ;AACV,CAAA,KAAqB;AACnB,EAAA,MAAM,iBAAA,GAAoB,CAAC,KAAA,KAA+C;AACxE,IAAA,IAAI,YAAA,EAAc;AAChB,MAAA,YAAA,CAAa,KAAA,CAAM,OAAO,OAAO,CAAA;AAAA,IACnC;AAAA,EACF,CAAA;AAEA,EAAA,2BACG,KAAA,EAAA,EAAI,SAAA,EAAU,qDACb,QAAA,kBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,oCAAA,EACb,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACC,IAAA,EAAK,UAAA;AAAA,QACL,OAAA;AAAA,QACA,QAAA;AAAA,QACA,QAAA,EAAU,iBAAA;AAAA,QACV,SAAA,EAAW,UAAA;AAAA,UACT,SAAA;AAAA,UACA,4SAAA;AAAA,UACA;AAAA,YACE,6GACE,KAAA,KAAU,SAAA;AAAA,YACZ,2FACE,KAAA,KAAU;AAAA;AACd;AACF;AAAA,KACF;AAAA,IACC,OAAA,oBACC,GAAA,CAAC,eAAA,EAAA,EAAgB,IAAA,EAAK,WAAA,EACpB,QAAA,kBAAA,GAAA;AAAA,MAAC,MAAA,CAAO,GAAA;AAAA,MAAP;AAAA,QACC,OAAA,EAAS,EAAE,OAAA,EAAS,CAAA,EAAG,OAAO,CAAA,EAAE;AAAA,QAChC,OAAA,EAAS,EAAE,OAAA,EAAS,CAAA,EAAG,OAAO,CAAA,EAAE;AAAA,QAChC,UAAA,EAAY,EAAE,QAAA,EAAU,GAAA,EAAK,MAAM,KAAA,EAAM;AAAA,QACzC,IAAA,EAAM,EAAE,OAAA,EAAS,CAAA,EAAG,OAAO,CAAA,EAAE;AAAA,QAC7B,SAAA,EAAW,UAAA;AAAA,UACT,+HAAA;AAAA,UACA;AAAA,YACE,oBAAoB,KAAA,KAAU,SAAA;AAAA,YAC9B,sBAAsB,KAAA,KAAU;AAAA;AAClC;AACF;AAAA,KACD,EACH;AAAA,GAAA,EAEJ,CAAA,EACF,CAAA;AAEJ","file":"Checkbox.mjs","sourcesContent":["\"use client\";\n\nimport classNames from \"classnames\";\nimport { AnimatePresence, motion } from \"motion/react\";\nimport { crisp } from \"./utils/easings\";\n\nexport type CheckboxProps = {\n checked: boolean;\n className?: string;\n disabled?: boolean;\n handleChange?: (checked: boolean) => void;\n theme?: \"primary\" | \"secondary\";\n};\n\nexport const Checkbox = ({\n checked,\n className,\n disabled,\n handleChange,\n theme = \"primary\",\n}: CheckboxProps) => {\n const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n if (handleChange) {\n handleChange(event.target.checked);\n }\n };\n\n return (\n <div className=\"flex h-[14px] w-[14px] flex-shrink-0 items-center\">\n <div className=\"group grid size-[14px] grid-cols-1\">\n <input\n type=\"checkbox\"\n checked={checked}\n disabled={disabled}\n onChange={handleInputChange}\n className={classNames(\n className,\n \"border-shade-mute col-start-1 row-start-1 appearance-none border-[1.5px] bg-transparent transition duration-100 ease-in-out checked:bg-transparent focus-visible:outline-2 focus-visible:outline-offset-2 disabled:border-[1.5px] disabled:bg-card-solid disabled:opacity-40 forced-colors:appearance-auto\",\n {\n \"checked:border-brand-secondary indeterminate:border-brand-secondary focus-visible:outline-brand-secondary\":\n theme === \"primary\",\n \"checked:border-secondary indeterminate:border-secondary focus-visible:outline-secondary\":\n theme === \"secondary\",\n }\n )}\n />\n {checked && (\n <AnimatePresence mode=\"popLayout\">\n <motion.div\n initial={{ opacity: 0, scale: 0 }}\n animate={{ opacity: 1, scale: 1 }}\n transition={{ duration: 0.1, ease: crisp }}\n exit={{ opacity: 0, scale: 0 }}\n className={classNames(\n \"pointer-events-none col-start-1 row-start-1 size-1 self-center justify-self-center opacity-0 group-has-[:checked]:opacity-100\",\n {\n \"bg-brand-primary\": theme === \"primary\",\n \"bg-shade-secondary\": theme === \"secondary\",\n }\n )}\n ></motion.div>\n </AnimatePresence>\n )}\n </div>\n </div>\n );\n};\n"]}
|
package/dist/Codeblock.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Codeblock.tsx"],"names":["useCopyToClipboard","useState","jsxs","motion","classNames","jsx","CrosshairCorners","Icon","AnimatePresence","silk"],"mappings":";;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"sources":["../src/Codeblock.tsx"],"names":["useCopyToClipboard","useState","jsxs","motion","classNames","jsx","CrosshairCorners","Icon","AnimatePresence","silk"],"mappings":"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","file":"Codeblock.js","sourcesContent":["\"use client\";\n\nimport { AnimatePresence, motion, MotionProps } from \"motion/react\";\nimport classNames from \"classnames\";\nimport { CrosshairCorners } from \"./CrossHair\";\nimport { Icon } from \"./Icon\";\nimport { useCopyToClipboard } from \"usehooks-ts\";\nimport { useState } from \"react\";\nimport { silk } from \"./utils/easings\";\nimport { GridLines } from \"./GridLines\";\n\nexport type CodeblockProps = {\n code: string;\n language: \"Rust\" | \"Typescript\" | \"Assembly\";\n animation?: MotionProps;\n};\n\nexport const Codeblock = ({ code, language, animation }: CodeblockProps) => {\n const [_, copyToClipboard] = useCopyToClipboard();\n const [isCopied, setIsCopied] = useState(false);\n const handleCopy = () => {\n copyToClipboard(code);\n setIsCopied(true);\n setTimeout(() => {\n setIsCopied(false);\n }, 2000);\n };\n return (\n <motion.div\n className={classNames(\n \"relative bg-card-foreground w-full flex flex-col gap-y-6 gradient-border before:bg-card-border pt-3 pb-6\",\n language === \"Rust\" && \"text-brand-rust\",\n language === \"Typescript\" && \"text-brand-typescript\",\n language === \"Assembly\" && \"text-brand-assembly\"\n )}\n {...animation}\n >\n <motion.div className=\"px-3.5 py-2 bg-current/5 border border-current/15 flex items-center justify-between relative\">\n <CrosshairCorners\n animationDelay={0}\n animationDuration={0.5}\n variant=\"bordered\"\n size={6}\n spacingX={1}\n />\n <div className=\"flex items-center gap-x-2\">\n <Icon\n name={language}\n className=\"flex-shrink-0 text-current\"\n size={16}\n />\n <span className=\"font-mono text-sm\">{language}</span>\n </div>\n\n <div\n onClick={() => handleCopy()}\n className=\"w-[16px] h-[16px] text-shade-secondary hover:text-shade-primary relative z-10\"\n >\n <AnimatePresence mode=\"popLayout\">\n <motion.div\n initial={{ opacity: 0, filter: \"blur(4px)\", scale: 0.4 }}\n animate={{ opacity: 1, filter: \"blur(0px)\", scale: 1 }}\n exit={{ opacity: 0, filter: \"blur(4px)\", scale: 0.4 }}\n transition={{ duration: 0.2, ease: silk }}\n key={isCopied ? \"copied\" : \"copy\"}\n >\n {isCopied ? (\n <Icon name=\"Success\" size={16} />\n ) : (\n <Icon name=\"Copy\" size={16} />\n )}\n </motion.div>\n </AnimatePresence>\n </div>\n </motion.div>\n <div className=\"inset-0 absolute bg-gradient-to-b from-current/8 via-transparent to-transparent\"></div>\n <pre className=\"px-6 font-mono-code\">{code}</pre>\n </motion.div>\n );\n};\n"]}
|
package/dist/Codeblock.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Codeblock.tsx"],"names":[],"mappings":";;;;;;;;;
|
|
1
|
+
{"version":3,"sources":["../src/Codeblock.tsx"],"names":[],"mappings":"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","file":"Codeblock.mjs","sourcesContent":["\"use client\";\n\nimport { AnimatePresence, motion, MotionProps } from \"motion/react\";\nimport classNames from \"classnames\";\nimport { CrosshairCorners } from \"./CrossHair\";\nimport { Icon } from \"./Icon\";\nimport { useCopyToClipboard } from \"usehooks-ts\";\nimport { useState } from \"react\";\nimport { silk } from \"./utils/easings\";\nimport { GridLines } from \"./GridLines\";\n\nexport type CodeblockProps = {\n code: string;\n language: \"Rust\" | \"Typescript\" | \"Assembly\";\n animation?: MotionProps;\n};\n\nexport const Codeblock = ({ code, language, animation }: CodeblockProps) => {\n const [_, copyToClipboard] = useCopyToClipboard();\n const [isCopied, setIsCopied] = useState(false);\n const handleCopy = () => {\n copyToClipboard(code);\n setIsCopied(true);\n setTimeout(() => {\n setIsCopied(false);\n }, 2000);\n };\n return (\n <motion.div\n className={classNames(\n \"relative bg-card-foreground w-full flex flex-col gap-y-6 gradient-border before:bg-card-border pt-3 pb-6\",\n language === \"Rust\" && \"text-brand-rust\",\n language === \"Typescript\" && \"text-brand-typescript\",\n language === \"Assembly\" && \"text-brand-assembly\"\n )}\n {...animation}\n >\n <motion.div className=\"px-3.5 py-2 bg-current/5 border border-current/15 flex items-center justify-between relative\">\n <CrosshairCorners\n animationDelay={0}\n animationDuration={0.5}\n variant=\"bordered\"\n size={6}\n spacingX={1}\n />\n <div className=\"flex items-center gap-x-2\">\n <Icon\n name={language}\n className=\"flex-shrink-0 text-current\"\n size={16}\n />\n <span className=\"font-mono text-sm\">{language}</span>\n </div>\n\n <div\n onClick={() => handleCopy()}\n className=\"w-[16px] h-[16px] text-shade-secondary hover:text-shade-primary relative z-10\"\n >\n <AnimatePresence mode=\"popLayout\">\n <motion.div\n initial={{ opacity: 0, filter: \"blur(4px)\", scale: 0.4 }}\n animate={{ opacity: 1, filter: \"blur(0px)\", scale: 1 }}\n exit={{ opacity: 0, filter: \"blur(4px)\", scale: 0.4 }}\n transition={{ duration: 0.2, ease: silk }}\n key={isCopied ? \"copied\" : \"copy\"}\n >\n {isCopied ? (\n <Icon name=\"Success\" size={16} />\n ) : (\n <Icon name=\"Copy\" size={16} />\n )}\n </motion.div>\n </AnimatePresence>\n </div>\n </motion.div>\n <div className=\"inset-0 absolute bg-gradient-to-b from-current/8 via-transparent to-transparent\"></div>\n <pre className=\"px-6 font-mono-code\">{code}</pre>\n </motion.div>\n );\n};\n"]}
|
package/dist/CrossHair.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/CrossHair.tsx"],"names":["jsx","motion","classNames","anticipate","jsxs","Fragment"],"mappings":"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","file":"CrossHair.js","sourcesContent":["import classNames from \"classnames\";\nimport { anticipate, motion } from \"motion/react\";\n\nexport type CrosshairCornersProps = {\n size?: number;\n spacingX?: number;\n spacingY?: number;\n animationDelay?: number;\n thickness?: number;\n animationDuration?: number;\n variant?: \"corners\" | \"cross\" | \"bordered\";\n corners?: (\"top-left\" | \"top-right\" | \"bottom-left\" | \"bottom-right\")[];\n borders?: (\"left\" | \"right\")[];\n className?: string;\n moveDistance?: number;\n key?: string;\n};\n\nexport const CrosshairCorners = ({\n size = 10,\n spacingX = 0,\n animationDelay = 2.5,\n spacingY = 0,\n className = \"\",\n moveDistance = 5,\n thickness,\n animationDuration = 2.15,\n key,\n variant = \"corners\",\n corners = [\"top-left\", \"top-right\", \"bottom-left\", \"bottom-right\"],\n borders = [\"left\", \"right\"],\n}: CrosshairCornersProps) => {\n // Default thickness to 1/4th of the size if not provided\n const actualThickness = thickness ?? size / 4;\n\n return (\n <motion.div\n key={key || null}\n className={classNames(\n \"absolute w-full h-full inset-0 will-change-opacity\",\n className\n )}\n initial={{ opacity: 0, scale: 0.99 }}\n animate={{\n opacity: [0, 1, 0.2, 1, 0.4, 1, 0.6, 1, 0.8, 1],\n scale: [0.99, 1, 0.99, 1, 1, 1],\n }}\n transition={{\n duration: animationDuration,\n ease: anticipate,\n delay: animationDelay,\n }}\n style={\n {\n \"--size\": size + \"px\",\n \"--spacing-x\": spacingX + \"px\",\n \"--spacing-y\": spacingY + \"px\",\n \"--move\": moveDistance + \"px\",\n \"--thickness\": actualThickness + \"px\",\n \"--half-size\": size / 2 + \"px\",\n } as any\n }\n >\n {variant === \"cross\" ? (\n /* Cross/Plus Pattern in Corners */\n <>\n {/* Top Left Cross */}\n <div\n className={classNames(\n \"absolute\",\n \"before:content-[''] before:absolute before:h-[var(--size)] before:w-[var(--thickness)] before:bg-current before:left-1/2 before:top-1/2 before:translate-x-[-50%] before:translate-y-[-50%]\",\n \"after:content-[''] after:absolute after:h-[var(--thickness)] after:w-[var(--size)] after:bg-current after:left-1/2 after:top-1/2 after:translate-x-[-50%] after:translate-y-[-50%]\",\n \"transition-all duration-300 group-hover/testimonial:translate-x-[calc(var(--move)*-1)] group-hover/testimonial:translate-y-[calc(var(--move)*-1)]\",\n !corners.includes(\"top-left\") && \"hidden\"\n )}\n style={{\n left: `calc((var(--spacing-x) + var(--half-size)) * -1 + 1px)`,\n top: `calc((var(--spacing-y) + var(--half-size)) * -1)`,\n width: `var(--size)`,\n height: `var(--size)`,\n }}\n ></div>\n\n {/* Top Right Cross */}\n <div\n className={classNames(\n \"absolute\",\n \"before:content-[''] before:absolute before:h-[var(--size)] before:w-[var(--thickness)] before:bg-current before:left-1/2 before:top-1/2 before:translate-x-[-50%] before:translate-y-[-50%]\",\n \"after:content-[''] after:absolute after:h-[var(--thickness)] after:w-[var(--size)] after:bg-current after:left-1/2 after:top-1/2 after:translate-x-[-50%] after:translate-y-[-50%]\",\n \"transition-all duration-300 group-hover/testimonial:translate-x-[var(--move)] group-hover/testimonial:translate-y-[calc(var(--move)*-1)]\",\n !corners.includes(\"top-right\") && \"hidden\"\n )}\n style={{\n right: `calc((var(--spacing-x) + var(--half-size)) * -1)`,\n top: `calc((var(--spacing-y) + var(--half-size)) * -1)`,\n width: `var(--size)`,\n height: `var(--size)`,\n }}\n ></div>\n\n {/* Bottom Left Cross */}\n <div\n className={classNames(\n \"absolute\",\n \"before:content-[''] before:absolute before:h-[var(--size)] before:w-[var(--thickness)] before:bg-current before:left-1/2 before:top-1/2 before:translate-x-[-50%] before:translate-y-[-50%]\",\n \"after:content-[''] after:absolute after:h-[var(--thickness)] after:w-[var(--size)] after:bg-current after:left-1/2 after:top-1/2 after:translate-x-[-50%] after:translate-y-[-50%]\",\n \"transition-all duration-300 group-hover/testimonial:translate-x-[calc(var(--move)*-1)] group-hover/testimonial:translate-y-[var(--move)]\",\n !corners.includes(\"bottom-left\") && \"hidden\"\n )}\n style={{\n left: `calc((var(--spacing-x) + var(--half-size)) * -1 + 1px)`,\n bottom: `calc((var(--spacing-y) + var(--half-size)) * -1)`,\n width: `var(--size)`,\n height: `var(--size)`,\n }}\n ></div>\n\n {/* Bottom Right Cross */}\n <div\n className={classNames(\n \"absolute\",\n \"before:content-[''] before:absolute before:h-[var(--size)] before:w-[var(--thickness)] before:bg-current before:left-1/2 before:top-1/2 before:translate-x-[-50%] before:translate-y-[-50%]\",\n \"after:content-[''] after:absolute after:h-[var(--thickness)] after:w-[var(--size)] after:bg-current after:left-1/2 after:top-1/2 after:translate-x-[-50%] after:translate-y-[-50%]\",\n \"transition-all duration-300 group-hover/testimonial:translate-x-[var(--move)] group-hover/testimonial:translate-y-[var(--move)]\",\n !corners.includes(\"bottom-right\") && \"hidden\"\n )}\n style={{\n right: `calc((var(--spacing-x) + var(--half-size)) * -1)`,\n bottom: `calc((var(--spacing-y) + var(--half-size)) * -1)`,\n width: `var(--size)`,\n height: `var(--size)`,\n }}\n ></div>\n </>\n ) : variant === \"bordered\" ? (\n /* Corner Pattern with Left and Right Borders */\n <>\n {/* Top Left */}\n <div\n className={classNames(\n \"absolute left-0 top-0 before:content-[''] before:absolute before:h-[var(--size)] before:w-[var(--thickness)] before:bg-current after:content-[''] after:absolute after:h-[var(--thickness)] after:w-[var(--size)] after:bg-current transition-all duration-300 group-hover/testimonial:translate-x-[calc(var(--move)*-1)] group-hover/testimonial:translate-y-[calc(var(--move)*-1)]\",\n (!corners.includes(\"top-left\") || !borders.includes(\"left\")) &&\n \"hidden\"\n )}\n style={{\n left: `calc(var(--spacing-x) * -1)`,\n top: `calc(var(--spacing-y) * -1)`,\n }}\n ></div>\n\n {/* Top Right */}\n <div\n className={classNames(\n \"absolute right-0 top-0 before:content-[''] before:absolute before:h-[var(--size)] before:w-[var(--thickness)] before:bg-current before:right-0 after:content-[''] after:absolute after:h-[var(--thickness)] after:w-[var(--size)] after:bg-current after:right-0 transition-all duration-300 group-hover/testimonial:translate-x-[var(--move)] group-hover/testimonial:translate-y-[calc(var(--move)*-1)]\",\n (!corners.includes(\"top-right\") || !borders.includes(\"right\")) &&\n \"hidden\"\n )}\n style={{\n right: `calc(var(--spacing-x) * -1)`,\n top: `calc(var(--spacing-y) * -1)`,\n }}\n ></div>\n\n {/* Bottom Left */}\n <div\n className={classNames(\n \"absolute left-0 bottom-0 before:content-[''] before:absolute before:h-[var(--size)] before:w-[var(--thickness)] before:bg-current before:bottom-0 after:content-[''] after:absolute after:h-[var(--thickness)] after:w-[var(--size)] after:bg-current after:bottom-0 transition-all duration-300 group-hover/testimonial:translate-x-[calc(var(--move)*-1)] group-hover/testimonial:translate-y-[var(--move)]\",\n (!corners.includes(\"bottom-left\") || !borders.includes(\"left\")) &&\n \"hidden\"\n )}\n style={{\n left: `calc(var(--spacing-x) * -1)`,\n bottom: `calc(var(--spacing-y) * -1)`,\n }}\n ></div>\n\n {/* Bottom Right */}\n <div\n className={classNames(\n \"absolute right-0 bottom-0 before:content-[''] before:absolute before:h-[var(--size)] before:w-[var(--thickness)] before:bg-current before:right-0 before:bottom-0 after:content-[''] after:absolute after:h-[var(--thickness)] after:w-[var(--size)] after:bg-current after:right-0 after:bottom-0 transition-all duration-300 group-hover/testimonial:translate-x-[var(--move)] group-hover/testimonial:translate-y-[var(--move)]\",\n (!corners.includes(\"bottom-right\") ||\n !borders.includes(\"right\")) &&\n \"hidden\"\n )}\n style={{\n right: `calc(var(--spacing-x) * -1)`,\n bottom: `calc(var(--spacing-y) * -1)`,\n }}\n ></div>\n\n {/* Left Border */}\n {borders.includes(\"left\") && (\n <div\n className=\"absolute left-0 w-[var(--thickness)] bg-current transition-all duration-300 group-hover/testimonial:translate-x-[calc(var(--move)*-1)]\"\n style={{\n left: `calc(var(--spacing-x) * -1)`,\n top: `calc(var(--spacing-y) * -1)`,\n height: `calc(100% + (var(--spacing-y) * 2))`,\n }}\n ></div>\n )}\n\n {/* Right Border */}\n {borders.includes(\"right\") && (\n <div\n className=\"absolute right-0 w-[var(--thickness)] bg-current transition-all duration-300 group-hover/testimonial:translate-x-[var(--move)]\"\n style={{\n right: `calc(var(--spacing-x) * -1)`,\n top: `calc(var(--spacing-y) * -1)`,\n height: `calc(100% + (var(--spacing-y) * 2))`,\n }}\n ></div>\n )}\n </>\n ) : (\n /* Corner Pattern (existing) */\n <>\n {/* Top Left */}\n <div\n className={classNames(\n \"absolute left-0 top-0 before:content-[''] before:absolute before:h-[var(--size)] before:w-[var(--thickness)] before:bg-current after:content-[''] after:absolute after:h-[var(--thickness)] after:w-[var(--size)] after:bg-current transition-all duration-300 group-hover/testimonial:translate-x-[calc(var(--move)*-1)] group-hover/testimonial:translate-y-[calc(var(--move)*-1)]\",\n !corners.includes(\"top-left\") && \"hidden\"\n )}\n style={{\n left: `calc(var(--spacing-x) * -1)`,\n top: `calc(var(--spacing-y) * -1)`,\n }}\n ></div>\n\n {/* Top Right */}\n <div\n className={classNames(\n \"absolute right-0 top-0 before:content-[''] before:absolute before:h-[var(--size)] before:w-[var(--thickness)] before:bg-current before:right-0 after:content-[''] after:absolute after:h-[var(--thickness)] after:w-[var(--size)] after:bg-current after:right-0 transition-all duration-300 group-hover/testimonial:translate-x-[var(--move)] group-hover/testimonial:translate-y-[calc(var(--move)*-1)]\",\n !corners.includes(\"top-right\") && \"hidden\"\n )}\n style={{\n right: `calc(var(--spacing-x) * -1)`,\n top: `calc(var(--spacing-y) * -1)`,\n }}\n ></div>\n\n {/* Bottom Left */}\n <div\n className={classNames(\n \"absolute left-0 bottom-0 before:content-[''] before:absolute before:h-[var(--size)] before:w-[var(--thickness)] before:bg-current before:bottom-0 after:content-[''] after:absolute after:h-[var(--thickness)] after:w-[var(--size)] after:bg-current after:bottom-0 transition-all duration-300 group-hover/testimonial:translate-x-[calc(var(--move)*-1)] group-hover/testimonial:translate-y-[var(--move)]\",\n !corners.includes(\"bottom-left\") && \"hidden\"\n )}\n style={{\n left: `calc(var(--spacing-x) * -1)`,\n bottom: `calc(var(--spacing-y) * -1)`,\n }}\n ></div>\n\n {/* Bottom Right */}\n <div\n className={classNames(\n \"absolute right-0 bottom-0 before:content-[''] before:absolute before:h-[var(--size)] before:w-[var(--thickness)] before:bg-current before:right-0 before:bottom-0 after:content-[''] after:absolute after:h-[var(--thickness)] after:w-[var(--size)] after:bg-current after:right-0 after:bottom-0 transition-all duration-300 group-hover/testimonial:translate-x-[var(--move)] group-hover/testimonial:translate-y-[var(--move)]\",\n !corners.includes(\"bottom-right\") && \"hidden\"\n )}\n style={{\n right: `calc(var(--spacing-x) * -1)`,\n bottom: `calc(var(--spacing-y) * -1)`,\n }}\n ></div>\n </>\n )}\n </motion.div>\n );\n};\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/CrossHair.tsx"],"names":["jsx","motion","classNames","anticipate","jsxs","Fragment"],"mappings":"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","file":"CrossHair.js","sourcesContent":["\"use client\";\n\nimport classNames from \"classnames\";\nimport { anticipate, motion } from \"motion/react\";\n\nexport type CrosshairCornersProps = {\n size?: number;\n spacingX?: number;\n spacingY?: number;\n animationDelay?: number;\n thickness?: number;\n animationDuration?: number;\n variant?: \"corners\" | \"cross\" | \"bordered\";\n corners?: (\"top-left\" | \"top-right\" | \"bottom-left\" | \"bottom-right\")[];\n borders?: (\"left\" | \"right\")[];\n className?: string;\n moveDistance?: number;\n key?: string;\n};\n\nexport const CrosshairCorners = ({\n size = 10,\n spacingX = 0,\n animationDelay = 2.5,\n spacingY = 0,\n className = \"\",\n moveDistance = 5,\n thickness,\n animationDuration = 2.15,\n key,\n variant = \"corners\",\n corners = [\"top-left\", \"top-right\", \"bottom-left\", \"bottom-right\"],\n borders = [\"left\", \"right\"],\n}: CrosshairCornersProps) => {\n // Default thickness to 1/4th of the size if not provided\n const actualThickness = thickness ?? size / 4;\n\n return (\n <motion.div\n key={key || null}\n className={classNames(\n \"absolute w-full h-full inset-0 will-change-opacity\",\n className\n )}\n initial={{ opacity: 0, scale: 0.99 }}\n animate={{\n opacity: [0, 1, 0.2, 1, 0.4, 1, 0.6, 1, 0.8, 1],\n scale: [0.99, 1, 0.99, 1, 1, 1],\n }}\n transition={{\n duration: animationDuration,\n ease: anticipate,\n delay: animationDelay,\n }}\n style={\n {\n \"--size\": size + \"px\",\n \"--spacing-x\": spacingX + \"px\",\n \"--spacing-y\": spacingY + \"px\",\n \"--move\": moveDistance + \"px\",\n \"--thickness\": actualThickness + \"px\",\n \"--half-size\": size / 2 + \"px\",\n } as any\n }\n >\n {variant === \"cross\" ? (\n /* Cross/Plus Pattern in Corners */\n <>\n {/* Top Left Cross */}\n <div\n className={classNames(\n \"absolute\",\n \"before:content-[''] before:absolute before:h-[var(--size)] before:w-[var(--thickness)] before:bg-current before:left-1/2 before:top-1/2 before:translate-x-[-50%] before:translate-y-[-50%]\",\n \"after:content-[''] after:absolute after:h-[var(--thickness)] after:w-[var(--size)] after:bg-current after:left-1/2 after:top-1/2 after:translate-x-[-50%] after:translate-y-[-50%]\",\n \"transition-all duration-300 group-hover/testimonial:translate-x-[calc(var(--move)*-1)] group-hover/testimonial:translate-y-[calc(var(--move)*-1)]\",\n !corners.includes(\"top-left\") && \"hidden\"\n )}\n style={{\n left: `calc((var(--spacing-x) + var(--half-size)) * -1 + 1px)`,\n top: `calc((var(--spacing-y) + var(--half-size)) * -1)`,\n width: `var(--size)`,\n height: `var(--size)`,\n }}\n ></div>\n\n {/* Top Right Cross */}\n <div\n className={classNames(\n \"absolute\",\n \"before:content-[''] before:absolute before:h-[var(--size)] before:w-[var(--thickness)] before:bg-current before:left-1/2 before:top-1/2 before:translate-x-[-50%] before:translate-y-[-50%]\",\n \"after:content-[''] after:absolute after:h-[var(--thickness)] after:w-[var(--size)] after:bg-current after:left-1/2 after:top-1/2 after:translate-x-[-50%] after:translate-y-[-50%]\",\n \"transition-all duration-300 group-hover/testimonial:translate-x-[var(--move)] group-hover/testimonial:translate-y-[calc(var(--move)*-1)]\",\n !corners.includes(\"top-right\") && \"hidden\"\n )}\n style={{\n right: `calc((var(--spacing-x) + var(--half-size)) * -1)`,\n top: `calc((var(--spacing-y) + var(--half-size)) * -1)`,\n width: `var(--size)`,\n height: `var(--size)`,\n }}\n ></div>\n\n {/* Bottom Left Cross */}\n <div\n className={classNames(\n \"absolute\",\n \"before:content-[''] before:absolute before:h-[var(--size)] before:w-[var(--thickness)] before:bg-current before:left-1/2 before:top-1/2 before:translate-x-[-50%] before:translate-y-[-50%]\",\n \"after:content-[''] after:absolute after:h-[var(--thickness)] after:w-[var(--size)] after:bg-current after:left-1/2 after:top-1/2 after:translate-x-[-50%] after:translate-y-[-50%]\",\n \"transition-all duration-300 group-hover/testimonial:translate-x-[calc(var(--move)*-1)] group-hover/testimonial:translate-y-[var(--move)]\",\n !corners.includes(\"bottom-left\") && \"hidden\"\n )}\n style={{\n left: `calc((var(--spacing-x) + var(--half-size)) * -1 + 1px)`,\n bottom: `calc((var(--spacing-y) + var(--half-size)) * -1)`,\n width: `var(--size)`,\n height: `var(--size)`,\n }}\n ></div>\n\n {/* Bottom Right Cross */}\n <div\n className={classNames(\n \"absolute\",\n \"before:content-[''] before:absolute before:h-[var(--size)] before:w-[var(--thickness)] before:bg-current before:left-1/2 before:top-1/2 before:translate-x-[-50%] before:translate-y-[-50%]\",\n \"after:content-[''] after:absolute after:h-[var(--thickness)] after:w-[var(--size)] after:bg-current after:left-1/2 after:top-1/2 after:translate-x-[-50%] after:translate-y-[-50%]\",\n \"transition-all duration-300 group-hover/testimonial:translate-x-[var(--move)] group-hover/testimonial:translate-y-[var(--move)]\",\n !corners.includes(\"bottom-right\") && \"hidden\"\n )}\n style={{\n right: `calc((var(--spacing-x) + var(--half-size)) * -1)`,\n bottom: `calc((var(--spacing-y) + var(--half-size)) * -1)`,\n width: `var(--size)`,\n height: `var(--size)`,\n }}\n ></div>\n </>\n ) : variant === \"bordered\" ? (\n /* Corner Pattern with Left and Right Borders */\n <>\n {/* Top Left */}\n <div\n className={classNames(\n \"absolute left-0 top-0 before:content-[''] before:absolute before:h-[var(--size)] before:w-[var(--thickness)] before:bg-current after:content-[''] after:absolute after:h-[var(--thickness)] after:w-[var(--size)] after:bg-current transition-all duration-300 group-hover/testimonial:translate-x-[calc(var(--move)*-1)] group-hover/testimonial:translate-y-[calc(var(--move)*-1)]\",\n (!corners.includes(\"top-left\") || !borders.includes(\"left\")) &&\n \"hidden\"\n )}\n style={{\n left: `calc(var(--spacing-x) * -1)`,\n top: `calc(var(--spacing-y) * -1)`,\n }}\n ></div>\n\n {/* Top Right */}\n <div\n className={classNames(\n \"absolute right-0 top-0 before:content-[''] before:absolute before:h-[var(--size)] before:w-[var(--thickness)] before:bg-current before:right-0 after:content-[''] after:absolute after:h-[var(--thickness)] after:w-[var(--size)] after:bg-current after:right-0 transition-all duration-300 group-hover/testimonial:translate-x-[var(--move)] group-hover/testimonial:translate-y-[calc(var(--move)*-1)]\",\n (!corners.includes(\"top-right\") || !borders.includes(\"right\")) &&\n \"hidden\"\n )}\n style={{\n right: `calc(var(--spacing-x) * -1)`,\n top: `calc(var(--spacing-y) * -1)`,\n }}\n ></div>\n\n {/* Bottom Left */}\n <div\n className={classNames(\n \"absolute left-0 bottom-0 before:content-[''] before:absolute before:h-[var(--size)] before:w-[var(--thickness)] before:bg-current before:bottom-0 after:content-[''] after:absolute after:h-[var(--thickness)] after:w-[var(--size)] after:bg-current after:bottom-0 transition-all duration-300 group-hover/testimonial:translate-x-[calc(var(--move)*-1)] group-hover/testimonial:translate-y-[var(--move)]\",\n (!corners.includes(\"bottom-left\") || !borders.includes(\"left\")) &&\n \"hidden\"\n )}\n style={{\n left: `calc(var(--spacing-x) * -1)`,\n bottom: `calc(var(--spacing-y) * -1)`,\n }}\n ></div>\n\n {/* Bottom Right */}\n <div\n className={classNames(\n \"absolute right-0 bottom-0 before:content-[''] before:absolute before:h-[var(--size)] before:w-[var(--thickness)] before:bg-current before:right-0 before:bottom-0 after:content-[''] after:absolute after:h-[var(--thickness)] after:w-[var(--size)] after:bg-current after:right-0 after:bottom-0 transition-all duration-300 group-hover/testimonial:translate-x-[var(--move)] group-hover/testimonial:translate-y-[var(--move)]\",\n (!corners.includes(\"bottom-right\") ||\n !borders.includes(\"right\")) &&\n \"hidden\"\n )}\n style={{\n right: `calc(var(--spacing-x) * -1)`,\n bottom: `calc(var(--spacing-y) * -1)`,\n }}\n ></div>\n\n {/* Left Border */}\n {borders.includes(\"left\") && (\n <div\n className=\"absolute left-0 w-[var(--thickness)] bg-current transition-all duration-300 group-hover/testimonial:translate-x-[calc(var(--move)*-1)]\"\n style={{\n left: `calc(var(--spacing-x) * -1)`,\n top: `calc(var(--spacing-y) * -1)`,\n height: `calc(100% + (var(--spacing-y) * 2))`,\n }}\n ></div>\n )}\n\n {/* Right Border */}\n {borders.includes(\"right\") && (\n <div\n className=\"absolute right-0 w-[var(--thickness)] bg-current transition-all duration-300 group-hover/testimonial:translate-x-[var(--move)]\"\n style={{\n right: `calc(var(--spacing-x) * -1)`,\n top: `calc(var(--spacing-y) * -1)`,\n height: `calc(100% + (var(--spacing-y) * 2))`,\n }}\n ></div>\n )}\n </>\n ) : (\n /* Corner Pattern (existing) */\n <>\n {/* Top Left */}\n <div\n className={classNames(\n \"absolute left-0 top-0 before:content-[''] before:absolute before:h-[var(--size)] before:w-[var(--thickness)] before:bg-current after:content-[''] after:absolute after:h-[var(--thickness)] after:w-[var(--size)] after:bg-current transition-all duration-300 group-hover/testimonial:translate-x-[calc(var(--move)*-1)] group-hover/testimonial:translate-y-[calc(var(--move)*-1)]\",\n !corners.includes(\"top-left\") && \"hidden\"\n )}\n style={{\n left: `calc(var(--spacing-x) * -1)`,\n top: `calc(var(--spacing-y) * -1)`,\n }}\n ></div>\n\n {/* Top Right */}\n <div\n className={classNames(\n \"absolute right-0 top-0 before:content-[''] before:absolute before:h-[var(--size)] before:w-[var(--thickness)] before:bg-current before:right-0 after:content-[''] after:absolute after:h-[var(--thickness)] after:w-[var(--size)] after:bg-current after:right-0 transition-all duration-300 group-hover/testimonial:translate-x-[var(--move)] group-hover/testimonial:translate-y-[calc(var(--move)*-1)]\",\n !corners.includes(\"top-right\") && \"hidden\"\n )}\n style={{\n right: `calc(var(--spacing-x) * -1)`,\n top: `calc(var(--spacing-y) * -1)`,\n }}\n ></div>\n\n {/* Bottom Left */}\n <div\n className={classNames(\n \"absolute left-0 bottom-0 before:content-[''] before:absolute before:h-[var(--size)] before:w-[var(--thickness)] before:bg-current before:bottom-0 after:content-[''] after:absolute after:h-[var(--thickness)] after:w-[var(--size)] after:bg-current after:bottom-0 transition-all duration-300 group-hover/testimonial:translate-x-[calc(var(--move)*-1)] group-hover/testimonial:translate-y-[var(--move)]\",\n !corners.includes(\"bottom-left\") && \"hidden\"\n )}\n style={{\n left: `calc(var(--spacing-x) * -1)`,\n bottom: `calc(var(--spacing-y) * -1)`,\n }}\n ></div>\n\n {/* Bottom Right */}\n <div\n className={classNames(\n \"absolute right-0 bottom-0 before:content-[''] before:absolute before:h-[var(--size)] before:w-[var(--thickness)] before:bg-current before:right-0 before:bottom-0 after:content-[''] after:absolute after:h-[var(--thickness)] after:w-[var(--size)] after:bg-current after:right-0 after:bottom-0 transition-all duration-300 group-hover/testimonial:translate-x-[var(--move)] group-hover/testimonial:translate-y-[var(--move)]\",\n !corners.includes(\"bottom-right\") && \"hidden\"\n )}\n style={{\n right: `calc(var(--spacing-x) * -1)`,\n bottom: `calc(var(--spacing-y) * -1)`,\n }}\n ></div>\n </>\n )}\n </motion.div>\n );\n};\n"]}
|