erp-pro-ui 0.1.0 → 0.1.2

package/dist/chunks/sun-to-moon-button-BmFwRBye.cjs

@@ -0,0 +1,192 @@
+require("./chunk-B_GkZjkl.cjs");
+const require_theme = require("./theme-7DWLxJK_.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+let framer_motion = require("framer-motion");
+//#region src/components/effects/sun-to-moon-button/SunToMoonButton.tsx
+function SunToMoonButton({ showLabelAndImage = true }) {
+	const { mode, toggleMode } = require_theme.useThemeContext();
+	const raysVariants = {
+		hidden: {
+			strokeOpacity: 0,
+			transition: {
+				staggerChildren: .05,
+				staggerDirection: -1
+			}
+		},
+		visible: {
+			strokeOpacity: 1,
+			transition: { staggerChildren: .05 }
+		}
+	};
+	const rayVariant = {
+		hidden: {
+			pathLength: 0,
+			opacity: 0,
+			scale: 0
+		},
+		visible: {
+			pathLength: 1,
+			opacity: 1,
+			scale: 1,
+			transition: {
+				duration: .5,
+				pathLength: { duration: .3 },
+				opacity: { duration: .2 },
+				scale: { duration: .3 }
+			}
+		}
+	};
+	const shineVariant = {
+		hidden: {
+			opacity: 0,
+			scale: 2,
+			strokeDasharray: "20, 1000",
+			strokeDashoffset: 0,
+			filter: "blur(0px)"
+		},
+		visible: {
+			opacity: [
+				0,
+				1,
+				0
+			],
+			strokeDashoffset: [
+				0,
+				-50,
+				-100
+			],
+			filter: [
+				"blur(2px)",
+				"blur(2px)",
+				"blur(0px)"
+			],
+			transition: { duration: .75 }
+		}
+	};
+	const sunPath = "M70 49.5C70 60.8218 60.8218 70 49.5 70C38.1782 70 29 60.8218 29 49.5C29 38.1782 38.1782 29 49.5 29C60 29 69.5 38 70 49.5Z";
+	const moonPath = "M70 49.5C70 60.8218 60.8218 70 49.5 70C38.1782 70 29 60.8218 29 49.5C29 38.1782 38.1782 29 49.5 29C39 45 49.5 59.5 70 49.5Z";
+	const safeCurrentPath = (mode === "light" ? sunPath : moonPath) || sunPath;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+		type: "button",
+		className: "flex w-full cursor-pointer flex-col items-center justify-center rounded-xl py-3 text-base font-medium transition duration-200",
+		onClick: () => toggleMode(),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+			className: "flex items-center",
+			children: [showLabelAndImage && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "mr-2 text-neutral-900 dark:text-white",
+				children: mode === "light" ? "Light" : "Dark"
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(framer_motion.motion.svg, {
+				strokeWidth: "4",
+				strokeLinecap: "round",
+				width: 20,
+				height: 20,
+				viewBox: "0 0 100 100",
+				fill: "none",
+				xmlns: "http://www.w3.org/2000/svg",
+				className: "relative",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.path, {
+						variants: shineVariant,
+						d: moonPath,
+						className: "absolute top-0 left-0 stroke-blue-100",
+						initial: "hidden",
+						animate: mode === "light" ? "hidden" : "visible"
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(framer_motion.motion.g, {
+						variants: raysVariants,
+						initial: "hidden",
+						animate: mode === "dark" ? "hidden" : "visible",
+						style: {
+							strokeLinecap: "round",
+							strokeWidth: 6,
+							stroke: "var(--color-yellow-500)"
+						},
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.path, {
+								className: "origin-center",
+								variants: rayVariant,
+								d: "M50 2V11"
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.path, {
+								variants: rayVariant,
+								d: "M85 15L78 22"
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.path, {
+								variants: rayVariant,
+								d: "M98 50H89"
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.path, {
+								variants: rayVariant,
+								d: "M85 85L78 78"
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.path, {
+								variants: rayVariant,
+								d: "M50 98V89"
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.path, {
+								variants: rayVariant,
+								d: "M23 78L16 84"
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.path, {
+								variants: rayVariant,
+								d: "M11 50H2"
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.path, {
+								variants: rayVariant,
+								d: "M23 23L16 16"
+							})
+						]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.path, {
+						d: safeCurrentPath,
+						fill: "transparent",
+						transition: {
+							duration: 1,
+							type: "spring"
+						},
+						initial: false,
+						animate: mode === "light" ? {
+							d: sunPath,
+							rotate: 0,
+							scale: 1,
+							stroke: "var(--color-yellow-500)",
+							fill: "var(--color-yellow-500)",
+							fillOpacity: .5,
+							strokeOpacity: 1
+						} : {
+							d: moonPath,
+							rotate: -360,
+							scale: 2,
+							stroke: "var(--color-blue-400)",
+							fill: "var(--color-blue-400)",
+							fillOpacity: .35,
+							strokeOpacity: 1
+						}
+					})
+				]
+			})]
+		}), showLabelAndImage && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+			className: "mt-2 flex h-[90px] w-[180px] flex-col items-center justify-center rounded-md bg-neutral-100 dark:bg-neutral-800",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+				className: "my-4 flex w-[150px] flex-col rounded-md",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "mb-1 w-[80px] rounded-full bg-neutral-300 p-1 dark:bg-neutral-600" }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "mb-1 w-[100px] rounded-full bg-neutral-300 p-1 dark:bg-neutral-600" }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "w-[150px] rounded-full bg-neutral-300 p-1 dark:bg-neutral-600" })
+				]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+				className: "my-1 flex w-[150px] justify-between",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "mb-1 w-[80px] rounded-full bg-neutral-300 p-1 dark:bg-neutral-600" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "mb-1 w-[30px] rounded-full bg-accent p-1" })]
+			})]
+		})]
+	});
+}
+//#endregion
+Object.defineProperty(exports, "SunToMoonButton", {
+	enumerable: true,
+	get: function() {
+		return SunToMoonButton;
+	}
+});
+
+//# sourceMappingURL=sun-to-moon-button-BmFwRBye.cjs.map

