npm - erp-pro-ui - Versions diffs - 0.1.5 → 0.1.7 - Mend

erp-pro-ui 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.

Files changed (445) hide show

package/dist/chunks/{accordion-CxJYq_6x.cjs → accordion-CmB6EidC.cjs} RENAMED Viewed

@@ -1,5 +1,5 @@
 require("./chunk-B_GkZjkl.cjs");
-const require_icons = require("./icons-CaNIzMf3.cjs");
+const require_icons = require("./icons-CRanVZB1.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/components/navigation/accordion/Accordion.tsx
@@ -25,10 +25,10 @@ var Accordion = ({ items, type = "single", defaultOpenIds = type === "single" &&
 		children: items.map((item) => {
 			const open = openItems.includes(item.id);
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: cx("rounded-xl backdrop-blur-2xl transition-all duration-300", "bg-white/60 border border-white/40 shadow-lg shadow-neutral-200/50", "dark:bg-neutral-900/50 dark:border-white/10 dark:shadow-neutral-950/50", "hover:bg-white/80 hover:shadow-xl hover:border-white/60", "dark:hover:bg-neutral-800/60 dark:hover:border-white/20", open && "ring-2 ring-focus/40", separated ? "p-0" : ""),
+				className: cx("rounded-xl border border-ds-border-2 bg-ds-surface-1 backdrop-blur-2xl transition-all duration-300", "hover:border-ds-border-1 hover:bg-ds-surface-2", open && "ring-2 ring-ds-focus/40", separated ? "p-0" : ""),
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 					type: "button",
-					className: cx("flex w-full items-center justify-between gap-4 px-5 py-4 rounded-xl transition-colors duration-200", "text-neutral-700 dark:text-neutral-200", "hover:bg-white/40 dark:hover:bg-white/5", separated ? "border-b border-neutral-200/50 dark:border-white/10" : "", item.disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"),
+					className: cx("flex w-full items-center justify-between gap-4 px-5 py-4 rounded-xl transition-colors duration-200", "text-ds-1 hover:bg-ds-surface-2", separated ? "border-b border-ds-border-2" : "", item.disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"),
 					"aria-expanded": open,
 					"aria-controls": `${item.id}-content`,
 					id: `${item.id}-trigger`,
@@ -37,14 +37,14 @@ var Accordion = ({ items, type = "single", defaultOpenIds = type === "single" &&
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "text-left flex-1",
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-							className: "text-base font-semibold text-neutral-900 dark:text-white",
+							className: "text-base font-semibold text-ds-1",
 							children: item.title
 						}), item.description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-							className: "text-sm text-neutral-500 dark:text-neutral-400 mt-0.5",
+							className: "mt-0.5 text-sm text-ds-2",
 							children: item.description
 						})]
 					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: cx("p-1.5 rounded-lg transition-all duration-300", "bg-neutral-100/80 dark:bg-white/10", "text-neutral-600 dark:text-neutral-300", open && "rotate-180 bg-accent-subtle text-accent"),
+						className: cx("p-1.5 rounded-lg transition-all duration-300", "bg-ds-surface-2 text-ds-2", open && "rotate-180 bg-ds-accent-subtle text-ds-1"),
 						children: caret
 					})]
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -53,7 +53,7 @@ var Accordion = ({ items, type = "single", defaultOpenIds = type === "single" &&
 					"aria-labelledby": `${item.id}-trigger`,
 					className: cx("overflow-hidden transition-all duration-300 ease-in-out", open ? "max-h-[1000px] opacity-100" : "max-h-0 opacity-0"),
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "px-5 pb-5 pt-2 text-sm text-neutral-600 dark:text-neutral-300 leading-relaxed",
+						className: "px-5 pb-5 pt-2 text-sm leading-relaxed text-ds-2",
 						children: item.content
 					})
 				})]
@@ -69,4 +69,4 @@ Object.defineProperty(exports, "Accordion", {
 	}
 });
-//# sourceMappingURL=accordion-CxJYq_6x.cjs.map
+//# sourceMappingURL=accordion-CmB6EidC.cjs.map

package/dist/chunks/accordion-CmB6EidC.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"accordion-CmB6EidC.cjs","names":[],"sources":["../../src/components/navigation/accordion/Accordion.tsx"],"sourcesContent":["import { useState } from \"react\";\n\nimport { ChevronDownIcon } from \"../../icons\";\nimport type { AccordionProps } from \"./types\";\n\nconst cx = (...classes: Array<string | false | undefined>) =>\n classes.filter(Boolean).join(\" \").replace(/\\s+/g, \" \").trim();\n\nconst caret = (\n <ChevronDownIcon\n className=\"h-5 w-5 transition-transform duration-300\"\n aria-hidden=\"true\"\n />\n);\n\nexport const Accordion = ({\n items,\n type = \"single\",\n defaultOpenIds = type === \"single\" && items.length ? [items[0].id] : [],\n value,\n onValueChange,\n className = \"\",\n separated = false,\n}: AccordionProps) => {\n const [internalOpen, setInternalOpen] = useState<string[]>(defaultOpenIds);\n const controlled = Array.isArray(value);\n const openItems = controlled ? value! : internalOpen;\n\n const toggleItem = (id: string) => {\n let next: string[];\n const isOpen = openItems.includes(id);\n\n if (type === \"single\") {\n next = isOpen ? [] : [id];\n } else {\n next = isOpen\n ? openItems.filter((openId) => openId !== id)\n : [...openItems, id];\n }\n\n if (!controlled) {\n setInternalOpen(next);\n }\n onValueChange?.(next);\n };\n\n return (\n <div className={cx(\"space-y-3\", className)}>\n {items.map((item) => {\n const open = openItems.includes(item.id);\n return (\n <div\n key={item.id}\n className={cx(\n \"rounded-xl border border-ds-border-2 bg-ds-surface-1 backdrop-blur-2xl transition-all duration-300\",\n \"hover:border-ds-border-1 hover:bg-ds-surface-2\",\n // Ring highlight on open\n open && \"ring-2 ring-ds-focus/40\",\n separated ? \"p-0\" : \"\",\n )}\n >\n <button\n type=\"button\"\n className={cx(\n \"flex w-full items-center justify-between gap-4 px-5 py-4 rounded-xl transition-colors duration-200\",\n \"text-ds-1 hover:bg-ds-surface-2\",\n separated ? \"border-b border-ds-border-2\" : \"\",\n item.disabled\n ? \"opacity-50 cursor-not-allowed\"\n : \"cursor-pointer\",\n )}\n aria-expanded={open}\n aria-controls={`${item.id}-content`}\n id={`${item.id}-trigger`}\n onClick={() => !item.disabled && toggleItem(item.id)}\n disabled={item.disabled}\n >\n <div className=\"text-left flex-1\">\n <p className=\"text-base font-semibold text-ds-1\">\n {item.title}\n </p>\n {item.description && (\n <p className=\"mt-0.5 text-sm text-ds-2\">{item.description}</p>\n )}\n </div>\n <span\n className={cx(\n \"p-1.5 rounded-lg transition-all duration-300\",\n \"bg-ds-surface-2 text-ds-2\",\n open && \"rotate-180 bg-ds-accent-subtle text-ds-1\",\n )}\n >\n {caret}\n </span>\n </button>\n <div\n id={`${item.id}-content`}\n role=\"region\"\n aria-labelledby={`${item.id}-trigger`}\n className={cx(\n \"overflow-hidden transition-all duration-300 ease-in-out\",\n open ? \"max-h-[1000px] opacity-100\" : \"max-h-0 opacity-0\",\n )}\n >\n <div className=\"px-5 pb-5 pt-2 text-sm leading-relaxed text-ds-2\">\n {item.content}\n </div>\n </div>\n </div>\n );\n })}\n </div>\n );\n};\n"],"mappings":";;;;;AAKA,IAAM,MAAM,GAAG,YACb,QAAQ,OAAO,QAAQ,CAAC,KAAK,IAAI,CAAC,QAAQ,QAAQ,IAAI,CAAC,MAAM;AAE/D,IAAM,QACJ,iBAAA,GAAA,kBAAA,KAAC,cAAA,iBAAD;CACE,WAAU;CACV,eAAY;CACZ,CAAA;AAGJ,IAAa,aAAa,EACxB,OACA,OAAO,UACP,iBAAiB,SAAS,YAAY,MAAM,SAAS,CAAC,MAAM,GAAG,GAAG,GAAG,EAAE,EACvE,OACA,eACA,YAAY,IACZ,YAAY,YACQ;CACpB,MAAM,CAAC,cAAc,oBAAA,GAAA,MAAA,UAAsC,eAAe;CAC1E,MAAM,aAAa,MAAM,QAAQ,MAAM;CACvC,MAAM,YAAY,aAAa,QAAS;CAExC,MAAM,cAAc,OAAe;EACjC,IAAI;EACJ,MAAM,SAAS,UAAU,SAAS,GAAG;AAErC,MAAI,SAAS,SACX,QAAO,SAAS,EAAE,GAAG,CAAC,GAAG;MAEzB,QAAO,SACH,UAAU,QAAQ,WAAW,WAAW,GAAG,GAC3C,CAAC,GAAG,WAAW,GAAG;AAGxB,MAAI,CAAC,WACH,iBAAgB,KAAK;AAEvB,kBAAgB,KAAK;;AAGvB,QACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAK,WAAW,GAAG,aAAa,UAAU;YACvC,MAAM,KAAK,SAAS;GACnB,MAAM,OAAO,UAAU,SAAS,KAAK,GAAG;AACxC,UACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;IAEE,WAAW,GACT,sGACA,kDAEA,QAAQ,2BACR,YAAY,QAAQ,GACrB;cARH,CAUE,iBAAA,GAAA,kBAAA,MAAC,UAAD;KACE,MAAK;KACL,WAAW,GACT,sGACA,mCACA,YAAY,gCAAgC,IAC5C,KAAK,WACD,kCACA,iBACL;KACD,iBAAe;KACf,iBAAe,GAAG,KAAK,GAAG;KAC1B,IAAI,GAAG,KAAK,GAAG;KACf,eAAe,CAAC,KAAK,YAAY,WAAW,KAAK,GAAG;KACpD,UAAU,KAAK;eAdjB,CAgBE,iBAAA,GAAA,kBAAA,MAAC,OAAD;MAAK,WAAU;gBAAf,CACE,iBAAA,GAAA,kBAAA,KAAC,KAAD;OAAG,WAAU;iBACV,KAAK;OACJ,CAAA,EACH,KAAK,eACJ,iBAAA,GAAA,kBAAA,KAAC,KAAD;OAAG,WAAU;iBAA4B,KAAK;OAAgB,CAAA,CAE5D;SACN,iBAAA,GAAA,kBAAA,KAAC,QAAD;MACE,WAAW,GACT,gDACA,6BACA,QAAQ,2CACT;gBAEA;MACI,CAAA,CACA;QACT,iBAAA,GAAA,kBAAA,KAAC,OAAD;KACE,IAAI,GAAG,KAAK,GAAG;KACf,MAAK;KACL,mBAAiB,GAAG,KAAK,GAAG;KAC5B,WAAW,GACT,2DACA,OAAO,+BAA+B,oBACvC;eAED,iBAAA,GAAA,kBAAA,KAAC,OAAD;MAAK,WAAU;gBACZ,KAAK;MACF,CAAA;KACF,CAAA,CACF;MAxDC,KAAK,GAwDN;IAER;EACE,CAAA"}

package/dist/chunks/alert-C5KEeQqh.cjs ADDED Viewed

@@ -0,0 +1,81 @@
+require("./chunk-B_GkZjkl.cjs");
+const require_icons = require("./icons-CRanVZB1.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/feedback/alert/Alert.tsx
+var variantStyles = {
+	info: {
+		container: "border-ds-state-info-border bg-ds-state-info-surface",
+		icon: "text-ds-state-info-text",
+		title: "text-ds-state-info-text",
+		description: "text-ds-1"
+	},
+	success: {
+		container: "border-ds-state-success-border bg-ds-state-success-surface",
+		icon: "text-ds-state-success-text",
+		title: "text-ds-state-success-text",
+		description: "text-ds-1"
+	},
+	warning: {
+		container: "border-ds-state-warning-border bg-ds-state-warning-surface",
+		icon: "text-ds-state-warning-text",
+		title: "text-ds-state-warning-text",
+		description: "text-ds-1"
+	},
+	destructive: {
+		container: "border-ds-state-error-border bg-ds-state-error-surface",
+		icon: "text-ds-state-error-text",
+		title: "text-ds-state-error-text",
+		description: "text-ds-1"
+	}
+};
+var defaultIcon = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.InfoCircleIcon, {
+	className: "h-5 w-5",
+	"aria-hidden": "true"
+});
+var Alert = ({ title, description, icon = defaultIcon, variant = "info", colorOverrides, style, className = "", children }) => {
+	const resolvedVariant = variant === "error" ? "destructive" : variant;
+	const styles = variantStyles[resolvedVariant];
+	const classes = `flex gap-3 rounded-lg border p-4 text-sm ${styles.container}`.concat(" ", className).trim();
+	const containerStyle = {
+		...style,
+		...colorOverrides?.background ? { backgroundColor: colorOverrides.background } : {},
+		...colorOverrides?.border ? { borderColor: colorOverrides.border } : {}
+	};
+	const iconStyle = colorOverrides?.icon ? { color: colorOverrides.icon } : {};
+	const titleStyle = colorOverrides?.title ? { color: colorOverrides.title } : {};
+	const descriptionStyle = colorOverrides?.description ? { color: colorOverrides.description } : {};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: classes,
+		style: containerStyle,
+		role: resolvedVariant === "destructive" ? "alert" : "status",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: styles.icon,
+			style: iconStyle,
+			children: icon
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "space-y-1",
+			children: [
+				title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: `text-base font-medium ${styles.title}`,
+					style: titleStyle,
+					children: title
+				}),
+				description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: styles.description,
+					style: descriptionStyle,
+					children: description
+				}),
+				children
+			]
+		})]
+	});
+};
+//#endregion
+Object.defineProperty(exports, "Alert", {
+	enumerable: true,
+	get: function() {
+		return Alert;
+	}
+});
+//# sourceMappingURL=alert-C5KEeQqh.cjs.map

