@blueshift-gg/ui-components 0.1.5 → 0.1.7

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 CHANGED
@@ -5,7 +5,8 @@ import './utils/colours.mjs';
5
5
 
6
6
  type AlertProps = {
7
7
  title: string;
8
- description: string;
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: string;
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-auto",
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
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-shade-primary leading-[160%] font-medium", children: description })
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":";;;;;;;;;;;;;;AAqBO,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;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,iBAAA;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,8BACAA,cAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,+CAAA,EACV,QAAA,EAAA,WAAA,EACH;AAAA;AAAA;AAAA;AACF;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 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}: 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-auto\",\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 <p className=\"text-shade-primary leading-[160%] font-medium\">\n {description}\n </p>\n </motion.div>\n </motion.div>\n );\n};\n"]}
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-auto",
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
- /* @__PURE__ */ jsx("p", { className: "text-shade-primary leading-[160%] font-medium", children: description })
83
+ children && children,
84
+ description && /* @__PURE__ */ jsx("p", { className: "text-shade-primary leading-[160%] font-medium", children: description })
83
85
  ]
84
86
  }
85
87
  )
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/Alert.tsx"],"names":[],"mappings":";;;;;;;;AAqBO,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;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,iBAAA;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,8BACA,GAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,+CAAA,EACV,QAAA,EAAA,WAAA,EACH;AAAA;AAAA;AAAA;AACF;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 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}: 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-auto\",\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 <p className=\"text-shade-primary leading-[160%] font-medium\">\n {description}\n </p>\n </motion.div>\n </motion.div>\n );\n};\n"]}
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/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: { height: "100dvh" }
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: { height: "100dvh" }
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: { width: "100dvw" }
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: { width: "100dvw" }
81
+ style: { minWidth: "100dvw", width: "100%" }
82
82
  }
83
83
  )
84
84
  ]
@@ -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,MAAA,EAAQ,QAAA;AAAS;AAAA,SAC5B;AAAA,wBACAC,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,YAAY,EAAE,QAAA,EAAU,MAAM,IAAA,EAAMC,aAAA,EAAO,OAAO,IAAA,EAAK;AAAA,YACvD,SAAA,EAAWH,2BAAA;AAAA,cACT,CAAC,KAAA,CAAM,QAAA,CAAS,OAAO,CAAA,IAAK,QAAA;AAAA,cAC5B;AAAA,aACF;AAAA,YACA,KAAA,EAAO,EAAE,MAAA,EAAQ,QAAA;AAAS;AAAA,SAC5B;AAAA,wBACAC,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,YAAY,EAAE,QAAA,EAAU,MAAM,IAAA,EAAMC,aAAA,EAAO,OAAO,GAAA,EAAI;AAAA,YACtD,SAAA,EAAWH,2BAAA;AAAA,cACT,CAAC,KAAA,CAAM,QAAA,CAAS,KAAK,CAAA,IAAK,QAAA;AAAA,cAC1B;AAAA,aACF;AAAA,YACA,KAAA,EAAO,EAAE,KAAA,EAAO,QAAA;AAAS;AAAA,SAC3B;AAAA,wBACAC,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,YAAY,EAAE,QAAA,EAAU,MAAM,IAAA,EAAMC,aAAA,EAAO,OAAO,IAAA,EAAK;AAAA,YACvD,SAAA,EAAWH,2BAAA;AAAA,cACT,CAAC,KAAA,CAAM,QAAA,CAAS,QAAQ,CAAA,IAAK,QAAA;AAAA,cAC7B;AAAA,aACF;AAAA,YACA,KAAA,EAAO,EAAE,KAAA,EAAO,QAAA;AAAS;AAAA;AAC3B;AAAA;AAAA,GACF;AAEJ","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={{ height: \"100dvh\" }}\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={{ height: \"100dvh\" }}\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={{ width: \"100dvw\" }}\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={{ width: \"100dvw\" }}\n />\n </div>\n );\n};\n"]}
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"]}
@@ -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: { height: "100dvh" }
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: { height: "100dvh" }
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: { width: "100dvw" }
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: { width: "100dvw" }
75
+ style: { minWidth: "100dvw", width: "100%" }
76
76
  }
77
77
  )
78
78
  ]
@@ -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,MAAA,EAAQ,QAAA;AAAS;AAAA,SAC5B;AAAA,wBACA,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,YAAY,EAAE,QAAA,EAAU,MAAM,IAAA,EAAM,KAAA,EAAO,OAAO,IAAA,EAAK;AAAA,YACvD,SAAA,EAAW,UAAA;AAAA,cACT,CAAC,KAAA,CAAM,QAAA,CAAS,OAAO,CAAA,IAAK,QAAA;AAAA,cAC5B;AAAA,aACF;AAAA,YACA,KAAA,EAAO,EAAE,MAAA,EAAQ,QAAA;AAAS;AAAA,SAC5B;AAAA,wBACA,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,YAAY,EAAE,QAAA,EAAU,MAAM,IAAA,EAAM,KAAA,EAAO,OAAO,GAAA,EAAI;AAAA,YACtD,SAAA,EAAW,UAAA;AAAA,cACT,CAAC,KAAA,CAAM,QAAA,CAAS,KAAK,CAAA,IAAK,QAAA;AAAA,cAC1B;AAAA,aACF;AAAA,YACA,KAAA,EAAO,EAAE,KAAA,EAAO,QAAA;AAAS;AAAA,SAC3B;AAAA,wBACA,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,YAAY,EAAE,QAAA,EAAU,MAAM,IAAA,EAAM,KAAA,EAAO,OAAO,IAAA,EAAK;AAAA,YACvD,SAAA,EAAW,UAAA;AAAA,cACT,CAAC,KAAA,CAAM,QAAA,CAAS,QAAQ,CAAA,IAAK,QAAA;AAAA,cAC7B;AAAA,aACF;AAAA,YACA,KAAA,EAAO,EAAE,KAAA,EAAO,QAAA;AAAS;AAAA;AAC3B;AAAA;AAAA,GACF;AAEJ","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={{ height: \"100dvh\" }}\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={{ height: \"100dvh\" }}\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={{ width: \"100dvw\" }}\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={{ width: \"100dvw\" }}\n />\n </div>\n );\n};\n"]}
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"]}
package/dist/index.d.mts CHANGED
@@ -13,10 +13,12 @@ export { HeadingReveal, HeadingRevealProps } from './HeadingReveal.mjs';
13
13
  export { I as Icon, d as IconCategory, b as IconComponents, c as IconName, a as IconProps, i as iconMetadata } from './Icon-CTxwWbdC.mjs';