package/dist/chunks/sun-to-moon-button-BmFwRBye.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"sun-to-moon-button-BmFwRBye.cjs","names":[],"sources":["../../src/components/effects/sun-to-moon-button/SunToMoonButton.tsx"],"sourcesContent":["import { useThemeContext } from \"../../../foundations/theme\";\nimport { motion } from \"framer-motion\";\n\nexport interface SunToMoonButtonProps {\n  showLabelAndImage?: boolean;\n}\n\nexport default function SunToMoonButton({\n  showLabelAndImage = true,\n}: SunToMoonButtonProps) {\n  const { mode, toggleMode } = useThemeContext();\n\n  const raysVariants = {\n    hidden: {\n      strokeOpacity: 0,\n      transition: {\n        staggerChildren: 0.05,\n        staggerDirection: -1,\n      },\n    },\n    visible: {\n      strokeOpacity: 1,\n      transition: {\n        staggerChildren: 0.05,\n      },\n    },\n  };\n\n  const rayVariant = {\n    hidden: {\n      pathLength: 0,\n      opacity: 0,\n      // Start from center of the circle\n      scale: 0,\n    },\n    visible: {\n      pathLength: 1,\n      opacity: 1,\n      scale: 1,\n      transition: {\n        duration: 0.5,\n        pathLength: { duration: 0.3 },\n        opacity: { duration: 0.2 },\n        scale: { duration: 0.3 },\n      },\n    },\n  };\n\n  const shineVariant = {\n    hidden: {\n      opacity: 0,\n      scale: 2,\n      strokeDasharray: \"20, 1000\",\n      strokeDashoffset: 0,\n      filter: \"blur(0px)\",\n    },\n    visible: {\n      opacity: [0, 1, 0],\n      strokeDashoffset: [0, -50, -100],\n      filter: [\"blur(2px)\", \"blur(2px)\", \"blur(0px)\"],\n      transition: {\n        duration: 0.75,\n      },\n    },\n  };\n\n  const sunPath =\n    \"M70 49.5C70 60.8218 60.8218 70 49.5 70C38.1782 70 29 60.8218 29 49.5C29 38.1782 38.1782 29 49.5 29C60 29 69.5 38 70 49.5Z\";\n  const moonPath =\n    \"M70 49.5C70 60.8218 60.8218 70 49.5 70C38.1782 70 29 60.8218 29 49.5C29 38.1782 38.1782 29 49.5 29C39 45 49.5 59.5 70 49.5Z\";\n  const fallbackPath = sunPath;\n\n  // Ensure we have valid paths at all times\n  // Light mode = sun, Dark mode = moon\n  const currentPath = mode === \"light\" ? sunPath : moonPath;\n  const safeCurrentPath = currentPath || fallbackPath;\n\n  return (\n    <button\n      type=\"button\"\n      className=\"flex w-full cursor-pointer flex-col items-center justify-center rounded-xl py-3 text-base font-medium transition duration-200\"\n      onClick={() => toggleMode()}\n    >\n      <span className=\"flex items-center\">\n        {showLabelAndImage && (\n          <span className=\"mr-2 text-neutral-900 dark:text-white\">\n            {mode === \"light\" ? \"Light\" : \"Dark\"}\n          </span>\n        )}\n\n        <motion.svg\n          strokeWidth=\"4\"\n          strokeLinecap=\"round\"\n          width={20}\n          height={20}\n          viewBox=\"0 0 100 100\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          className=\"relative\"\n        >\n          {/* Shine effect for moon in dark mode */}\n          {moonPath && (\n            <motion.path\n              variants={shineVariant}\n              d={moonPath}\n              className=\"absolute top-0 left-0 stroke-blue-100\"\n              initial=\"hidden\"\n              animate={mode === \"light\" ? \"hidden\" : \"visible\"}\n            />\n          )}\n\n          {/* Sun rays - visible in light mode */}\n          <motion.g\n            variants={raysVariants}\n            initial=\"hidden\"\n            animate={mode === \"dark\" ? \"hidden\" : \"visible\"}\n            style={{\n              strokeLinecap: \"round\",\n              strokeWidth: 6,\n              stroke: \"var(--color-yellow-500)\",\n            }}\n          >\n            <motion.path\n              className=\"origin-center\"\n              variants={rayVariant}\n              d=\"M50 2V11\"\n            />\n            <motion.path variants={rayVariant} d=\"M85 15L78 22\" />\n            <motion.path variants={rayVariant} d=\"M98 50H89\" />\n            <motion.path variants={rayVariant} d=\"M85 85L78 78\" />\n            <motion.path variants={rayVariant} d=\"M50 98V89\" />\n            <motion.path variants={rayVariant} d=\"M23 78L16 84\" />\n            <motion.path variants={rayVariant} d=\"M11 50H2\" />\n            <motion.path variants={rayVariant} d=\"M23 23L16 16\" />\n          </motion.g>\n\n          {/* Main path - Light=Sun(yellow), Dark=Moon(blue) */}\n          <motion.path\n            d={safeCurrentPath}\n            fill=\"transparent\"\n            transition={{ duration: 1, type: \"spring\" }}\n            initial={false}\n            animate={\n              mode === \"light\"\n                ? {\n                    d: sunPath || fallbackPath,\n                    rotate: 0,\n                    scale: 1,\n                    stroke: \"var(--color-yellow-500)\",\n                    fill: \"var(--color-yellow-500)\",\n                    fillOpacity: 0.5,\n                    strokeOpacity: 1,\n                  }\n                : {\n                    d: moonPath || fallbackPath,\n                    rotate: -360,\n                    scale: 2,\n                    stroke: \"var(--color-blue-400)\",\n                    fill: \"var(--color-blue-400)\",\n                    fillOpacity: 0.35,\n                    strokeOpacity: 1,\n                  }\n            }\n          />\n        </motion.svg>\n      </span>\n      {showLabelAndImage && (\n        <span className=\"mt-2 flex h-[90px] w-[180px] flex-col items-center justify-center rounded-md bg-neutral-100 dark:bg-neutral-800\">\n          <span className=\"my-4 flex w-[150px] flex-col rounded-md\">\n            <span className=\"mb-1 w-[80px] rounded-full bg-neutral-300 p-1 dark:bg-neutral-600\"></span>\n            <span className=\"mb-1 w-[100px] rounded-full bg-neutral-300 p-1 dark:bg-neutral-600\"></span>\n            <span className=\"w-[150px] rounded-full bg-neutral-300 p-1 dark:bg-neutral-600\"></span>\n          </span>\n          <span className=\"my-1 flex w-[150px] justify-between\">\n            <span className=\"mb-1 w-[80px] rounded-full bg-neutral-300 p-1 dark:bg-neutral-600\"></span>\n            <span className=\"mb-1 w-[30px] rounded-full bg-accent p-1\"></span>\n          </span>\n        </span>\n      )}\n    </button>\n  );\n}\n"],"mappings":"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"}

package/dist/chunks/switch-C5otDb4c.cjs

@@ -0,0 +1,64 @@
+require("./chunk-B_GkZjkl.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/forms/switch/Switch.tsx
+var sanitizeId = (value) => value.replace(/[^a-zA-Z0-9_-]/g, "-");
+var Switch = (0, react.forwardRef)(({ className = "", label, error, id, checked, ...props }, ref) => {
+	const generatedId = (0, react.useId)();
+	const switchId = id || `switch-${sanitizeId(generatedId)}`;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: `flex items-center space-x-2 ${className}`.trim().replace(/\s+/g, " "),
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+				htmlFor: switchId,
+				className: `
+            relative inline-flex h-6 w-11 cursor-pointer items-center rounded-full transition-colors duration-200
+            focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-background
+            disabled:cursor-not-allowed disabled:opacity-50
+            ${checked ? "bg-accent" : "bg-zinc-300 dark:bg-zinc-600"}
+          `.trim().replace(/\s+/g, " "),
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+					ref,
+					type: "checkbox",
+					id: switchId,
+					className: "sr-only",
+					checked,
+					...props
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: `
+              pointer-events-none
+              inline-block
+              h-4
+              w-4
+              transform
+              rounded-full
+              bg-white
+              shadow-lg
+              ring-0
+              transition-transform
+              duration-300
+              ease-in-out
+              ${checked ? "translate-x-6" : "translate-x-1"}
+            `.trim().replace(/\s+/g, " ") })]
+			}),
+			label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+				htmlFor: switchId,
+				className: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer",
+				children: label
+			}),
+			error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "text-sm font-medium text-destructive mt-1",
+				children: error
+			})
+		]
+	});
+});
+Switch.displayName = "Switch";
+//#endregion
+Object.defineProperty(exports, "Switch", {
+	enumerable: true,
+	get: function() {
+		return Switch;
+	}
+});
+
+//# sourceMappingURL=switch-C5otDb4c.cjs.map