package/dist/chunks/alert-C5KEeQqh.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"alert-C5KEeQqh.cjs","names":[],"sources":["../../src/components/feedback/alert/Alert.tsx"],"sourcesContent":["import { InfoCircleIcon } from \"../../icons\";\nimport type { AlertProps } from \"./types\";\nimport type { CSSProperties } from \"react\";\n\ntype ResolvedAlertVariant = \"info\" | \"success\" | \"warning\" | \"destructive\";\n\nconst variantStyles: Record<\n ResolvedAlertVariant,\n {\n container: string;\n icon: string;\n title: string;\n description: string;\n }\n> = {\n info: {\n container: \"border-ds-state-info-border bg-ds-state-info-surface\",\n icon: \"text-ds-state-info-text\",\n title: \"text-ds-state-info-text\",\n description: \"text-ds-1\",\n },\n success: {\n container: \"border-ds-state-success-border bg-ds-state-success-surface\",\n icon: \"text-ds-state-success-text\",\n title: \"text-ds-state-success-text\",\n description: \"text-ds-1\",\n },\n warning: {\n container: \"border-ds-state-warning-border bg-ds-state-warning-surface\",\n icon: \"text-ds-state-warning-text\",\n title: \"text-ds-state-warning-text\",\n description: \"text-ds-1\",\n },\n destructive: {\n container: \"border-ds-state-error-border bg-ds-state-error-surface\",\n icon: \"text-ds-state-error-text\",\n title: \"text-ds-state-error-text\",\n description: \"text-ds-1\",\n },\n};\n\nconst defaultIcon = <InfoCircleIcon className=\"h-5 w-5\" aria-hidden=\"true\" />;\n\nexport const Alert = ({\n title,\n description,\n icon = defaultIcon,\n variant = \"info\",\n colorOverrides,\n style,\n className = \"\",\n children,\n}: AlertProps) => {\n const resolvedVariant: ResolvedAlertVariant =\n variant === \"error\" ? \"destructive\" : variant;\n const styles = variantStyles[resolvedVariant];\n const classes = `flex gap-3 rounded-lg border p-4 text-sm ${styles.container}`\n .concat(\" \", className)\n .trim();\n const containerStyle: CSSProperties = {\n ...style,\n ...(colorOverrides?.background\n ? { backgroundColor: colorOverrides.background }\n : {}),\n ...(colorOverrides?.border ? { borderColor: colorOverrides.border } : {}),\n };\n const iconStyle: CSSProperties = colorOverrides?.icon\n ? { color: colorOverrides.icon }\n : {};\n const titleStyle: CSSProperties = colorOverrides?.title\n ? { color: colorOverrides.title }\n : {};\n const descriptionStyle: CSSProperties = colorOverrides?.description\n ? { color: colorOverrides.description }\n : {};\n\n return (\n <div\n className={classes}\n style={containerStyle}\n role={resolvedVariant === \"destructive\" ? \"alert\" : \"status\"}\n >\n <span className={styles.icon} style={iconStyle}>\n {icon}\n </span>\n <div className=\"space-y-1\">\n {title && (\n <p\n className={`text-base font-medium ${styles.title}`}\n style={titleStyle}\n >\n {title}\n </p>\n )}\n {description && (\n <p className={styles.description} style={descriptionStyle}>\n {description}\n </p>\n )}\n {children}\n </div>\n </div>\n );\n};\n"],"mappings":";;;;AAMA,IAAM,gBAQF;CACF,MAAM;EACJ,WAAW;EACX,MAAM;EACN,OAAO;EACP,aAAa;EACd;CACD,SAAS;EACP,WAAW;EACX,MAAM;EACN,OAAO;EACP,aAAa;EACd;CACD,SAAS;EACP,WAAW;EACX,MAAM;EACN,OAAO;EACP,aAAa;EACd;CACD,aAAa;EACX,WAAW;EACX,MAAM;EACN,OAAO;EACP,aAAa;EACd;CACF;AAED,IAAM,cAAc,iBAAA,GAAA,kBAAA,KAAC,cAAA,gBAAD;CAAgB,WAAU;CAAU,eAAY;CAAS,CAAA;AAE7E,IAAa,SAAS,EACpB,OACA,aACA,OAAO,aACP,UAAU,QACV,gBACA,OACA,YAAY,IACZ,eACgB;CAChB,MAAM,kBACJ,YAAY,UAAU,gBAAgB;CACxC,MAAM,SAAS,cAAc;CAC7B,MAAM,UAAU,4CAA4C,OAAO,YAChE,OAAO,KAAK,UAAU,CACtB,MAAM;CACT,MAAM,iBAAgC;EACpC,GAAG;EACH,GAAI,gBAAgB,aAChB,EAAE,iBAAiB,eAAe,YAAY,GAC9C,EAAE;EACN,GAAI,gBAAgB,SAAS,EAAE,aAAa,eAAe,QAAQ,GAAG,EAAE;EACzE;CACD,MAAM,YAA2B,gBAAgB,OAC7C,EAAE,OAAO,eAAe,MAAM,GAC9B,EAAE;CACN,MAAM,aAA4B,gBAAgB,QAC9C,EAAE,OAAO,eAAe,OAAO,GAC/B,EAAE;CACN,MAAM,mBAAkC,gBAAgB,cACpD,EAAE,OAAO,eAAe,aAAa,GACrC,EAAE;AAEN,QACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EACE,WAAW;EACX,OAAO;EACP,MAAM,oBAAoB,gBAAgB,UAAU;YAHtD,CAKE,iBAAA,GAAA,kBAAA,KAAC,QAAD;GAAM,WAAW,OAAO;GAAM,OAAO;aAClC;GACI,CAAA,EACP,iBAAA,GAAA,kBAAA,MAAC,OAAD;GAAK,WAAU;aAAf;IACG,SACC,iBAAA,GAAA,kBAAA,KAAC,KAAD;KACE,WAAW,yBAAyB,OAAO;KAC3C,OAAO;eAEN;KACC,CAAA;IAEL,eACC,iBAAA,GAAA,kBAAA,KAAC,KAAD;KAAG,WAAW,OAAO;KAAa,OAAO;eACtC;KACC,CAAA;IAEL;IACG;KACF"}

package/dist/chunks/alert-XVmYJgds.mjs ADDED Viewed

@@ -0,0 +1,75 @@
+import { u as InfoCircleIcon } from "./icons-bx3nrxNv.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/feedback/alert/Alert.tsx
+var variantStyles = {
+	info: {
+		container: "border-ds-state-info-border bg-ds-state-info-surface",
+		icon: "text-ds-state-info-text",
+		title: "text-ds-state-info-text",
+		description: "text-ds-1"
+	},
+	success: {
+		container: "border-ds-state-success-border bg-ds-state-success-surface",
+		icon: "text-ds-state-success-text",
+		title: "text-ds-state-success-text",
+		description: "text-ds-1"
+	},
+	warning: {
+		container: "border-ds-state-warning-border bg-ds-state-warning-surface",
+		icon: "text-ds-state-warning-text",
+		title: "text-ds-state-warning-text",
+		description: "text-ds-1"
+	},
+	destructive: {
+		container: "border-ds-state-error-border bg-ds-state-error-surface",
+		icon: "text-ds-state-error-text",
+		title: "text-ds-state-error-text",
+		description: "text-ds-1"
+	}
+};
+var defaultIcon = /* @__PURE__ */ jsx(InfoCircleIcon, {
+	className: "h-5 w-5",
+	"aria-hidden": "true"
+});
+var Alert = ({ title, description, icon = defaultIcon, variant = "info", colorOverrides, style, className = "", children }) => {
+	const resolvedVariant = variant === "error" ? "destructive" : variant;
+	const styles = variantStyles[resolvedVariant];
+	const classes = `flex gap-3 rounded-lg border p-4 text-sm ${styles.container}`.concat(" ", className).trim();
+	const containerStyle = {
+		...style,
+		...colorOverrides?.background ? { backgroundColor: colorOverrides.background } : {},
+		...colorOverrides?.border ? { borderColor: colorOverrides.border } : {}
+	};
+	const iconStyle = colorOverrides?.icon ? { color: colorOverrides.icon } : {};
+	const titleStyle = colorOverrides?.title ? { color: colorOverrides.title } : {};
+	const descriptionStyle = colorOverrides?.description ? { color: colorOverrides.description } : {};
+	return /* @__PURE__ */ jsxs("div", {
+		className: classes,
+		style: containerStyle,
+		role: resolvedVariant === "destructive" ? "alert" : "status",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: styles.icon,
+			style: iconStyle,
+			children: icon
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "space-y-1",
+			children: [
+				title && /* @__PURE__ */ jsx("p", {
+					className: `text-base font-medium ${styles.title}`,
+					style: titleStyle,
+					children: title
+				}),
+				description && /* @__PURE__ */ jsx("p", {
+					className: styles.description,
+					style: descriptionStyle,
+					children: description
+				}),
+				children
+			]
+		})]
+	});
+};
+//#endregion
+export { Alert as t };
+//# sourceMappingURL=alert-XVmYJgds.mjs.map

package/dist/chunks/alert-XVmYJgds.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"alert-XVmYJgds.mjs","names":[],"sources":["../../src/components/feedback/alert/Alert.tsx"],"sourcesContent":["import { InfoCircleIcon } from \"../../icons\";\nimport type { AlertProps } from \"./types\";\nimport type { CSSProperties } from \"react\";\n\ntype ResolvedAlertVariant = \"info\" | \"success\" | \"warning\" | \"destructive\";\n\nconst variantStyles: Record<\n ResolvedAlertVariant,\n {\n container: string;\n icon: string;\n title: string;\n description: string;\n }\n> = {\n info: {\n container: \"border-ds-state-info-border bg-ds-state-info-surface\",\n icon: \"text-ds-state-info-text\",\n title: \"text-ds-state-info-text\",\n description: \"text-ds-1\",\n },\n success: {\n container: \"border-ds-state-success-border bg-ds-state-success-surface\",\n icon: \"text-ds-state-success-text\",\n title: \"text-ds-state-success-text\",\n description: \"text-ds-1\",\n },\n warning: {\n container: \"border-ds-state-warning-border bg-ds-state-warning-surface\",\n icon: \"text-ds-state-warning-text\",\n title: \"text-ds-state-warning-text\",\n description: \"text-ds-1\",\n },\n destructive: {\n container: \"border-ds-state-error-border bg-ds-state-error-surface\",\n icon: \"text-ds-state-error-text\",\n title: \"text-ds-state-error-text\",\n description: \"text-ds-1\",\n },\n};\n\nconst defaultIcon = <InfoCircleIcon className=\"h-5 w-5\" aria-hidden=\"true\" />;\n\nexport const Alert = ({\n title,\n description,\n icon = defaultIcon,\n variant = \"info\",\n colorOverrides,\n style,\n className = \"\",\n children,\n}: AlertProps) => {\n const resolvedVariant: ResolvedAlertVariant =\n variant === \"error\" ? \"destructive\" : variant;\n const styles = variantStyles[resolvedVariant];\n const classes = `flex gap-3 rounded-lg border p-4 text-sm ${styles.container}`\n .concat(\" \", className)\n .trim();\n const containerStyle: CSSProperties = {\n ...style,\n ...(colorOverrides?.background\n ? { backgroundColor: colorOverrides.background }\n : {}),\n ...(colorOverrides?.border ? { borderColor: colorOverrides.border } : {}),\n };\n const iconStyle: CSSProperties = colorOverrides?.icon\n ? { color: colorOverrides.icon }\n : {};\n const titleStyle: CSSProperties = colorOverrides?.title\n ? { color: colorOverrides.title }\n : {};\n const descriptionStyle: CSSProperties = colorOverrides?.description\n ? { color: colorOverrides.description }\n : {};\n\n return (\n <div\n className={classes}\n style={containerStyle}\n role={resolvedVariant === \"destructive\" ? \"alert\" : \"status\"}\n >\n <span className={styles.icon} style={iconStyle}>\n {icon}\n </span>\n <div className=\"space-y-1\">\n {title && (\n <p\n className={`text-base font-medium ${styles.title}`}\n style={titleStyle}\n >\n {title}\n </p>\n )}\n {description && (\n <p className={styles.description} style={descriptionStyle}>\n {description}\n </p>\n )}\n {children}\n </div>\n </div>\n );\n};\n"],"mappings":";;;AAMA,IAAM,gBAQF;CACF,MAAM;EACJ,WAAW;EACX,MAAM;EACN,OAAO;EACP,aAAa;EACd;CACD,SAAS;EACP,WAAW;EACX,MAAM;EACN,OAAO;EACP,aAAa;EACd;CACD,SAAS;EACP,WAAW;EACX,MAAM;EACN,OAAO;EACP,aAAa;EACd;CACD,aAAa;EACX,WAAW;EACX,MAAM;EACN,OAAO;EACP,aAAa;EACd;CACF;AAED,IAAM,cAAc,oBAAC,gBAAD;CAAgB,WAAU;CAAU,eAAY;CAAS,CAAA;AAE7E,IAAa,SAAS,EACpB,OACA,aACA,OAAO,aACP,UAAU,QACV,gBACA,OACA,YAAY,IACZ,eACgB;CAChB,MAAM,kBACJ,YAAY,UAAU,gBAAgB;CACxC,MAAM,SAAS,cAAc;CAC7B,MAAM,UAAU,4CAA4C,OAAO,YAChE,OAAO,KAAK,UAAU,CACtB,MAAM;CACT,MAAM,iBAAgC;EACpC,GAAG;EACH,GAAI,gBAAgB,aAChB,EAAE,iBAAiB,eAAe,YAAY,GAC9C,EAAE;EACN,GAAI,gBAAgB,SAAS,EAAE,aAAa,eAAe,QAAQ,GAAG,EAAE;EACzE;CACD,MAAM,YAA2B,gBAAgB,OAC7C,EAAE,OAAO,eAAe,MAAM,GAC9B,EAAE;CACN,MAAM,aAA4B,gBAAgB,QAC9C,EAAE,OAAO,eAAe,OAAO,GAC/B,EAAE;CACN,MAAM,mBAAkC,gBAAgB,cACpD,EAAE,OAAO,eAAe,aAAa,GACrC,EAAE;AAEN,QACE,qBAAC,OAAD;EACE,WAAW;EACX,OAAO;EACP,MAAM,oBAAoB,gBAAgB,UAAU;YAHtD,CAKE,oBAAC,QAAD;GAAM,WAAW,OAAO;GAAM,OAAO;aAClC;GACI,CAAA,EACP,qBAAC,OAAD;GAAK,WAAU;aAAf;IACG,SACC,oBAAC,KAAD;KACE,WAAW,yBAAyB,OAAO;KAC3C,OAAO;eAEN;KACC,CAAA;IAEL,eACC,oBAAC,KAAD;KAAG,WAAW,OAAO;KAAa,OAAO;eACtC;KACC,CAAA;IAEL;IACG;KACF"}

