@hunterchen/canvas 0.8.0 → 0.9.0

package/dist/components/canvas/backgrounds.js

@@ -1,47 +1,76 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { canvasHeight, canvasWidth } from "../../lib/canvas.js";
+import { cn } from "../../lib/utils.js";
 import { motion } from "framer-motion";
-import { canvasWidth, canvasHeight } from "../../lib/canvas";
-import { cn } from "../../lib/utils";
+import React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/canvas/backgrounds.tsx
 /** The default canvas gradient (neutral light gray) */
-export const DEFAULT_CANVAS_GRADIENT = `radial-gradient(ellipse ${canvasWidth}px ${canvasHeight}px at ${canvasWidth / 2}px ${canvasHeight}px, #fafafa 0%, #f5f5f5 41%, #e5e5e5 59%, #fafafa 90%)`;
+const DEFAULT_CANVAS_GRADIENT = `radial-gradient(ellipse ${canvasWidth}px ${canvasHeight}px at ${canvasWidth / 2}px ${canvasHeight}px, #fafafa 0%, #f5f5f5 41%, #e5e5e5 59%, #fafafa 90%)`;
 /**
- * Default canvas background with gradient, dots, and noise filter.
- * All aspects are customizable via props.
- */
-export const DefaultCanvasBackground = ({ gradientStyle, showDots = true, dotColor = "#a3a3a3", dotSize = 1.5, dotSpacing = 22, dotOpacity = 0.35, showFilter = true, filterOpacity = 0.6, gradientClassName, dotsClassName, filterClassName, children, }) => {
-    const gradientImage = gradientStyle ?? DEFAULT_CANVAS_GRADIENT;
-    return (_jsxs(_Fragment, { children: [_jsx("div", { className: cn("pointer-events-none absolute inset-0 h-full w-full", gradientClassName), style: {
-                    backgroundImage: gradientImage,
-                } }), showDots && (_jsx("div", { className: cn("pointer-events-none absolute inset-0 h-full w-full", dotsClassName), style: {
-                    backgroundImage: `radial-gradient(${dotColor} ${dotSize}px, transparent ${dotSize}px)`,
-                    backgroundSize: `${dotSpacing}px ${dotSpacing}px`,
-                    opacity: dotOpacity,
-                } })), showFilter && (_jsx("div", { className: cn("pointer-events-none absolute inset-0 hidden h-full w-full bg-none filter md:inline md:bg-noise", filterClassName), style: {
-                    opacity: filterOpacity,
-                    filter: "contrast(0.6)",
-                } })), children] }));
+* Default canvas background with gradient, dots, and noise filter.
+* All aspects are customizable via props.
+*/
+const DefaultCanvasBackground = ({ gradientStyle, showDots = true, dotColor = "#a3a3a3", dotSize = 1.5, dotSpacing = 22, dotOpacity = .35, showFilter = true, filterOpacity = .6, gradientClassName, dotsClassName, filterClassName, children }) => {
+	const gradientImage = gradientStyle ?? DEFAULT_CANVAS_GRADIENT;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx("div", {
+			className: cn("pointer-events-none absolute inset-0 h-full w-full", gradientClassName),
+			style: { backgroundImage: gradientImage }
+		}),
+		showDots && /* @__PURE__ */ jsx("div", {
+			className: cn("pointer-events-none absolute inset-0 h-full w-full", dotsClassName),
+			style: {
+				backgroundImage: `radial-gradient(${dotColor} ${dotSize}px, transparent ${dotSize}px)`,
+				backgroundSize: `${dotSpacing}px ${dotSpacing}px`,
+				opacity: dotOpacity
+			}
+		}),
+		showFilter && /* @__PURE__ */ jsx("div", {
+			className: cn("pointer-events-none absolute inset-0 hidden h-full w-full bg-none filter md:inline md:bg-noise", filterClassName),
+			style: {
+				opacity: filterOpacity,
+				filter: "contrast(0.6)"
+			}
+		}),
+		children
+	] });
 };
 /**
- * Default wrapper/intro background gradient.
- */
-export const DefaultWrapperBackground = ({ gradient = "linear-gradient(to top, #f5f5f5 0%, #fafafa 50%, #ffffff 100%)", className, style, }) => {
-    return (_jsx("div", { className: cn("absolute inset-0 h-full w-full", className), style: {
-            backgroundImage: gradient,
-            ...style,
-        } }));
+* Default wrapper/intro background gradient.
+*/
+const DefaultWrapperBackground = ({ gradient = "linear-gradient(to top, #f5f5f5 0%, #fafafa 50%, #ffffff 100%)", className, style }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("absolute inset-0 h-full w-full", className),
+		style: {
+			backgroundImage: gradient,
+			...style
+		}
+	});
 };
 /**
- * Default intro content shown during loading.
- * Can be customized or replaced entirely.
- */
-export const DefaultIntroContent = ({ logoSrc, logoAlt = "Logo", logoWidth = 64, logoHeight = 64, title, className, titleClassName, }) => {
-    // If no logo or title provided, render nothing
-    if (!logoSrc && !title) {
-        return null;
-    }
-    return (_jsxs("div", { className: cn("absolute left-1/2 top-24 flex -translate-x-1/2 flex-col items-center text-center", className), children: [logoSrc && (_jsx(motion.img, { src: logoSrc, alt: logoAlt, width: logoWidth, height: logoHeight, className: "mb-4" })), title && (_jsx("div", { className: cn("font-sans font-semibold text-neutral-600", titleClassName), children: title }))] }));
+* Default intro content shown during loading.
+* Can be customized or replaced entirely.
+*/
+const DefaultIntroContent = ({ logoSrc, logoAlt = "Logo", logoWidth = 64, logoHeight = 64, title, className, titleClassName }) => {
+	if (!logoSrc && !title) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("absolute left-1/2 top-24 flex -translate-x-1/2 flex-col items-center text-center", className),
+		children: [logoSrc && /* @__PURE__ */ jsx(motion.img, {
+			src: logoSrc,
+			alt: logoAlt,
+			width: logoWidth,
+			height: logoHeight,
+			className: "mb-4"
+		}), title && /* @__PURE__ */ jsx("div", {
+			className: cn("font-sans font-semibold text-neutral-600", titleClassName),
+			children: title
+		})]
+	});
 };