package/dist/chunks/switch-C5otDb4c.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch-C5otDb4c.cjs","names":[],"sources":["../../src/components/forms/switch/Switch.tsx"],"sourcesContent":["import { forwardRef, useId } from \"react\";\n\nimport type { SwitchProps } from \"./types\";\n\nconst sanitizeId = (value: string) => value.replace(/[^a-zA-Z0-9_-]/g, \"-\");\n\nexport const Switch = forwardRef<HTMLInputElement, SwitchProps>(\n  ({ className = \"\", label, error, id, checked, ...props }, ref) => {\n    const generatedId = useId();\n    const switchId = id || `switch-${sanitizeId(generatedId)}`;\n    const containerClasses = `flex items-center space-x-2 ${className}`\n      .trim()\n      .replace(/\\s+/g, \" \");\n\n    return (\n      <div className={containerClasses}>\n        <label\n          htmlFor={switchId}\n          className={`\n            relative inline-flex h-6 w-11 cursor-pointer items-center rounded-full transition-colors duration-200\n            focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-background\n            disabled:cursor-not-allowed disabled:opacity-50\n            ${checked ? \"bg-accent\" : \"bg-zinc-300 dark:bg-zinc-600\"}\n          `\n            .trim()\n            .replace(/\\s+/g, \" \")}\n        >\n          <input\n            ref={ref}\n            type=\"checkbox\"\n            id={switchId}\n            className=\"sr-only\"\n            checked={checked}\n            {...props}\n          />\n          <span\n            className={`\n              pointer-events-none\n              inline-block\n              h-4\n              w-4\n              transform\n              rounded-full\n              bg-white\n              shadow-lg\n              ring-0\n              transition-transform\n              duration-300\n              ease-in-out\n              ${checked ? \"translate-x-6\" : \"translate-x-1\"}\n            `\n              .trim()\n              .replace(/\\s+/g, \" \")}\n          />\n        </label>\n        {label && (\n          <label\n            htmlFor={switchId}\n            className=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer\"\n          >\n            {label}\n          </label>\n        )}\n        {error && (\n          <p className=\"text-sm font-medium text-destructive mt-1\">{error}</p>\n        )}\n      </div>\n    );\n  },\n);\n\nSwitch.displayName = \"Switch\";\n"],"mappings":";;;;AAIA,IAAM,cAAc,UAAkB,MAAM,QAAQ,mBAAmB,IAAI;AAE3E,IAAa,UAAA,GAAA,MAAA,aACV,EAAE,YAAY,IAAI,OAAO,OAAO,IAAI,SAAS,GAAG,SAAS,QAAQ;CAChE,MAAM,eAAA,GAAA,MAAA,QAAqB;CAC3B,MAAM,WAAW,MAAM,UAAU,WAAW,YAAY;AAKxD,QACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EAAK,WALkB,+BAA+B,YACrD,MAAM,CACN,QAAQ,QAAQ,IAAI;YAGrB;GACE,iBAAA,GAAA,kBAAA,MAAC,SAAD;IACE,SAAS;IACT,WAAW;;;;cAIP,UAAU,cAAc,+BAA+B;YAExD,MAAM,CACN,QAAQ,QAAQ,IAAI;cATzB,CAWE,iBAAA,GAAA,kBAAA,KAAC,SAAD;KACO;KACL,MAAK;KACL,IAAI;KACJ,WAAU;KACD;KACT,GAAI;KACJ,CAAA,EACF,iBAAA,GAAA,kBAAA,KAAC,QAAD,EACE,WAAW;;;;;;;;;;;;;gBAaP,UAAU,kBAAkB,gBAAgB;cAE7C,MAAM,CACN,QAAQ,QAAQ,IAAI,EACvB,CAAA,CACI;;GACP,SACC,iBAAA,GAAA,kBAAA,KAAC,SAAD;IACE,SAAS;IACT,WAAU;cAET;IACK,CAAA;GAET,SACC,iBAAA,GAAA,kBAAA,KAAC,KAAD;IAAG,WAAU;cAA6C;IAAU,CAAA;GAElE;;EAGX;AAED,OAAO,cAAc"}

package/dist/chunks/switch-DOVl_i_s.mjs

@@ -0,0 +1,58 @@
+import { forwardRef, useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/forms/switch/Switch.tsx
+var sanitizeId = (value) => value.replace(/[^a-zA-Z0-9_-]/g, "-");
+var Switch = forwardRef(({ className = "", label, error, id, checked, ...props }, ref) => {
+	const generatedId = useId();
+	const switchId = id || `switch-${sanitizeId(generatedId)}`;
+	return /* @__PURE__ */ jsxs("div", {
+		className: `flex items-center space-x-2 ${className}`.trim().replace(/\s+/g, " "),
+		children: [
+			/* @__PURE__ */ jsxs("label", {
+				htmlFor: switchId,
+				className: `
+            relative inline-flex h-6 w-11 cursor-pointer items-center rounded-full transition-colors duration-200
+            focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-background
+            disabled:cursor-not-allowed disabled:opacity-50
+            ${checked ? "bg-accent" : "bg-zinc-300 dark:bg-zinc-600"}
+          `.trim().replace(/\s+/g, " "),
+				children: [/* @__PURE__ */ jsx("input", {
+					ref,
+					type: "checkbox",
+					id: switchId,
+					className: "sr-only",
+					checked,
+					...props
+				}), /* @__PURE__ */ jsx("span", { className: `
+              pointer-events-none
+              inline-block
+              h-4
+              w-4
+              transform
+              rounded-full
+              bg-white
+              shadow-lg
+              ring-0
+              transition-transform
+              duration-300
+              ease-in-out
+              ${checked ? "translate-x-6" : "translate-x-1"}
+            `.trim().replace(/\s+/g, " ") })]
+			}),
+			label && /* @__PURE__ */ jsx("label", {
+				htmlFor: switchId,
+				className: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer",
+				children: label
+			}),
+			error && /* @__PURE__ */ jsx("p", {
+				className: "text-sm font-medium text-destructive mt-1",
+				children: error
+			})
+		]
+	});
+});
+Switch.displayName = "Switch";
+//#endregion
+export { Switch as t };
+
+//# sourceMappingURL=switch-DOVl_i_s.mjs.map

package/dist/chunks/switch-DOVl_i_s.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch-DOVl_i_s.mjs","names":[],"sources":["../../src/components/forms/switch/Switch.tsx"],"sourcesContent":["import { forwardRef, useId } from \"react\";\n\nimport type { SwitchProps } from \"./types\";\n\nconst sanitizeId = (value: string) => value.replace(/[^a-zA-Z0-9_-]/g, \"-\");\n\nexport const Switch = forwardRef<HTMLInputElement, SwitchProps>(\n  ({ className = \"\", label, error, id, checked, ...props }, ref) => {\n    const generatedId = useId();\n    const switchId = id || `switch-${sanitizeId(generatedId)}`;\n    const containerClasses = `flex items-center space-x-2 ${className}`\n      .trim()\n      .replace(/\\s+/g, \" \");\n\n    return (\n      <div className={containerClasses}>\n        <label\n          htmlFor={switchId}\n          className={`\n            relative inline-flex h-6 w-11 cursor-pointer items-center rounded-full transition-colors duration-200\n            focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-background\n            disabled:cursor-not-allowed disabled:opacity-50\n            ${checked ? \"bg-accent\" : \"bg-zinc-300 dark:bg-zinc-600\"}\n          `\n            .trim()\n            .replace(/\\s+/g, \" \")}\n        >\n          <input\n            ref={ref}\n            type=\"checkbox\"\n            id={switchId}\n            className=\"sr-only\"\n            checked={checked}\n            {...props}\n          />\n          <span\n            className={`\n              pointer-events-none\n              inline-block\n              h-4\n              w-4\n              transform\n              rounded-full\n              bg-white\n              shadow-lg\n              ring-0\n              transition-transform\n              duration-300\n              ease-in-out\n              ${checked ? \"translate-x-6\" : \"translate-x-1\"}\n            `\n              .trim()\n              .replace(/\\s+/g, \" \")}\n          />\n        </label>\n        {label && (\n          <label\n            htmlFor={switchId}\n            className=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer\"\n          >\n            {label}\n          </label>\n        )}\n        {error && (\n          <p className=\"text-sm font-medium text-destructive mt-1\">{error}</p>\n        )}\n      </div>\n    );\n  },\n);\n\nSwitch.displayName = \"Switch\";\n"],"mappings":";;;AAIA,IAAM,cAAc,UAAkB,MAAM,QAAQ,mBAAmB,IAAI;AAE3E,IAAa,SAAS,YACnB,EAAE,YAAY,IAAI,OAAO,OAAO,IAAI,SAAS,GAAG,SAAS,QAAQ;CAChE,MAAM,cAAc,OAAO;CAC3B,MAAM,WAAW,MAAM,UAAU,WAAW,YAAY;AAKxD,QACE,qBAAC,OAAD;EAAK,WALkB,+BAA+B,YACrD,MAAM,CACN,QAAQ,QAAQ,IAAI;YAGrB;GACE,qBAAC,SAAD;IACE,SAAS;IACT,WAAW;;;;cAIP,UAAU,cAAc,+BAA+B;YAExD,MAAM,CACN,QAAQ,QAAQ,IAAI;cATzB,CAWE,oBAAC,SAAD;KACO;KACL,MAAK;KACL,IAAI;KACJ,WAAU;KACD;KACT,GAAI;KACJ,CAAA,EACF,oBAAC,QAAD,EACE,WAAW;;;;;;;;;;;;;gBAaP,UAAU,kBAAkB,gBAAgB;cAE7C,MAAM,CACN,QAAQ,QAAQ,IAAI,EACvB,CAAA,CACI;;GACP,SACC,oBAAC,SAAD;IACE,SAAS;IACT,WAAU;cAET;IACK,CAAA;GAET,SACC,oBAAC,KAAD;IAAG,WAAU;cAA6C;IAAU,CAAA;GAElE;;EAGX;AAED,OAAO,cAAc"}