package/dist/chunks/{ascii-text-Bh4HjIrL.cjs → ascii-text-BP-BBy0-.cjs} RENAMED Viewed

@@ -1,9 +1,9 @@
 const require_chunk = require("./chunk-B_GkZjkl.cjs");
 let react = require("react");
-react = require_chunk.__toESM(react);
+react = require_chunk.__toESM(react, 1);
 let react_jsx_runtime = require("react/jsx-runtime");
 let three = require("three");
-three = require_chunk.__toESM(three);
+three = require_chunk.__toESM(three, 1);
 //#region src/components/effects/ascii-text/ASCIIText.tsx
 var vertexShader = `
 varying vec2 vUv;
@@ -516,4 +516,4 @@ Object.defineProperty(exports, "ASCIIText", {
 	}
 });
-//# sourceMappingURL=ascii-text-Bh4HjIrL.cjs.map
+//# sourceMappingURL=ascii-text-BP-BBy0-.cjs.map

package/dist/chunks/{ascii-text-Bh4HjIrL.cjs.map → ascii-text-BP-BBy0-.cjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ascii-text-Bh4HjIrL.cjs","names":[],"sources":["../../src/components/effects/ascii-text/ASCIIText.tsx"],"sourcesContent":["import React, { useRef, useEffect } from \"react\";\nimport * as THREE from \"three\";\n\nconst vertexShader = `\nvarying vec2 vUv;\nuniform float uTime;\nuniform float mouse;\nuniform float uEnableWaves;\n\nvoid main() {\n vUv = uv;\n float time = uTime * 5.;\n\n float waveFactor = uEnableWaves;\n\n vec3 transformed = position;\n\n transformed.x += sin(time + position.y) * 0.5 * waveFactor;\n transformed.y += cos(time + position.z) * 0.15 * waveFactor;\n transformed.z += sin(time + position.x) * waveFactor;\n\n gl_Position = projectionMatrix * modelViewMatrix * vec4(transformed, 1.0);\n}\n`;\n\nconst fragmentShader = `\nvarying vec2 vUv;\nuniform float mouse;\nuniform float uTime;\nuniform sampler2D uTexture;\n\nvoid main() {\n float time = uTime;\n vec2 pos = vUv;\n \n float move = sin(time + mouse) * 0.01;\n float r = texture2D(uTexture, pos + cos(time * 2. - time + pos.x) * .01).r;\n float g = texture2D(uTexture, pos + tan(time * .5 + pos.x - time) * .01).g;\n float b = texture2D(uTexture, pos - cos(time * 2. + time + pos.y) * .01).b;\n float a = texture2D(uTexture, pos).a;\n gl_FragColor = vec4(r, g, b, a);\n}\n`;\n\nconst PX_RATIO = typeof window !== \"undefined\" ? window.devicePixelRatio : 1;\n\nconst resolvedCanvasColorCache = new Map<string, string>();\n\nconst getThemeSignature = () => {\n if (typeof document === \"undefined\") return \"\";\n\n const root = document.documentElement;\n return [\n root.getAttribute(\"data-brand\") ?? \"\",\n root.getAttribute(\"data-mode\") ?? \"\",\n root.getAttribute(\"data-theme\") ?? \"\",\n ].join(\"\|\");\n};\n\nconst resolveCanvasColor = (value: string): string => {\n if (typeof document === \"undefined\") return value;\n if (!value.includes(\"var(\") && !value.includes(\"color-mix(\")) return value;\n\n const cacheKey = `${getThemeSignature()}::${value}`;\n const cachedValue = resolvedCanvasColorCache.get(cacheKey);\n if (cachedValue) {\n return cachedValue;\n }\n\n const probe = document.createElement(\"span\");\n probe.style.color = value;\n probe.style.position = \"fixed\";\n probe.style.pointerEvents = \"none\";\n probe.style.opacity = \"0\";\n document.body.appendChild(probe);\n const resolvedValue = getComputedStyle(probe).color \|\| value;\n document.body.removeChild(probe);\n resolvedCanvasColorCache.set(cacheKey, resolvedValue);\n return resolvedValue;\n};\n\ninterface AsciiFilterOptions {\n fontSize?: number;\n fontFamily?: string;\n charset?: string;\n invert?: boolean;\n}\n\nclass AsciiFilter {\n renderer: THREE.WebGLRenderer;\n domElement: HTMLDivElement;\n pre: HTMLPreElement;\n canvas: HTMLCanvasElement;\n context: CanvasRenderingContext2D;\n deg: number;\n invert: boolean;\n fontSize: number;\n fontFamily: string;\n charset: string;\n width: number = 0;\n height: number = 0;\n cols: number = 0;\n rows: number = 0;\n center: { x: number; y: number } = { x: 0, y: 0 };\n mouse: { x: number; y: number } = { x: 0, y: 0 };\n\n constructor(\n renderer: THREE.WebGLRenderer,\n { fontSize, fontFamily, charset, invert }: AsciiFilterOptions = {},\n ) {\n this.renderer = renderer;\n this.domElement = document.createElement(\"div\");\n this.domElement.style.position = \"absolute\";\n this.domElement.style.top = \"0\";\n this.domElement.style.left = \"0\";\n this.domElement.style.width = \"100%\";\n this.domElement.style.height = \"100%\";\n\n this.pre = document.createElement(\"pre\");\n this.domElement.appendChild(this.pre);\n\n this.canvas = document.createElement(\"canvas\");\n const ctx = this.canvas.getContext(\"2d\");\n if (!ctx) throw new Error(\"Could not get 2d context\");\n this.context = ctx;\n this.domElement.appendChild(this.canvas);\n\n this.deg = 0;\n this.invert = invert ?? true;\n this.fontSize = fontSize ?? 12;\n this.fontFamily = fontFamily ?? \"'Courier New', monospace\";\n this.charset =\n charset ??\n \" .'`^\\\",:;Il!i~+_-?][}{1)(\|/tfjrxnuvczXYUJCLQ0OZmwqpdbkhao#MW&8%B@$\";\n\n this.context.imageSmoothingEnabled = false;\n\n this.onMouseMove = this.onMouseMove.bind(this);\n document.addEventListener(\"mousemove\", this.onMouseMove);\n }\n\n setSize(width: number, height: number) {\n this.width = width;\n this.height = height;\n this.renderer.setSize(width, height);\n this.reset();\n\n this.center = { x: width / 2, y: height / 2 };\n this.mouse = { x: this.center.x, y: this.center.y };\n }\n\n reset() {\n this.context.font = `${this.fontSize}px ${this.fontFamily}`;\n const charWidth = this.context.measureText(\"A\").width;\n\n this.cols = Math.floor(\n this.width / (this.fontSize (charWidth / this.fontSize)),\n );\n this.rows = Math.floor(this.height / this.fontSize);\n\n this.canvas.width = this.cols;\n this.canvas.height = this.rows;\n this.pre.style.fontFamily = this.fontFamily;\n this.pre.style.fontSize = `${this.fontSize}px`;\n this.pre.style.margin = \"0\";\n this.pre.style.padding = \"0\";\n this.pre.style.lineHeight = \"1em\";\n this.pre.style.position = \"absolute\";\n this.pre.style.left = \"0\";\n this.pre.style.top = \"0\";\n this.pre.style.zIndex = \"9\";\n this.pre.style.backgroundAttachment = \"fixed\";\n this.pre.style.mixBlendMode = \"difference\";\n }\n\n render(scene: THREE.Scene, camera: THREE.Camera) {\n this.renderer.render(scene, camera);\n\n const w = this.canvas.width;\n const h = this.canvas.height;\n this.context.clearRect(0, 0, w, h);\n if (this.context && w && h) {\n this.context.drawImage(this.renderer.domElement, 0, 0, w, h);\n }\n\n this.asciify(this.context, w, h);\n this.hue();\n }\n\n onMouseMove(e: MouseEvent) {\n this.mouse = { x: e.clientX * PX_RATIO, y: e.clientY * PX_RATIO };\n }\n\n get dx() {\n return this.mouse.x - this.center.x;\n }\n\n get dy() {\n return this.mouse.y - this.center.y;\n }\n\n hue() {\n const deg = (Math.atan2(this.dy, this.dx) * 180) / Math.PI;\n this.deg += (deg - this.deg) * 0.075;\n this.domElement.style.filter = `hue-rotate(${this.deg.toFixed(1)}deg)`;\n }\n\n asciify(ctx: CanvasRenderingContext2D, w: number, h: number) {\n if (w && h) {\n const imgData = ctx.getImageData(0, 0, w, h).data;\n let str = \"\";\n for (let y = 0; y < h; y++) {\n for (let x = 0; x < w; x++) {\n const i = x * 4 + y * 4 * w;\n const [r, g, b, a] = [\n imgData[i],\n imgData[i + 1],\n imgData[i + 2],\n imgData[i + 3],\n ];\n\n if (a === 0) {\n str += \" \";\n continue;\n }\n\n const gray = (0.3 * r + 0.6 * g + 0.1 * b) / 255;\n let idx = Math.floor((1 - gray) * (this.charset.length - 1));\n if (this.invert) idx = this.charset.length - idx - 1;\n str += this.charset[idx];\n }\n str += \"\\n\";\n }\n this.pre.innerHTML = str;\n }\n }\n\n dispose() {\n document.removeEventListener(\"mousemove\", this.onMouseMove);\n }\n}\n\ninterface CanvasTxtOptions {\n fontSize?: number;\n fontFamily?: string;\n color?: string;\n}\n\nclass CanvasTxt {\n canvas: HTMLCanvasElement;\n context: CanvasRenderingContext2D;\n txt: string;\n fontSize: number;\n fontFamily: string;\n color: string;\n font: string;\n\n constructor(\n txt: string,\n {\n fontSize = 200,\n fontFamily = \"Arial\",\n color = \"var(--ds-color-fg)\",\n }: CanvasTxtOptions = {},\n ) {\n this.canvas = document.createElement(\"canvas\");\n const ctx = this.canvas.getContext(\"2d\");\n if (!ctx) throw new Error(\"Could not get 2d context\");\n this.context = ctx;\n this.txt = txt;\n this.fontSize = fontSize;\n this.fontFamily = fontFamily;\n this.color = color;\n\n this.font = `600 ${this.fontSize}px ${this.fontFamily}`;\n }\n\n resize() {\n this.context.font = this.font;\n const metrics = this.context.measureText(this.txt);\n\n const textWidth = Math.ceil(metrics.width) + 20;\n const textHeight =\n Math.ceil(\n metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent,\n ) + 20;\n\n this.canvas.width = textWidth;\n this.canvas.height = textHeight;\n }\n\n render() {\n this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);\n this.context.fillStyle = resolveCanvasColor(this.color);\n this.context.font = this.font;\n\n const metrics = this.context.measureText(this.txt);\n const yPos = 10 + metrics.actualBoundingBoxAscent;\n\n this.context.fillText(this.txt, 10, yPos);\n }\n\n get width() {\n return this.canvas.width;\n }\n\n get height() {\n return this.canvas.height;\n }\n\n get texture() {\n return this.canvas;\n }\n}\n\ninterface CanvAsciiOptions {\n text: string;\n asciiFontSize: number;\n textFontSize: number;\n textColor: string;\n planeBaseHeight: number;\n enableWaves: boolean;\n}\n\nclass CanvAscii {\n textString: string;\n asciiFontSize: number;\n textFontSize: number;\n textColor: string;\n planeBaseHeight: number;\n container: HTMLElement;\n width: number;\n height: number;\n enableWaves: boolean;\n camera: THREE.PerspectiveCamera;\n scene: THREE.Scene;\n mouse: { x: number; y: number };\n textCanvas!: CanvasTxt;\n texture!: THREE.CanvasTexture;\n geometry!: THREE.PlaneGeometry;\n material!: THREE.ShaderMaterial;\n mesh!: THREE.Mesh;\n renderer!: THREE.WebGLRenderer;\n filter!: AsciiFilter;\n center: { x: number; y: number } = { x: 0, y: 0 };\n animationFrameId: number = 0;\n\n constructor(\n {\n text,\n asciiFontSize,\n textFontSize,\n textColor,\n planeBaseHeight,\n enableWaves,\n }: CanvAsciiOptions,\n containerElem: HTMLElement,\n width: number,\n height: number,\n ) {\n this.textString = text;\n this.asciiFontSize = asciiFontSize;\n this.textFontSize = textFontSize;\n this.textColor = textColor;\n this.planeBaseHeight = planeBaseHeight;\n this.container = containerElem;\n this.width = width;\n this.height = height;\n this.enableWaves = enableWaves;\n\n this.camera = new THREE.PerspectiveCamera(\n 45,\n this.width / this.height,\n 1,\n 1000,\n );\n this.camera.position.z = 30;\n\n this.scene = new THREE.Scene();\n this.mouse = { x: 0, y: 0 };\n\n this.onMouseMove = this.onMouseMove.bind(this);\n\n this.setMesh();\n this.setRenderer();\n }\n\n setMesh() {\n this.textCanvas = new CanvasTxt(this.textString, {\n fontSize: this.textFontSize,\n fontFamily: \"IBM Plex Mono\",\n color: this.textColor,\n });\n this.textCanvas.resize();\n this.textCanvas.render();\n\n this.texture = new THREE.CanvasTexture(this.textCanvas.texture);\n this.texture.minFilter = THREE.NearestFilter;\n\n const textAspect = this.textCanvas.width / this.textCanvas.height;\n const baseH = this.planeBaseHeight;\n const planeW = baseH * textAspect;\n const planeH = baseH;\n\n this.geometry = new THREE.PlaneGeometry(planeW, planeH, 36, 36);\n this.material = new THREE.ShaderMaterial({\n vertexShader,\n fragmentShader,\n transparent: true,\n uniforms: {\n uTime: { value: 0 },\n mouse: { value: 1.0 },\n uTexture: { value: this.texture },\n uEnableWaves: { value: this.enableWaves ? 1.0 : 0.0 },\n },\n });\n\n this.mesh = new THREE.Mesh(this.geometry, this.material);\n this.scene.add(this.mesh);\n }\n\n setRenderer() {\n this.renderer = new THREE.WebGLRenderer({ antialias: false, alpha: true });\n this.renderer.setPixelRatio(1);\n this.renderer.setClearColor(0x000000, 0);\n\n this.filter = new AsciiFilter(this.renderer, {\n fontFamily: \"IBM Plex Mono\",\n fontSize: this.asciiFontSize,\n invert: true,\n });\n\n this.container.appendChild(this.filter.domElement);\n this.setSize(this.width, this.height);\n\n this.container.addEventListener(\"mousemove\", this.onMouseMove);\n this.container.addEventListener(\"touchmove\", this.onMouseMove);\n }\n\n setSize(w: number, h: number) {\n this.width = w;\n this.height = h;\n\n this.camera.aspect = w / h;\n this.camera.updateProjectionMatrix();\n\n this.filter.setSize(w, h);\n\n this.center = { x: w / 2, y: h / 2 };\n }\n\n load() {\n this.animate();\n }\n\n onMouseMove(evt: any) {\n const e = evt.touches ? evt.touches[0] : evt;\n const bounds = this.container.getBoundingClientRect();\n const x = e.clientX - bounds.left;\n const y = e.clientY - bounds.top;\n this.mouse = { x, y };\n }\n\n animate() {\n const animateFrame = () => {\n this.animationFrameId = requestAnimationFrame(animateFrame);\n this.render();\n };\n animateFrame();\n }\n\n render() {\n const time = new Date().getTime() * 0.001;\n\n this.textCanvas.render();\n this.texture.needsUpdate = true;\n\n (this.mesh.material as any).uniforms.uTime.value = Math.sin(time);\n\n this.updateRotation();\n this.filter.render(this.scene, this.camera);\n }\n\n updateRotation() {\n const map = (\n n: number,\n start: number,\n stop: number,\n start2: number,\n stop2: number,\n ) => {\n return ((n - start) / (stop - start)) * (stop2 - start2) + start2;\n };\n\n const x = map(this.mouse.y, 0, this.height, 0.5, -0.5);\n const y = map(this.mouse.x, 0, this.width, -0.5, 0.5);\n\n this.mesh.rotation.x += (x - this.mesh.rotation.x) * 0.05;\n this.mesh.rotation.y += (y - this.mesh.rotation.y) * 0.05;\n }\n\n clear() {\n this.scene.traverse((obj: THREE.Object3D) => {\n if (obj instanceof THREE.Mesh) {\n if (Array.isArray(obj.material)) {\n obj.material.forEach((m: THREE.Material) => m.dispose());\n } else if (obj.material instanceof THREE.Material) {\n obj.material.dispose();\n }\n obj.geometry.dispose();\n }\n });\n this.scene.clear();\n }\n\n dispose() {\n cancelAnimationFrame(this.animationFrameId);\n this.filter.dispose();\n if (this.filter.domElement.parentNode === this.container) {\n this.container.removeChild(this.filter.domElement);\n }\n this.container.removeEventListener(\"mousemove\", this.onMouseMove);\n this.container.removeEventListener(\"touchmove\", this.onMouseMove);\n this.clear();\n this.renderer.dispose();\n }\n}\n\nexport interface ASCIITextProps {\n text?: string;\n asciiFontSize?: number;\n textFontSize?: number;\n textColor?: string;\n planeBaseHeight?: number;\n enableWaves?: boolean;\n className?: string;\n style?: React.CSSProperties;\n}\n\nexport const ASCIIText: React.FC<ASCIITextProps> = ({\n text = \"David!\",\n asciiFontSize = 8,\n textFontSize = 200,\n textColor = \"var(--ds-color-fg)\",\n planeBaseHeight = 8,\n enableWaves = true,\n className = \"\",\n style = {},\n}) => {\n const containerRef = useRef<HTMLDivElement>(null);\n const asciiRef = useRef<CanvAscii \| null>(null);\n\n useEffect(() => {\n if (!containerRef.current) return;\n\n const { width, height } = containerRef.current.getBoundingClientRect();\n\n const initAscii = (w: number, h: number) => {\n if (asciiRef.current) asciiRef.current.dispose();\n asciiRef.current = new CanvAscii(\n {\n text,\n asciiFontSize,\n textFontSize,\n textColor,\n planeBaseHeight,\n enableWaves,\n },\n containerRef.current!,\n w,\n h,\n );\n asciiRef.current.load();\n };\n\n if (width === 0 \|\| height === 0) {\n const observer = new IntersectionObserver(\n ([entry]) => {\n if (\n entry.isIntersecting &&\n entry.boundingClientRect.width > 0 &&\n entry.boundingClientRect.height > 0\n ) {\n initAscii(\n entry.boundingClientRect.width,\n entry.boundingClientRect.height,\n );\n observer.disconnect();\n }\n },\n { threshold: 0.1 },\n );\n\n observer.observe(containerRef.current);\n\n return () => {\n observer.disconnect();\n if (asciiRef.current) {\n asciiRef.current.dispose();\n }\n };\n }\n\n initAscii(width, height);\n\n const ro = new ResizeObserver((entries) => {\n if (!entries[0] \|\| !asciiRef.current) return;\n const { width: w, height: h } = entries[0].contentRect;\n if (w > 0 && h > 0) {\n asciiRef.current.setSize(w, h);\n }\n });\n ro.observe(containerRef.current);\n\n return () => {\n ro.disconnect();\n if (asciiRef.current) {\n asciiRef.current.dispose();\n }\n };\n }, [\n text,\n asciiFontSize,\n textFontSize,\n textColor,\n planeBaseHeight,\n enableWaves,\n ]);\n\n return (\n <div\n ref={containerRef}\n className={`ascii-text-container ${className}`}\n style={{\n position: \"absolute\",\n width: \"100%\",\n height: \"100%\",\n ...style,\n }}\n >\n <style>{`\n @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500&display=swap');\n\n .ascii-text-container canvas {\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n image-rendering: optimizeSpeed;\n image-rendering: -moz-crisp-edges;\n image-rendering: -o-crisp-edges;\n image-rendering: -webkit-optimize-contrast;\n image-rendering: optimize-contrast;\n image-rendering: crisp-edges;\n image-rendering: pixelated;\n }\n\n .ascii-text-container pre {\n margin: 0;\n user-select: none;\n padding: 0;\n line-height: 1em;\n text-align: left;\n position: absolute;\n left: 0;\n top: 0;\n background-image: radial-gradient(circle, var(--ds-color-accent) 0%, var(--ds-color-accent-hover) 50%, var(--ds-color-warning) 100%);\n background-attachment: fixed;\n -webkit-text-fill-color: transparent;\n -webkit-background-clip: text;\n background-clip: text;\n z-index: 9;\n mix-blend-mode: difference;\n }\n `}</style>\n </div>\n );\n};\n\nexport default ASCIIText;\n"],"mappings":"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"}
1	+ {"version":3,"file":"ascii-text-BP-BBy0-.cjs","names":[],"sources":["../../src/components/effects/ascii-text/ASCIIText.tsx"],"sourcesContent":["import React, { useRef, useEffect } from \"react\";\nimport * as THREE from \"three\";\n\nconst vertexShader = `\nvarying vec2 vUv;\nuniform float uTime;\nuniform float mouse;\nuniform float uEnableWaves;\n\nvoid main() {\n vUv = uv;\n float time = uTime * 5.;\n\n float waveFactor = uEnableWaves;\n\n vec3 transformed = position;\n\n transformed.x += sin(time + position.y) * 0.5 * waveFactor;\n transformed.y += cos(time + position.z) * 0.15 * waveFactor;\n transformed.z += sin(time + position.x) * waveFactor;\n\n gl_Position = projectionMatrix * modelViewMatrix * vec4(transformed, 1.0);\n}\n`;\n\nconst fragmentShader = `\nvarying vec2 vUv;\nuniform float mouse;\nuniform float uTime;\nuniform sampler2D uTexture;\n\nvoid main() {\n float time = uTime;\n vec2 pos = vUv;\n \n float move = sin(time + mouse) * 0.01;\n float r = texture2D(uTexture, pos + cos(time * 2. - time + pos.x) * .01).r;\n float g = texture2D(uTexture, pos + tan(time * .5 + pos.x - time) * .01).g;\n float b = texture2D(uTexture, pos - cos(time * 2. + time + pos.y) * .01).b;\n float a = texture2D(uTexture, pos).a;\n gl_FragColor = vec4(r, g, b, a);\n}\n`;\n\nconst PX_RATIO = typeof window !== \"undefined\" ? window.devicePixelRatio : 1;\n\nconst resolvedCanvasColorCache = new Map<string, string>();\n\nconst getThemeSignature = () => {\n if (typeof document === \"undefined\") return \"\";\n\n const root = document.documentElement;\n return [\n root.getAttribute(\"data-brand\") ?? \"\",\n root.getAttribute(\"data-mode\") ?? \"\",\n root.getAttribute(\"data-theme\") ?? \"\",\n ].join(\"\|\");\n};\n\nconst resolveCanvasColor = (value: string): string => {\n if (typeof document === \"undefined\") return value;\n if (!value.includes(\"var(\") && !value.includes(\"color-mix(\")) return value;\n\n const cacheKey = `${getThemeSignature()}::${value}`;\n const cachedValue = resolvedCanvasColorCache.get(cacheKey);\n if (cachedValue) {\n return cachedValue;\n }\n\n const probe = document.createElement(\"span\");\n probe.style.color = value;\n probe.style.position = \"fixed\";\n probe.style.pointerEvents = \"none\";\n probe.style.opacity = \"0\";\n document.body.appendChild(probe);\n const resolvedValue = getComputedStyle(probe).color \|\| value;\n document.body.removeChild(probe);\n resolvedCanvasColorCache.set(cacheKey, resolvedValue);\n return resolvedValue;\n};\n\ninterface AsciiFilterOptions {\n fontSize?: number;\n fontFamily?: string;\n charset?: string;\n invert?: boolean;\n}\n\nclass AsciiFilter {\n renderer: THREE.WebGLRenderer;\n domElement: HTMLDivElement;\n pre: HTMLPreElement;\n canvas: HTMLCanvasElement;\n context: CanvasRenderingContext2D;\n deg: number;\n invert: boolean;\n fontSize: number;\n fontFamily: string;\n charset: string;\n width: number = 0;\n height: number = 0;\n cols: number = 0;\n rows: number = 0;\n center: { x: number; y: number } = { x: 0, y: 0 };\n mouse: { x: number; y: number } = { x: 0, y: 0 };\n\n constructor(\n renderer: THREE.WebGLRenderer,\n { fontSize, fontFamily, charset, invert }: AsciiFilterOptions = {},\n ) {\n this.renderer = renderer;\n this.domElement = document.createElement(\"div\");\n this.domElement.style.position = \"absolute\";\n this.domElement.style.top = \"0\";\n this.domElement.style.left = \"0\";\n this.domElement.style.width = \"100%\";\n this.domElement.style.height = \"100%\";\n\n this.pre = document.createElement(\"pre\");\n this.domElement.appendChild(this.pre);\n\n this.canvas = document.createElement(\"canvas\");\n const ctx = this.canvas.getContext(\"2d\");\n if (!ctx) throw new Error(\"Could not get 2d context\");\n this.context = ctx;\n this.domElement.appendChild(this.canvas);\n\n this.deg = 0;\n this.invert = invert ?? true;\n this.fontSize = fontSize ?? 12;\n this.fontFamily = fontFamily ?? \"'Courier New', monospace\";\n this.charset =\n charset ??\n \" .'`^\\\",:;Il!i~+_-?][}{1)(\|/tfjrxnuvczXYUJCLQ0OZmwqpdbkhao#MW&8%B@$\";\n\n this.context.imageSmoothingEnabled = false;\n\n this.onMouseMove = this.onMouseMove.bind(this);\n document.addEventListener(\"mousemove\", this.onMouseMove);\n }\n\n setSize(width: number, height: number) {\n this.width = width;\n this.height = height;\n this.renderer.setSize(width, height);\n this.reset();\n\n this.center = { x: width / 2, y: height / 2 };\n this.mouse = { x: this.center.x, y: this.center.y };\n }\n\n reset() {\n this.context.font = `${this.fontSize}px ${this.fontFamily}`;\n const charWidth = this.context.measureText(\"A\").width;\n\n this.cols = Math.floor(\n this.width / (this.fontSize (charWidth / this.fontSize)),\n );\n this.rows = Math.floor(this.height / this.fontSize);\n\n this.canvas.width = this.cols;\n this.canvas.height = this.rows;\n this.pre.style.fontFamily = this.fontFamily;\n this.pre.style.fontSize = `${this.fontSize}px`;\n this.pre.style.margin = \"0\";\n this.pre.style.padding = \"0\";\n this.pre.style.lineHeight = \"1em\";\n this.pre.style.position = \"absolute\";\n this.pre.style.left = \"0\";\n this.pre.style.top = \"0\";\n this.pre.style.zIndex = \"9\";\n this.pre.style.backgroundAttachment = \"fixed\";\n this.pre.style.mixBlendMode = \"difference\";\n }\n\n render(scene: THREE.Scene, camera: THREE.Camera) {\n this.renderer.render(scene, camera);\n\n const w = this.canvas.width;\n const h = this.canvas.height;\n this.context.clearRect(0, 0, w, h);\n if (this.context && w && h) {\n this.context.drawImage(this.renderer.domElement, 0, 0, w, h);\n }\n\n this.asciify(this.context, w, h);\n this.hue();\n }\n\n onMouseMove(e: MouseEvent) {\n this.mouse = { x: e.clientX * PX_RATIO, y: e.clientY * PX_RATIO };\n }\n\n get dx() {\n return this.mouse.x - this.center.x;\n }\n\n get dy() {\n return this.mouse.y - this.center.y;\n }\n\n hue() {\n const deg = (Math.atan2(this.dy, this.dx) * 180) / Math.PI;\n this.deg += (deg - this.deg) * 0.075;\n this.domElement.style.filter = `hue-rotate(${this.deg.toFixed(1)}deg)`;\n }\n\n asciify(ctx: CanvasRenderingContext2D, w: number, h: number) {\n if (w && h) {\n const imgData = ctx.getImageData(0, 0, w, h).data;\n let str = \"\";\n for (let y = 0; y < h; y++) {\n for (let x = 0; x < w; x++) {\n const i = x * 4 + y * 4 * w;\n const [r, g, b, a] = [\n imgData[i],\n imgData[i + 1],\n imgData[i + 2],\n imgData[i + 3],\n ];\n\n if (a === 0) {\n str += \" \";\n continue;\n }\n\n const gray = (0.3 * r + 0.6 * g + 0.1 * b) / 255;\n let idx = Math.floor((1 - gray) * (this.charset.length - 1));\n if (this.invert) idx = this.charset.length - idx - 1;\n str += this.charset[idx];\n }\n str += \"\\n\";\n }\n this.pre.innerHTML = str;\n }\n }\n\n dispose() {\n document.removeEventListener(\"mousemove\", this.onMouseMove);\n }\n}\n\ninterface CanvasTxtOptions {\n fontSize?: number;\n fontFamily?: string;\n color?: string;\n}\n\nclass CanvasTxt {\n canvas: HTMLCanvasElement;\n context: CanvasRenderingContext2D;\n txt: string;\n fontSize: number;\n fontFamily: string;\n color: string;\n font: string;\n\n constructor(\n txt: string,\n {\n fontSize = 200,\n fontFamily = \"Arial\",\n color = \"var(--ds-color-fg)\",\n }: CanvasTxtOptions = {},\n ) {\n this.canvas = document.createElement(\"canvas\");\n const ctx = this.canvas.getContext(\"2d\");\n if (!ctx) throw new Error(\"Could not get 2d context\");\n this.context = ctx;\n this.txt = txt;\n this.fontSize = fontSize;\n this.fontFamily = fontFamily;\n this.color = color;\n\n this.font = `600 ${this.fontSize}px ${this.fontFamily}`;\n }\n\n resize() {\n this.context.font = this.font;\n const metrics = this.context.measureText(this.txt);\n\n const textWidth = Math.ceil(metrics.width) + 20;\n const textHeight =\n Math.ceil(\n metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent,\n ) + 20;\n\n this.canvas.width = textWidth;\n this.canvas.height = textHeight;\n }\n\n render() {\n this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);\n this.context.fillStyle = resolveCanvasColor(this.color);\n this.context.font = this.font;\n\n const metrics = this.context.measureText(this.txt);\n const yPos = 10 + metrics.actualBoundingBoxAscent;\n\n this.context.fillText(this.txt, 10, yPos);\n }\n\n get width() {\n return this.canvas.width;\n }\n\n get height() {\n return this.canvas.height;\n }\n\n get texture() {\n return this.canvas;\n }\n}\n\ninterface CanvAsciiOptions {\n text: string;\n asciiFontSize: number;\n textFontSize: number;\n textColor: string;\n planeBaseHeight: number;\n enableWaves: boolean;\n}\n\nclass CanvAscii {\n textString: string;\n asciiFontSize: number;\n textFontSize: number;\n textColor: string;\n planeBaseHeight: number;\n container: HTMLElement;\n width: number;\n height: number;\n enableWaves: boolean;\n camera: THREE.PerspectiveCamera;\n scene: THREE.Scene;\n mouse: { x: number; y: number };\n textCanvas!: CanvasTxt;\n texture!: THREE.CanvasTexture;\n geometry!: THREE.PlaneGeometry;\n material!: THREE.ShaderMaterial;\n mesh!: THREE.Mesh;\n renderer!: THREE.WebGLRenderer;\n filter!: AsciiFilter;\n center: { x: number; y: number } = { x: 0, y: 0 };\n animationFrameId: number = 0;\n\n constructor(\n {\n text,\n asciiFontSize,\n textFontSize,\n textColor,\n planeBaseHeight,\n enableWaves,\n }: CanvAsciiOptions,\n containerElem: HTMLElement,\n width: number,\n height: number,\n ) {\n this.textString = text;\n this.asciiFontSize = asciiFontSize;\n this.textFontSize = textFontSize;\n this.textColor = textColor;\n this.planeBaseHeight = planeBaseHeight;\n this.container = containerElem;\n this.width = width;\n this.height = height;\n this.enableWaves = enableWaves;\n\n this.camera = new THREE.PerspectiveCamera(\n 45,\n this.width / this.height,\n 1,\n 1000,\n );\n this.camera.position.z = 30;\n\n this.scene = new THREE.Scene();\n this.mouse = { x: 0, y: 0 };\n\n this.onMouseMove = this.onMouseMove.bind(this);\n\n this.setMesh();\n this.setRenderer();\n }\n\n setMesh() {\n this.textCanvas = new CanvasTxt(this.textString, {\n fontSize: this.textFontSize,\n fontFamily: \"IBM Plex Mono\",\n color: this.textColor,\n });\n this.textCanvas.resize();\n this.textCanvas.render();\n\n this.texture = new THREE.CanvasTexture(this.textCanvas.texture);\n this.texture.minFilter = THREE.NearestFilter;\n\n const textAspect = this.textCanvas.width / this.textCanvas.height;\n const baseH = this.planeBaseHeight;\n const planeW = baseH * textAspect;\n const planeH = baseH;\n\n this.geometry = new THREE.PlaneGeometry(planeW, planeH, 36, 36);\n this.material = new THREE.ShaderMaterial({\n vertexShader,\n fragmentShader,\n transparent: true,\n uniforms: {\n uTime: { value: 0 },\n mouse: { value: 1.0 },\n uTexture: { value: this.texture },\n uEnableWaves: { value: this.enableWaves ? 1.0 : 0.0 },\n },\n });\n\n this.mesh = new THREE.Mesh(this.geometry, this.material);\n this.scene.add(this.mesh);\n }\n\n setRenderer() {\n this.renderer = new THREE.WebGLRenderer({ antialias: false, alpha: true });\n this.renderer.setPixelRatio(1);\n this.renderer.setClearColor(0x000000, 0);\n\n this.filter = new AsciiFilter(this.renderer, {\n fontFamily: \"IBM Plex Mono\",\n fontSize: this.asciiFontSize,\n invert: true,\n });\n\n this.container.appendChild(this.filter.domElement);\n this.setSize(this.width, this.height);\n\n this.container.addEventListener(\"mousemove\", this.onMouseMove);\n this.container.addEventListener(\"touchmove\", this.onMouseMove);\n }\n\n setSize(w: number, h: number) {\n this.width = w;\n this.height = h;\n\n this.camera.aspect = w / h;\n this.camera.updateProjectionMatrix();\n\n this.filter.setSize(w, h);\n\n this.center = { x: w / 2, y: h / 2 };\n }\n\n load() {\n this.animate();\n }\n\n onMouseMove(evt: any) {\n const e = evt.touches ? evt.touches[0] : evt;\n const bounds = this.container.getBoundingClientRect();\n const x = e.clientX - bounds.left;\n const y = e.clientY - bounds.top;\n this.mouse = { x, y };\n }\n\n animate() {\n const animateFrame = () => {\n this.animationFrameId = requestAnimationFrame(animateFrame);\n this.render();\n };\n animateFrame();\n }\n\n render() {\n const time = new Date().getTime() * 0.001;\n\n this.textCanvas.render();\n this.texture.needsUpdate = true;\n\n (this.mesh.material as any).uniforms.uTime.value = Math.sin(time);\n\n this.updateRotation();\n this.filter.render(this.scene, this.camera);\n }\n\n updateRotation() {\n const map = (\n n: number,\n start: number,\n stop: number,\n start2: number,\n stop2: number,\n ) => {\n return ((n - start) / (stop - start)) * (stop2 - start2) + start2;\n };\n\n const x = map(this.mouse.y, 0, this.height, 0.5, -0.5);\n const y = map(this.mouse.x, 0, this.width, -0.5, 0.5);\n\n this.mesh.rotation.x += (x - this.mesh.rotation.x) * 0.05;\n this.mesh.rotation.y += (y - this.mesh.rotation.y) * 0.05;\n }\n\n clear() {\n this.scene.traverse((obj: THREE.Object3D) => {\n if (obj instanceof THREE.Mesh) {\n if (Array.isArray(obj.material)) {\n obj.material.forEach((m: THREE.Material) => m.dispose());\n } else if (obj.material instanceof THREE.Material) {\n obj.material.dispose();\n }\n obj.geometry.dispose();\n }\n });\n this.scene.clear();\n }\n\n dispose() {\n cancelAnimationFrame(this.animationFrameId);\n this.filter.dispose();\n if (this.filter.domElement.parentNode === this.container) {\n this.container.removeChild(this.filter.domElement);\n }\n this.container.removeEventListener(\"mousemove\", this.onMouseMove);\n this.container.removeEventListener(\"touchmove\", this.onMouseMove);\n this.clear();\n this.renderer.dispose();\n }\n}\n\nexport interface ASCIITextProps {\n text?: string;\n asciiFontSize?: number;\n textFontSize?: number;\n textColor?: string;\n planeBaseHeight?: number;\n enableWaves?: boolean;\n className?: string;\n style?: React.CSSProperties;\n}\n\nexport const ASCIIText: React.FC<ASCIITextProps> = ({\n text = \"David!\",\n asciiFontSize = 8,\n textFontSize = 200,\n textColor = \"var(--ds-color-fg)\",\n planeBaseHeight = 8,\n enableWaves = true,\n className = \"\",\n style = {},\n}) => {\n const containerRef = useRef<HTMLDivElement>(null);\n const asciiRef = useRef<CanvAscii \| null>(null);\n\n useEffect(() => {\n if (!containerRef.current) return;\n\n const { width, height } = containerRef.current.getBoundingClientRect();\n\n const initAscii = (w: number, h: number) => {\n if (asciiRef.current) asciiRef.current.dispose();\n asciiRef.current = new CanvAscii(\n {\n text,\n asciiFontSize,\n textFontSize,\n textColor,\n planeBaseHeight,\n enableWaves,\n },\n containerRef.current!,\n w,\n h,\n );\n asciiRef.current.load();\n };\n\n if (width === 0 \|\| height === 0) {\n const observer = new IntersectionObserver(\n ([entry]) => {\n if (\n entry.isIntersecting &&\n entry.boundingClientRect.width > 0 &&\n entry.boundingClientRect.height > 0\n ) {\n initAscii(\n entry.boundingClientRect.width,\n entry.boundingClientRect.height,\n );\n observer.disconnect();\n }\n },\n { threshold: 0.1 },\n );\n\n observer.observe(containerRef.current);\n\n return () => {\n observer.disconnect();\n if (asciiRef.current) {\n asciiRef.current.dispose();\n }\n };\n }\n\n initAscii(width, height);\n\n const ro = new ResizeObserver((entries) => {\n if (!entries[0] \|\| !asciiRef.current) return;\n const { width: w, height: h } = entries[0].contentRect;\n if (w > 0 && h > 0) {\n asciiRef.current.setSize(w, h);\n }\n });\n ro.observe(containerRef.current);\n\n return () => {\n ro.disconnect();\n if (asciiRef.current) {\n asciiRef.current.dispose();\n }\n };\n }, [\n text,\n asciiFontSize,\n textFontSize,\n textColor,\n planeBaseHeight,\n enableWaves,\n ]);\n\n return (\n <div\n ref={containerRef}\n className={`ascii-text-container ${className}`}\n style={{\n position: \"absolute\",\n width: \"100%\",\n height: \"100%\",\n ...style,\n }}\n >\n <style>{`\n @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500&display=swap');\n\n .ascii-text-container canvas {\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n image-rendering: optimizeSpeed;\n image-rendering: -moz-crisp-edges;\n image-rendering: -o-crisp-edges;\n image-rendering: -webkit-optimize-contrast;\n image-rendering: optimize-contrast;\n image-rendering: crisp-edges;\n image-rendering: pixelated;\n }\n\n .ascii-text-container pre {\n margin: 0;\n user-select: none;\n padding: 0;\n line-height: 1em;\n text-align: left;\n position: absolute;\n left: 0;\n top: 0;\n background-image: radial-gradient(circle, var(--ds-color-accent) 0%, var(--ds-color-accent-hover) 50%, var(--ds-color-warning) 100%);\n background-attachment: fixed;\n -webkit-text-fill-color: transparent;\n -webkit-background-clip: text;\n background-clip: text;\n z-index: 9;\n mix-blend-mode: difference;\n }\n `}</style>\n </div>\n );\n};\n\nexport default ASCIIText;\n"],"mappings":"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"}

