@blueshift-gg/ui-components 0.1.4 → 0.1.6
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/Alert.d.mts +3 -2
- package/dist/Alert.d.ts +3 -2
- package/dist/Alert.js +5 -3
- package/dist/Alert.js.map +1 -1
- package/dist/Alert.mjs +5 -3
- package/dist/Alert.mjs.map +1 -1
- package/dist/Badge.js +3 -3
- package/dist/Badge.js.map +1 -1
- package/dist/Badge.mjs +3 -3
- package/dist/Badge.mjs.map +1 -1
- package/dist/GridLines.js +4 -4
- package/dist/GridLines.js.map +1 -1
- package/dist/GridLines.mjs +4 -4
- package/dist/GridLines.mjs.map +1 -1
- package/package.json +1 -1
package/dist/Alert.d.mts
CHANGED
|
@@ -5,7 +5,8 @@ import './utils/colours.mjs';
|
|
|
5
5
|
|
|
6
6
|
type AlertProps = {
|
|
7
7
|
title: string;
|
|
8
|
-
description
|
|
8
|
+
description?: string;
|
|
9
|
+
children?: React.ReactNode;
|
|
9
10
|
variant?: "warning";
|
|
10
11
|
icon?: IconProps;
|
|
11
12
|
isExpandable?: boolean;
|
|
@@ -14,6 +15,6 @@ type AlertProps = {
|
|
|
14
15
|
onClear?: () => void;
|
|
15
16
|
animation?: MotionProps;
|
|
16
17
|
};
|
|
17
|
-
declare const Alert: ({ onClear, isClearable, isExpandable, title, description, variant, icon, className, animation, }: AlertProps) => react_jsx_runtime.JSX.Element;
|
|
18
|
+
declare const Alert: ({ onClear, isClearable, isExpandable, title, description, variant, icon, className, animation, children, }: AlertProps) => react_jsx_runtime.JSX.Element;
|
|
18
19
|
|
|
19
20
|
export { Alert, type AlertProps };
|
package/dist/Alert.d.ts
CHANGED
|
@@ -5,7 +5,8 @@ import './utils/colours.js';
|
|
|
5
5
|
|
|
6
6
|
type AlertProps = {
|
|
7
7
|
title: string;
|
|
8
|
-
description
|
|
8
|
+
description?: string;
|
|
9
|
+
children?: React.ReactNode;
|
|
9
10
|
variant?: "warning";
|
|
10
11
|
icon?: IconProps;
|
|
11
12
|
isExpandable?: boolean;
|
|
@@ -14,6 +15,6 @@ type AlertProps = {
|
|
|
14
15
|
onClear?: () => void;
|
|
15
16
|
animation?: MotionProps;
|
|
16
17
|
};
|
|
17
|
-
declare const Alert: ({ onClear, isClearable, isExpandable, title, description, variant, icon, className, animation, }: AlertProps) => react_jsx_runtime.JSX.Element;
|
|
18
|
+
declare const Alert: ({ onClear, isClearable, isExpandable, title, description, variant, icon, className, animation, children, }: AlertProps) => react_jsx_runtime.JSX.Element;
|
|
18
19
|
|
|
19
20
|
export { Alert, type AlertProps };
|
package/dist/Alert.js
CHANGED
|
@@ -21,7 +21,8 @@ const Alert = ({
|
|
|
21
21
|
variant = "warning",
|
|
22
22
|
icon,
|
|
23
23
|
className,
|
|
24
|
-
animation
|
|
24
|
+
animation,
|
|
25
|
+
children
|
|
25
26
|
}) => {
|
|
26
27
|
const [isExpanded, setIsExpanded] = react.useState(false);
|
|
27
28
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
@@ -77,7 +78,7 @@ const Alert = ({
|
|
|
77
78
|
},
|
|
78
79
|
className: classNames__default.default(
|
|
79
80
|
"flex flex-col gap-y-4",
|
|
80
|
-
isExpandable && "overflow-y-
|
|
81
|
+
isExpandable && "overflow-y-hidden",
|
|
81
82
|
isExpandable && !isExpanded && "[mask-image:linear-gradient(180deg,#D9D9D9_45.42%,rgba(115,115,115,0)_100%)]"
|
|
82
83
|
),
|
|
83
84
|
children: [
|
|
@@ -85,7 +86,8 @@ const Alert = ({
|
|
|
85
86
|
icon && /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: icon?.name, size: icon?.size || 18 }),
|
|
86
87
|
/* @__PURE__ */ jsxRuntime.jsx("h1", { className: "font-mono font-medium text-current leading-none", children: title })
|
|
87
88
|
] }),
|
|
88
|
-
|
|
89
|
+
children && children,
|
|
90
|
+
description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-shade-primary leading-[160%] font-medium", children: description })
|
|
89
91
|
]
|
|
90
92
|
}
|
|
91
93
|
)
|
package/dist/Alert.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Alert.tsx"],"names":["useState","jsxs","motion","classNames","jsx","Icon","CrosshairCorners","glide"],"mappings":";;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"sources":["../src/Alert.tsx"],"names":["useState","jsxs","motion","classNames","jsx","Icon","CrosshairCorners","glide"],"mappings":";;;;;;;;;;;;;;AAsBO,MAAM,QAAQ,CAAC;AAAA,EACpB,OAAA;AAAA,EACA,WAAA;AAAA,EACA,YAAA;AAAA,EACA,KAAA;AAAA,EACA,WAAA;AAAA,EACA,OAAA,GAAU,SAAA;AAAA,EACV,IAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAAA,KAAkB;AAChB,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAIA,eAAS,KAAK,CAAA;AAElD,EAAA,uBACEC,eAAA;AAAA,IAACC,cAAA,CAAO,GAAA;AAAA,IAAP;AAAA,MACC,SAAS,MAAM;AACb,QAAA,IAAI,YAAA,EAAc;AAChB,UAAA,aAAA,CAAc,CAAC,UAAU,CAAA;AAAA,QAC3B;AAAA,MACF,CAAA;AAAA,MACA,SAAA,EAAWC,2BAAA;AAAA,QACT,sFAAA;AAAA,QACA,YAAY,SAAA,IAAa,mCAAA;AAAA,QACzB,YAAA,IAAgB,mBAAA;AAAA,QAChB;AAAA,OACF;AAAA,MACC,GAAG,SAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,WAAA,oBACCC,cAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,OAAA,EAAS,OAAA;AAAA,YACT,SAAA,EAAU,gMAAA;AAAA,YAEV,QAAA,kBAAAA,cAAA,CAACC,SAAA,EAAA,EAAK,IAAA,EAAK,OAAA,EAAQ,MAAM,EAAA,EAAI;AAAA;AAAA,SAC/B;AAAA,QAED,YAAA,oBACCD,cAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAWD,2BAAA;AAAA,cACT;AAAA,aACF;AAAA,YAEA,QAAA,kBAAAC,cAAA;AAAA,cAACE,0BAAA;AAAA,cAAA;AAAA,gBACC,cAAA,EAAgB,CAAA;AAAA,gBAChB,IAAA,EAAM,CAAA;AAAA,gBACN,OAAA,EAAS,CAAC,cAAc;AAAA;AAAA;AAC1B;AAAA,SACF;AAAA,wBAEFL,eAAA;AAAA,UAACC,cAAA,CAAO,GAAA;AAAA,UAAP;AAAA,YACC,OAAA,EAAS,KAAA;AAAA,YACT,OAAA,EAAS;AAAA,cACP,MAAA,EAAQ,aAAa,MAAA,GAAS;AAAA,aAChC;AAAA,YACA,UAAA,EAAY;AAAA,cACV,QAAA,EAAU,IAAA;AAAA,cACV,IAAA,EAAMK;AAAA,aACR;AAAA,YACA,SAAA,EAAWJ,2BAAA;AAAA,cACT,uBAAA;AAAA,cACA,YAAA,IAAgB,mBAAA;AAAA,cAChB,YAAA,IACE,CAAC,UAAA,IACD;AAAA,aACJ;AAAA,YAEA,QAAA,EAAA;AAAA,8BAAAF,eAAA,CAAC,KAAA,EAAA,EAAI,WAAU,2BAAA,EACZ,QAAA,EAAA;AAAA,gBAAA,IAAA,oBAAQG,cAAA,CAACC,aAAK,IAAA,EAAM,IAAA,EAAM,MAAM,IAAA,EAAM,IAAA,EAAM,QAAQ,EAAA,EAAI,CAAA;AAAA,gCACzDD,cAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAU,iDAAA,EACX,QAAA,EAAA,KAAA,EACH;AAAA,eAAA,EACF,CAAA;AAAA,cACC,QAAA,IAAY,QAAA;AAAA,cACZ,WAAA,oBACCA,cAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,iDACV,QAAA,EAAA,WAAA,EACH;AAAA;AAAA;AAAA;AAEJ;AAAA;AAAA,GACF;AAEJ","file":"Alert.js","sourcesContent":["\"use client\";\n\nimport { motion, MotionProps } from \"motion/react\";\nimport classNames from \"classnames\";\nimport { Icon, IconProps } from \"./Icon\";\nimport { CrosshairCorners } from \"./CrossHair\";\nimport { useState } from \"react\";\nimport { glide } from \"./utils/easings\";\n\nexport type AlertProps = {\n title: string;\n description?: string;\n children?: React.ReactNode;\n variant?: \"warning\";\n icon?: IconProps;\n isExpandable?: boolean;\n className?: string;\n isClearable?: boolean;\n onClear?: () => void;\n animation?: MotionProps;\n};\n\nexport const Alert = ({\n onClear,\n isClearable,\n isExpandable,\n title,\n description,\n variant = \"warning\",\n icon,\n className,\n animation,\n children,\n}: AlertProps) => {\n const [isExpanded, setIsExpanded] = useState(false);\n\n return (\n <motion.div\n onClick={() => {\n if (isExpandable) {\n setIsExpanded(!isExpanded);\n }\n }}\n className={classNames(\n \"group p-6 relative bg-current/4 border border-current/15 shadow-[inset_0px_0px_32px]\",\n variant === \"warning\" && \"text-brand-rust shadow-current/15\",\n isExpandable && \"cursor-row-resize\",\n className\n )}\n {...animation}\n >\n {isClearable && (\n <button\n onClick={onClear}\n className=\"z-10 flex items-center justify-center absolute top-2.5 right-2.5 h-[28px] w-[28px] bg-current/5 text-current hover:bg-current/10 active:scale-[0.97] transition-colors duration-100 ease-glide\"\n >\n <Icon name=\"Close\" size={12} />\n </button>\n )}\n {isExpandable && (\n <div\n className={classNames(\n \"text-shade-tertiary group-hover:text-shade-primary absolute inset-2.5 transition-all duration-100 ease-glide group-hover:inset-1\"\n )}\n >\n <CrosshairCorners\n animationDelay={0}\n size={8}\n corners={[\"bottom-right\"]}\n />\n </div>\n )}\n <motion.div\n initial={false}\n animate={{\n height: isExpanded ? \"100%\" : \"120px\",\n }}\n transition={{\n duration: 0.15,\n ease: glide,\n }}\n className={classNames(\n \"flex flex-col gap-y-4\",\n isExpandable && \"overflow-y-hidden\",\n isExpandable &&\n !isExpanded &&\n \"[mask-image:linear-gradient(180deg,#D9D9D9_45.42%,rgba(115,115,115,0)_100%)]\"\n )}\n >\n <div className=\"flex items-center gap-x-2\">\n {icon && <Icon name={icon?.name} size={icon?.size || 18} />}\n <h1 className=\"font-mono font-medium text-current leading-none\">\n {title}\n </h1>\n </div>\n {children && children}\n {description && (\n <p className=\"text-shade-primary leading-[160%] font-medium\">\n {description}\n </p>\n )}\n </motion.div>\n </motion.div>\n );\n};\n"]}
|
package/dist/Alert.mjs
CHANGED
|
@@ -15,7 +15,8 @@ const Alert = ({
|
|
|
15
15
|
variant = "warning",
|
|
16
16
|
icon,
|
|
17
17
|
className,
|
|
18
|
-
animation
|
|
18
|
+
animation,
|
|
19
|
+
children
|
|
19
20
|
}) => {
|
|
20
21
|
const [isExpanded, setIsExpanded] = useState(false);
|
|
21
22
|
return /* @__PURE__ */ jsxs(
|
|
@@ -71,7 +72,7 @@ const Alert = ({
|
|
|
71
72
|
},
|
|
72
73
|
className: classNames(
|
|
73
74
|
"flex flex-col gap-y-4",
|
|
74
|
-
isExpandable && "overflow-y-
|
|
75
|
+
isExpandable && "overflow-y-hidden",
|
|
75
76
|
isExpandable && !isExpanded && "[mask-image:linear-gradient(180deg,#D9D9D9_45.42%,rgba(115,115,115,0)_100%)]"
|
|
76
77
|
),
|
|
77
78
|
children: [
|
|
@@ -79,7 +80,8 @@ const Alert = ({
|
|
|
79
80
|
icon && /* @__PURE__ */ jsx(Icon, { name: icon?.name, size: icon?.size || 18 }),
|
|
80
81
|
/* @__PURE__ */ jsx("h1", { className: "font-mono font-medium text-current leading-none", children: title })
|
|
81
82
|
] }),
|
|
82
|
-
|
|
83
|
+
children && children,
|
|
84
|
+
description && /* @__PURE__ */ jsx("p", { className: "text-shade-primary leading-[160%] font-medium", children: description })
|
|
83
85
|
]
|
|
84
86
|
}
|
|
85
87
|
)
|
package/dist/Alert.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Alert.tsx"],"names":[],"mappings":";;;;;;;;
|
|
1
|
+
{"version":3,"sources":["../src/Alert.tsx"],"names":[],"mappings":";;;;;;;;AAsBO,MAAM,QAAQ,CAAC;AAAA,EACpB,OAAA;AAAA,EACA,WAAA;AAAA,EACA,YAAA;AAAA,EACA,KAAA;AAAA,EACA,WAAA;AAAA,EACA,OAAA,GAAU,SAAA;AAAA,EACV,IAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAAA,KAAkB;AAChB,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAI,SAAS,KAAK,CAAA;AAElD,EAAA,uBACE,IAAA;AAAA,IAAC,MAAA,CAAO,GAAA;AAAA,IAAP;AAAA,MACC,SAAS,MAAM;AACb,QAAA,IAAI,YAAA,EAAc;AAChB,UAAA,aAAA,CAAc,CAAC,UAAU,CAAA;AAAA,QAC3B;AAAA,MACF,CAAA;AAAA,MACA,SAAA,EAAW,UAAA;AAAA,QACT,sFAAA;AAAA,QACA,YAAY,SAAA,IAAa,mCAAA;AAAA,QACzB,YAAA,IAAgB,mBAAA;AAAA,QAChB;AAAA,OACF;AAAA,MACC,GAAG,SAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,WAAA,oBACC,GAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,OAAA,EAAS,OAAA;AAAA,YACT,SAAA,EAAU,gMAAA;AAAA,YAEV,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,IAAA,EAAK,OAAA,EAAQ,MAAM,EAAA,EAAI;AAAA;AAAA,SAC/B;AAAA,QAED,YAAA,oBACC,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,UAAA;AAAA,cACT;AAAA,aACF;AAAA,YAEA,QAAA,kBAAA,GAAA;AAAA,cAAC,gBAAA;AAAA,cAAA;AAAA,gBACC,cAAA,EAAgB,CAAA;AAAA,gBAChB,IAAA,EAAM,CAAA;AAAA,gBACN,OAAA,EAAS,CAAC,cAAc;AAAA;AAAA;AAC1B;AAAA,SACF;AAAA,wBAEF,IAAA;AAAA,UAAC,MAAA,CAAO,GAAA;AAAA,UAAP;AAAA,YACC,OAAA,EAAS,KAAA;AAAA,YACT,OAAA,EAAS;AAAA,cACP,MAAA,EAAQ,aAAa,MAAA,GAAS;AAAA,aAChC;AAAA,YACA,UAAA,EAAY;AAAA,cACV,QAAA,EAAU,IAAA;AAAA,cACV,IAAA,EAAM;AAAA,aACR;AAAA,YACA,SAAA,EAAW,UAAA;AAAA,cACT,uBAAA;AAAA,cACA,YAAA,IAAgB,mBAAA;AAAA,cAChB,YAAA,IACE,CAAC,UAAA,IACD;AAAA,aACJ;AAAA,YAEA,QAAA,EAAA;AAAA,8BAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,2BAAA,EACZ,QAAA,EAAA;AAAA,gBAAA,IAAA,oBAAQ,GAAA,CAAC,QAAK,IAAA,EAAM,IAAA,EAAM,MAAM,IAAA,EAAM,IAAA,EAAM,QAAQ,EAAA,EAAI,CAAA;AAAA,gCACzD,GAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAU,iDAAA,EACX,QAAA,EAAA,KAAA,EACH;AAAA,eAAA,EACF,CAAA;AAAA,cACC,QAAA,IAAY,QAAA;AAAA,cACZ,WAAA,oBACC,GAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,iDACV,QAAA,EAAA,WAAA,EACH;AAAA;AAAA;AAAA;AAEJ;AAAA;AAAA,GACF;AAEJ","file":"Alert.mjs","sourcesContent":["\"use client\";\n\nimport { motion, MotionProps } from \"motion/react\";\nimport classNames from \"classnames\";\nimport { Icon, IconProps } from \"./Icon\";\nimport { CrosshairCorners } from \"./CrossHair\";\nimport { useState } from \"react\";\nimport { glide } from \"./utils/easings\";\n\nexport type AlertProps = {\n title: string;\n description?: string;\n children?: React.ReactNode;\n variant?: \"warning\";\n icon?: IconProps;\n isExpandable?: boolean;\n className?: string;\n isClearable?: boolean;\n onClear?: () => void;\n animation?: MotionProps;\n};\n\nexport const Alert = ({\n onClear,\n isClearable,\n isExpandable,\n title,\n description,\n variant = \"warning\",\n icon,\n className,\n animation,\n children,\n}: AlertProps) => {\n const [isExpanded, setIsExpanded] = useState(false);\n\n return (\n <motion.div\n onClick={() => {\n if (isExpandable) {\n setIsExpanded(!isExpanded);\n }\n }}\n className={classNames(\n \"group p-6 relative bg-current/4 border border-current/15 shadow-[inset_0px_0px_32px]\",\n variant === \"warning\" && \"text-brand-rust shadow-current/15\",\n isExpandable && \"cursor-row-resize\",\n className\n )}\n {...animation}\n >\n {isClearable && (\n <button\n onClick={onClear}\n className=\"z-10 flex items-center justify-center absolute top-2.5 right-2.5 h-[28px] w-[28px] bg-current/5 text-current hover:bg-current/10 active:scale-[0.97] transition-colors duration-100 ease-glide\"\n >\n <Icon name=\"Close\" size={12} />\n </button>\n )}\n {isExpandable && (\n <div\n className={classNames(\n \"text-shade-tertiary group-hover:text-shade-primary absolute inset-2.5 transition-all duration-100 ease-glide group-hover:inset-1\"\n )}\n >\n <CrosshairCorners\n animationDelay={0}\n size={8}\n corners={[\"bottom-right\"]}\n />\n </div>\n )}\n <motion.div\n initial={false}\n animate={{\n height: isExpanded ? \"100%\" : \"120px\",\n }}\n transition={{\n duration: 0.15,\n ease: glide,\n }}\n className={classNames(\n \"flex flex-col gap-y-4\",\n isExpandable && \"overflow-y-hidden\",\n isExpandable &&\n !isExpanded &&\n \"[mask-image:linear-gradient(180deg,#D9D9D9_45.42%,rgba(115,115,115,0)_100%)]\"\n )}\n >\n <div className=\"flex items-center gap-x-2\">\n {icon && <Icon name={icon?.name} size={icon?.size || 18} />}\n <h1 className=\"font-mono font-medium text-current leading-none\">\n {title}\n </h1>\n </div>\n {children && children}\n {description && (\n <p className=\"text-shade-primary leading-[160%] font-medium\">\n {description}\n </p>\n )}\n </motion.div>\n </motion.div>\n );\n};\n"]}
|
package/dist/Badge.js
CHANGED
|
@@ -43,9 +43,9 @@ const Badge = ({
|
|
|
43
43
|
variant: crosshair?.variant,
|
|
44
44
|
className: classNames__default.default("text-current", crosshair?.className),
|
|
45
45
|
corners: crosshair?.corners,
|
|
46
|
-
animationDelay: 0,
|
|
47
|
-
animationDuration: 1.5,
|
|
48
|
-
size: 4
|
|
46
|
+
animationDelay: crosshair?.animationDelay || 0,
|
|
47
|
+
animationDuration: crosshair?.animationDuration || 1.5,
|
|
48
|
+
size: crosshair?.size || 4
|
|
49
49
|
},
|
|
50
50
|
icon?.name
|
|
51
51
|
) }),
|
package/dist/Badge.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Badge.tsx"],"names":["jsxs","motion","BRAND_COLOURS","classNames","jsx","CrosshairCorners","Icon"],"mappings":";;;;;;;;;;;;;AAmBO,MAAM,QAAQ,CAAC;AAAA,EACpB,SAAA;AAAA,EACA,OAAA;AAAA,EACA,IAAA;AAAA,EACA,SAAA;AAAA,EACA,YAAA,GAAe,MAAA;AAAA,EACf,KAAA;AAAA,EACA,IAAA,GAAO,IAAA;AAAA,EACP;AACF,CAAA,KAAkB;AAChB,EAAA,uBACEA,eAAA;AAAA,IAACC,YAAA,CAAO,GAAA;AAAA,IAAP;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,MACC,GAAG,SAAA;AAAA,MAEJ,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,
|
|
1
|
+
{"version":3,"sources":["../src/Badge.tsx"],"names":["jsxs","motion","BRAND_COLOURS","classNames","jsx","CrosshairCorners","Icon"],"mappings":";;;;;;;;;;;;;AAmBO,MAAM,QAAQ,CAAC;AAAA,EACpB,SAAA;AAAA,EACA,OAAA;AAAA,EACA,IAAA;AAAA,EACA,SAAA;AAAA,EACA,YAAA,GAAe,MAAA;AAAA,EACf,KAAA;AAAA,EACA,IAAA,GAAO,IAAA;AAAA,EACP;AACF,CAAA,KAAkB;AAChB,EAAA,uBACEA,eAAA;AAAA,IAACC,YAAA,CAAO,GAAA;AAAA,IAAP;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,MACC,GAAG,SAAA;AAAA,MAEJ,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,WAAW,cAAA,IAAkB,CAAA;AAAA,YAC7C,iBAAA,EAAmB,WAAW,iBAAA,IAAqB,GAAA;AAAA,YACnD,IAAA,EAAM,WAAW,IAAA,IAAQ;AAAA,WAAA;AAAA,UANpB,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":["\"use client\";\n\nimport { BRAND_COLOURS, BrandColour } from \"./utils/colours\";\nimport { Icon, IconProps } from \"./Icon\";\nimport classNames from \"classnames\";\nimport { CrosshairCorners, CrosshairCornersProps } from \"./CrossHair\";\nimport { motion, MotionProps } from \"motion/react\";\n\nexport type BadgeProps = {\n className?: string;\n label?: string;\n variant?: BrandColour;\n icon?: IconProps;\n iconPosition?: \"left\" | \"right\";\n crosshair?: CrosshairCornersProps;\n size?: \"sm\" | \"md\";\n animation?: MotionProps;\n};\n\nexport const Badge = ({\n className,\n variant,\n icon,\n crosshair,\n iconPosition = \"left\",\n label,\n size = \"sm\",\n animation,\n}: BadgeProps) => {\n return (\n <motion.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 {...animation}\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={crosshair?.animationDelay || 0}\n animationDuration={crosshair?.animationDuration || 1.5}\n size={crosshair?.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 </motion.div>\n );\n};\n"]}
|
package/dist/Badge.mjs
CHANGED
|
@@ -37,9 +37,9 @@ const Badge = ({
|
|
|
37
37
|
variant: crosshair?.variant,
|
|
38
38
|
className: classNames("text-current", crosshair?.className),
|
|
39
39
|
corners: crosshair?.corners,
|
|
40
|
-
animationDelay: 0,
|
|
41
|
-
animationDuration: 1.5,
|
|
42
|
-
size: 4
|
|
40
|
+
animationDelay: crosshair?.animationDelay || 0,
|
|
41
|
+
animationDuration: crosshair?.animationDuration || 1.5,
|
|
42
|
+
size: crosshair?.size || 4
|
|
43
43
|
},
|
|
44
44
|
icon?.name
|
|
45
45
|
) }),
|
package/dist/Badge.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Badge.tsx"],"names":[],"mappings":";;;;;;;AAmBO,MAAM,QAAQ,CAAC;AAAA,EACpB,SAAA;AAAA,EACA,OAAA;AAAA,EACA,IAAA;AAAA,EACA,SAAA;AAAA,EACA,YAAA,GAAe,MAAA;AAAA,EACf,KAAA;AAAA,EACA,IAAA,GAAO,IAAA;AAAA,EACP;AACF,CAAA,KAAkB;AAChB,EAAA,uBACE,IAAA;AAAA,IAAC,MAAA,CAAO,GAAA;AAAA,IAAP;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,MACC,GAAG,SAAA;AAAA,MAEJ,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,
|
|
1
|
+
{"version":3,"sources":["../src/Badge.tsx"],"names":[],"mappings":";;;;;;;AAmBO,MAAM,QAAQ,CAAC;AAAA,EACpB,SAAA;AAAA,EACA,OAAA;AAAA,EACA,IAAA;AAAA,EACA,SAAA;AAAA,EACA,YAAA,GAAe,MAAA;AAAA,EACf,KAAA;AAAA,EACA,IAAA,GAAO,IAAA;AAAA,EACP;AACF,CAAA,KAAkB;AAChB,EAAA,uBACE,IAAA;AAAA,IAAC,MAAA,CAAO,GAAA;AAAA,IAAP;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,MACC,GAAG,SAAA;AAAA,MAEJ,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,WAAW,cAAA,IAAkB,CAAA;AAAA,YAC7C,iBAAA,EAAmB,WAAW,iBAAA,IAAqB,GAAA;AAAA,YACnD,IAAA,EAAM,WAAW,IAAA,IAAQ;AAAA,WAAA;AAAA,UANpB,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":["\"use client\";\n\nimport { BRAND_COLOURS, BrandColour } from \"./utils/colours\";\nimport { Icon, IconProps } from \"./Icon\";\nimport classNames from \"classnames\";\nimport { CrosshairCorners, CrosshairCornersProps } from \"./CrossHair\";\nimport { motion, MotionProps } from \"motion/react\";\n\nexport type BadgeProps = {\n className?: string;\n label?: string;\n variant?: BrandColour;\n icon?: IconProps;\n iconPosition?: \"left\" | \"right\";\n crosshair?: CrosshairCornersProps;\n size?: \"sm\" | \"md\";\n animation?: MotionProps;\n};\n\nexport const Badge = ({\n className,\n variant,\n icon,\n crosshair,\n iconPosition = \"left\",\n label,\n size = \"sm\",\n animation,\n}: BadgeProps) => {\n return (\n <motion.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 {...animation}\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={crosshair?.animationDelay || 0}\n animationDuration={crosshair?.animationDuration || 1.5}\n size={crosshair?.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 </motion.div>\n );\n};\n"]}
|
package/dist/GridLines.js
CHANGED
|
@@ -33,7 +33,7 @@ const GridLines = ({
|
|
|
33
33
|
!lines.includes("left") && "hidden",
|
|
34
34
|
"absolute w-px bg-border-light left-0 top-1/2 -translate-y-1/2"
|
|
35
35
|
),
|
|
36
|
-
style: {
|
|
36
|
+
style: { minHeight: "100dvh", height: "100%" }
|
|
37
37
|
}
|
|
38
38
|
),
|
|
39
39
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -48,7 +48,7 @@ const GridLines = ({
|
|
|
48
48
|
!lines.includes("right") && "hidden",
|
|
49
49
|
"absolute w-px bg-border-light right-0 top-1/2 -translate-y-1/2"
|
|
50
50
|
),
|
|
51
|
-
style: {
|
|
51
|
+
style: { minHeight: "100dvh", height: "100%" }
|
|
52
52
|
}
|
|
53
53
|
),
|
|
54
54
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -63,7 +63,7 @@ const GridLines = ({
|
|
|
63
63
|
!lines.includes("top") && "hidden",
|
|
64
64
|
"absolute h-px bg-border-light top-0 left-1/2 -translate-x-1/2"
|
|
65
65
|
),
|
|
66
|
-
style: {
|
|
66
|
+
style: { minWidth: "100dvw", width: "100%" }
|
|
67
67
|
}
|
|
68
68
|
),
|
|
69
69
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -78,7 +78,7 @@ const GridLines = ({
|
|
|
78
78
|
!lines.includes("bottom") && "hidden",
|
|
79
79
|
"absolute h-px bg-border-light bottom-0 left-1/2 -translate-x-1/2"
|
|
80
80
|
),
|
|
81
|
-
style: {
|
|
81
|
+
style: { minWidth: "100dvw", width: "100%" }
|
|
82
82
|
}
|
|
83
83
|
)
|
|
84
84
|
]
|
package/dist/GridLines.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/GridLines.tsx"],"names":["jsxs","classNames","jsx","motion","glide"],"mappings":";;;;;;;;;;;AAaO,MAAM,YAAY,CAAC;AAAA,EACxB,GAAA,GAAM,CAAA;AAAA,EACN,YAAA,GAAe,KAAA;AAAA,EACf,KAAA,GAAQ,CAAC,KAAA,EAAO,QAAA,EAAU,QAAQ,OAAO,CAAA;AAAA,EACzC;AACF,CAAA,KAAsB;AACpB,EAAA,uBACEA,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAWC,2BAAA,CAAW,UAAA,EAAY,SAAS,CAAA;AAAA,MAC3C,OAAO,EAAE,KAAA,EAAO,CAAA,EAAG,CAAC,GAAG,CAAA,EAAA,CAAA,EAAK;AAAA,MAE5B,QAAA,EAAA;AAAA,wBAAAC,cAAA;AAAA,UAACC,YAAA,CAAO,GAAA;AAAA,UAAP;AAAA,YACC,OAAA,EAAS;AAAA,cACP,QAAA,EAAU,eAAe,mBAAA,GAAsB;AAAA,aACjD;AAAA,YACA,OAAA,EAAS,EAAE,QAAA,EAAU,gBAAA,EAAiB;AAAA,YACtC,UAAA,EAAY,EAAE,QAAA,EAAU,IAAA,EAAM,MAAMC,aAAA,EAAM;AAAA,YAC1C,SAAA,EAAWH,2BAAA;AAAA,cACT,CAAC,KAAA,CAAM,QAAA,CAAS,MAAM,CAAA,IAAK,QAAA;AAAA,cAC3B;AAAA,aACF;AAAA,YACA,KAAA,EAAO,EAAE,
|
|
1
|
+
{"version":3,"sources":["../src/GridLines.tsx"],"names":["jsxs","classNames","jsx","motion","glide"],"mappings":"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","file":"GridLines.js","sourcesContent":["\"use client\";\n\nimport { motion } from \"motion/react\";\nimport { glide } from \"./utils/easings\";\nimport classNames from \"classnames\";\n\nexport type GridLinesProps = {\n className?: string;\n animateLines?: boolean;\n gap?: number;\n lines?: (\"top\" | \"bottom\" | \"left\" | \"right\")[];\n};\n\nexport const GridLines = ({\n gap = 8,\n animateLines = false,\n lines = [\"top\", \"bottom\", \"left\", \"right\"],\n className,\n}: GridLinesProps) => {\n return (\n <div\n className={classNames(\"absolute\", className)}\n style={{ inset: `${-gap}px` }}\n >\n <motion.div\n initial={{\n clipPath: animateLines ? \"inset(0 0 100% 0)\" : \"inset(0 0 0 0)\",\n }}\n animate={{ clipPath: \"inset(0 0 0 0)\" }}\n transition={{ duration: 0.25, ease: glide }}\n className={classNames(\n !lines.includes(\"left\") && \"hidden\",\n \"absolute w-px bg-border-light left-0 top-1/2 -translate-y-1/2\"\n )}\n style={{ minHeight: \"100dvh\", height: \"100%\" }}\n />\n <motion.div\n initial={{\n clipPath: animateLines ? \"inset(100% 0 0 0)\" : \"inset(0 0 0 0)\",\n }}\n animate={{ clipPath: \"inset(0 0 0 0)\" }}\n transition={{ duration: 0.25, ease: glide, delay: 0.05 }}\n className={classNames(\n !lines.includes(\"right\") && \"hidden\",\n \"absolute w-px bg-border-light right-0 top-1/2 -translate-y-1/2\"\n )}\n style={{ minHeight: \"100dvh\", height: \"100%\" }}\n />\n <motion.div\n initial={{\n clipPath: animateLines ? \"inset(0 100% 0 0)\" : \"inset(0 0 0 0)\",\n }}\n animate={{ clipPath: \"inset(0 0 0 0)\" }}\n transition={{ duration: 0.25, ease: glide, delay: 0.1 }}\n className={classNames(\n !lines.includes(\"top\") && \"hidden\",\n \"absolute h-px bg-border-light top-0 left-1/2 -translate-x-1/2\"\n )}\n style={{ minWidth: \"100dvw\", width: \"100%\" }}\n />\n <motion.div\n initial={{\n clipPath: animateLines ? \"inset(0 0 0 100%)\" : \"inset(0 0 0 0)\",\n }}\n animate={{ clipPath: \"inset(0 0 0 0)\" }}\n transition={{ duration: 0.25, ease: glide, delay: 0.15 }}\n className={classNames(\n !lines.includes(\"bottom\") && \"hidden\",\n \"absolute h-px bg-border-light bottom-0 left-1/2 -translate-x-1/2\"\n )}\n style={{ minWidth: \"100dvw\", width: \"100%\" }}\n />\n </div>\n );\n};\n"]}
|
package/dist/GridLines.mjs
CHANGED
|
@@ -27,7 +27,7 @@ const GridLines = ({
|
|
|
27
27
|
!lines.includes("left") && "hidden",
|
|
28
28
|
"absolute w-px bg-border-light left-0 top-1/2 -translate-y-1/2"
|
|
29
29
|
),
|
|
30
|
-
style: {
|
|
30
|
+
style: { minHeight: "100dvh", height: "100%" }
|
|
31
31
|
}
|
|
32
32
|
),
|
|
33
33
|
/* @__PURE__ */ jsx(
|
|
@@ -42,7 +42,7 @@ const GridLines = ({
|
|
|
42
42
|
!lines.includes("right") && "hidden",
|
|
43
43
|
"absolute w-px bg-border-light right-0 top-1/2 -translate-y-1/2"
|
|
44
44
|
),
|
|
45
|
-
style: {
|
|
45
|
+
style: { minHeight: "100dvh", height: "100%" }
|
|
46
46
|
}
|
|
47
47
|
),
|
|
48
48
|
/* @__PURE__ */ jsx(
|
|
@@ -57,7 +57,7 @@ const GridLines = ({
|
|
|
57
57
|
!lines.includes("top") && "hidden",
|
|
58
58
|
"absolute h-px bg-border-light top-0 left-1/2 -translate-x-1/2"
|
|
59
59
|
),
|
|
60
|
-
style: {
|
|
60
|
+
style: { minWidth: "100dvw", width: "100%" }
|
|
61
61
|
}
|
|
62
62
|
),
|
|
63
63
|
/* @__PURE__ */ jsx(
|
|
@@ -72,7 +72,7 @@ const GridLines = ({
|
|
|
72
72
|
!lines.includes("bottom") && "hidden",
|
|
73
73
|
"absolute h-px bg-border-light bottom-0 left-1/2 -translate-x-1/2"
|
|
74
74
|
),
|
|
75
|
-
style: {
|
|
75
|
+
style: { minWidth: "100dvw", width: "100%" }
|
|
76
76
|
}
|
|
77
77
|
)
|
|
78
78
|
]
|
package/dist/GridLines.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/GridLines.tsx"],"names":[],"mappings":";;;;;AAaO,MAAM,YAAY,CAAC;AAAA,EACxB,GAAA,GAAM,CAAA;AAAA,EACN,YAAA,GAAe,KAAA;AAAA,EACf,KAAA,GAAQ,CAAC,KAAA,EAAO,QAAA,EAAU,QAAQ,OAAO,CAAA;AAAA,EACzC;AACF,CAAA,KAAsB;AACpB,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,UAAA,CAAW,UAAA,EAAY,SAAS,CAAA;AAAA,MAC3C,OAAO,EAAE,KAAA,EAAO,CAAA,EAAG,CAAC,GAAG,CAAA,EAAA,CAAA,EAAK;AAAA,MAE5B,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,MAAA,CAAO,GAAA;AAAA,UAAP;AAAA,YACC,OAAA,EAAS;AAAA,cACP,QAAA,EAAU,eAAe,mBAAA,GAAsB;AAAA,aACjD;AAAA,YACA,OAAA,EAAS,EAAE,QAAA,EAAU,gBAAA,EAAiB;AAAA,YACtC,UAAA,EAAY,EAAE,QAAA,EAAU,IAAA,EAAM,MAAM,KAAA,EAAM;AAAA,YAC1C,SAAA,EAAW,UAAA;AAAA,cACT,CAAC,KAAA,CAAM,QAAA,CAAS,MAAM,CAAA,IAAK,QAAA;AAAA,cAC3B;AAAA,aACF;AAAA,YACA,KAAA,EAAO,EAAE,
|
|
1
|
+
{"version":3,"sources":["../src/GridLines.tsx"],"names":[],"mappings":"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","file":"GridLines.mjs","sourcesContent":["\"use client\";\n\nimport { motion } from \"motion/react\";\nimport { glide } from \"./utils/easings\";\nimport classNames from \"classnames\";\n\nexport type GridLinesProps = {\n className?: string;\n animateLines?: boolean;\n gap?: number;\n lines?: (\"top\" | \"bottom\" | \"left\" | \"right\")[];\n};\n\nexport const GridLines = ({\n gap = 8,\n animateLines = false,\n lines = [\"top\", \"bottom\", \"left\", \"right\"],\n className,\n}: GridLinesProps) => {\n return (\n <div\n className={classNames(\"absolute\", className)}\n style={{ inset: `${-gap}px` }}\n >\n <motion.div\n initial={{\n clipPath: animateLines ? \"inset(0 0 100% 0)\" : \"inset(0 0 0 0)\",\n }}\n animate={{ clipPath: \"inset(0 0 0 0)\" }}\n transition={{ duration: 0.25, ease: glide }}\n className={classNames(\n !lines.includes(\"left\") && \"hidden\",\n \"absolute w-px bg-border-light left-0 top-1/2 -translate-y-1/2\"\n )}\n style={{ minHeight: \"100dvh\", height: \"100%\" }}\n />\n <motion.div\n initial={{\n clipPath: animateLines ? \"inset(100% 0 0 0)\" : \"inset(0 0 0 0)\",\n }}\n animate={{ clipPath: \"inset(0 0 0 0)\" }}\n transition={{ duration: 0.25, ease: glide, delay: 0.05 }}\n className={classNames(\n !lines.includes(\"right\") && \"hidden\",\n \"absolute w-px bg-border-light right-0 top-1/2 -translate-y-1/2\"\n )}\n style={{ minHeight: \"100dvh\", height: \"100%\" }}\n />\n <motion.div\n initial={{\n clipPath: animateLines ? \"inset(0 100% 0 0)\" : \"inset(0 0 0 0)\",\n }}\n animate={{ clipPath: \"inset(0 0 0 0)\" }}\n transition={{ duration: 0.25, ease: glide, delay: 0.1 }}\n className={classNames(\n !lines.includes(\"top\") && \"hidden\",\n \"absolute h-px bg-border-light top-0 left-1/2 -translate-x-1/2\"\n )}\n style={{ minWidth: \"100dvw\", width: \"100%\" }}\n />\n <motion.div\n initial={{\n clipPath: animateLines ? \"inset(0 0 0 100%)\" : \"inset(0 0 0 0)\",\n }}\n animate={{ clipPath: \"inset(0 0 0 0)\" }}\n transition={{ duration: 0.25, ease: glide, delay: 0.15 }}\n className={classNames(\n !lines.includes(\"bottom\") && \"hidden\",\n \"absolute h-px bg-border-light bottom-0 left-1/2 -translate-x-1/2\"\n )}\n style={{ minWidth: \"100dvw\", width: \"100%\" }}\n />\n </div>\n );\n};\n"]}
|