package/dist/chunks/textarea-CAUsyu4-.cjs

@@ -0,0 +1,63 @@
+require("./chunk-B_GkZjkl.cjs");
+const require_utils = require("./utils-B4SmmY4J.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let framer_motion = require("framer-motion");
+//#region src/components/forms/textarea/Textarea.tsx
+var Textarea = (0, react.forwardRef)(({ className = "", label, error, helperText, disabled, ...props }, ref) => {
+	const radius = 100;
+	const [visible, setVisible] = (0, react.useState)(false);
+	const mouseX = (0, framer_motion.useMotionValue)(0);
+	const mouseY = (0, framer_motion.useMotionValue)(0);
+	const handleMouseMove = (event) => {
+		const { left, top } = event.currentTarget.getBoundingClientRect();
+		mouseX.set(event.clientX - left);
+		mouseY.set(event.clientY - top);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "w-full",
+		children: [
+			label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+				className: "mb-2 block text-sm leading-none font-medium text-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+				children: label
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.div, {
+				style: { backgroundImage: disabled ? "none" : framer_motion.useMotionTemplate`
+                  radial-gradient(
+                    ${visible ? `${radius}px` : "0px"} circle at ${mouseX}px ${mouseY}px,
+                    var(--ds-color-accent),
+                    transparent 90%
+                  )
+                ` },
+				onMouseMove: !disabled ? handleMouseMove : void 0,
+				onMouseEnter: !disabled ? () => setVisible(true) : void 0,
+				onMouseLeave: !disabled ? () => setVisible(false) : void 0,
+				className: require_utils.mergeClassNames("group/textarea rounded-lg p-[2px] transition duration-300 hover:border-accent", error ? "border-destructive" : "border-border"),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", {
+					ref,
+					disabled,
+					className: require_utils.mergeClassNames("shadow-input flex min-h-[80px] w-full rounded-md border border-input bg-background-secondary px-3 py-2 text-sm text-foreground transition duration-400 ease-in-out group-hover/textarea:shadow-none placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent disabled:cursor-not-allowed disabled:opacity-50 resize-none", error && "border-destructive text-destructive placeholder:text-destructive focus-visible:ring-destructive", className),
+					...props
+				})
+			}),
+			error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "text-sm font-medium text-destructive mt-1",
+				children: error
+			}),
+			helperText && !error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "mt-1 text-sm text-muted-foreground",
+				children: helperText
+			})
+		]
+	});
+});
+Textarea.displayName = "Textarea";
+//#endregion
+Object.defineProperty(exports, "Textarea", {
+	enumerable: true,
+	get: function() {
+		return Textarea;
+	}
+});
+
+//# sourceMappingURL=textarea-CAUsyu4-.cjs.map