package/dist/chunks/{background-gradient-animation-BNztOaAL.mjs → background-gradient-animation-DpKJ3ecq.mjs} RENAMED Viewed

@@ -131,9 +131,9 @@ var BackgroundGradientAnimation = ({ gradientBackgroundStart = "rgb(108, 0, 162)
 //#region src/components/effects/background-gradient-animation/BackgroundGradientAnimationDemo.tsx
 function BackgroundGradientAnimationDemo() {
 	return /* @__PURE__ */ jsx(BackgroundGradientAnimation, { children: /* @__PURE__ */ jsx("div", {
-		className: "ui:absolute ui:z-50 ui:inset-0 ui:flex ui:items-center ui:justify-center ui:text-white ui:font-bold ui:px-4 ui:pointer-events-none ui:text-3xl ui:text-center md:ui:text-4xl lg:ui:text-7xl",
+		className: "ui:absolute ui:z-50 ui:inset-0 ui:flex ui:items-center ui:justify-center ui:text-ds-on-accent ui:font-bold ui:px-4 ui:pointer-events-none ui:text-3xl ui:text-center md:ui:text-4xl lg:ui:text-7xl",
 		children: /* @__PURE__ */ jsx("p", {
-			className: "ui:bg-clip-text ui:text-transparent ui:drop-shadow-2xl ui:bg-gradient-to-b ui:from-white/80 ui:to-white/20",
+			className: "ui:bg-clip-text ui:text-transparent ui:drop-shadow-2xl ui:bg-gradient-to-b ui:from-ds-on-accent ui:to-ds-on-accent/35",
 			children: "Gradients X Animations"
 		})
 	}) });
@@ -141,4 +141,4 @@ function BackgroundGradientAnimationDemo() {
 //#endregion
 export { BackgroundGradientAnimation as n, BackgroundGradientAnimationDemo as t };
-//# sourceMappingURL=background-gradient-animation-BNztOaAL.mjs.map
+//# sourceMappingURL=background-gradient-animation-DpKJ3ecq.mjs.map

package/dist/chunks/{background-gradient-animation-BNztOaAL.mjs.map → background-gradient-animation-DpKJ3ecq.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"background-gradient-animation-~~BNztOaAL~~.mjs","names":[],"sources":["../../src/components/effects/background-gradient-animation/BackgroundGradientAnimation.tsx","../../src/components/effects/background-gradient-animation/BackgroundGradientAnimationDemo.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport { mergeClassNames } from \"../../../utils\";\n\nexport interface BackgroundGradientAnimationProps {\n gradientBackgroundStart?: string;\n gradientBackgroundEnd?: string;\n firstColor?: string;\n secondColor?: string;\n thirdColor?: string;\n fourthColor?: string;\n fifthColor?: string;\n pointerColor?: string;\n size?: string;\n blendingValue?: string;\n children?: React.ReactNode;\n className?: string;\n interactive?: boolean;\n containerClassName?: string;\n}\n\nexport const BackgroundGradientAnimation = ({\n gradientBackgroundStart = \"rgb(108, 0, 162)\",\n gradientBackgroundEnd = \"rgb(0, 17, 82)\",\n firstColor = \"18, 113, 255\",\n secondColor = \"221, 74, 255\",\n thirdColor = \"100, 220, 255\",\n fourthColor = \"200, 50, 50\",\n fifthColor = \"180, 180, 50\",\n pointerColor = \"140, 100, 255\",\n size = \"80%\",\n blendingValue = \"hard-light\",\n children,\n className,\n interactive = true,\n containerClassName,\n}: BackgroundGradientAnimationProps) => {\n const interactiveRef = useRef<HTMLDivElement>(null);\n const containerRef = useRef<HTMLDivElement>(null);\n\n const currentPositionRef = useRef({ x: 0, y: 0 });\n const targetPositionRef = useRef({ x: 0, y: 0 });\n\n useEffect(() => {\n if (!interactive) {\n return;\n }\n\n let animationFrameId = 0;\n\n const move = () => {\n const interactiveElement = interactiveRef.current;\n\n if (interactiveElement) {\n const currentPosition = currentPositionRef.current;\n const targetPosition = targetPositionRef.current;\n\n currentPosition.x += (targetPosition.x - currentPosition.x) / 20;\n currentPosition.y += (targetPosition.y - currentPosition.y) / 20;\n\n interactiveElement.style.transform = `translate(${Math.round(\n currentPosition.x,\n )}px, ${Math.round(currentPosition.y)}px)`;\n }\n\n animationFrameId = window.requestAnimationFrame(move);\n };\n\n animationFrameId = window.requestAnimationFrame(move);\n\n return () => {\n window.cancelAnimationFrame(animationFrameId);\n };\n }, [interactive]);\n\n const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {\n if (interactiveRef.current) {\n const rect = interactiveRef.current.getBoundingClientRect();\n targetPositionRef.current = {\n x: event.clientX - rect.left,\n y: event.clientY - rect.top,\n };\n }\n };\n\n const [isSafari] = useState(() =>\n typeof navigator !== \"undefined\"\n ? /^((?!chrome\|android).)safari/i.test(navigator.userAgent)\n : false,\n );\n\n const blobStyle = (\n color: string,\n _animationClass: string,\n transformOrigin: string,\n opacity: number = 1,\n ): React.CSSProperties => ({\n position: \"absolute\",\n width: size,\n height: size,\n top: `calc(50% - ${size} / 2)`,\n left: `calc(50% - ${size} / 2)`,\n background: `radial-gradient(circle at center, rgba(${color}, 0.8) 0, rgba(${color}, 0) 50%) no-repeat`,\n mixBlendMode: blendingValue as React.CSSProperties[\"mixBlendMode\"],\n transformOrigin,\n opacity,\n });\n\n return (\n <div\n ref={containerRef}\n className={mergeClassNames(\n \"h-screen w-screen relative overflow-hidden top-0 left-0\",\n containerClassName,\n )}\n style={{\n background: `linear-gradient(40deg, ${gradientBackgroundStart}, ${gradientBackgroundEnd})`,\n }}\n >\n <svg className=\"hidden\">\n <defs>\n <filter id=\"blurMe\">\n <feGaussianBlur\n in=\"SourceGraphic\"\n stdDeviation=\"10\"\n result=\"blur\"\n />\n <feColorMatrix\n in=\"blur\"\n mode=\"matrix\"\n values=\"1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -8\"\n result=\"goo\"\n />\n <feBlend in=\"SourceGraphic\" in2=\"goo\" />\n </filter>\n </defs>\n </svg>\n <div className={mergeClassNames(\"\", className)}>{children}</div>\n <div\n className=\"h-full w-full\"\n style={{\n filter: isSafari ? \"blur(24px)\" : \"url(#blurMe) blur(40px)\",\n }}\n >\n {/ First blob /}\n <div\n className=\"ui:animate-gradient-first\"\n style={blobStyle(\n firstColor,\n \"animate-gradient-first\",\n \"center center\",\n )}\n />\n {/ Second blob /}\n <div\n className=\"ui:animate-gradient-second\"\n style={blobStyle(\n secondColor,\n \"animate-gradient-second\",\n \"calc(50% - 400px)\",\n )}\n />\n {/ Third blob /}\n <div\n className=\"ui:animate-gradient-third\"\n style={blobStyle(\n thirdColor,\n \"animate-gradient-third\",\n \"calc(50% + 400px)\",\n )}\n />\n {/ Fourth blob /}\n <div\n className=\"ui:animate-gradient-fourth\"\n style={blobStyle(\n fourthColor,\n \"animate-gradient-fourth\",\n \"calc(50% - 200px)\",\n 0.7,\n )}\n />\n {/ Fifth blob */}\n <div\n className=\"ui:animate-gradient-fifth\"\n style={blobStyle(\n fifthColor,\n \"animate-gradient-fifth\",\n \"calc(50% - 800px) calc(50% + 800px)\",\n )}\n />\n\n {interactive && (\n <div\n ref={interactiveRef}\n onMouseMove={handleMouseMove}\n className=\"absolute w-full h-full\"\n style={{\n top: \"-50%\",\n left: \"-50%\",\n willChange: \"transform\",\n opacity: 0.7,\n background: `radial-gradient(circle at center, rgba(${pointerColor}, 0.8) 0, rgba(${pointerColor}, 0) 50%) no-repeat`,\n mixBlendMode:\n blendingValue as React.CSSProperties[\"mixBlendMode\"],\n }}\n />\n )}\n </div>\n </div>\n );\n};\n","import { BackgroundGradientAnimation } from \"./BackgroundGradientAnimation\";\n\nexport default function BackgroundGradientAnimationDemo() {\n return (\n <BackgroundGradientAnimation>\n <div className=\"ui:absolute ui:z-50 ui:inset-0 ui:flex ui:items-center ui:justify-center ui:text-~~white~~ ui:font-bold ui:px-4 ui:pointer-events-none ui:text-3xl ui:text-center md:ui:text-4xl lg:ui:text-7xl\">\n <p className=\"ui:bg-clip-text ui:text-transparent ui:drop-shadow-2xl ui:bg-gradient-to-b ui:from-~~white/80~~ ui:to-~~white~~/20\">\n Gradients X Animations\n </p>\n </div>\n </BackgroundGradientAnimation>\n );\n}\n"],"mappings":"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~~aAA6G~~;~~GAEtH~~,CAAA;EACA,CAAA,EACsB,CAAA"}
1	+ {"version":3,"file":"background-gradient-animation-DpKJ3ecq.mjs","names":[],"sources":["../../src/components/effects/background-gradient-animation/BackgroundGradientAnimation.tsx","../../src/components/effects/background-gradient-animation/BackgroundGradientAnimationDemo.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport { mergeClassNames } from \"../../../utils\";\n\nexport interface BackgroundGradientAnimationProps {\n gradientBackgroundStart?: string;\n gradientBackgroundEnd?: string;\n firstColor?: string;\n secondColor?: string;\n thirdColor?: string;\n fourthColor?: string;\n fifthColor?: string;\n pointerColor?: string;\n size?: string;\n blendingValue?: string;\n children?: React.ReactNode;\n className?: string;\n interactive?: boolean;\n containerClassName?: string;\n}\n\nexport const BackgroundGradientAnimation = ({\n gradientBackgroundStart = \"rgb(108, 0, 162)\",\n gradientBackgroundEnd = \"rgb(0, 17, 82)\",\n firstColor = \"18, 113, 255\",\n secondColor = \"221, 74, 255\",\n thirdColor = \"100, 220, 255\",\n fourthColor = \"200, 50, 50\",\n fifthColor = \"180, 180, 50\",\n pointerColor = \"140, 100, 255\",\n size = \"80%\",\n blendingValue = \"hard-light\",\n children,\n className,\n interactive = true,\n containerClassName,\n}: BackgroundGradientAnimationProps) => {\n const interactiveRef = useRef<HTMLDivElement>(null);\n const containerRef = useRef<HTMLDivElement>(null);\n\n const currentPositionRef = useRef({ x: 0, y: 0 });\n const targetPositionRef = useRef({ x: 0, y: 0 });\n\n useEffect(() => {\n if (!interactive) {\n return;\n }\n\n let animationFrameId = 0;\n\n const move = () => {\n const interactiveElement = interactiveRef.current;\n\n if (interactiveElement) {\n const currentPosition = currentPositionRef.current;\n const targetPosition = targetPositionRef.current;\n\n currentPosition.x += (targetPosition.x - currentPosition.x) / 20;\n currentPosition.y += (targetPosition.y - currentPosition.y) / 20;\n\n interactiveElement.style.transform = `translate(${Math.round(\n currentPosition.x,\n )}px, ${Math.round(currentPosition.y)}px)`;\n }\n\n animationFrameId = window.requestAnimationFrame(move);\n };\n\n animationFrameId = window.requestAnimationFrame(move);\n\n return () => {\n window.cancelAnimationFrame(animationFrameId);\n };\n }, [interactive]);\n\n const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {\n if (interactiveRef.current) {\n const rect = interactiveRef.current.getBoundingClientRect();\n targetPositionRef.current = {\n x: event.clientX - rect.left,\n y: event.clientY - rect.top,\n };\n }\n };\n\n const [isSafari] = useState(() =>\n typeof navigator !== \"undefined\"\n ? /^((?!chrome\|android).)safari/i.test(navigator.userAgent)\n : false,\n );\n\n const blobStyle = (\n color: string,\n _animationClass: string,\n transformOrigin: string,\n opacity: number = 1,\n ): React.CSSProperties => ({\n position: \"absolute\",\n width: size,\n height: size,\n top: `calc(50% - ${size} / 2)`,\n left: `calc(50% - ${size} / 2)`,\n background: `radial-gradient(circle at center, rgba(${color}, 0.8) 0, rgba(${color}, 0) 50%) no-repeat`,\n mixBlendMode: blendingValue as React.CSSProperties[\"mixBlendMode\"],\n transformOrigin,\n opacity,\n });\n\n return (\n <div\n ref={containerRef}\n className={mergeClassNames(\n \"h-screen w-screen relative overflow-hidden top-0 left-0\",\n containerClassName,\n )}\n style={{\n background: `linear-gradient(40deg, ${gradientBackgroundStart}, ${gradientBackgroundEnd})`,\n }}\n >\n <svg className=\"hidden\">\n <defs>\n <filter id=\"blurMe\">\n <feGaussianBlur\n in=\"SourceGraphic\"\n stdDeviation=\"10\"\n result=\"blur\"\n />\n <feColorMatrix\n in=\"blur\"\n mode=\"matrix\"\n values=\"1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -8\"\n result=\"goo\"\n />\n <feBlend in=\"SourceGraphic\" in2=\"goo\" />\n </filter>\n </defs>\n </svg>\n <div className={mergeClassNames(\"\", className)}>{children}</div>\n <div\n className=\"h-full w-full\"\n style={{\n filter: isSafari ? \"blur(24px)\" : \"url(#blurMe) blur(40px)\",\n }}\n >\n {/ First blob /}\n <div\n className=\"ui:animate-gradient-first\"\n style={blobStyle(\n firstColor,\n \"animate-gradient-first\",\n \"center center\",\n )}\n />\n {/ Second blob /}\n <div\n className=\"ui:animate-gradient-second\"\n style={blobStyle(\n secondColor,\n \"animate-gradient-second\",\n \"calc(50% - 400px)\",\n )}\n />\n {/ Third blob /}\n <div\n className=\"ui:animate-gradient-third\"\n style={blobStyle(\n thirdColor,\n \"animate-gradient-third\",\n \"calc(50% + 400px)\",\n )}\n />\n {/ Fourth blob /}\n <div\n className=\"ui:animate-gradient-fourth\"\n style={blobStyle(\n fourthColor,\n \"animate-gradient-fourth\",\n \"calc(50% - 200px)\",\n 0.7,\n )}\n />\n {/ Fifth blob */}\n <div\n className=\"ui:animate-gradient-fifth\"\n style={blobStyle(\n fifthColor,\n \"animate-gradient-fifth\",\n \"calc(50% - 800px) calc(50% + 800px)\",\n )}\n />\n\n {interactive && (\n <div\n ref={interactiveRef}\n onMouseMove={handleMouseMove}\n className=\"absolute w-full h-full\"\n style={{\n top: \"-50%\",\n left: \"-50%\",\n willChange: \"transform\",\n opacity: 0.7,\n background: `radial-gradient(circle at center, rgba(${pointerColor}, 0.8) 0, rgba(${pointerColor}, 0) 50%) no-repeat`,\n mixBlendMode:\n blendingValue as React.CSSProperties[\"mixBlendMode\"],\n }}\n />\n )}\n </div>\n </div>\n );\n};\n","import { BackgroundGradientAnimation } from \"./BackgroundGradientAnimation\";\n\nexport default function BackgroundGradientAnimationDemo() {\n return (\n <BackgroundGradientAnimation>\n <div className=\"ui:absolute ui:z-50 ui:inset-0 ui:flex ui:items-center ui:justify-center ui:text-ds-on-accent ui:font-bold ui:px-4 ui:pointer-events-none ui:text-3xl ui:text-center md:ui:text-4xl lg:ui:text-7xl\">\n <p className=\"ui:bg-clip-text ui:text-transparent ui:drop-shadow-2xl ui:bg-gradient-to-b ui:from-ds-on-accent ui:to-ds-on-accent/35\">\n Gradients X Animations\n </p>\n </div>\n </BackgroundGradientAnimation>\n );\n}\n"],"mappings":"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"}

package/dist/chunks/{background-gradient-animation-C0jV3b6l.cjs → background-gradient-animation-II9hdrgB.cjs} RENAMED Viewed

@@ -132,9 +132,9 @@ var BackgroundGradientAnimation = ({ gradientBackgroundStart = "rgb(108, 0, 162)
 //#region src/components/effects/background-gradient-animation/BackgroundGradientAnimationDemo.tsx
 function BackgroundGradientAnimationDemo() {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BackgroundGradientAnimation, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: "ui:absolute ui:z-50 ui:inset-0 ui:flex ui:items-center ui:justify-center ui:text-white ui:font-bold ui:px-4 ui:pointer-events-none ui:text-3xl ui:text-center md:ui:text-4xl lg:ui:text-7xl",
+		className: "ui:absolute ui:z-50 ui:inset-0 ui:flex ui:items-center ui:justify-center ui:text-ds-on-accent ui:font-bold ui:px-4 ui:pointer-events-none ui:text-3xl ui:text-center md:ui:text-4xl lg:ui:text-7xl",
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-			className: "ui:bg-clip-text ui:text-transparent ui:drop-shadow-2xl ui:bg-gradient-to-b ui:from-white/80 ui:to-white/20",
+			className: "ui:bg-clip-text ui:text-transparent ui:drop-shadow-2xl ui:bg-gradient-to-b ui:from-ds-on-accent ui:to-ds-on-accent/35",
 			children: "Gradients X Animations"
 		})
 	}) });
@@ -153,4 +153,4 @@ Object.defineProperty(exports, "BackgroundGradientAnimationDemo", {
 	}
 });