14
14
  export { Input, InputProps } from './Input.mjs';
15
15
  export { Logo, LogoProps } from './Logo.mjs';
16
+ export { Pagination, PaginationProps } from './Pagination.mjs';
17
+ export { Slider, SliderProps } from './Slider.mjs';
16
18
  export { Tabs, TabsProps } from './Tabs.mjs';
17
19
  export { Toast, ToastProps } from './Toast.mjs';
20
+ export { Tooltip, TooltipProps } from './Tooltip.mjs';
18
21
  export { BRAND_COLOURS, BrandColour, courseDifficulty, difficultyColors } from './utils/colours.mjs';
19
22
  export { Easing, anticipate, breeze, crisp, easings, glide, nova, silk, swift } from './utils/easings.mjs';
20
23
  import 'react/jsx-runtime';
21
24
  import 'motion/react';
22
- import './Tooltip.mjs';
package/dist/index.d.ts CHANGED
@@ -13,10 +13,12 @@ export { HeadingReveal, HeadingRevealProps } from './HeadingReveal.js';
13
13
  export { I as Icon, d as IconCategory, b as IconComponents, c as IconName, a as IconProps, i as iconMetadata } from './Icon-llWd6yMa.js';
14
14
  export { Input, InputProps } from './Input.js';
15
15
  export { Logo, LogoProps } from './Logo.js';
16
+ export { Pagination, PaginationProps } from './Pagination.js';
17
+ export { Slider, SliderProps } from './Slider.js';
16
18
  export { Tabs, TabsProps } from './Tabs.js';
17
19
  export { Toast, ToastProps } from './Toast.js';
20
+ export { Tooltip, TooltipProps } from './Tooltip.js';
18
21
  export { BRAND_COLOURS, BrandColour, courseDifficulty, difficultyColors } from './utils/colours.js';
19
22
  export { Easing, anticipate, breeze, crisp, easings, glide, nova, silk, swift } from './utils/easings.js';
20
23
  import 'react/jsx-runtime';
21
24
  import 'motion/react';
22
- import './Tooltip.js';
package/dist/index.js CHANGED
@@ -15,8 +15,11 @@ var HeadingReveal = require('./HeadingReveal');
15
15
  var Icon = require('./Icon');
16
16
  var Input = require('./Input');
17
17
  var Logo = require('./Logo');
18
+ var Pagination = require('./Pagination');
19
+ var Slider = require('./Slider');
18
20
  var Tabs = require('./Tabs');
19
21
  var Toast = require('./Toast');
22
+ var Tooltip = require('./Tooltip');
20
23
  var icons = require('./icons');
21
24
  var colours = require('./utils/colours');
22
25
  var easings = require('./utils/easings');
@@ -99,6 +102,14 @@ Object.defineProperty(exports, "Logo", {
99
102
  enumerable: true,
100
103
  get: function () { return Logo.Logo; }
101
104
  });
105
+ Object.defineProperty(exports, "Pagination", {
106
+ enumerable: true,
107
+ get: function () { return Pagination.Pagination; }
108
+ });
109
+ Object.defineProperty(exports, "Slider", {
110
+ enumerable: true,
111
+ get: function () { return Slider.Slider; }
112
+ });
102
113
  Object.defineProperty(exports, "Tabs", {
103
114
  enumerable: true,
104
115
  get: function () { return Tabs.Tabs; }
@@ -107,6 +118,10 @@ Object.defineProperty(exports, "Toast", {
107
118
  enumerable: true,
108
119
  get: function () { return Toast.Toast; }
109
120
  });
121
+ Object.defineProperty(exports, "Tooltip", {
122
+ enumerable: true,
123
+ get: function () { return Tooltip.Tooltip; }
124
+ });
110
125
  Object.keys(icons).forEach(function (k) {
111
126
  if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
112
127
  enumerable: true,
package/dist/index.mjs CHANGED
@@ -13,8 +13,11 @@ export { HeadingReveal } from './HeadingReveal';
13
13
  export { Icon } from './Icon';
14
14
  export { Input } from './Input';
15
15
  export { Logo } from './Logo';
16
+ export { Pagination } from './Pagination';
17
+ export { Slider } from './Slider';
16
18
  export { Tabs } from './Tabs';
17
19
  export { Toast } from './Toast';
20
+ export { Tooltip } from './Tooltip';
18
21
  export * from './icons';
19
22
  export * from './utils/colours';
20
23
  export * from './utils/easings';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blueshift-gg/ui-components",
3
- "version": "0.1.5",
3
+ "version": "0.1.7",
4
4
  "private": false,
5
5
  "publishConfig": {
6
6
  "access": "public"