package/dist/chunks/textarea-CAUsyu4-.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea-CAUsyu4-.cjs","names":[],"sources":["../../src/components/forms/textarea/Textarea.tsx"],"sourcesContent":["import type { TextareaProps } from \"./types\";\nimport { forwardRef, useState } from \"react\";\nimport { motion, useMotionTemplate, useMotionValue } from \"framer-motion\";\n\nimport { mergeClassNames } from \"../../../utils\";\n\nexport const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(\n  ({ className = \"\", label, error, helperText, disabled, ...props }, ref) => {\n    const radius = 100;\n    const [visible, setVisible] = useState(false);\n    const mouseX = useMotionValue(0);\n    const mouseY = useMotionValue(0);\n\n    const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {\n      const { left, top } = event.currentTarget.getBoundingClientRect();\n      mouseX.set(event.clientX - left);\n      mouseY.set(event.clientY - top);\n    };\n\n    return (\n      <div className=\"w-full\">\n        {label && (\n          <label className=\"mb-2 block text-sm leading-none font-medium text-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-70\">\n            {label}\n          </label>\n        )}\n\n        <motion.div\n          style={{\n            backgroundImage: disabled\n              ? \"none\"\n              : useMotionTemplate`\n                  radial-gradient(\n                    ${\n                      visible ? `${radius}px` : \"0px\"\n                    } circle at ${mouseX}px ${mouseY}px,\n                    var(--ds-color-accent),\n                    transparent 90%\n                  )\n                `,\n          }}\n          onMouseMove={!disabled ? handleMouseMove : undefined}\n          onMouseEnter={!disabled ? () => setVisible(true) : undefined}\n          onMouseLeave={!disabled ? () => setVisible(false) : undefined}\n          className={mergeClassNames(\n            \"group/textarea rounded-lg p-[2px] transition duration-300 hover:border-accent\",\n            error ? \"border-destructive\" : \"border-border\",\n          )}\n        >\n          <textarea\n            ref={ref}\n            disabled={disabled}\n            className={mergeClassNames(\n              \"shadow-input flex min-h-[80px] w-full rounded-md border border-input bg-background-secondary px-3 py-2 text-sm text-foreground transition duration-400 ease-in-out group-hover/textarea:shadow-none placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent disabled:cursor-not-allowed disabled:opacity-50 resize-none\",\n              error &&\n                \"border-destructive text-destructive placeholder:text-destructive focus-visible:ring-destructive\",\n              className,\n            )}\n            {...props}\n          />\n        </motion.div>\n\n        {error && (\n          <p className=\"text-sm font-medium text-destructive mt-1\">{error}</p>\n        )}\n        {helperText && !error && (\n          <p className=\"mt-1 text-sm text-muted-foreground\">{helperText}</p>\n        )}\n      </div>\n    );\n  },\n);\n\nTextarea.displayName = \"Textarea\";\n"],"mappings":";;;;;;AAMA,IAAa,YAAA,GAAA,MAAA,aACV,EAAE,YAAY,IAAI,OAAO,OAAO,YAAY,UAAU,GAAG,SAAS,QAAQ;CACzE,MAAM,SAAS;CACf,MAAM,CAAC,SAAS,eAAA,GAAA,MAAA,UAAuB,MAAM;CAC7C,MAAM,UAAA,GAAA,cAAA,gBAAwB,EAAE;CAChC,MAAM,UAAA,GAAA,cAAA,gBAAwB,EAAE;CAEhC,MAAM,mBAAmB,UAA4C;EACnE,MAAM,EAAE,MAAM,QAAQ,MAAM,cAAc,uBAAuB;AACjE,SAAO,IAAI,MAAM,UAAU,KAAK;AAChC,SAAO,IAAI,MAAM,UAAU,IAAI;;AAGjC,QACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EAAK,WAAU;YAAf;GACG,SACC,iBAAA,GAAA,kBAAA,KAAC,SAAD;IAAO,WAAU;cACd;IACK,CAAA;GAGV,iBAAA,GAAA,kBAAA,KAAC,cAAA,OAAO,KAAR;IACE,OAAO,EACL,iBAAiB,WACb,SACA,cAAA,iBAAiB;;sBAGX,UAAU,GAAG,OAAO,MAAM,MAC3B,aAAa,OAAO,KAAK,OAAO;;;;mBAK1C;IACD,aAAa,CAAC,WAAW,kBAAkB,KAAA;IAC3C,cAAc,CAAC,iBAAiB,WAAW,KAAK,GAAG,KAAA;IACnD,cAAc,CAAC,iBAAiB,WAAW,MAAM,GAAG,KAAA;IACpD,WAAW,cAAA,gBACT,iFACA,QAAQ,uBAAuB,gBAChC;cAED,iBAAA,GAAA,kBAAA,KAAC,YAAD;KACO;KACK;KACV,WAAW,cAAA,gBACT,+WACA,SACE,mGACF,UACD;KACD,GAAI;KACJ,CAAA;IACS,CAAA;GAEZ,SACC,iBAAA,GAAA,kBAAA,KAAC,KAAD;IAAG,WAAU;cAA6C;IAAU,CAAA;GAErE,cAAc,CAAC,SACd,iBAAA,GAAA,kBAAA,KAAC,KAAD;IAAG,WAAU;cAAsC;IAAe,CAAA;GAEhE;;EAGX;AAED,SAAS,cAAc"}

package/dist/chunks/textarea-CU5C-Zw9.mjs

@@ -0,0 +1,57 @@
+import { n as mergeClassNames } from "./utils-ati1KkDb.mjs";
+import { forwardRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { motion, useMotionTemplate, useMotionValue } from "framer-motion";
+//#region src/components/forms/textarea/Textarea.tsx
+var Textarea = forwardRef(({ className = "", label, error, helperText, disabled, ...props }, ref) => {
+	const radius = 100;
+	const [visible, setVisible] = useState(false);
+	const mouseX = useMotionValue(0);
+	const mouseY = useMotionValue(0);
+	const handleMouseMove = (event) => {
+		const { left, top } = event.currentTarget.getBoundingClientRect();
+		mouseX.set(event.clientX - left);
+		mouseY.set(event.clientY - top);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "w-full",
+		children: [
+			label && /* @__PURE__ */ jsx("label", {
+				className: "mb-2 block text-sm leading-none font-medium text-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+				children: label
+			}),
+			/* @__PURE__ */ jsx(motion.div, {
+				style: { backgroundImage: disabled ? "none" : useMotionTemplate`
+                  radial-gradient(
+                    ${visible ? `${radius}px` : "0px"} circle at ${mouseX}px ${mouseY}px,
+                    var(--ds-color-accent),
+                    transparent 90%
+                  )
+                ` },
+				onMouseMove: !disabled ? handleMouseMove : void 0,
+				onMouseEnter: !disabled ? () => setVisible(true) : void 0,
+				onMouseLeave: !disabled ? () => setVisible(false) : void 0,
+				className: mergeClassNames("group/textarea rounded-lg p-[2px] transition duration-300 hover:border-accent", error ? "border-destructive" : "border-border"),
+				children: /* @__PURE__ */ jsx("textarea", {
+					ref,
+					disabled,
+					className: mergeClassNames("shadow-input flex min-h-[80px] w-full rounded-md border border-input bg-background-secondary px-3 py-2 text-sm text-foreground transition duration-400 ease-in-out group-hover/textarea:shadow-none placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent disabled:cursor-not-allowed disabled:opacity-50 resize-none", error && "border-destructive text-destructive placeholder:text-destructive focus-visible:ring-destructive", className),
+					...props
+				})
+			}),
+			error && /* @__PURE__ */ jsx("p", {
+				className: "text-sm font-medium text-destructive mt-1",
+				children: error
+			}),
+			helperText && !error && /* @__PURE__ */ jsx("p", {
+				className: "mt-1 text-sm text-muted-foreground",
+				children: helperText
+			})
+		]
+	});
+});
+Textarea.displayName = "Textarea";
+//#endregion
+export { Textarea as t };
+
+//# sourceMappingURL=textarea-CU5C-Zw9.mjs.map