-// Default gradient values for export (neutral light grays)
-export const DEFAULT_INTRO_GRADIENT = "linear-gradient(to top, #f5f5f5 0%, #fafafa 50%, #ffffff 100%)";
-export const DEFAULT_CANVAS_BOX_GRADIENT = "radial-gradient(130.38% 95% at 50.03% 97.25%, #f5f5f5 0%, #fafafa 48.09%, #ffffff 100%)";
+const DEFAULT_INTRO_GRADIENT = "linear-gradient(to top, #f5f5f5 0%, #fafafa 50%, #ffffff 100%)";
+const DEFAULT_CANVAS_BOX_GRADIENT = "radial-gradient(130.38% 95% at 50.03% 97.25%, #f5f5f5 0%, #fafafa 48.09%, #ffffff 100%)";
+
+//#endregion
+export { DEFAULT_CANVAS_BOX_GRADIENT, DEFAULT_CANVAS_GRADIENT, DEFAULT_INTRO_GRADIENT, DefaultCanvasBackground, DefaultIntroContent, DefaultWrapperBackground };
 //# sourceMappingURL=backgrounds.js.map

package/dist/components/canvas/backgrounds.js.map

@@ -1 +1 @@
-{"version":3,"file":"backgrounds.js","sourceRoot":"","sources":["../../../src/components/canvas/backgrounds.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"backgrounds.js","names":[],"sources":["../../../src/components/canvas/backgrounds.tsx"],"sourcesContent":["import React, { type ReactNode } from \"react\";\nimport { motion } from \"framer-motion\";\nimport { canvasWidth, canvasHeight } from \"../../lib/canvas\";\nimport { cn } from \"../../lib/utils\";\n\n// ============== Canvas Background ==============\n\nexport interface DefaultCanvasBackgroundProps {\n  /** Custom gradient CSS string. If not provided, uses the default radial gradient. */\n  gradientStyle?: string;\n  /** Whether to show the dot pattern. Default: true */\n  showDots?: boolean;\n  /** Dot pattern color. Default: #888888 */\n  dotColor?: string;\n  /** Dot pattern size in pixels. Default: 1.5 */\n  dotSize?: number;\n  /** Dot pattern spacing in pixels. Default: 22 */\n  dotSpacing?: number;\n  /** Dot pattern opacity (0-1). Default: 0.35 */\n  dotOpacity?: number;\n  /** Whether to show the noise filter. Default: true */\n  showFilter?: boolean;\n  /** Filter opacity (0-1). Default: 0.6 */\n  filterOpacity?: number;\n  /** Additional className for the gradient layer */\n  gradientClassName?: string;\n  /** Additional className for the dots layer */\n  dotsClassName?: string;\n  /** Additional className for the filter layer */\n  filterClassName?: string;\n  /** Additional children to render in the background */\n  children?: ReactNode;\n}\n\n/** The default canvas gradient (neutral light gray) */\nexport const DEFAULT_CANVAS_GRADIENT = `radial-gradient(ellipse ${canvasWidth}px ${canvasHeight}px at ${canvasWidth / 2}px ${canvasHeight}px, #fafafa 0%, #f5f5f5 41%, #e5e5e5 59%, #fafafa 90%)`;\n\n/**\n * Default canvas background with gradient, dots, and noise filter.\n * All aspects are customizable via props.\n */\nexport const DefaultCanvasBackground: React.FC<DefaultCanvasBackgroundProps> = ({\n  gradientStyle,\n  showDots = true,\n  dotColor = \"#a3a3a3\",\n  dotSize = 1.5,\n  dotSpacing = 22,\n  dotOpacity = 0.35,\n  showFilter = true,\n  filterOpacity = 0.6,\n  gradientClassName,\n  dotsClassName,\n  filterClassName,\n  children,\n}) => {\n  const gradientImage = gradientStyle ?? DEFAULT_CANVAS_GRADIENT;\n\n  return (\n    <>\n      {/* Gradient layer */}\n      <div\n        className={cn(\n          \"pointer-events-none absolute inset-0 h-full w-full\",\n          gradientClassName\n        )}\n        style={{\n          backgroundImage: gradientImage,\n        }}\n      />\n\n      {/* Dots layer */}\n      {showDots && (\n        <div\n          className={cn(\n            \"pointer-events-none absolute inset-0 h-full w-full\",\n            dotsClassName\n          )}\n          style={{\n            backgroundImage: `radial-gradient(${dotColor} ${dotSize}px, transparent ${dotSize}px)`,\n            backgroundSize: `${dotSpacing}px ${dotSpacing}px`,\n            opacity: dotOpacity,\n          }}\n        />\n      )}\n\n      {/* Filter/noise layer */}\n      {showFilter && (\n        <div\n          className={cn(\n            \"pointer-events-none absolute inset-0 hidden h-full w-full bg-none filter md:inline md:bg-noise\",\n            filterClassName\n          )}\n          style={{\n            opacity: filterOpacity,\n            filter: \"contrast(0.6)\",\n          }}\n        />\n      )}\n\n      {children}\n    </>\n  );\n};\n\n// ============== Wrapper/Intro Background ==============\n\nexport interface DefaultWrapperBackgroundProps {\n  /** Background gradient for the intro screen */\n  gradient?: string;\n  /** Additional className */\n  className?: string;\n  /** Additional inline styles */\n  style?: React.CSSProperties;\n}\n\n/**\n * Default wrapper/intro background gradient.\n */\nexport const DefaultWrapperBackground: React.FC<DefaultWrapperBackgroundProps> = ({\n  gradient = \"linear-gradient(to top, #f5f5f5 0%, #fafafa 50%, #ffffff 100%)\",\n  className,\n  style,\n}) => {\n  return (\n    <div\n      className={cn(\"absolute inset-0 h-full w-full\", className)}\n      style={{\n        backgroundImage: gradient,\n        ...style,\n      }}\n    />\n  );\n};\n\nexport interface DefaultIntroContentProps {\n  /** Logo image source */\n  logoSrc?: string;\n  /** Logo alt text */\n  logoAlt?: string;\n  /** Logo width */\n  logoWidth?: number;\n  /** Logo height */\n  logoHeight?: number;\n  /** Title text */\n  title?: string;\n  /** Additional className for the container */\n  className?: string;\n  /** Additional className for the title */\n  titleClassName?: string;\n}\n\n/**\n * Default intro content shown during loading.\n * Can be customized or replaced entirely.\n */\nexport const DefaultIntroContent: React.FC<DefaultIntroContentProps> = ({\n  logoSrc,\n  logoAlt = \"Logo\",\n  logoWidth = 64,\n  logoHeight = 64,\n  title,\n  className,\n  titleClassName,\n}) => {\n  // If no logo or title provided, render nothing\n  if (!logoSrc && !title) {\n    return null;\n  }\n\n  return (\n    <div\n      className={cn(\n        \"absolute left-1/2 top-24 flex -translate-x-1/2 flex-col items-center text-center\",\n        className\n      )}\n    >\n      {logoSrc && (\n        <motion.img\n          src={logoSrc}\n          alt={logoAlt}\n          width={logoWidth}\n          height={logoHeight}\n          className=\"mb-4\"\n        />\n      )}\n      {title && (\n        <div\n          className={cn(\n            \"font-sans font-semibold text-neutral-600\",\n            titleClassName\n          )}\n        >\n          {title}\n        </div>\n      )}\n    </div>\n  );\n};\n\n// Default gradient values for export (neutral light grays)\nexport const DEFAULT_INTRO_GRADIENT =\n  \"linear-gradient(to top, #f5f5f5 0%, #fafafa 50%, #ffffff 100%)\";\n\nexport const DEFAULT_CANVAS_BOX_GRADIENT =\n  \"radial-gradient(130.38% 95% at 50.03% 97.25%, #f5f5f5 0%, #fafafa 48.09%, #ffffff 100%)\";\n"],"mappings":";;;;;;;;AAmCA,MAAa,0BAA0B,2BAA2B,YAAY,KAAK,aAAa,QAAQ,cAAc,EAAE,KAAK,aAAa;;;;;AAM1I,MAAa,2BAAmE,EAC9E,eACA,WAAW,MACX,WAAW,WACX,UAAU,KACV,aAAa,IACb,aAAa,KACb,aAAa,MACb,gBAAgB,IAChB,mBACA,eACA,iBACA,eACI;CACJ,MAAM,gBAAgB,iBAAiB;AAEvC,QACE;EAEE,oBAAC;GACC,WAAW,GACT,sDACA,kBACD;GACD,OAAO,EACL,iBAAiB,eAClB;IACD;EAGD,YACC,oBAAC;GACC,WAAW,GACT,sDACA,cACD;GACD,OAAO;IACL,iBAAiB,mBAAmB,SAAS,GAAG,QAAQ,kBAAkB,QAAQ;IAClF,gBAAgB,GAAG,WAAW,KAAK,WAAW;IAC9C,SAAS;IACV;IACD;EAIH,cACC,oBAAC;GACC,WAAW,GACT,kGACA,gBACD;GACD,OAAO;IACL,SAAS;IACT,QAAQ;IACT;IACD;EAGH;KACA;;;;;AAkBP,MAAa,4BAAqE,EAChF,WAAW,kEACX,WACA,YACI;AACJ,QACE,oBAAC;EACC,WAAW,GAAG,kCAAkC,UAAU;EAC1D,OAAO;GACL,iBAAiB;GACjB,GAAG;GACJ;GACD;;;;;;AAyBN,MAAa,uBAA2D,EACtE,SACA,UAAU,QACV,YAAY,IACZ,aAAa,IACb,OACA,WACA,qBACI;AAEJ,KAAI,CAAC,WAAW,CAAC,MACf,QAAO;AAGT,QACE,qBAAC;EACC,WAAW,GACT,oFACA,UACD;aAEA,WACC,oBAAC,OAAO;GACN,KAAK;GACL,KAAK;GACL,OAAO;GACP,QAAQ;GACR,WAAU;IACV,EAEH,SACC,oBAAC;GACC,WAAW,GACT,4CACA,eACD;aAEA;IACG;GAEJ;;AAKV,MAAa,yBACX;AAEF,MAAa,8BACX"}