@valcis/brand 2.0.4 → 2.1.0

package/dist/index.js

@@ -48,11 +48,21 @@ __export(index_exports, {
   L_PATH: () => L_PATH,
   Logo: () => Logo,
   S_PATH: () => S_PATH,
+  Spinner: () => Spinner,
   VIEWBOXES: () => VIEWBOXES,
   V_CALLIGRAPHIC_FULL_TRANSFORM: () => V_CALLIGRAPHIC_FULL_TRANSFORM,
   V_CALLIGRAPHIC_PATH: () => V_CALLIGRAPHIC_PATH,
+  Watermark: () => Watermark,
+  background: () => background,
+  border: () => border,
+  colors: () => colors,
+  cssVariables: () => cssVariables,
   getDevInfo: () => getDevInfo,
-  useDevInfo: () => useDevInfo
+  primary: () => primary,
+  semantic: () => semantic,
+  text: () => text,
+  useDevInfo: () => useDevInfo,
+  useTheme: () => useTheme
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -92,22 +102,23 @@ function resolveSize(size) {
 var Logo = ({
   variant = "icon",
   size = 24,
-  animated = false,
+  animated,
   accentColor,
   textColor,
   className,
   style,
   ariaLabel
 }) => {
+  const isAnimated = animated ?? variant === "full";
   const px = resolveSize(size);
   const viewBox = VIEWBOXES[variant] ?? VIEWBOXES.icon;
   const ratio = ASPECT_RATIOS[variant] ?? ASPECT_RATIOS.icon;
   const width = px * (variant === "full" ? ratio : 1);
   const height = px * (variant === "full" ? 1 : 1 / ratio);
   const accent = accentColor ?? "var(--valcis-logo-accent, var(--primary, currentColor))";
-  const text = textColor ?? "var(--valcis-logo-text, currentColor)";
+  const text2 = textColor ?? "var(--valcis-logo-text, currentColor)";
   const isDecorative = !ariaLabel;
-  const cursorAnimation = animated && variant === "full" ? `
+  const cursorAnimation = isAnimated && variant === "full" ? `
 @keyframes valcis-cursor-blink {
   0%, 100% { opacity: 1; }
   50% { opacity: 0; }
@@ -116,7 +127,7 @@ var Logo = ({
   .valcis-cursor-blink { animation: valcis-cursor-blink 1s step-end infinite; }
 }
 ` : void 0;
-  const pulseAnimation = animated && variant === "icon" ? `
+  const pulseAnimation = isAnimated && variant === "icon" ? `
 @keyframes valcis-logo-pulse {
   0%, 100% { opacity: 1; }
   50% { opacity: 0.6; }
@@ -136,7 +147,7 @@ var Logo = ({
         fill: "none",
         width,
         height,
-        className: [animated && variant === "icon" ? "valcis-logo-animated" : "", className].filter(Boolean).join(" ") || void 0,
+        className: [isAnimated && variant === "icon" ? "valcis-logo-animated" : "", className].filter(Boolean).join(" ") || void 0,
         style,
         role: "img",
         "aria-hidden": isDecorative ? true : void 0,
@@ -145,22 +156,22 @@ var Logo = ({
           variant === "icon" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: BRACKET_LEFT_PATH, fill: accent }),
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: BRACKET_RIGHT_PATH, fill: accent }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { transform: "translate(30.85, 25.15) scale(1.15, 1.1) translate(-30.85, -25.15)", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: V_CALLIGRAPHIC_PATH, fill: text }) })
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { transform: "translate(30.85, 25.15) scale(1.15, 1.1) translate(-30.85, -25.15)", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: V_CALLIGRAPHIC_PATH, fill: text2 }) })
           ] }),
           variant === "full" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { transform: "scale(1,-1) translate(0,-640)", children: [
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { transform: "translate(0,0)", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: CHEVRON_RIGHT_FULL_PATH, fill: accent }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { transform: "translate(600,0)", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { transform: V_CALLIGRAPHIC_FULL_TRANSFORM, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: V_CALLIGRAPHIC_PATH, fill: text }) }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { transform: "translate(1260,0)", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: A_PATH, fill: text }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { transform: "translate(1860,0)", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: L_PATH, fill: text }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { transform: "translate(2460,0)", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: C_PATH, fill: text }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { transform: "translate(3060,0)", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: I_PATH, fill: text }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { transform: "translate(3660,0)", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: S_PATH, fill: text }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { transform: "translate(600,0)", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { transform: V_CALLIGRAPHIC_FULL_TRANSFORM, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: V_CALLIGRAPHIC_PATH, fill: text2 }) }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { transform: "translate(1260,0)", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: A_PATH, fill: text2 }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { transform: "translate(1860,0)", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: L_PATH, fill: text2 }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { transform: "translate(2460,0)", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: C_PATH, fill: text2 }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { transform: "translate(3060,0)", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: I_PATH, fill: text2 }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { transform: "translate(3660,0)", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: S_PATH, fill: text2 }) }),
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { transform: "translate(4260,0)", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
               "path",
               {
                 d: CURSOR_PATH,
                 fill: accent,
-                className: animated ? "valcis-cursor-blink" : void 0
+                className: isAnimated ? "valcis-cursor-blink" : void 0
               }
             ) })
           ] })
@@ -214,7 +225,7 @@ function useDevInfo(initialData, customUrl) {
         const response = await fetch(url, {
           signal: controller.signal,
           cache: "no-store",
-          headers: { "Accept": "application/json" }
+          headers: { Accept: "application/json" }
         });
         if (!response.ok) throw new Error("Fetch failed");
         const data = await response.json();
@@ -265,7 +276,7 @@ var Footer = ({
   accentColor,
   backgroundColor,
   textColor,
-  border = "top",
+  border: border2 = "top",
   padding = "normal",
   align = "center",
   position = "sticky",
@@ -306,8 +317,8 @@ var Footer = ({
   const logoColors = LOGO_COLORS[theme];
   const pad = typeof padding === "string" ? PADDING_MAP[padding] : { x: padding.x ?? "1rem", y: padding.y ?? "1rem" };
   const borderColor = c.border;
-  const borderTop = border === true || border === "top" || border === "both" ? `1px solid ${borderColor}` : "none";
-  const borderBottom = border === "bottom" || border === "both" ? `1px solid ${borderColor}` : "none";
+  const borderTop = border2 === true || border2 === "top" || border2 === "both" ? `1px solid ${borderColor}` : "none";
+  const borderBottom = border2 === "bottom" || border2 === "both" ? `1px solid ${borderColor}` : "none";
   const positionStyles = {};
   if (position === "sticky") {
     positionStyles.position = "sticky";
@@ -387,11 +398,17 @@ var Footer = ({
       "aria-label": `Visitar sitio web de ${devInfo.brand} (abre en nueva pesta\xF1a)`,
       children: logoElement
     }
-  ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: {
-    display: "inline-flex",
-    alignItems: "center",
-    padding: "0.35rem 0.5rem"
-  }, children: logoElement });
+  ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "span",
+    {
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        padding: "0.35rem 0.5rem"
+      },
+      children: logoElement
+    }
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("style", { children: dynamicStyles }),
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
@@ -430,7 +447,7 @@ async function getDevInfo(customUrl) {
     const url = customUrl || DEV_INFO_URL;
     const response = await fetch(url, {
       signal: controller.signal,
-      headers: { "Accept": "application/json" }
+      headers: { Accept: "application/json" }
     });
     if (!response.ok) {
       throw new Error(`HTTP ${response.status}`);
@@ -450,6 +467,299 @@ async function getDevInfo(customUrl) {
     clearTimeout(timeoutId);
   }
 }
+
+// src/components/Watermark.tsx
+var import_react3 = __toESM(require("react"));
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var POSITION_STYLES = {
+  "top-left": { top: "1rem", left: "1rem" },
+  "top-right": { top: "1rem", right: "1rem" },
+  "bottom-left": { bottom: "1rem", left: "1rem" },
+  "bottom-right": { bottom: "1rem", right: "1rem" },
+  center: { top: "50%", left: "50%", transform: "translate(-50%, -50%)" }
+};
+var Watermark = ({
+  position = "bottom-right",
+  opacity = 0.3,
+  size = 48,
+  rotation = 0,
+  showOnHover = false,
+  className
+}) => {
+  const styleHash = import_react3.default.useId().replace(/:/g, "");
+  const watermarkClass = `__valcis-watermark-${styleHash}`;
+  const positionStyle = POSITION_STYLES[position] || POSITION_STYLES["bottom-right"];
+  const baseStyles = {
+    position: "absolute",
+    ...positionStyle,
+    opacity: showOnHover ? 0 : opacity,
+    transition: "opacity 0.3s ease",
+    pointerEvents: "none",
+    zIndex: 10,
+    transform: `${positionStyle.transform || ""} rotate(${rotation}deg)`.trim()
+  };
+  const hoverStyles = showOnHover ? `
+    .${watermarkClass} { opacity: 0; }
+    *:hover > .${watermarkClass} { opacity: ${opacity}; }
+  ` : "";
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    hoverStyles && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("style", { children: hoverStyles }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: `${watermarkClass} ${className || ""}`.trim(), style: baseStyles, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Logo, { variant: "full", size, animated: false }) })
+  ] });
+};
+
+// src/components/Spinner.tsx
+var import_react4 = __toESM(require("react"));
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var SIZE_MAP2 = {
+  sm: 24,
+  md: 32,
+  lg: 48,
+  xl: 64
+};
+var Spinner = ({
+  size = "md",
+  animation = "pulse",
+  accentColor,
+  textColor,
+  label = "Cargando...",
+  className
+}) => {
+  const styleHash = import_react4.default.useId().replace(/:/g, "");
+  const spinnerClass = `__valcis-spinner-${styleHash}`;
+  const px = typeof size === "number" ? size : SIZE_MAP2[size] ?? 32;
+  const animations = {
+    pulse: `
+      @keyframes valcis-spinner-pulse-${styleHash} {
+        0%, 100% { opacity: 1; transform: scale(1); }
+        50% { opacity: 0.5; transform: scale(0.95); }
+      }
+      @media (prefers-reduced-motion: no-preference) {
+        .${spinnerClass} { animation: valcis-spinner-pulse-${styleHash} 1.5s ease-in-out infinite; }
+      }
+    `,
+    spin: `
+      @keyframes valcis-spinner-spin-${styleHash} {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
+      }
+      @media (prefers-reduced-motion: no-preference) {
+        .${spinnerClass} { animation: valcis-spinner-spin-${styleHash} 1.2s linear infinite; }
+      }
+    `,
+    bounce: `
+      @keyframes valcis-spinner-bounce-${styleHash} {
+        0%, 100% { transform: translateY(0); }
+        50% { transform: translateY(-25%); }
+      }
+      @media (prefers-reduced-motion: no-preference) {
+        .${spinnerClass} { animation: valcis-spinner-bounce-${styleHash} 0.8s ease-in-out infinite; }
+      }
+    `
+  };
+  const containerStyles = {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("style", { children: animations[animation] }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      "div",
+      {
+        className: `${spinnerClass} ${className || ""}`.trim(),
+        style: containerStyles,
+        role: "status",
+        "aria-label": label,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            Logo,
+            {
+              variant: "icon",
+              size: px,
+              animated: false,
+              accentColor,
+              textColor
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "span",
+            {
+              style: {
+                position: "absolute",
+                width: 1,
+                height: 1,
+                padding: 0,
+                margin: -1,
+                overflow: "hidden",
+                clip: "rect(0, 0, 0, 0)",
+                whiteSpace: "nowrap",
+                border: 0
+              },
+              children: label
+            }
+          )
+        ]
+      }
+    )
+  ] });
+};
+
+// src/shared/hooks/useTheme.ts
+var import_react5 = require("react");
+function getSavedTheme() {
+  if (typeof window === "undefined") return null;
+  try {
+    const saved = localStorage.getItem("valcis-theme");
+    if (saved === "light" || saved === "dark") return saved;
+  } catch {
+  }
+  return null;
+}
+function getSystemTheme() {
+  if (typeof window === "undefined") return "light";
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+function useTheme() {
+  const [manualTheme, setManualTheme] = (0, import_react5.useState)(getSavedTheme);
+  const [systemTheme, setSystemTheme] = (0, import_react5.useState)(getSystemTheme);
+  (0, import_react5.useEffect)(() => {
+    if (typeof window === "undefined") return;
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const handleChange = (e) => {
+      setSystemTheme(e.matches ? "dark" : "light");
+    };
+    mediaQuery.addEventListener("change", handleChange);
+    return () => {
+      mediaQuery.removeEventListener("change", handleChange);
+    };
+  }, []);
+  const theme = manualTheme ?? systemTheme;
+  const setTheme = (0, import_react5.useCallback)((newTheme) => {
+    setManualTheme(newTheme);
+    if (typeof window === "undefined") return;
+    try {
+      if (newTheme) {
+        localStorage.setItem("valcis-theme", newTheme);
+      } else {
+        localStorage.removeItem("valcis-theme");
+      }
+    } catch {
+    }
+  }, []);
+  const toggleTheme = (0, import_react5.useCallback)(() => {
+    setTheme(theme === "dark" ? "light" : "dark");
+  }, [theme, setTheme]);
+  return {
+    theme,
+    isDark: theme === "dark",
+    isLight: theme === "light",
+    setTheme,
+    toggleTheme
+  };
+}
+
+// src/theme/colors.ts
+var primary = {
+  /** Azul principal */
+  DEFAULT: "#3B82F6",
+  /** Azul claro (para dark mode) */
+  light: "#60A5FA",
+  /** Azul oscuro (hover) */
+  dark: "#2563EB",
+  /** Azul muy claro (backgrounds) */
+  50: "#EFF6FF",
+  100: "#DBEAFE",
+  200: "#BFDBFE",
+  300: "#93C5FD",
+  400: "#60A5FA",
+  500: "#3B82F6",
+  600: "#2563EB",
+  700: "#1D4ED8",
+  800: "#1E40AF",
+  900: "#1E3A8A"
+};
+var text = {
+  /** Texto principal (light mode) */
+  DEFAULT: "#1E293B",
+  /** Texto principal (dark mode) */
+  dark: "#F1F5F9",
+  /** Texto secundario (light mode) */
+  muted: "#64748B",
+  /** Texto secundario (dark mode) */
+  mutedDark: "#94A3B8"
+};
+var background = {
+  /** Fondo claro */
+  light: "#FFFFFF",
+  /** Fondo oscuro */
+  dark: "#0F172A",
+  /** Fondo gris claro */
+  muted: "#F8FAFC",
+  /** Fondo gris oscuro */
+  mutedDark: "#1E293B"
+};
+var border = {
+  /** Borde claro */
+  light: "#E2E8F0",
+  /** Borde oscuro */
+  dark: "#334155"
+};
+var semantic = {
+  success: "#22C55E",
+  warning: "#F59E0B",
+  error: "#EF4444",
+  info: "#3B82F6"
+};
+var colors = {
+  primary,
+  text,
+  background,
+  border,
+  semantic
+};
+var cssVariables = `
+:root {
+  /* Primary */
+  --valcis-primary: ${primary.DEFAULT};
+  --valcis-primary-light: ${primary.light};
+  --valcis-primary-dark: ${primary.dark};
+
+  /* Text */
+  --valcis-text: ${text.DEFAULT};
+  --valcis-text-muted: ${text.muted};
+
+  /* Background */
+  --valcis-bg: ${background.light};
+  --valcis-bg-muted: ${background.muted};
+
+  /* Border */
+  --valcis-border: ${border.light};
+
+  /* Logo espec\xEDficos */
+  --valcis-logo-accent: ${primary.DEFAULT};
+  --valcis-logo-text: ${text.DEFAULT};
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --valcis-primary: ${primary.light};
+    --valcis-primary-light: ${primary[300]};
+    --valcis-primary-dark: ${primary.DEFAULT};
+
+    --valcis-text: ${text.dark};
+    --valcis-text-muted: ${text.mutedDark};
+
+    --valcis-bg: ${background.dark};
+    --valcis-bg-muted: ${background.mutedDark};
+
+    --valcis-border: ${border.dark};
+
+    --valcis-logo-accent: ${primary.light};
+    --valcis-logo-text: ${text.dark};
+  }
+}
+`.trim();
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ASPECT_RATIOS,
@@ -470,9 +780,19 @@ async function getDevInfo(customUrl) {
   L_PATH,
   Logo,
   S_PATH,
+  Spinner,
   VIEWBOXES,
   V_CALLIGRAPHIC_FULL_TRANSFORM,
   V_CALLIGRAPHIC_PATH,
+  Watermark,
+  background,
+  border,
+  colors,
+  cssVariables,
   getDevInfo,
-  useDevInfo
+  primary,
+  semantic,
+  text,
+  useDevInfo,
+  useTheme
 });