package/dist/chunks/textarea-CU5C-Zw9.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea-CU5C-Zw9.mjs","names":[],"sources":["../../src/components/forms/textarea/Textarea.tsx"],"sourcesContent":["import type { TextareaProps } from \"./types\";\nimport { forwardRef, useState } from \"react\";\nimport { motion, useMotionTemplate, useMotionValue } from \"framer-motion\";\n\nimport { mergeClassNames } from \"../../../utils\";\n\nexport const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(\n  ({ className = \"\", label, error, helperText, disabled, ...props }, ref) => {\n    const radius = 100;\n    const [visible, setVisible] = useState(false);\n    const mouseX = useMotionValue(0);\n    const mouseY = useMotionValue(0);\n\n    const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {\n      const { left, top } = event.currentTarget.getBoundingClientRect();\n      mouseX.set(event.clientX - left);\n      mouseY.set(event.clientY - top);\n    };\n\n    return (\n      <div className=\"w-full\">\n        {label && (\n          <label className=\"mb-2 block text-sm leading-none font-medium text-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-70\">\n            {label}\n          </label>\n        )}\n\n        <motion.div\n          style={{\n            backgroundImage: disabled\n              ? \"none\"\n              : useMotionTemplate`\n                  radial-gradient(\n                    ${\n                      visible ? `${radius}px` : \"0px\"\n                    } circle at ${mouseX}px ${mouseY}px,\n                    var(--ds-color-accent),\n                    transparent 90%\n                  )\n                `,\n          }}\n          onMouseMove={!disabled ? handleMouseMove : undefined}\n          onMouseEnter={!disabled ? () => setVisible(true) : undefined}\n          onMouseLeave={!disabled ? () => setVisible(false) : undefined}\n          className={mergeClassNames(\n            \"group/textarea rounded-lg p-[2px] transition duration-300 hover:border-accent\",\n            error ? \"border-destructive\" : \"border-border\",\n          )}\n        >\n          <textarea\n            ref={ref}\n            disabled={disabled}\n            className={mergeClassNames(\n              \"shadow-input flex min-h-[80px] w-full rounded-md border border-input bg-background-secondary px-3 py-2 text-sm text-foreground transition duration-400 ease-in-out group-hover/textarea:shadow-none placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent disabled:cursor-not-allowed disabled:opacity-50 resize-none\",\n              error &&\n                \"border-destructive text-destructive placeholder:text-destructive focus-visible:ring-destructive\",\n              className,\n            )}\n            {...props}\n          />\n        </motion.div>\n\n        {error && (\n          <p className=\"text-sm font-medium text-destructive mt-1\">{error}</p>\n        )}\n        {helperText && !error && (\n          <p className=\"mt-1 text-sm text-muted-foreground\">{helperText}</p>\n        )}\n      </div>\n    );\n  },\n);\n\nTextarea.displayName = \"Textarea\";\n"],"mappings":";;;;;AAMA,IAAa,WAAW,YACrB,EAAE,YAAY,IAAI,OAAO,OAAO,YAAY,UAAU,GAAG,SAAS,QAAQ;CACzE,MAAM,SAAS;CACf,MAAM,CAAC,SAAS,cAAc,SAAS,MAAM;CAC7C,MAAM,SAAS,eAAe,EAAE;CAChC,MAAM,SAAS,eAAe,EAAE;CAEhC,MAAM,mBAAmB,UAA4C;EACnE,MAAM,EAAE,MAAM,QAAQ,MAAM,cAAc,uBAAuB;AACjE,SAAO,IAAI,MAAM,UAAU,KAAK;AAChC,SAAO,IAAI,MAAM,UAAU,IAAI;;AAGjC,QACE,qBAAC,OAAD;EAAK,WAAU;YAAf;GACG,SACC,oBAAC,SAAD;IAAO,WAAU;cACd;IACK,CAAA;GAGV,oBAAC,OAAO,KAAR;IACE,OAAO,EACL,iBAAiB,WACb,SACA,iBAAiB;;sBAGX,UAAU,GAAG,OAAO,MAAM,MAC3B,aAAa,OAAO,KAAK,OAAO;;;;mBAK1C;IACD,aAAa,CAAC,WAAW,kBAAkB,KAAA;IAC3C,cAAc,CAAC,iBAAiB,WAAW,KAAK,GAAG,KAAA;IACnD,cAAc,CAAC,iBAAiB,WAAW,MAAM,GAAG,KAAA;IACpD,WAAW,gBACT,iFACA,QAAQ,uBAAuB,gBAChC;cAED,oBAAC,YAAD;KACO;KACK;KACV,WAAW,gBACT,+WACA,SACE,mGACF,UACD;KACD,GAAI;KACJ,CAAA;IACS,CAAA;GAEZ,SACC,oBAAC,KAAD;IAAG,WAAU;cAA6C;IAAU,CAAA;GAErE,cAAc,CAAC,SACd,oBAAC,KAAD;IAAG,WAAU;cAAsC;IAAe,CAAA;GAEhE;;EAGX;AAED,SAAS,cAAc"}

package/dist/chunks/theme-7DWLxJK_.cjs

