@lobehub/ui 3.4.2 → 3.4.3

package/es/awesome/GridBackground/GridShowcase.mjs

@@ -0,0 +1,53 @@
+'use client';
+
+import FlexBasic_default from "../../Flex/FlexBasic.mjs";
+import GridBackground_default from "./GridBackground.mjs";
+import { memo } from "react";
+import { useTheme } from "antd-style";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { rgba } from "polished";
+
+//#region src/awesome/GridBackground/GridShowcase.tsx
+const GridShowcase = memo(({ style, children, backgroundColor = "#001dff", innerProps, ...rest }) => {
+	const theme = useTheme();
+	return /* @__PURE__ */ jsxs(FlexBasic_default, {
+		style: {
+			position: "relative",
+			...style
+		},
+		...rest,
+		children: [
+			/* @__PURE__ */ jsx(GridBackground_default, {
+				animation: true,
+				colorBack: rgba(theme.colorText, .12),
+				colorFront: rgba(theme.colorText, .6),
+				flip: true
+			}),
+			/* @__PURE__ */ jsx(FlexBasic_default, {
+				align: "center",
+				...innerProps,
+				style: {
+					zIndex: 4,
+					...innerProps?.style
+				},
+				children
+			}),
+			/* @__PURE__ */ jsx(GridBackground_default, {
+				animation: true,
+				backgroundColor,
+				colorBack: rgba(theme.colorText, .24),
+				colorFront: theme.colorText,
+				random: true,
+				reverse: true,
+				showBackground: true,
+				style: { zIndex: 0 }
+			})
+		]
+	});
+});
+GridShowcase.displayName = "GridShowcase";
+var GridShowcase_default = GridShowcase;
+
+//#endregion
+export { GridShowcase_default as default };
+//# sourceMappingURL=GridShowcase.mjs.map

package/es/awesome/GridBackground/GridShowcase.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"GridShowcase.mjs","names":["Flexbox","GridBackground"],"sources":["../../../src/awesome/GridBackground/GridShowcase.tsx"],"sourcesContent":["'use client';\n\nimport { useTheme } from 'antd-style';\nimport { rgba } from 'polished';\nimport { memo } from 'react';\n\nimport { Flexbox } from '@/Flex';\n\nimport GridBackground from './GridBackground';\nimport type { GridShowcaseProps } from './type';\n\nconst GridShowcase = memo<GridShowcaseProps>(\n  ({ style, children, backgroundColor = '#001dff', innerProps, ...rest }) => {\n    const theme = useTheme();\n\n    return (\n      <Flexbox style={{ position: 'relative', ...style }} {...rest}>\n        <GridBackground\n          animation\n          colorBack={rgba(theme.colorText, 0.12)}\n          colorFront={rgba(theme.colorText, 0.6)}\n          flip\n        />\n        <Flexbox align={'center'} {...innerProps} style={{ zIndex: 4, ...innerProps?.style }}>\n          {children}\n        </Flexbox>\n        <GridBackground\n          animation\n          backgroundColor={backgroundColor}\n          colorBack={rgba(theme.colorText, 0.24)}\n          colorFront={theme.colorText}\n          random\n          reverse\n          showBackground\n          style={{ zIndex: 0 }}\n        />\n      </Flexbox>\n    );\n  },\n);\n\nGridShowcase.displayName = 'GridShowcase';\n\nexport default GridShowcase;\n"],"mappings":";;;;;;;;;;AAWA,MAAM,eAAe,MAClB,EAAE,OAAO,UAAU,kBAAkB,WAAW,YAAY,GAAG,WAAW;CACzE,MAAM,QAAQ,UAAU;AAExB,QACE,qBAACA;EAAQ,OAAO;GAAE,UAAU;GAAY,GAAG;GAAO;EAAE,GAAI;;GACtD,oBAACC;IACC;IACA,WAAW,KAAK,MAAM,WAAW,IAAK;IACtC,YAAY,KAAK,MAAM,WAAW,GAAI;IACtC;KACA;GACF,oBAACD;IAAQ,OAAO;IAAU,GAAI;IAAY,OAAO;KAAE,QAAQ;KAAG,GAAG,YAAY;KAAO;IACjF;KACO;GACV,oBAACC;IACC;IACiB;IACjB,WAAW,KAAK,MAAM,WAAW,IAAK;IACtC,YAAY,MAAM;IAClB;IACA;IACA;IACA,OAAO,EAAE,QAAQ,GAAG;KACpB;;GACM;EAGf;AAED,aAAa,cAAc;AAE3B,2BAAe"}

package/es/awesome/GridBackground/components/Grid.mjs

@@ -0,0 +1,68 @@
+import { memo, useCallback } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { isUndefined } from "lodash-es";
+
+//#region src/awesome/GridBackground/components/Grid.tsx
+var Line = /* @__PURE__ */ function(Line$1) {
+	Line$1[Line$1["l7"] = 0] = "l7";
+	Line$1[Line$1["l6"] = 1] = "l6";
+	Line$1[Line$1["l5"] = 2] = "l5";
+	Line$1[Line$1["l4"] = 3] = "l4";
+	Line$1[Line$1["l3"] = 4] = "l3";
+	Line$1[Line$1["l2"] = 5] = "l2";
+	Line$1[Line$1["l1"] = 6] = "l1";
+	Line$1[Line$1["center"] = 7] = "center";
+	Line$1[Line$1["r1"] = 8] = "r1";
+	Line$1[Line$1["r2"] = 9] = "r2";
+	Line$1[Line$1["r3"] = 10] = "r3";
+	Line$1[Line$1["r4"] = 11] = "r4";
+	Line$1[Line$1["r5"] = 12] = "r5";
+	Line$1[Line$1["r6"] = 13] = "r6";
+	Line$1[Line$1["r7"] = 14] = "r7";
+	return Line$1;
+}(Line || {});
+const Grid = memo(({ color = "#fff", strokeWidth = 3, linePick, ...rest }) => {
+	const isUnpick = isUndefined(linePick);
+	const showLine = useCallback((l) => isUnpick || linePick === l, [linePick]);
+	const vLine = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		showLine(Line.l7) && /* @__PURE__ */ jsx("path", { d: "M2 420v-60.343c0-21.82 14.15-41.12 34.959-47.684L1026 0h0" }),
+		showLine(Line.l6) && /* @__PURE__ */ jsx("path", { d: "M268 420v-62.077c0-20.977 13.094-39.724 32.789-46.944L1149 0h0" }),
+		showLine(Line.l5) && /* @__PURE__ */ jsx("path", { d: "M534 420v-64.358a50 50 0 0129.884-45.775L1269 0h0" }),
+		showLine(Line.l4) && /* @__PURE__ */ jsx("path", { d: "M800 420v-67.395a50 50 0 0125.958-43.84L1389 0h0" }),
+		showLine(Line.l3) && /* @__PURE__ */ jsx("path", { d: "M1066 420v-71.645a50 50 0 0120.456-40.337L1507 0h0" }),
+		showLine(Line.l2) && /* @__PURE__ */ jsx("path", { d: "M1332 420v-77.506a50 50 0 0113.194-33.843L1629 0h0" }),
+		showLine(Line.l1) && /* @__PURE__ */ jsx("path", { d: "M1598 420v-86.225a50 50 0 014.438-20.594L1744 0h0" }),
+		showLine(Line.center) && /* @__PURE__ */ jsx("path", { d: "M1864 420V0h0" }),
+		showLine(Line.r1) && /* @__PURE__ */ jsx("path", { d: "M2130 420v-86.225a50 50 0 00-4.438-20.594L1984 0h0" }),
+		showLine(Line.r2) && /* @__PURE__ */ jsx("path", { d: "M2396 420v-77.506a50 50 0 00-13.194-33.843L2099 0h0" }),
+		showLine(Line.r3) && /* @__PURE__ */ jsx("path", { d: "M2662 420v-71.645a50 50 0 00-20.456-40.337L2221 0h0" }),
+		showLine(Line.r4) && /* @__PURE__ */ jsx("path", { d: "M2928 420v-67.395a50 50 0 00-25.958-43.84L2339 0h0" }),
+		showLine(Line.r5) && /* @__PURE__ */ jsx("path", { d: "M3194 420v-64.358a50 50 0 00-29.884-45.775L2459 0h0" }),
+		showLine(Line.r6) && /* @__PURE__ */ jsx("path", { d: "M3460 420v-62.077c0-20.977-13.094-39.724-32.789-46.944L2579 0h0" }),
+		showLine(Line.r7) && /* @__PURE__ */ jsx("path", { d: "M3726 420v-60.343c0-21.82-14.15-41.12-34.959-47.684L2702 0h0" })
+	] });
+	const hLine = isUnpick && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsx("path", { d: "M2835 42H892" }),
+		/* @__PURE__ */ jsx("path", { d: "M595 136h2538" }),
+		/* @__PURE__ */ jsx("path", { d: "M237 249h3254" })
+	] });
+	return /* @__PURE__ */ jsx("svg", {
+		style: { width: "100%" },
+		viewBox: "0 0 3728 422",
+		xmlns: "http://www.w3.org/2000/svg",
+		...rest,
+		children: /* @__PURE__ */ jsxs("g", {
+			fill: "none",
+			fillRule: "evenodd",
+			stroke: color,
+			strokeWidth,
+			children: [vLine, hLine]
+		})
+	});
+});
+Grid.displayName = "Grid";
+var Grid_default = Grid;
+
+//#endregion
+export { Grid_default as default };
+//# sourceMappingURL=Grid.mjs.map