-//# sourceMappingURL=background-gradient-animation-C0jV3b6l.cjs.map
+//# sourceMappingURL=background-gradient-animation-II9hdrgB.cjs.map

package/dist/chunks/{background-gradient-animation-C0jV3b6l.cjs.map → background-gradient-animation-II9hdrgB.cjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"background-gradient-animation-~~C0jV3b6l~~.cjs","names":[],"sources":["../../src/components/effects/background-gradient-animation/BackgroundGradientAnimation.tsx","../../src/components/effects/background-gradient-animation/BackgroundGradientAnimationDemo.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport { mergeClassNames } from \"../../../utils\";\n\nexport interface BackgroundGradientAnimationProps {\n gradientBackgroundStart?: string;\n gradientBackgroundEnd?: string;\n firstColor?: string;\n secondColor?: string;\n thirdColor?: string;\n fourthColor?: string;\n fifthColor?: string;\n pointerColor?: string;\n size?: string;\n blendingValue?: string;\n children?: React.ReactNode;\n className?: string;\n interactive?: boolean;\n containerClassName?: string;\n}\n\nexport const BackgroundGradientAnimation = ({\n gradientBackgroundStart = \"rgb(108, 0, 162)\",\n gradientBackgroundEnd = \"rgb(0, 17, 82)\",\n firstColor = \"18, 113, 255\",\n secondColor = \"221, 74, 255\",\n thirdColor = \"100, 220, 255\",\n fourthColor = \"200, 50, 50\",\n fifthColor = \"180, 180, 50\",\n pointerColor = \"140, 100, 255\",\n size = \"80%\",\n blendingValue = \"hard-light\",\n children,\n className,\n interactive = true,\n containerClassName,\n}: BackgroundGradientAnimationProps) => {\n const interactiveRef = useRef<HTMLDivElement>(null);\n const containerRef = useRef<HTMLDivElement>(null);\n\n const currentPositionRef = useRef({ x: 0, y: 0 });\n const targetPositionRef = useRef({ x: 0, y: 0 });\n\n useEffect(() => {\n if (!interactive) {\n return;\n }\n\n let animationFrameId = 0;\n\n const move = () => {\n const interactiveElement = interactiveRef.current;\n\n if (interactiveElement) {\n const currentPosition = currentPositionRef.current;\n const targetPosition = targetPositionRef.current;\n\n currentPosition.x += (targetPosition.x - currentPosition.x) / 20;\n currentPosition.y += (targetPosition.y - currentPosition.y) / 20;\n\n interactiveElement.style.transform = `translate(${Math.round(\n currentPosition.x,\n )}px, ${Math.round(currentPosition.y)}px)`;\n }\n\n animationFrameId = window.requestAnimationFrame(move);\n };\n\n animationFrameId = window.requestAnimationFrame(move);\n\n return () => {\n window.cancelAnimationFrame(animationFrameId);\n };\n }, [interactive]);\n\n const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {\n if (interactiveRef.current) {\n const rect = interactiveRef.current.getBoundingClientRect();\n targetPositionRef.current = {\n x: event.clientX - rect.left,\n y: event.clientY - rect.top,\n };\n }\n };\n\n const [isSafari] = useState(() =>\n typeof navigator !== \"undefined\"\n ? /^((?!chrome\|android).)safari/i.test(navigator.userAgent)\n : false,\n );\n\n const blobStyle = (\n color: string,\n _animationClass: string,\n transformOrigin: string,\n opacity: number = 1,\n ): React.CSSProperties => ({\n position: \"absolute\",\n width: size,\n height: size,\n top: `calc(50% - ${size} / 2)`,\n left: `calc(50% - ${size} / 2)`,\n background: `radial-gradient(circle at center, rgba(${color}, 0.8) 0, rgba(${color}, 0) 50%) no-repeat`,\n mixBlendMode: blendingValue as React.CSSProperties[\"mixBlendMode\"],\n transformOrigin,\n opacity,\n });\n\n return (\n <div\n ref={containerRef}\n className={mergeClassNames(\n \"h-screen w-screen relative overflow-hidden top-0 left-0\",\n containerClassName,\n )}\n style={{\n background: `linear-gradient(40deg, ${gradientBackgroundStart}, ${gradientBackgroundEnd})`,\n }}\n >\n <svg className=\"hidden\">\n <defs>\n <filter id=\"blurMe\">\n <feGaussianBlur\n in=\"SourceGraphic\"\n stdDeviation=\"10\"\n result=\"blur\"\n />\n <feColorMatrix\n in=\"blur\"\n mode=\"matrix\"\n values=\"1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -8\"\n result=\"goo\"\n />\n <feBlend in=\"SourceGraphic\" in2=\"goo\" />\n </filter>\n </defs>\n </svg>\n <div className={mergeClassNames(\"\", className)}>{children}</div>\n <div\n className=\"h-full w-full\"\n style={{\n filter: isSafari ? \"blur(24px)\" : \"url(#blurMe) blur(40px)\",\n }}\n >\n {/ First blob /}\n <div\n className=\"ui:animate-gradient-first\"\n style={blobStyle(\n firstColor,\n \"animate-gradient-first\",\n \"center center\",\n )}\n />\n {/ Second blob /}\n <div\n className=\"ui:animate-gradient-second\"\n style={blobStyle(\n secondColor,\n \"animate-gradient-second\",\n \"calc(50% - 400px)\",\n )}\n />\n {/ Third blob /}\n <div\n className=\"ui:animate-gradient-third\"\n style={blobStyle(\n thirdColor,\n \"animate-gradient-third\",\n \"calc(50% + 400px)\",\n )}\n />\n {/ Fourth blob /}\n <div\n className=\"ui:animate-gradient-fourth\"\n style={blobStyle(\n fourthColor,\n \"animate-gradient-fourth\",\n \"calc(50% - 200px)\",\n 0.7,\n )}\n />\n {/ Fifth blob */}\n <div\n className=\"ui:animate-gradient-fifth\"\n style={blobStyle(\n fifthColor,\n \"animate-gradient-fifth\",\n \"calc(50% - 800px) calc(50% + 800px)\",\n )}\n />\n\n {interactive && (\n <div\n ref={interactiveRef}\n onMouseMove={handleMouseMove}\n className=\"absolute w-full h-full\"\n style={{\n top: \"-50%\",\n left: \"-50%\",\n willChange: \"transform\",\n opacity: 0.7,\n background: `radial-gradient(circle at center, rgba(${pointerColor}, 0.8) 0, rgba(${pointerColor}, 0) 50%) no-repeat`,\n mixBlendMode:\n blendingValue as React.CSSProperties[\"mixBlendMode\"],\n }}\n />\n )}\n </div>\n </div>\n );\n};\n","import { BackgroundGradientAnimation } from \"./BackgroundGradientAnimation\";\n\nexport default function BackgroundGradientAnimationDemo() {\n return (\n <BackgroundGradientAnimation>\n <div className=\"ui:absolute ui:z-50 ui:inset-0 ui:flex ui:items-center ui:justify-center ui:text-~~white~~ ui:font-bold ui:px-4 ui:pointer-events-none ui:text-3xl ui:text-center md:ui:text-4xl lg:ui:text-7xl\">\n <p className=\"ui:bg-clip-text ui:text-transparent ui:drop-shadow-2xl ui:bg-gradient-to-b ui:from-~~white/80~~ ui:to-~~white~~/20\">\n Gradients X Animations\n </p>\n </div>\n </BackgroundGradientAnimation>\n );\n}\n"],"mappings":"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~~aAA6G~~;~~GAEtH~~,CAAA;EACA,CAAA,EACsB,CAAA"}
1	+ {"version":3,"file":"background-gradient-animation-II9hdrgB.cjs","names":[],"sources":["../../src/components/effects/background-gradient-animation/BackgroundGradientAnimation.tsx","../../src/components/effects/background-gradient-animation/BackgroundGradientAnimationDemo.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport { mergeClassNames } from \"../../../utils\";\n\nexport interface BackgroundGradientAnimationProps {\n gradientBackgroundStart?: string;\n gradientBackgroundEnd?: string;\n firstColor?: string;\n secondColor?: string;\n thirdColor?: string;\n fourthColor?: string;\n fifthColor?: string;\n pointerColor?: string;\n size?: string;\n blendingValue?: string;\n children?: React.ReactNode;\n className?: string;\n interactive?: boolean;\n containerClassName?: string;\n}\n\nexport const BackgroundGradientAnimation = ({\n gradientBackgroundStart = \"rgb(108, 0, 162)\",\n gradientBackgroundEnd = \"rgb(0, 17, 82)\",\n firstColor = \"18, 113, 255\",\n secondColor = \"221, 74, 255\",\n thirdColor = \"100, 220, 255\",\n fourthColor = \"200, 50, 50\",\n fifthColor = \"180, 180, 50\",\n pointerColor = \"140, 100, 255\",\n size = \"80%\",\n blendingValue = \"hard-light\",\n children,\n className,\n interactive = true,\n containerClassName,\n}: BackgroundGradientAnimationProps) => {\n const interactiveRef = useRef<HTMLDivElement>(null);\n const containerRef = useRef<HTMLDivElement>(null);\n\n const currentPositionRef = useRef({ x: 0, y: 0 });\n const targetPositionRef = useRef({ x: 0, y: 0 });\n\n useEffect(() => {\n if (!interactive) {\n return;\n }\n\n let animationFrameId = 0;\n\n const move = () => {\n const interactiveElement = interactiveRef.current;\n\n if (interactiveElement) {\n const currentPosition = currentPositionRef.current;\n const targetPosition = targetPositionRef.current;\n\n currentPosition.x += (targetPosition.x - currentPosition.x) / 20;\n currentPosition.y += (targetPosition.y - currentPosition.y) / 20;\n\n interactiveElement.style.transform = `translate(${Math.round(\n currentPosition.x,\n )}px, ${Math.round(currentPosition.y)}px)`;\n }\n\n animationFrameId = window.requestAnimationFrame(move);\n };\n\n animationFrameId = window.requestAnimationFrame(move);\n\n return () => {\n window.cancelAnimationFrame(animationFrameId);\n };\n }, [interactive]);\n\n const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {\n if (interactiveRef.current) {\n const rect = interactiveRef.current.getBoundingClientRect();\n targetPositionRef.current = {\n x: event.clientX - rect.left,\n y: event.clientY - rect.top,\n };\n }\n };\n\n const [isSafari] = useState(() =>\n typeof navigator !== \"undefined\"\n ? /^((?!chrome\|android).)safari/i.test(navigator.userAgent)\n : false,\n );\n\n const blobStyle = (\n color: string,\n _animationClass: string,\n transformOrigin: string,\n opacity: number = 1,\n ): React.CSSProperties => ({\n position: \"absolute\",\n width: size,\n height: size,\n top: `calc(50% - ${size} / 2)`,\n left: `calc(50% - ${size} / 2)`,\n background: `radial-gradient(circle at center, rgba(${color}, 0.8) 0, rgba(${color}, 0) 50%) no-repeat`,\n mixBlendMode: blendingValue as React.CSSProperties[\"mixBlendMode\"],\n transformOrigin,\n opacity,\n });\n\n return (\n <div\n ref={containerRef}\n className={mergeClassNames(\n \"h-screen w-screen relative overflow-hidden top-0 left-0\",\n containerClassName,\n )}\n style={{\n background: `linear-gradient(40deg, ${gradientBackgroundStart}, ${gradientBackgroundEnd})`,\n }}\n >\n <svg className=\"hidden\">\n <defs>\n <filter id=\"blurMe\">\n <feGaussianBlur\n in=\"SourceGraphic\"\n stdDeviation=\"10\"\n result=\"blur\"\n />\n <feColorMatrix\n in=\"blur\"\n mode=\"matrix\"\n values=\"1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -8\"\n result=\"goo\"\n />\n <feBlend in=\"SourceGraphic\" in2=\"goo\" />\n </filter>\n </defs>\n </svg>\n <div className={mergeClassNames(\"\", className)}>{children}</div>\n <div\n className=\"h-full w-full\"\n style={{\n filter: isSafari ? \"blur(24px)\" : \"url(#blurMe) blur(40px)\",\n }}\n >\n {/ First blob /}\n <div\n className=\"ui:animate-gradient-first\"\n style={blobStyle(\n firstColor,\n \"animate-gradient-first\",\n \"center center\",\n )}\n />\n {/ Second blob /}\n <div\n className=\"ui:animate-gradient-second\"\n style={blobStyle(\n secondColor,\n \"animate-gradient-second\",\n \"calc(50% - 400px)\",\n )}\n />\n {/ Third blob /}\n <div\n className=\"ui:animate-gradient-third\"\n style={blobStyle(\n thirdColor,\n \"animate-gradient-third\",\n \"calc(50% + 400px)\",\n )}\n />\n {/ Fourth blob /}\n <div\n className=\"ui:animate-gradient-fourth\"\n style={blobStyle(\n fourthColor,\n \"animate-gradient-fourth\",\n \"calc(50% - 200px)\",\n 0.7,\n )}\n />\n {/ Fifth blob */}\n <div\n className=\"ui:animate-gradient-fifth\"\n style={blobStyle(\n fifthColor,\n \"animate-gradient-fifth\",\n \"calc(50% - 800px) calc(50% + 800px)\",\n )}\n />\n\n {interactive && (\n <div\n ref={interactiveRef}\n onMouseMove={handleMouseMove}\n className=\"absolute w-full h-full\"\n style={{\n top: \"-50%\",\n left: \"-50%\",\n willChange: \"transform\",\n opacity: 0.7,\n background: `radial-gradient(circle at center, rgba(${pointerColor}, 0.8) 0, rgba(${pointerColor}, 0) 50%) no-repeat`,\n mixBlendMode:\n blendingValue as React.CSSProperties[\"mixBlendMode\"],\n }}\n />\n )}\n </div>\n </div>\n );\n};\n","import { BackgroundGradientAnimation } from \"./BackgroundGradientAnimation\";\n\nexport default function BackgroundGradientAnimationDemo() {\n return (\n <BackgroundGradientAnimation>\n <div className=\"ui:absolute ui:z-50 ui:inset-0 ui:flex ui:items-center ui:justify-center ui:text-ds-on-accent ui:font-bold ui:px-4 ui:pointer-events-none ui:text-3xl ui:text-center md:ui:text-4xl lg:ui:text-7xl\">\n <p className=\"ui:bg-clip-text ui:text-transparent ui:drop-shadow-2xl ui:bg-gradient-to-b ui:from-ds-on-accent ui:to-ds-on-accent/35\">\n Gradients X Animations\n </p>\n </div>\n </BackgroundGradientAnimation>\n );\n}\n"],"mappings":";;;;;AAoBA,IAAa,+BAA+B,EAC1C,0BAA0B,oBAC1B,wBAAwB,kBACxB,aAAa,gBACb,cAAc,gBACd,aAAa,iBACb,cAAc,eACd,aAAa,gBACb,eAAe,iBACf,OAAO,OACP,gBAAgB,cAChB,UACA,WACA,cAAc,MACd,yBACsC;CACtC,MAAM,kBAAA,GAAA,MAAA,QAAwC,KAAK;CACnD,MAAM,gBAAA,GAAA,MAAA,QAAsC,KAAK;CAEjD,MAAM,sBAAA,GAAA,MAAA,QAA4B;EAAE,GAAG;EAAG,GAAG;EAAG,CAAC;CACjD,MAAM,qBAAA,GAAA,MAAA,QAA2B;EAAE,GAAG;EAAG,GAAG;EAAG,CAAC;AAEhD,EAAA,GAAA,MAAA,iBAAgB;AACd,MAAI,CAAC,YACH;EAGF,IAAI,mBAAmB;EAEvB,MAAM,aAAa;GACjB,MAAM,qBAAqB,eAAe;AAE1C,OAAI,oBAAoB;IACtB,MAAM,kBAAkB,mBAAmB;IAC3C,MAAM,iBAAiB,kBAAkB;AAEzC,oBAAgB,MAAM,eAAe,IAAI,gBAAgB,KAAK;AAC9D,oBAAgB,MAAM,eAAe,IAAI,gBAAgB,KAAK;AAE9D,uBAAmB,MAAM,YAAY,aAAa,KAAK,MACrD,gBAAgB,EACjB,CAAC,MAAM,KAAK,MAAM,gBAAgB,EAAE,CAAC;;AAGxC,sBAAmB,OAAO,sBAAsB,KAAK;;AAGvD,qBAAmB,OAAO,sBAAsB,KAAK;AAErD,eAAa;AACX,UAAO,qBAAqB,iBAAiB;;IAE9C,CAAC,YAAY,CAAC;CAEjB,MAAM,mBAAmB,UAA4C;AACnE,MAAI,eAAe,SAAS;GAC1B,MAAM,OAAO,eAAe,QAAQ,uBAAuB;AAC3D,qBAAkB,UAAU;IAC1B,GAAG,MAAM,UAAU,KAAK;IACxB,GAAG,MAAM,UAAU,KAAK;IACzB;;;CAIL,MAAM,CAAC,aAAA,GAAA,MAAA,gBACL,OAAO,cAAc,cACjB,iCAAiC,KAAK,UAAU,UAAU,GAC1D,MACL;CAED,MAAM,aACJ,OACA,iBACA,iBACA,UAAkB,OACO;EACzB,UAAU;EACV,OAAO;EACP,QAAQ;EACR,KAAK,cAAc,KAAK;EACxB,MAAM,cAAc,KAAK;EACzB,YAAY,0CAA0C,MAAM,iBAAiB,MAAM;EACnF,cAAc;EACd;EACA;EACD;AAED,QACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EACE,KAAK;EACL,WAAW,cAAA,gBACT,2DACA,mBACD;EACD,OAAO,EACL,YAAY,0BAA0B,wBAAwB,IAAI,sBAAsB,IACzF;YARH;GAUE,iBAAA,GAAA,kBAAA,KAAC,OAAD;IAAK,WAAU;cACb,iBAAA,GAAA,kBAAA,KAAC,QAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,MAAC,UAAD;KAAQ,IAAG;eAAX;MACE,iBAAA,GAAA,kBAAA,KAAC,kBAAD;OACE,IAAG;OACH,cAAa;OACb,QAAO;OACP,CAAA;MACF,iBAAA,GAAA,kBAAA,KAAC,iBAAD;OACE,IAAG;OACH,MAAK;OACL,QAAO;OACP,QAAO;OACP,CAAA;MACF,iBAAA,GAAA,kBAAA,KAAC,WAAD;OAAS,IAAG;OAAgB,KAAI;OAAQ,CAAA;MACjC;QACJ,CAAA;IACH,CAAA;GACN,iBAAA,GAAA,kBAAA,KAAC,OAAD;IAAK,WAAW,cAAA,gBAAgB,IAAI,UAAU;IAAG;IAAe,CAAA;GAChE,iBAAA,GAAA,kBAAA,MAAC,OAAD;IACE,WAAU;IACV,OAAO,EACL,QAAQ,WAAW,eAAe,2BACnC;cAJH;KAOE,iBAAA,GAAA,kBAAA,KAAC,OAAD;MACE,WAAU;MACV,OAAO,UACL,YACA,0BACA,gBACD;MACD,CAAA;KAEF,iBAAA,GAAA,kBAAA,KAAC,OAAD;MACE,WAAU;MACV,OAAO,UACL,aACA,2BACA,oBACD;MACD,CAAA;KAEF,iBAAA,GAAA,kBAAA,KAAC,OAAD;MACE,WAAU;MACV,OAAO,UACL,YACA,0BACA,oBACD;MACD,CAAA;KAEF,iBAAA,GAAA,kBAAA,KAAC,OAAD;MACE,WAAU;MACV,OAAO,UACL,aACA,2BACA,qBACA,GACD;MACD,CAAA;KAEF,iBAAA,GAAA,kBAAA,KAAC,OAAD;MACE,WAAU;MACV,OAAO,UACL,YACA,0BACA,sCACD;MACD,CAAA;KAED,eACC,iBAAA,GAAA,kBAAA,KAAC,OAAD;MACE,KAAK;MACL,aAAa;MACb,WAAU;MACV,OAAO;OACL,KAAK;OACL,MAAM;OACN,YAAY;OACZ,SAAS;OACT,YAAY,0CAA0C,aAAa,iBAAiB,aAAa;OACjG,cACE;OACH;MACD,CAAA;KAEA;;GACF;;;;;AC7MV,SAAwB,kCAAkC;AACxD,QACE,iBAAA,GAAA,kBAAA,KAAC,6BAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAK,WAAU;YACb,iBAAA,GAAA,kBAAA,KAAC,KAAD;GAAG,WAAU;aAAwH;GAEjI,CAAA;EACA,CAAA,EACsB,CAAA"}