@@ -0,0 +1,68 @@
+require("./chunk-B_GkZjkl.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/foundations/theme/ThemeProvider.tsx
+var ThemeContext = (0, react.createContext)(null);
+var MODE_STORAGE_KEY = "erp-pro-ui:mode";
+var THEME_STORAGE_KEY = "erp-pro-ui:theme";
+function getStoredMode() {
+	if (typeof window === "undefined") return null;
+	const mode = localStorage.getItem(MODE_STORAGE_KEY) ?? localStorage.getItem("mode");
+	return mode === "light" || mode === "dark" ? mode : null;
+}
+function getStoredTheme() {
+	if (typeof window === "undefined") return null;
+	const theme = localStorage.getItem(THEME_STORAGE_KEY) ?? localStorage.getItem("theme");
+	return theme === "purple" || theme === "teal" || theme === "yellow" || theme === "green" ? theme : null;
+}
+function ThemeProvider({ children }) {
+	const [mode, setMode] = (0, react.useState)(() => getStoredMode() ?? "dark");
+	const [theme, setTheme] = (0, react.useState)(() => getStoredTheme() ?? "purple");
+	(0, react.useLayoutEffect)(() => {
+		const colorScheme = `${theme}-${mode}`;
+		document.documentElement.setAttribute("data-brand", theme);
+		document.documentElement.setAttribute("data-mode", mode);
+		document.documentElement.setAttribute("data-theme", colorScheme);
+		document.documentElement.style.colorScheme = mode;
+		localStorage.setItem(MODE_STORAGE_KEY, mode);
+		localStorage.setItem(THEME_STORAGE_KEY, theme);
+		localStorage.setItem("mode", mode);
+		localStorage.setItem("theme", theme);
+		if (mode === "dark") document.documentElement.classList.add("dark");
+		else document.documentElement.classList.remove("dark");
+	}, [mode, theme]);
+	const toggleMode = () => setMode((previousMode) => previousMode === "light" ? "dark" : "light");
+	const value = {
+		mode,
+		theme,
+		brand: theme,
+		colorScheme: `${theme}-${mode}`,
+		setMode,
+		toggleMode,
+		setTheme
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ThemeContext.Provider, {
+		value,
+		children
+	});
+}
+function useThemeContext() {
+	const context = (0, react.useContext)(ThemeContext);
+	if (!context) throw new Error("useThemeContext must be used within a ThemeProvider");
+	return context;
+}
+//#endregion
+Object.defineProperty(exports, "ThemeProvider", {
+	enumerable: true,
+	get: function() {
+		return ThemeProvider;
+	}
+});
+Object.defineProperty(exports, "useThemeContext", {
+	enumerable: true,
+	get: function() {
+		return useThemeContext;
+	}
+});
+
+//# sourceMappingURL=theme-7DWLxJK_.cjs.map

package/dist/chunks/theme-7DWLxJK_.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-7DWLxJK_.cjs","names":[],"sources":["../../src/foundations/theme/ThemeProvider.tsx"],"sourcesContent":["import { createContext, useContext, useLayoutEffect, useState } from \"react\";\nimport type { ReactNode } from \"react\";\n\nexport type ThemeModeType = \"light\" | \"dark\";\nexport type ThemeColorType = \"purple\" | \"teal\" | \"yellow\" | \"green\";\n\nexport interface UseThemeType {\n  mode: ThemeModeType;\n  theme: ThemeColorType;\n  brand: ThemeColorType;\n  colorScheme: `${ThemeColorType}-${ThemeModeType}`;\n  setMode: (mode: ThemeModeType) => void;\n  toggleMode: () => void;\n  setTheme: (theme: ThemeColorType) => void;\n}\n\nconst ThemeContext = createContext<UseThemeType | null>(null);\n\nconst MODE_STORAGE_KEY = \"erp-pro-ui:mode\";\nconst THEME_STORAGE_KEY = \"erp-pro-ui:theme\";\n\nfunction getStoredMode(): ThemeModeType | null {\n  if (typeof window === \"undefined\") {\n    return null;\n  }\n\n  const mode =\n    localStorage.getItem(MODE_STORAGE_KEY) ?? localStorage.getItem(\"mode\");\n  return mode === \"light\" || mode === \"dark\" ? mode : null;\n}\n\nfunction getStoredTheme(): ThemeColorType | null {\n  if (typeof window === \"undefined\") {\n    return null;\n  }\n\n  const theme =\n    localStorage.getItem(THEME_STORAGE_KEY) ?? localStorage.getItem(\"theme\");\n  return theme === \"purple\" ||\n    theme === \"teal\" ||\n    theme === \"yellow\" ||\n    theme === \"green\"\n    ? theme\n    : null;\n}\n\nexport function ThemeProvider({ children }: { children: ReactNode }) {\n  const [mode, setMode] = useState<ThemeModeType>(\n    () => getStoredMode() ?? \"dark\",\n  );\n  const [theme, setTheme] = useState<ThemeColorType>(\n    () => getStoredTheme() ?? \"purple\",\n  );\n\n  useLayoutEffect(() => {\n    const colorScheme = `${theme}-${mode}`;\n\n    document.documentElement.setAttribute(\"data-brand\", theme);\n    document.documentElement.setAttribute(\"data-mode\", mode);\n    document.documentElement.setAttribute(\"data-theme\", colorScheme);\n    document.documentElement.style.colorScheme = mode;\n\n    localStorage.setItem(MODE_STORAGE_KEY, mode);\n    localStorage.setItem(THEME_STORAGE_KEY, theme);\n    localStorage.setItem(\"mode\", mode);\n    localStorage.setItem(\"theme\", theme);\n\n    if (mode === \"dark\") {\n      document.documentElement.classList.add(\"dark\");\n    } else {\n      document.documentElement.classList.remove(\"dark\");\n    }\n  }, [mode, theme]);\n\n  const toggleMode = () =>\n    setMode((previousMode) => (previousMode === \"light\" ? \"dark\" : \"light\"));\n\n  const value: UseThemeType = {\n    mode,\n    theme,\n    brand: theme,\n    colorScheme: `${theme}-${mode}` as const,\n    setMode,\n    toggleMode,\n    setTheme,\n  };\n\n  return (\n    <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>\n  );\n}\n\nexport function useThemeContext() {\n  const context = useContext(ThemeContext);\n\n  if (!context) {\n    throw new Error(\"useThemeContext must be used within a ThemeProvider\");\n  }\n\n  return context;\n}\n"],"mappings":";;;;AAgBA,IAAM,gBAAA,GAAA,MAAA,eAAkD,KAAK;AAE7D,IAAM,mBAAmB;AACzB,IAAM,oBAAoB;AAE1B,SAAS,gBAAsC;AAC7C,KAAI,OAAO,WAAW,YACpB,QAAO;CAGT,MAAM,OACJ,aAAa,QAAQ,iBAAiB,IAAI,aAAa,QAAQ,OAAO;AACxE,QAAO,SAAS,WAAW,SAAS,SAAS,OAAO;;AAGtD,SAAS,iBAAwC;AAC/C,KAAI,OAAO,WAAW,YACpB,QAAO;CAGT,MAAM,QACJ,aAAa,QAAQ,kBAAkB,IAAI,aAAa,QAAQ,QAAQ;AAC1E,QAAO,UAAU,YACf,UAAU,UACV,UAAU,YACV,UAAU,UACR,QACA;;AAGN,SAAgB,cAAc,EAAE,YAAqC;CACnE,MAAM,CAAC,MAAM,YAAA,GAAA,MAAA,gBACL,eAAe,IAAI,OAC1B;CACD,MAAM,CAAC,OAAO,aAAA,GAAA,MAAA,gBACN,gBAAgB,IAAI,SAC3B;AAED,EAAA,GAAA,MAAA,uBAAsB;EACpB,MAAM,cAAc,GAAG,MAAM,GAAG;AAEhC,WAAS,gBAAgB,aAAa,cAAc,MAAM;AAC1D,WAAS,gBAAgB,aAAa,aAAa,KAAK;AACxD,WAAS,gBAAgB,aAAa,cAAc,YAAY;AAChE,WAAS,gBAAgB,MAAM,cAAc;AAE7C,eAAa,QAAQ,kBAAkB,KAAK;AAC5C,eAAa,QAAQ,mBAAmB,MAAM;AAC9C,eAAa,QAAQ,QAAQ,KAAK;AAClC,eAAa,QAAQ,SAAS,MAAM;AAEpC,MAAI,SAAS,OACX,UAAS,gBAAgB,UAAU,IAAI,OAAO;MAE9C,UAAS,gBAAgB,UAAU,OAAO,OAAO;IAElD,CAAC,MAAM,MAAM,CAAC;CAEjB,MAAM,mBACJ,SAAS,iBAAkB,iBAAiB,UAAU,SAAS,QAAS;CAE1E,MAAM,QAAsB;EAC1B;EACA;EACA,OAAO;EACP,aAAa,GAAG,MAAM,GAAG;EACzB;EACA;EACA;EACD;AAED,QACE,iBAAA,GAAA,kBAAA,KAAC,aAAa,UAAd;EAA8B;EAAQ;EAAiC,CAAA;;AAI3E,SAAgB,kBAAkB;CAChC,MAAM,WAAA,GAAA,MAAA,YAAqB,aAAa;AAExC,KAAI,CAAC,QACH,OAAM,IAAI,MAAM,sDAAsD;AAGxE,QAAO"}

package/dist/chunks/theme-BceKeYhw.mjs