package/es/awesome/GridBackground/components/Grid.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.mjs","names":[],"sources":["../../../../src/awesome/GridBackground/components/Grid.tsx"],"sourcesContent":["import { isUndefined } from 'lodash-es';\nimport { memo, useCallback } from 'react';\n\nimport { SvgProps } from '@/types';\n\nenum Line {\n  l7,\n  l6,\n  l5,\n  l4,\n  l3,\n  l2,\n  l1,\n  center,\n  r1,\n  r2,\n  r3,\n  r4,\n  r5,\n  r6,\n  r7,\n}\n\nexport interface GridProps extends SvgProps {\n  color?: string;\n  linePick?: Line;\n  strokeWidth?: number;\n}\n\nconst Grid = memo<GridProps>(({ color = '#fff', strokeWidth = 3, linePick, ...rest }) => {\n  const isUnpick = isUndefined(linePick);\n\n  const showLine = useCallback((l: Line) => isUnpick || linePick === l, [linePick]);\n\n  const vLine = (\n    <>\n      {showLine(Line.l7) && <path d=\"M2 420v-60.343c0-21.82 14.15-41.12 34.959-47.684L1026 0h0\" />}\n      {showLine(Line.l6) && (\n        <path d=\"M268 420v-62.077c0-20.977 13.094-39.724 32.789-46.944L1149 0h0\" />\n      )}\n      {showLine(Line.l5) && <path d=\"M534 420v-64.358a50 50 0 0129.884-45.775L1269 0h0\" />}\n      {showLine(Line.l4) && <path d=\"M800 420v-67.395a50 50 0 0125.958-43.84L1389 0h0\" />}\n      {showLine(Line.l3) && <path d=\"M1066 420v-71.645a50 50 0 0120.456-40.337L1507 0h0\" />}\n      {showLine(Line.l2) && <path d=\"M1332 420v-77.506a50 50 0 0113.194-33.843L1629 0h0\" />}\n      {showLine(Line.l1) && <path d=\"M1598 420v-86.225a50 50 0 014.438-20.594L1744 0h0\" />}\n      {showLine(Line.center) && <path d=\"M1864 420V0h0\" />}\n      {showLine(Line.r1) && <path d=\"M2130 420v-86.225a50 50 0 00-4.438-20.594L1984 0h0\" />}\n      {showLine(Line.r2) && <path d=\"M2396 420v-77.506a50 50 0 00-13.194-33.843L2099 0h0\" />}\n      {showLine(Line.r3) && <path d=\"M2662 420v-71.645a50 50 0 00-20.456-40.337L2221 0h0\" />}\n      {showLine(Line.r4) && <path d=\"M2928 420v-67.395a50 50 0 00-25.958-43.84L2339 0h0\" />}\n      {showLine(Line.r5) && <path d=\"M3194 420v-64.358a50 50 0 00-29.884-45.775L2459 0h0\" />}\n      {showLine(Line.r6) && (\n        <path d=\"M3460 420v-62.077c0-20.977-13.094-39.724-32.789-46.944L2579 0h0\" />\n      )}\n      {showLine(Line.r7) && (\n        <path d=\"M3726 420v-60.343c0-21.82-14.15-41.12-34.959-47.684L2702 0h0\" />\n      )}\n    </>\n  );\n\n  const hLine = isUnpick && (\n    <>\n      <path d=\"M2835 42H892\" />\n      <path d=\"M595 136h2538\" />\n      <path d=\"M237 249h3254\" />\n    </>\n  );\n\n  return (\n    <svg\n      style={{ width: '100%' }}\n      viewBox=\"0 0 3728 422\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      {...rest}\n    >\n      <g fill=\"none\" fillRule=\"evenodd\" stroke={color} strokeWidth={strokeWidth}>\n        {vLine}\n        {hLine}\n      </g>\n    </svg>\n  );\n});\n\nGrid.displayName = 'Grid';\n\nexport default Grid;\n"],"mappings":";;;;;AAKA,IAAK,wCAAL;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;EAfG;AAwBL,MAAM,OAAO,MAAiB,EAAE,QAAQ,QAAQ,cAAc,GAAG,UAAU,GAAG,WAAW;CACvF,MAAM,WAAW,YAAY,SAAS;CAEtC,MAAM,WAAW,aAAa,MAAY,YAAY,aAAa,GAAG,CAAC,SAAS,CAAC;CAEjF,MAAM,QACJ;EACG,SAAS,KAAK,GAAG,IAAI,oBAAC,UAAK,GAAE,8DAA8D;EAC3F,SAAS,KAAK,GAAG,IAChB,oBAAC,UAAK,GAAE,mEAAmE;EAE5E,SAAS,KAAK,GAAG,IAAI,oBAAC,UAAK,GAAE,sDAAsD;EACnF,SAAS,KAAK,GAAG,IAAI,oBAAC,UAAK,GAAE,qDAAqD;EAClF,SAAS,KAAK,GAAG,IAAI,oBAAC,UAAK,GAAE,uDAAuD;EACpF,SAAS,KAAK,GAAG,IAAI,oBAAC,UAAK,GAAE,uDAAuD;EACpF,SAAS,KAAK,GAAG,IAAI,oBAAC,UAAK,GAAE,sDAAsD;EACnF,SAAS,KAAK,OAAO,IAAI,oBAAC,UAAK,GAAE,kBAAkB;EACnD,SAAS,KAAK,GAAG,IAAI,oBAAC,UAAK,GAAE,uDAAuD;EACpF,SAAS,KAAK,GAAG,IAAI,oBAAC,UAAK,GAAE,wDAAwD;EACrF,SAAS,KAAK,GAAG,IAAI,oBAAC,UAAK,GAAE,wDAAwD;EACrF,SAAS,KAAK,GAAG,IAAI,oBAAC,UAAK,GAAE,uDAAuD;EACpF,SAAS,KAAK,GAAG,IAAI,oBAAC,UAAK,GAAE,wDAAwD;EACrF,SAAS,KAAK,GAAG,IAChB,oBAAC,UAAK,GAAE,oEAAoE;EAE7E,SAAS,KAAK,GAAG,IAChB,oBAAC,UAAK,GAAE,iEAAiE;KAE1E;CAGL,MAAM,QAAQ,YACZ;EACE,oBAAC,UAAK,GAAE,iBAAiB;EACzB,oBAAC,UAAK,GAAE,kBAAkB;EAC1B,oBAAC,UAAK,GAAE,kBAAkB;KACzB;AAGL,QACE,oBAAC;EACC,OAAO,EAAE,OAAO,QAAQ;EACxB,SAAQ;EACR,OAAM;EACN,GAAI;YAEJ,qBAAC;GAAE,MAAK;GAAO,UAAS;GAAU,QAAQ;GAAoB;cAC3D,OACA;IACC;GACA;EAER;AAEF,KAAK,cAAc;AAEnB,mBAAe"}

package/es/awesome/GridBackground/index.d.mts

@@ -0,0 +1,3 @@
+import { GridBackgroundProps, GridShowcaseProps } from "./type.mjs";
+import { GridBackground } from "./GridBackground.mjs";
+import { GridShowcase } from "./GridShowcase.mjs";

package/es/awesome/GridBackground/style.mjs

@@ -0,0 +1,84 @@
+import { createStyles, keyframes } from "antd-style";
+import chroma from "chroma-js";
+
+//#region src/awesome/GridBackground/style.ts
+const useStyles = createStyles(({ css: css$1, token }, { reverse, backgroundColor = "blue" }) => {
+	const highlightAnimation = keyframes`
+    0% {
+      mask-position: 100% 0%;
+    }
+    16%,100% {
+      mask-position: 100% 200%;
+    }
+  `;
+	const highlightAnimationReverse = keyframes`
+    0% {
+      mask-position: 100% 200%;
+    }
+    16%,100% {
+      mask-position: 100% 0%;
+    }
+  `;
+	const scale = chroma.bezier([
+		token.colorText,
+		backgroundColor,
+		token.colorBgLayout
+	]).scale().mode("lch").correctLightness().colors(6);
+	const width = 24;
+	const height = 36;
+	return {
+		background: css$1`
+        position: absolute;
+        inset-block-start: ${60 - height / 2}%;
+        inset-inline-start: ${50 - width / 2}%;
+        transform: rotateX(60deg);
+
+        width: ${width}%;
+        height: ${height}%;
+
+        background: ${scale[1]};
+        filter: blur(2em) saturate(400%);
+        border-radius: 50%;
+        box-shadow:
+          0 0 1em 2em ${scale[1]},
+          0 0 3em 6em ${scale[2]},
+          0 0 6em 10em ${scale[3]},
+          0 0 8em 16em ${scale[4]};
+      `,
+		backgroundContainer: css$1`
+        position: absolute;
+        z-index: -1;
+        inset: 0;
+
+        width: 100%;
+        height: 100%;
+
+        perspective: 200px;
+      `,
+		container: css$1`
+        position: relative;
+
+        mask-image: linear-gradient(to bottom, transparent, #fff 30%, #fff 70%, transparent);
+        mask-size: cover;
+      `,
+		highlight: css$1`
+        --duration: 6s;
+        --delay: 0s;
+
+        position: absolute;
+        z-index: 1;
+        inset: 0;
+
+        animation: ${reverse ? highlightAnimationReverse : highlightAnimation} var(--duration)
+          cubic-bezier(0.62, 0.62, 0.28, 0.67) infinite;
+        animation-delay: var(--delay);
+
+        mask-image: linear-gradient(to bottom, transparent 40%, #fff 60%, transparent);
+        mask-size: 100% 200%;
+      `
+	};
+});
+
+//#endregion
+export { useStyles };
+//# sourceMappingURL=style.mjs.map

package/es/awesome/GridBackground/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/awesome/GridBackground/style.ts"],"sourcesContent":["import { createStyles, keyframes } from 'antd-style';\nimport chroma from 'chroma-js';\n\nexport const useStyles = createStyles(\n  (\n    { css, token },\n    { reverse, backgroundColor = 'blue' }: { backgroundColor?: string; reverse?: boolean },\n  ) => {\n    const highlightAnimation = keyframes`\n    0% {\n      mask-position: 100% 0%;\n    }\n    16%,100% {\n      mask-position: 100% 200%;\n    }\n  `;\n    const highlightAnimationReverse = keyframes`\n    0% {\n      mask-position: 100% 200%;\n    }\n    16%,100% {\n      mask-position: 100% 0%;\n    }\n  `;\n\n    const scale = chroma\n      .bezier([token.colorText, backgroundColor, token.colorBgLayout])\n      .scale()\n      .mode('lch')\n      .correctLightness()\n      .colors(6);\n    const width = 24;\n    const height = 36;\n\n    return {\n      background: css`\n        position: absolute;\n        inset-block-start: ${60 - height / 2}%;\n        inset-inline-start: ${50 - width / 2}%;\n        transform: rotateX(60deg);\n\n        width: ${width}%;\n        height: ${height}%;\n\n        background: ${scale[1]};\n        filter: blur(2em) saturate(400%);\n        border-radius: 50%;\n        box-shadow:\n          0 0 1em 2em ${scale[1]},\n          0 0 3em 6em ${scale[2]},\n          0 0 6em 10em ${scale[3]},\n          0 0 8em 16em ${scale[4]};\n      `,\n      backgroundContainer: css`\n        position: absolute;\n        z-index: -1;\n        inset: 0;\n\n        width: 100%;\n        height: 100%;\n\n        perspective: 200px;\n      `,\n      container: css`\n        position: relative;\n\n        mask-image: linear-gradient(to bottom, transparent, #fff 30%, #fff 70%, transparent);\n        mask-size: cover;\n      `,\n      highlight: css`\n        --duration: 6s;\n        --delay: 0s;\n\n        position: absolute;\n        z-index: 1;\n        inset: 0;\n\n        animation: ${reverse ? highlightAnimationReverse : highlightAnimation} var(--duration)\n          cubic-bezier(0.62, 0.62, 0.28, 0.67) infinite;\n        animation-delay: var(--delay);\n\n        mask-image: linear-gradient(to bottom, transparent 40%, #fff 60%, transparent);\n        mask-size: 100% 200%;\n      `,\n    };\n  },\n);\n"],"mappings":";;;;AAGA,MAAa,YAAY,cAErB,EAAE,YAAK,SACP,EAAE,SAAS,kBAAkB,aAC1B;CACH,MAAM,qBAAqB,SAAS;;;;;;;;CAQpC,MAAM,4BAA4B,SAAS;;;;;;;;CAS3C,MAAM,QAAQ,OACX,OAAO;EAAC,MAAM;EAAW;EAAiB,MAAM;EAAc,CAAC,CAC/D,OAAO,CACP,KAAK,MAAM,CACX,kBAAkB,CAClB,OAAO,EAAE;CACZ,MAAM,QAAQ;CACd,MAAM,SAAS;AAEf,QAAO;EACL,YAAY,KAAG;;6BAEQ,KAAK,SAAS,EAAE;8BACf,KAAK,QAAQ,EAAE;;;iBAG5B,MAAM;kBACL,OAAO;;sBAEH,MAAM,GAAG;;;;wBAIP,MAAM,GAAG;wBACT,MAAM,GAAG;yBACR,MAAM,GAAG;yBACT,MAAM,GAAG;;EAE5B,qBAAqB,KAAG;;;;;;;;;;EAUxB,WAAW,KAAG;;;;;;EAMd,WAAW,KAAG;;;;;;;;qBAQC,UAAU,4BAA4B,mBAAmB;;;;;;;EAOzE;EAEJ"}

package/es/awesome/GridBackground/type.d.mts

@@ -0,0 +1,24 @@
+import { FlexboxProps } from "../../Flex/type.mjs";
+import "../../Flex/index.mjs";
+import { DivProps } from "../../types/index.mjs";
+
+//#region src/awesome/GridBackground/type.d.ts
+interface GridBackgroundProps extends DivProps {
+  animation?: boolean;
+  animationDuration?: number;
+  backgroundColor?: string;
+  colorBack?: string;
+  colorFront?: string;
+  flip?: boolean;
+  random?: boolean;
+  reverse?: boolean;
+  showBackground?: boolean;
+  strokeWidth?: number;
+}
+interface GridShowcaseProps extends FlexboxProps {
+  backgroundColor?: GridBackgroundProps['backgroundColor'];
+  innerProps?: FlexboxProps;
+}
+//#endregion
+export { GridBackgroundProps, GridShowcaseProps };
+//# sourceMappingURL=type.d.mts.map

package/es/awesome/Hero/Hero.d.mts

@@ -0,0 +1,8 @@
+import { HeroProps } from "./type.mjs";
+import * as react113 from "react";
+
+//#region src/awesome/Hero/Hero.d.ts
+declare const Hero: react113.NamedExoticComponent<HeroProps>;
+//#endregion
+export { Hero };
+//# sourceMappingURL=Hero.d.mts.map

package/es/awesome/Hero/Hero.mjs

@@ -0,0 +1,82 @@
+'use client';
+
+import FlexBasic_default from "../../Flex/FlexBasic.mjs";
+import Center_default from "../../Flex/Center.mjs";
+import Button_default from "../../Button/Button.mjs";
+import A_default from "../../A/index.mjs";
+import AuroraBackground_default from "../AuroraBackground/AuroraBackground.mjs";
+import GradientButton_default from "../GradientButton/GradientButton.mjs";
+import { useStyles } from "./style.mjs";
+import { ConfigProvider } from "antd";
+import { memo, useCallback } from "react";
+import { useResponsive } from "antd-style";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Github } from "lucide-react";
+
+//#region src/awesome/Hero/Hero.tsx
+const Hero = memo(({ title, description, actions, Link }) => {
+	const { styles } = useStyles();
+	const { mobile } = useResponsive();
+	const LinkRender = Link || A_default;
+	const ButtonGroups = useCallback(() => Boolean(actions?.length) && /* @__PURE__ */ jsx(FlexBasic_default, {
+		className: styles.actions,
+		gap: 16,
+		horizontal: true,
+		justify: "center",
+		children: actions.map(({ text, link, openExternal, github, type }, index) => {
+			const content = type === "primary" ? /* @__PURE__ */ jsx(GradientButton_default, {
+				block: mobile,
+				icon: github ? Github : void 0,
+				size: "large",
+				children: text
+			}, index) : /* @__PURE__ */ jsx(Button_default, {
+				block: mobile,
+				icon: github ? Github : void 0,
+				size: "large",
+				type: "primary",
+				children: text
+			}, index);
+			return openExternal ? /* @__PURE__ */ jsx(A_default, {
+				href: link,
+				target: openExternal ? "_blank" : void 0,
+				children: content
+			}, text) : /* @__PURE__ */ jsx(LinkRender, {
+				to: link,
+				children: content
+			}, text);
+		})
+	}), [actions]);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(AuroraBackground_default, {}), /* @__PURE__ */ jsx(ConfigProvider, {
+		theme: { token: { fontSize: 16 } },
+		children: /* @__PURE__ */ jsx(FlexBasic_default, {
+			align: "center",
+			style: { zIndex: 1 },
+			children: /* @__PURE__ */ jsx(FlexBasic_default, {
+				className: styles.container,
+				distribution: "center",
+				horizontal: true,
+				children: /* @__PURE__ */ jsxs(Center_default, { children: [
+					title && /* @__PURE__ */ jsx(Center_default, {
+						as: "h1",
+						className: styles.title,
+						dangerouslySetInnerHTML: { __html: title },
+						gap: "0.25em",
+						horizontal: true,
+						wrap: "wrap"
+					}),
+					description && /* @__PURE__ */ jsx("p", {
+						className: styles.desc,
+						dangerouslySetInnerHTML: { __html: description }
+					}),
+					/* @__PURE__ */ jsx(ButtonGroups, {})
+				] })
+			})
+		})
+	})] });
+});
+Hero.displayName = "Hero";
+var Hero_default = Hero;
+
+//#endregion
+export { Hero_default as default };
+//# sourceMappingURL=Hero.mjs.map