package/dist/chunks/{button-NwWcZaCl.mjs → button-DddUhuR-.mjs} RENAMED Viewed

@@ -18,9 +18,9 @@ var baseClasses = `
   disabled:cursor-not-allowed
 `;
 var variantClassMap = {
-	primary: "bg-accent hover:bg-accent-hover text-on-accent shadow-2",
-	secondary: "bg-surface border border-border text-fg shadow-1 hover:border-border-strong hover:bg-canvas",
-	tertiary: "bg-transparent text-fg shadow-none hover:bg-canvas/70 hover:text-accent border border-transparent"
+	primary: "bg-ds-accent hover:bg-ds-accent-hover text-ds-on-accent shadow-2",
+	secondary: "bg-ds-surface-1 border border-ds-border-2 text-ds-1 shadow-1 hover:border-ds-border-1 hover:bg-ds-canvas",
+	tertiary: "bg-transparent text-ds-1 shadow-none hover:bg-ds-canvas/70 hover:text-ds-1 border border-transparent"
 };
 var sizeClassMap = {
 	small: "py-2 px-3 text-xs",
@@ -40,4 +40,4 @@ var Button = ({ primary = false, variant, size = "medium", backgroundColor, labe
 //#endregion
 export { Button as t };
-//# sourceMappingURL=button-NwWcZaCl.mjs.map
+//# sourceMappingURL=button-DddUhuR-.mjs.map

package/dist/chunks/button-DddUhuR-.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"button-DddUhuR-.mjs","names":[],"sources":["../../src/components/forms/button/Button.tsx"],"sourcesContent":["import type { ButtonProps, ButtonVariant } from \"./types\";\n\nconst baseClasses = `\n inline-flex\n items-center\n justify-center\n gap-2\n cursor-pointer\n rounded-lg\n font-semibold\n leading-none\n transition-all\n duration-200\n ease-in-out\n active:scale-95\n hover:opacity-90\n disabled:opacity-50\n disabled:cursor-not-allowed\n`;\nconst variantClassMap = {\n primary: \"bg-ds-accent hover:bg-ds-accent-hover text-ds-on-accent shadow-2\",\n secondary:\n \"bg-ds-surface-1 border border-ds-border-2 text-ds-1 shadow-1 hover:border-ds-border-1 hover:bg-ds-canvas\",\n tertiary:\n \"bg-transparent text-ds-1 shadow-none hover:bg-ds-canvas/70 hover:text-ds-1 border border-transparent\",\n} satisfies Record<ButtonVariant, string>;\nconst sizeClassMap = {\n small: \"py-2 px-3 text-xs\",\n medium: \"py-2.5 px-4 text-sm\",\n large: \"py-3 px-6 text-base\",\n};\n\nexport const Button = ({\n primary = false,\n variant,\n size = \"medium\",\n backgroundColor,\n label,\n children,\n type = \"button\",\n className = \"\",\n ...props\n}: ButtonProps) => {\n const resolvedVariant = variant ?? (primary ? \"primary\" : \"secondary\");\n const variantClasses = variantClassMap[resolvedVariant];\n const sizeClasses =\n sizeClassMap[size as keyof typeof sizeClassMap] || sizeClassMap.medium;\n\n return (\n <button\n type={type}\n className={`${baseClasses} ${variantClasses} ${sizeClasses} ${className}`.trim()}\n style={backgroundColor ? { backgroundColor } : undefined}\n {...props}\n >\n {children}\n {label && <span>{label}</span>}\n </button>\n );\n};\n"],"mappings":";;AAEA,IAAM,cAAc;;;;;;;;;;;;;;;;;AAiBpB,IAAM,kBAAkB;CACtB,SAAS;CACT,WACE;CACF,UACE;CACH;AACD,IAAM,eAAe;CACnB,OAAO;CACP,QAAQ;CACR,OAAO;CACR;AAED,IAAa,UAAU,EACrB,UAAU,OACV,SACA,OAAO,UACP,iBACA,OACA,UACA,OAAO,UACP,YAAY,IACZ,GAAG,YACc;CAEjB,MAAM,iBAAiB,gBADC,YAAY,UAAU,YAAY;AAK1D,QACE,qBAAC,UAAD;EACQ;EACN,WAAW,GAAG,YAAY,GAAG,eAAe,GAL9C,aAAa,SAAsC,aAAa,OAKH,GAAG,YAAY,MAAM;EAChF,OAAO,kBAAkB,EAAE,iBAAiB,GAAG,KAAA;EAC/C,GAAI;YAJN,CAMG,UACA,SAAS,oBAAC,QAAD,EAAA,UAAO,OAAa,CAAA,CACvB"}

package/dist/chunks/{button-hover-border-gradient-TmQPZyYW.mjs → button-hover-border-gradient-DFppVRI4.mjs} RENAMED Viewed

@@ -1,4 +1,4 @@
-import { t as HoverBorderGradient } from "./HoverBorderGradient-DYXhtPWs.mjs";
+import { t as HoverBorderGradient } from "./HoverBorderGradient-CduqqQgX.mjs";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/effects/button-hover-border-gradient/ButtonHoverBorderGradient.tsx
 var ButtonHoverBorderGradient = ({ children, ...props }) => {
@@ -7,7 +7,7 @@ var ButtonHoverBorderGradient = ({ children, ...props }) => {
 		...props,
 		children: /* @__PURE__ */ jsx(HoverBorderGradient, {
 			containerClassName: "rounded",
-			className: "flex items-center space-x-2 bg-white text-black dark:bg-black dark:text-white",
+			className: "flex items-center space-x-2 bg-ds-surface-1 text-ds-1",
 			children
 		})
 	});
@@ -15,4 +15,4 @@ var ButtonHoverBorderGradient = ({ children, ...props }) => {
 //#endregion
 export { ButtonHoverBorderGradient as t };
-//# sourceMappingURL=button-hover-border-gradient-TmQPZyYW.mjs.map
+//# sourceMappingURL=button-hover-border-gradient-DFppVRI4.mjs.map