@@ -0,0 +1,56 @@
+import { createContext, useContext, useLayoutEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/foundations/theme/ThemeProvider.tsx
+var ThemeContext = createContext(null);
+var MODE_STORAGE_KEY = "erp-pro-ui:mode";
+var THEME_STORAGE_KEY = "erp-pro-ui:theme";
+function getStoredMode() {
+	if (typeof window === "undefined") return null;
+	const mode = localStorage.getItem(MODE_STORAGE_KEY) ?? localStorage.getItem("mode");
+	return mode === "light" || mode === "dark" ? mode : null;
+}
+function getStoredTheme() {
+	if (typeof window === "undefined") return null;
+	const theme = localStorage.getItem(THEME_STORAGE_KEY) ?? localStorage.getItem("theme");
+	return theme === "purple" || theme === "teal" || theme === "yellow" || theme === "green" ? theme : null;
+}
+function ThemeProvider({ children }) {
+	const [mode, setMode] = useState(() => getStoredMode() ?? "dark");
+	const [theme, setTheme] = useState(() => getStoredTheme() ?? "purple");
+	useLayoutEffect(() => {
+		const colorScheme = `${theme}-${mode}`;
+		document.documentElement.setAttribute("data-brand", theme);
+		document.documentElement.setAttribute("data-mode", mode);
+		document.documentElement.setAttribute("data-theme", colorScheme);
+		document.documentElement.style.colorScheme = mode;
+		localStorage.setItem(MODE_STORAGE_KEY, mode);
+		localStorage.setItem(THEME_STORAGE_KEY, theme);
+		localStorage.setItem("mode", mode);
+		localStorage.setItem("theme", theme);
+		if (mode === "dark") document.documentElement.classList.add("dark");
+		else document.documentElement.classList.remove("dark");
+	}, [mode, theme]);
+	const toggleMode = () => setMode((previousMode) => previousMode === "light" ? "dark" : "light");
+	const value = {
+		mode,
+		theme,
+		brand: theme,
+		colorScheme: `${theme}-${mode}`,
+		setMode,
+		toggleMode,
+		setTheme
+	};
+	return /* @__PURE__ */ jsx(ThemeContext.Provider, {
+		value,
+		children
+	});
+}
+function useThemeContext() {
+	const context = useContext(ThemeContext);
+	if (!context) throw new Error("useThemeContext must be used within a ThemeProvider");
+	return context;
+}
+//#endregion
+export { useThemeContext as n, ThemeProvider as t };
+
+//# sourceMappingURL=theme-BceKeYhw.mjs.map

package/dist/chunks/theme-BceKeYhw.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-BceKeYhw.mjs","names":[],"sources":["../../src/foundations/theme/ThemeProvider.tsx"],"sourcesContent":["import { createContext, useContext, useLayoutEffect, useState } from \"react\";\nimport type { ReactNode } from \"react\";\n\nexport type ThemeModeType = \"light\" | \"dark\";\nexport type ThemeColorType = \"purple\" | \"teal\" | \"yellow\" | \"green\";\n\nexport interface UseThemeType {\n  mode: ThemeModeType;\n  theme: ThemeColorType;\n  brand: ThemeColorType;\n  colorScheme: `${ThemeColorType}-${ThemeModeType}`;\n  setMode: (mode: ThemeModeType) => void;\n  toggleMode: () => void;\n  setTheme: (theme: ThemeColorType) => void;\n}\n\nconst ThemeContext = createContext<UseThemeType | null>(null);\n\nconst MODE_STORAGE_KEY = \"erp-pro-ui:mode\";\nconst THEME_STORAGE_KEY = \"erp-pro-ui:theme\";\n\nfunction getStoredMode(): ThemeModeType | null {\n  if (typeof window === \"undefined\") {\n    return null;\n  }\n\n  const mode =\n    localStorage.getItem(MODE_STORAGE_KEY) ?? localStorage.getItem(\"mode\");\n  return mode === \"light\" || mode === \"dark\" ? mode : null;\n}\n\nfunction getStoredTheme(): ThemeColorType | null {\n  if (typeof window === \"undefined\") {\n    return null;\n  }\n\n  const theme =\n    localStorage.getItem(THEME_STORAGE_KEY) ?? localStorage.getItem(\"theme\");\n  return theme === \"purple\" ||\n    theme === \"teal\" ||\n    theme === \"yellow\" ||\n    theme === \"green\"\n    ? theme\n    : null;\n}\n\nexport function ThemeProvider({ children }: { children: ReactNode }) {\n  const [mode, setMode] = useState<ThemeModeType>(\n    () => getStoredMode() ?? \"dark\",\n  );\n  const [theme, setTheme] = useState<ThemeColorType>(\n    () => getStoredTheme() ?? \"purple\",\n  );\n\n  useLayoutEffect(() => {\n    const colorScheme = `${theme}-${mode}`;\n\n    document.documentElement.setAttribute(\"data-brand\", theme);\n    document.documentElement.setAttribute(\"data-mode\", mode);\n    document.documentElement.setAttribute(\"data-theme\", colorScheme);\n    document.documentElement.style.colorScheme = mode;\n\n    localStorage.setItem(MODE_STORAGE_KEY, mode);\n    localStorage.setItem(THEME_STORAGE_KEY, theme);\n    localStorage.setItem(\"mode\", mode);\n    localStorage.setItem(\"theme\", theme);\n\n    if (mode === \"dark\") {\n      document.documentElement.classList.add(\"dark\");\n    } else {\n      document.documentElement.classList.remove(\"dark\");\n    }\n  }, [mode, theme]);\n\n  const toggleMode = () =>\n    setMode((previousMode) => (previousMode === \"light\" ? \"dark\" : \"light\"));\n\n  const value: UseThemeType = {\n    mode,\n    theme,\n    brand: theme,\n    colorScheme: `${theme}-${mode}` as const,\n    setMode,\n    toggleMode,\n    setTheme,\n  };\n\n  return (\n    <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>\n  );\n}\n\nexport function useThemeContext() {\n  const context = useContext(ThemeContext);\n\n  if (!context) {\n    throw new Error(\"useThemeContext must be used within a ThemeProvider\");\n  }\n\n  return context;\n}\n"],"mappings":";;;AAgBA,IAAM,eAAe,cAAmC,KAAK;AAE7D,IAAM,mBAAmB;AACzB,IAAM,oBAAoB;AAE1B,SAAS,gBAAsC;AAC7C,KAAI,OAAO,WAAW,YACpB,QAAO;CAGT,MAAM,OACJ,aAAa,QAAQ,iBAAiB,IAAI,aAAa,QAAQ,OAAO;AACxE,QAAO,SAAS,WAAW,SAAS,SAAS,OAAO;;AAGtD,SAAS,iBAAwC;AAC/C,KAAI,OAAO,WAAW,YACpB,QAAO;CAGT,MAAM,QACJ,aAAa,QAAQ,kBAAkB,IAAI,aAAa,QAAQ,QAAQ;AAC1E,QAAO,UAAU,YACf,UAAU,UACV,UAAU,YACV,UAAU,UACR,QACA;;AAGN,SAAgB,cAAc,EAAE,YAAqC;CACnE,MAAM,CAAC,MAAM,WAAW,eAChB,eAAe,IAAI,OAC1B;CACD,MAAM,CAAC,OAAO,YAAY,eAClB,gBAAgB,IAAI,SAC3B;AAED,uBAAsB;EACpB,MAAM,cAAc,GAAG,MAAM,GAAG;AAEhC,WAAS,gBAAgB,aAAa,cAAc,MAAM;AAC1D,WAAS,gBAAgB,aAAa,aAAa,KAAK;AACxD,WAAS,gBAAgB,aAAa,cAAc,YAAY;AAChE,WAAS,gBAAgB,MAAM,cAAc;AAE7C,eAAa,QAAQ,kBAAkB,KAAK;AAC5C,eAAa,QAAQ,mBAAmB,MAAM;AAC9C,eAAa,QAAQ,QAAQ,KAAK;AAClC,eAAa,QAAQ,SAAS,MAAM;AAEpC,MAAI,SAAS,OACX,UAAS,gBAAgB,UAAU,IAAI,OAAO;MAE9C,UAAS,gBAAgB,UAAU,OAAO,OAAO;IAElD,CAAC,MAAM,MAAM,CAAC;CAEjB,MAAM,mBACJ,SAAS,iBAAkB,iBAAiB,UAAU,SAAS,QAAS;CAE1E,MAAM,QAAsB;EAC1B;EACA;EACA,OAAO;EACP,aAAa,GAAG,MAAM,GAAG;EACzB;EACA;EACA;EACD;AAED,QACE,oBAAC,aAAa,UAAd;EAA8B;EAAQ;EAAiC,CAAA;;AAI3E,SAAgB,kBAAkB;CAChC,MAAM,UAAU,WAAW,aAAa;AAExC,KAAI,CAAC,QACH,OAAM,IAAI,MAAM,sDAAsD;AAGxE,QAAO"}