package/es/awesome/Hero/Hero.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Hero.mjs","names":["A","Flexbox","GradientButton","Button","AuroraBackground","Center"],"sources":["../../../src/awesome/Hero/Hero.tsx"],"sourcesContent":["'use client';\n\nimport { ConfigProvider } from 'antd';\nimport { useResponsive } from 'antd-style';\nimport { Github } from 'lucide-react';\nimport { memo, useCallback } from 'react';\n\nimport A from '@/A';\nimport Button from '@/Button';\nimport { Center, Flexbox } from '@/Flex';\nimport AuroraBackground from '@/awesome/AuroraBackground';\nimport GradientButton from '@/awesome/GradientButton';\n\nimport { useStyles } from './style';\nimport type { HeroProps } from './type';\n\nconst Hero = memo<HeroProps>(({ title, description, actions, Link }) => {\n  const { styles } = useStyles();\n  const { mobile } = useResponsive();\n\n  const LinkRender = Link || A;\n\n  const ButtonGroups = useCallback(\n    () =>\n      Boolean(actions?.length) && (\n        <Flexbox className={styles.actions} gap={16} horizontal justify={'center'}>\n          {actions!.map(({ text, link, openExternal, github, type }, index) => {\n            const content =\n              type === 'primary' ? (\n                <GradientButton\n                  block={mobile}\n                  icon={github ? Github : undefined}\n                  key={index}\n                  size=\"large\"\n                >\n                  {text}\n                </GradientButton>\n              ) : (\n                <Button\n                  block={mobile}\n                  icon={github ? Github : undefined}\n                  key={index}\n                  size=\"large\"\n                  type=\"primary\"\n                >\n                  {text}\n                </Button>\n              );\n\n            return openExternal ? (\n              <A href={link} key={text} target={openExternal ? '_blank' : undefined}>\n                {content}\n              </A>\n            ) : (\n              <LinkRender key={text} to={link}>\n                {content}\n              </LinkRender>\n            );\n          })}\n        </Flexbox>\n      ),\n    [actions],\n  );\n\n  return (\n    <>\n      <AuroraBackground />\n      <ConfigProvider theme={{ token: { fontSize: 16 } }}>\n        <Flexbox align={'center'} style={{ zIndex: 1 }}>\n          <Flexbox className={styles.container} distribution={'center'} horizontal>\n            <Center>\n              {title && (\n                <Center\n                  as={'h1'}\n                  className={styles.title}\n                  dangerouslySetInnerHTML={{ __html: title }}\n                  gap={'0.25em'}\n                  horizontal\n                  wrap={'wrap'}\n                />\n              )}\n              {description && (\n                <p className={styles.desc} dangerouslySetInnerHTML={{ __html: description }} />\n              )}\n              <ButtonGroups />\n            </Center>\n          </Flexbox>\n        </Flexbox>\n      </ConfigProvider>\n    </>\n  );\n});\n\nHero.displayName = 'Hero';\n\nexport default Hero;\n"],"mappings":";;;;;;;;;;;;;;;;AAgBA,MAAM,OAAO,MAAiB,EAAE,OAAO,aAAa,SAAS,WAAW;CACtE,MAAM,EAAE,WAAW,WAAW;CAC9B,MAAM,EAAE,WAAW,eAAe;CAElC,MAAM,aAAa,QAAQA;CAE3B,MAAM,eAAe,kBAEjB,QAAQ,SAAS,OAAO,IACtB,oBAACC;EAAQ,WAAW,OAAO;EAAS,KAAK;EAAI;EAAW,SAAS;YAC9D,QAAS,KAAK,EAAE,MAAM,MAAM,cAAc,QAAQ,QAAQ,UAAU;GACnE,MAAM,UACJ,SAAS,YACP,oBAACC;IACC,OAAO;IACP,MAAM,SAAS,SAAS;IAExB,MAAK;cAEJ;MAHI,MAIU,GAEjB,oBAACC;IACC,OAAO;IACP,MAAM,SAAS,SAAS;IAExB,MAAK;IACL,MAAK;cAEJ;MAJI,MAKE;AAGb,UAAO,eACL,oBAACH;IAAE,MAAM;IAAiB,QAAQ,eAAe,WAAW;cACzD;MADiB,KAEhB,GAEJ,oBAAC;IAAsB,IAAI;cACxB;MADc,KAEJ;IAEf;GACM,EAEd,CAAC,QAAQ,CACV;AAED,QACE,8CACE,oBAACI,6BAAmB,EACpB,oBAAC;EAAe,OAAO,EAAE,OAAO,EAAE,UAAU,IAAI,EAAE;YAChD,oBAACH;GAAQ,OAAO;GAAU,OAAO,EAAE,QAAQ,GAAG;aAC5C,oBAACA;IAAQ,WAAW,OAAO;IAAW,cAAc;IAAU;cAC5D,qBAACI;KACE,SACC,oBAACA;MACC,IAAI;MACJ,WAAW,OAAO;MAClB,yBAAyB,EAAE,QAAQ,OAAO;MAC1C,KAAK;MACL;MACA,MAAM;OACN;KAEH,eACC,oBAAC;MAAE,WAAW,OAAO;MAAM,yBAAyB,EAAE,QAAQ,aAAa;OAAI;KAEjF,oBAAC,iBAAe;QACT;KACD;IACF;GACK,IAChB;EAEL;AAEF,KAAK,cAAc;AAEnB,mBAAe"}

package/es/awesome/Hero/index.d.mts

@@ -0,0 +1,2 @@
+import { HeroAction, HeroProps } from "./type.mjs";
+import { Hero } from "./Hero.mjs";

package/es/awesome/Hero/style.mjs

@@ -0,0 +1,71 @@
+import { createStyles } from "antd-style";
+
+//#region src/awesome/Hero/style.ts
+const useStyles = createStyles(({ css: css$1, responsive, token, stylish }) => ({
+	actions: css$1`
+    margin-block-start: 24px;
+
+    button {
+      padding-inline: 32px !important;
+      font-weight: 500;
+    }
+
+    ${responsive.mobile} {
+      flex-direction: column;
+      gap: 16px;
+      width: 100%;
+      margin-block-start: 24px;
+
+      button {
+        width: 100%;
+      }
+    }
+  `,
+	container: css$1`
+    position: relative;
+    box-sizing: border-box;
+    text-align: center;
+  `,
+	desc: css$1`
+    margin-block-start: 0;
+    font-size: ${token.fontSizeHeading3}px;
+    color: ${token.colorTextSecondary};
+    text-align: center;
+
+    ${responsive.mobile} {
+      margin-block: 24px;
+      margin-inline: 16px;
+      font-size: ${token.fontSizeHeading5}px;
+    }
+  `,
+	title: css$1`
+    z-index: 10;
+
+    margin: 0;
+
+    font-size: min(100px, 10vw);
+    line-height: 1.2;
+    text-align: center;
+
+    b {
+      ${stylish.gradientAnimation}
+      position: relative;
+      z-index: 5;
+      background-clip: text;
+
+      -webkit-text-fill-color: transparent;
+
+      &::selection {
+        -webkit-text-fill-color: #000 !important;
+      }
+    }
+
+    ${responsive.mobile} {
+      font-size: 64px;
+    }
+  `
+}));
+
+//#endregion
+export { useStyles };
+//# sourceMappingURL=style.mjs.map

package/es/awesome/Hero/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/awesome/Hero/style.ts"],"sourcesContent":["import { createStyles } from 'antd-style';\n\nexport const useStyles = createStyles(({ css, responsive, token, stylish }) => ({\n  actions: css`\n    margin-block-start: 24px;\n\n    button {\n      padding-inline: 32px !important;\n      font-weight: 500;\n    }\n\n    ${responsive.mobile} {\n      flex-direction: column;\n      gap: 16px;\n      width: 100%;\n      margin-block-start: 24px;\n\n      button {\n        width: 100%;\n      }\n    }\n  `,\n\n  container: css`\n    position: relative;\n    box-sizing: border-box;\n    text-align: center;\n  `,\n\n  desc: css`\n    margin-block-start: 0;\n    font-size: ${token.fontSizeHeading3}px;\n    color: ${token.colorTextSecondary};\n    text-align: center;\n\n    ${responsive.mobile} {\n      margin-block: 24px;\n      margin-inline: 16px;\n      font-size: ${token.fontSizeHeading5}px;\n    }\n  `,\n  title: css`\n    z-index: 10;\n\n    margin: 0;\n\n    font-size: min(100px, 10vw);\n    line-height: 1.2;\n    text-align: center;\n\n    b {\n      ${stylish.gradientAnimation}\n      position: relative;\n      z-index: 5;\n      background-clip: text;\n\n      -webkit-text-fill-color: transparent;\n\n      &::selection {\n        -webkit-text-fill-color: #000 !important;\n      }\n    }\n\n    ${responsive.mobile} {\n      font-size: 64px;\n    }\n  `,\n}));\n"],"mappings":";;;AAEA,MAAa,YAAY,cAAc,EAAE,YAAK,YAAY,OAAO,eAAe;CAC9E,SAAS,KAAG;;;;;;;;MAQR,WAAW,OAAO;;;;;;;;;;;CAYtB,WAAW,KAAG;;;;;CAMd,MAAM,KAAG;;iBAEM,MAAM,iBAAiB;aAC3B,MAAM,mBAAmB;;;MAGhC,WAAW,OAAO;;;mBAGL,MAAM,iBAAiB;;;CAGxC,OAAO,KAAG;;;;;;;;;;QAUJ,QAAQ,kBAAkB;;;;;;;;;;;;MAY5B,WAAW,OAAO;;;;CAIvB,EAAE"}

package/es/awesome/Hero/type.d.mts

@@ -0,0 +1,19 @@
+import { ElementType } from "react";
+
+//#region src/awesome/Hero/type.d.ts
+interface HeroAction {
+  github?: boolean;
+  link: string;
+  openExternal?: boolean;
+  text: string;
+  type?: 'primary' | 'default';
+}
+interface HeroProps {
+  Link?: ElementType;
+  actions?: HeroAction[];
+  description?: string;
+  title?: string;
+}
+//#endregion
+export { HeroAction, HeroProps };
+//# sourceMappingURL=type.d.mts.map

package/es/awesome/Spline/ParentSize.mjs

@@ -0,0 +1,73 @@
+import { memo, useEffect, useMemo, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { mergeRefs } from "react-merge-refs";
+import { debounce } from "lodash-es";
+
+//#region src/awesome/Spline/ParentSize.tsx
+const defaultIgnoreDimensions = [];
+const defaultParentSizeStyles = {
+	height: "100%",
+	width: "100%"
+};
+const ParentSize = memo(({ ref, className, children, debounceTime = 300, ignoreDimensions = defaultIgnoreDimensions, parentSizeStyles, enableDebounceLeadingCall = true, resizeObserverPolyfill, ...restProps }) => {
+	const target = useRef(null);
+	const animationFrameID = useRef(0);
+	const [state, setState] = useState({
+		height: 0,
+		left: 0,
+		top: 0,
+		width: 0
+	});
+	const resize = useMemo(() => {
+		const normalized = Array.isArray(ignoreDimensions) ? ignoreDimensions : [ignoreDimensions];
+		return debounce((incoming) => {
+			setState((existing) => {
+				return Object.keys(existing).filter((key) => existing[key] !== incoming[key]).every((key) => normalized.includes(key)) ? existing : incoming;
+			});
+		}, debounceTime, { leading: enableDebounceLeadingCall });
+	}, [
+		debounceTime,
+		enableDebounceLeadingCall,
+		ignoreDimensions
+	]);
+	useEffect(() => {
+		const observer = new (resizeObserverPolyfill || window.ResizeObserver)((entries) => {
+			for (const entry of entries) {
+				const { left, top, width, height } = entry?.contentRect ?? {};
+				animationFrameID.current = window.requestAnimationFrame(() => {
+					resize({
+						height,
+						left,
+						top,
+						width
+					});
+				});
+			}
+		});
+		if (target.current) observer.observe(target.current);
+		return () => {
+			window.cancelAnimationFrame(animationFrameID.current);
+			observer.disconnect();
+			resize.cancel();
+		};
+	}, [resize, resizeObserverPolyfill]);
+	return /* @__PURE__ */ jsx("div", {
+		className,
+		ref: mergeRefs([ref, target]),
+		style: {
+			...defaultParentSizeStyles,
+			...parentSizeStyles
+		},
+		...restProps,
+		children: children({
+			...state,
+			ref: target.current,
+			resize
+		})
+	});
+});
+var ParentSize_default = ParentSize;
+
+//#endregion
+export { ParentSize_default as default };
+//# sourceMappingURL=ParentSize.mjs.map

package/es/awesome/Spline/ParentSize.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ParentSize.mjs","names":["defaultIgnoreDimensions: ParentSizeProps['ignoreDimensions']"],"sources":["../../../src/awesome/Spline/ParentSize.tsx"],"sourcesContent":["import { debounce } from 'lodash-es';\nimport {\n  type CSSProperties,\n  type ReactNode,\n  type Ref,\n  memo,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { mergeRefs } from 'react-merge-refs';\n\ninterface ResizeObserverCallback {\n  (entries: ResizeObserverEntry[], observer: ResizeObserver): void;\n}\n\ninterface ResizeObserverPolyfill {\n  new (callback: ResizeObserverCallback): ResizeObserver;\n}\n\n// @TODO remove when upgraded to TS 4 which has its own declaration\ninterface PrivateWindow {\n  ResizeObserver: ResizeObserverPolyfill;\n}\n\nexport interface ParentSizeProps {\n  /** Child render function `({ width, height, top, left, ref, resize }) => ReactNode`. */\n  children: (\n    args: {\n      ref: HTMLDivElement | null;\n      resize: (state: ParentSizeState) => void;\n    } & ParentSizeState,\n  ) => ReactNode;\n  /** Optional `className` to add to the parent `div` wrapper used for size measurement. */\n  className?: string;\n  /** Child render updates upon resize are delayed until `debounceTime` milliseconds _after_ the last resize event is observed. */\n  debounceTime?: number;\n  /** Optional flag to toggle leading debounce calls. When set to true this will ensure that the component always renders immediately. (defaults to true) */\n  enableDebounceLeadingCall?: boolean;\n  /** Optional dimensions provided won't trigger a state change when changed. */\n  ignoreDimensions?: keyof ParentSizeState | (keyof ParentSizeState)[];\n  /** Optional `style` object to apply to the parent `div` wrapper used for size measurement. */\n  parentSizeStyles?: CSSProperties;\n  ref?: Ref<HTMLDivElement>;\n  /** Optionally inject a ResizeObserver polyfill, else this *must* be globally available. */\n  resizeObserverPolyfill?: ResizeObserverPolyfill;\n}\n\ntype ParentSizeState = {\n  height: number;\n  left: number;\n  top: number;\n  width: number;\n};\n\nexport type ParentSizeProvidedProps = ParentSizeState;\n\nconst defaultIgnoreDimensions: ParentSizeProps['ignoreDimensions'] = [];\nconst defaultParentSizeStyles = { height: '100%', width: '100%' };\n\nconst ParentSize = memo<ParentSizeProps>(\n  ({\n    ref,\n    className,\n    children,\n    debounceTime = 300,\n    ignoreDimensions = defaultIgnoreDimensions,\n    parentSizeStyles,\n    enableDebounceLeadingCall = true,\n    resizeObserverPolyfill,\n    ...restProps\n  }) => {\n    const target = useRef<HTMLDivElement | null>(null);\n    const animationFrameID = useRef(0);\n\n    const [state, setState] = useState<ParentSizeState>({\n      height: 0,\n      left: 0,\n      top: 0,\n      width: 0,\n    });\n\n    const resize = useMemo(() => {\n      const normalized = Array.isArray(ignoreDimensions) ? ignoreDimensions : [ignoreDimensions];\n\n      return debounce(\n        (incoming: ParentSizeState) => {\n          setState((existing) => {\n            const stateKeys = Object.keys(existing) as (keyof ParentSizeState)[];\n            const keysWithChanges = stateKeys.filter((key) => existing[key] !== incoming[key]);\n            const shouldBail = keysWithChanges.every((key) => normalized.includes(key));\n\n            return shouldBail ? existing : incoming;\n          });\n        },\n        debounceTime,\n        { leading: enableDebounceLeadingCall },\n      );\n    }, [debounceTime, enableDebounceLeadingCall, ignoreDimensions]);\n\n    useEffect(() => {\n      const LocalResizeObserver =\n        resizeObserverPolyfill || (window as unknown as PrivateWindow).ResizeObserver;\n\n      const observer = new LocalResizeObserver((entries) => {\n        for (const entry of entries) {\n          const { left, top, width, height } = entry?.contentRect ?? {};\n          animationFrameID.current = window.requestAnimationFrame(() => {\n            resize({ height, left, top, width });\n          });\n        }\n      });\n      if (target.current) observer.observe(target.current);\n\n      return () => {\n        window.cancelAnimationFrame(animationFrameID.current);\n        observer.disconnect();\n        resize.cancel();\n      };\n    }, [resize, resizeObserverPolyfill]);\n\n    return (\n      <div\n        className={className}\n        ref={mergeRefs<HTMLDivElement>([ref, target])}\n        style={{ ...defaultParentSizeStyles, ...parentSizeStyles }}\n        {...restProps}\n      >\n        {children({\n          ...state,\n          ref: target.current,\n          resize,\n        })}\n      </div>\n    );\n  },\n);\n\nexport default ParentSize;\n"],"mappings":";;;;;;AA0DA,MAAMA,0BAA+D,EAAE;AACvE,MAAM,0BAA0B;CAAE,QAAQ;CAAQ,OAAO;CAAQ;AAEjE,MAAM,aAAa,MAChB,EACC,KACA,WACA,UACA,eAAe,KACf,mBAAmB,yBACnB,kBACA,4BAA4B,MAC5B,wBACA,GAAG,gBACC;CACJ,MAAM,SAAS,OAA8B,KAAK;CAClD,MAAM,mBAAmB,OAAO,EAAE;CAElC,MAAM,CAAC,OAAO,YAAY,SAA0B;EAClD,QAAQ;EACR,MAAM;EACN,KAAK;EACL,OAAO;EACR,CAAC;CAEF,MAAM,SAAS,cAAc;EAC3B,MAAM,aAAa,MAAM,QAAQ,iBAAiB,GAAG,mBAAmB,CAAC,iBAAiB;AAE1F,SAAO,UACJ,aAA8B;AAC7B,aAAU,aAAa;AAKrB,WAJkB,OAAO,KAAK,SAAS,CACL,QAAQ,QAAQ,SAAS,SAAS,SAAS,KAAK,CAC/C,OAAO,QAAQ,WAAW,SAAS,IAAI,CAAC,GAEvD,WAAW;KAC/B;KAEJ,cACA,EAAE,SAAS,2BAA2B,CACvC;IACA;EAAC;EAAc;EAA2B;EAAiB,CAAC;AAE/D,iBAAgB;EAId,MAAM,WAAW,KAFf,0BAA2B,OAAoC,iBAEvB,YAAY;AACpD,QAAK,MAAM,SAAS,SAAS;IAC3B,MAAM,EAAE,MAAM,KAAK,OAAO,WAAW,OAAO,eAAe,EAAE;AAC7D,qBAAiB,UAAU,OAAO,4BAA4B;AAC5D,YAAO;MAAE;MAAQ;MAAM;MAAK;MAAO,CAAC;MACpC;;IAEJ;AACF,MAAI,OAAO,QAAS,UAAS,QAAQ,OAAO,QAAQ;AAEpD,eAAa;AACX,UAAO,qBAAqB,iBAAiB,QAAQ;AACrD,YAAS,YAAY;AACrB,UAAO,QAAQ;;IAEhB,CAAC,QAAQ,uBAAuB,CAAC;AAEpC,QACE,oBAAC;EACY;EACX,KAAK,UAA0B,CAAC,KAAK,OAAO,CAAC;EAC7C,OAAO;GAAE,GAAG;GAAyB,GAAG;GAAkB;EAC1D,GAAI;YAEH,SAAS;GACR,GAAG;GACH,KAAK,OAAO;GACZ;GACD,CAAC;GACE;EAGX;AAED,yBAAe"}

package/es/awesome/Spline/Spine.d.mts

@@ -0,0 +1,3 @@
+import "./type.mjs";
+import "react";
+import "@splinetool/runtime";

package/es/awesome/Spline/Spine.mjs

@@ -0,0 +1,86 @@
+'use client';
+
+import ParentSize_default from "./ParentSize.mjs";
+import { memo, useEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Application } from "@splinetool/runtime";
+
+//#region src/awesome/Spline/Spine.tsx
+const Spline = memo(({ ref, scene, style, onMouseDown, onMouseUp, onMouseHover, onKeyDown, onKeyUp, onStart, onLookAt, onFollow, onWheel, onLoad, renderOnDemand = true, ...props }) => {
+	const canvasRef = useRef(null);
+	const [isLoading, setIsLoading] = useState(true);
+	const init = async (speApp, events) => {
+		await speApp.load(scene);
+		for (let event of events) if (event.cb) speApp.addEventListener(event.name, event.cb);
+		setIsLoading(false);
+		onLoad?.(speApp);
+	};
+	useEffect(() => {
+		setIsLoading(true);
+		let speApp;
+		const events = [
+			{
+				cb: onMouseDown,
+				name: "mouseDown"
+			},
+			{
+				cb: onMouseUp,
+				name: "mouseUp"
+			},
+			{
+				cb: onMouseHover,
+				name: "mouseHover"
+			},
+			{
+				cb: onKeyDown,
+				name: "keyDown"
+			},
+			{
+				cb: onKeyUp,
+				name: "keyUp"
+			},
+			{
+				cb: onStart,
+				name: "start"
+			},
+			{
+				cb: onLookAt,
+				name: "lookAt"
+			},
+			{
+				cb: onFollow,
+				name: "follow"
+			},
+			{
+				cb: onWheel,
+				name: "scroll"
+			}
+		];
+		if (canvasRef.current) {
+			speApp = new Application(canvasRef.current, { renderOnDemand });
+			init(speApp, events);
+		}
+		return () => {
+			for (let event of events) if (event.cb) speApp.removeEventListener(event.name, event.cb);
+			speApp.dispose();
+		};
+	}, [scene]);
+	return /* @__PURE__ */ jsx(ParentSize_default, {
+		debounceTime: 50,
+		parentSizeStyles: style,
+		ref,
+		...props,
+		children: () => {
+			return /* @__PURE__ */ jsx("canvas", {
+				ref: canvasRef,
+				style: { display: isLoading ? "none" : "block" }
+			});
+		}
+	});
+});
+Spline.displayName = "Spline";
+var Spine_default = Spline;
+
+//#endregion
+export { Spine_default as default };
+//# sourceMappingURL=Spine.mjs.map

package/es/awesome/Spline/Spine.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spine.mjs","names":["speApp: Application","events: {\n        cb?: (e: SplineEvent) => void;\n        name: SplineEventName;\n      }[]","ParentSize"],"sources":["../../../src/awesome/Spline/Spine.tsx"],"sourcesContent":["'use client';\n\nimport { Application } from '@splinetool/runtime';\nimport type { SplineEvent, SplineEventName } from '@splinetool/runtime';\nimport { memo, useEffect, useRef, useState } from 'react';\n\nimport ParentSize from './ParentSize';\nimport type { SplineProps } from './type';\n\nconst Spline = memo<SplineProps>(\n  ({\n    ref,\n    scene,\n    style,\n    onMouseDown,\n    onMouseUp,\n    onMouseHover,\n    onKeyDown,\n    onKeyUp,\n    onStart,\n    onLookAt,\n    onFollow,\n    onWheel,\n    onLoad,\n    renderOnDemand = true,\n    ...props\n  }) => {\n    const canvasRef = useRef<HTMLCanvasElement>(null);\n    const [isLoading, setIsLoading] = useState(true);\n\n    const init = async (\n      speApp: Application,\n      events: {\n        cb?: (e: SplineEvent) => void;\n        name: SplineEventName;\n      }[],\n    ) => {\n      await speApp.load(scene);\n\n      for (let event of events) {\n        if (event.cb) {\n          speApp.addEventListener(event.name, event.cb);\n        }\n      }\n\n      setIsLoading(false);\n      onLoad?.(speApp);\n    };\n\n    // Initialize runtime when component is mounted\n    useEffect(() => {\n      setIsLoading(true);\n\n      let speApp: Application;\n      const events: {\n        cb?: (e: SplineEvent) => void;\n        name: SplineEventName;\n      }[] = [\n        {\n          cb: onMouseDown,\n          name: 'mouseDown',\n        },\n        {\n          cb: onMouseUp,\n          name: 'mouseUp',\n        },\n        {\n          cb: onMouseHover,\n          name: 'mouseHover',\n        },\n        {\n          cb: onKeyDown,\n          name: 'keyDown',\n        },\n        {\n          cb: onKeyUp,\n          name: 'keyUp',\n        },\n        {\n          cb: onStart,\n          name: 'start',\n        },\n        {\n          cb: onLookAt,\n          name: 'lookAt',\n        },\n        {\n          cb: onFollow,\n          name: 'follow',\n        },\n        {\n          cb: onWheel,\n          name: 'scroll',\n        },\n      ];\n\n      if (canvasRef.current) {\n        speApp = new Application(canvasRef.current, { renderOnDemand });\n        init(speApp, events);\n      }\n\n      return () => {\n        for (let event of events) {\n          if (event.cb) {\n            speApp.removeEventListener(event.name, event.cb);\n          }\n        }\n        speApp.dispose();\n      };\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [scene]);\n\n    return (\n      <ParentSize debounceTime={50} parentSizeStyles={style} ref={ref} {...props}>\n        {() => {\n          return (\n            <canvas\n              ref={canvasRef}\n              style={{\n                display: isLoading ? 'none' : 'block',\n              }}\n            />\n          );\n        }}\n      </ParentSize>\n    );\n  },\n);\n\nSpline.displayName = 'Spline';\n\nexport default Spline;\n\nexport { type SPEObject, type SplineEvent, type SplineEventName } from '@splinetool/runtime';\n"],"mappings":";;;;;;;;AASA,MAAM,SAAS,MACZ,EACC,KACA,OACA,OACA,aACA,WACA,cACA,WACA,SACA,SACA,UACA,UACA,SACA,QACA,iBAAiB,MACjB,GAAG,YACC;CACJ,MAAM,YAAY,OAA0B,KAAK;CACjD,MAAM,CAAC,WAAW,gBAAgB,SAAS,KAAK;CAEhD,MAAM,OAAO,OACX,QACA,WAIG;AACH,QAAM,OAAO,KAAK,MAAM;AAExB,OAAK,IAAI,SAAS,OAChB,KAAI,MAAM,GACR,QAAO,iBAAiB,MAAM,MAAM,MAAM,GAAG;AAIjD,eAAa,MAAM;AACnB,WAAS,OAAO;;AAIlB,iBAAgB;AACd,eAAa,KAAK;EAElB,IAAIA;EACJ,MAAMC,SAGA;GACJ;IACE,IAAI;IACJ,MAAM;IACP;GACD;IACE,IAAI;IACJ,MAAM;IACP;GACD;IACE,IAAI;IACJ,MAAM;IACP;GACD;IACE,IAAI;IACJ,MAAM;IACP;GACD;IACE,IAAI;IACJ,MAAM;IACP;GACD;IACE,IAAI;IACJ,MAAM;IACP;GACD;IACE,IAAI;IACJ,MAAM;IACP;GACD;IACE,IAAI;IACJ,MAAM;IACP;GACD;IACE,IAAI;IACJ,MAAM;IACP;GACF;AAED,MAAI,UAAU,SAAS;AACrB,YAAS,IAAI,YAAY,UAAU,SAAS,EAAE,gBAAgB,CAAC;AAC/D,QAAK,QAAQ,OAAO;;AAGtB,eAAa;AACX,QAAK,IAAI,SAAS,OAChB,KAAI,MAAM,GACR,QAAO,oBAAoB,MAAM,MAAM,MAAM,GAAG;AAGpD,UAAO,SAAS;;IAGjB,CAAC,MAAM,CAAC;AAEX,QACE,oBAACC;EAAW,cAAc;EAAI,kBAAkB;EAAY;EAAK,GAAI;kBAC5D;AACL,UACE,oBAAC;IACC,KAAK;IACL,OAAO,EACL,SAAS,YAAY,SAAS,SAC/B;KACD;;GAGK;EAGlB;AAED,OAAO,cAAc;AAErB,oBAAe"}