@salesmind-ai/design-system 0.3.1 → 0.3.3

package/dist/chunk-YSYR54XR.js

@@ -0,0 +1,92 @@
+import { forwardRef, useState, useRef, useEffect } from 'react';
+import clsx from 'clsx';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/MetricCounter/MetricCounter.tsx
+var MetricCounter = forwardRef(
+  ({
+    value,
+    prefix = "",
+    suffix = "",
+    duration = 1500,
+    decimals = 0,
+    label,
+    className,
+    ...props
+  }, ref) => {
+    const [displayValue, setDisplayValue] = useState(0);
+    const [hasAnimated, setHasAnimated] = useState(false);
+    const containerRef = useRef(null);
+    const prefersReducedMotion = useRef(false);
+    useEffect(() => {
+      prefersReducedMotion.current = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+      if (prefersReducedMotion.current) {
+        setDisplayValue(value);
+        setHasAnimated(true);
+        return;
+      }
+      const observer = new IntersectionObserver(
+        (entries) => {
+          if (entries[0].isIntersecting && !hasAnimated) {
+            startAnimation();
+            observer.disconnect();
+          }
+        },
+        { threshold: 0.5 }
+      );
+      if (containerRef.current) {
+        observer.observe(containerRef.current);
+      }
+      return () => observer.disconnect();
+    }, [value, hasAnimated]);
+    const startAnimation = () => {
+      let startTime;
+      setHasAnimated(true);
+      const easeOutExpo = (t) => {
+        return t === 1 ? 1 : 1 - Math.pow(2, -10 * t);
+      };
+      const animate = (currentTime) => {
+        if (!startTime) startTime = currentTime;
+        const progress = Math.min((currentTime - startTime) / duration, 1);
+        const currentMultiplier = easeOutExpo(progress);
+        const nextValue = value * currentMultiplier;
+        setDisplayValue(nextValue);
+        if (progress < 1) {
+          requestAnimationFrame(animate);
+        } else {
+          setDisplayValue(value);
+        }
+      };
+      requestAnimationFrame(animate);
+    };
+    const formattedValue = displayValue.toLocaleString(void 0, {
+      minimumFractionDigits: decimals,
+      maximumFractionDigits: decimals
+    });
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: (node) => {
+          containerRef.current = node;
+          if (typeof ref === "function") ref(node);
+          else if (ref) ref.current = node;
+        },
+        className: clsx("ds-metric-counter", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "ds-metric-counter__value-wrapper", children: [
+            prefix && /* @__PURE__ */ jsx("span", { className: "ds-metric-counter__prefix", children: prefix }),
+            /* @__PURE__ */ jsx("span", { className: "ds-metric-counter__value", children: formattedValue }),
+            suffix && /* @__PURE__ */ jsx("span", { className: "ds-metric-counter__suffix", children: suffix })
+          ] }),
+          label && /* @__PURE__ */ jsx("div", { className: "ds-metric-counter__label", children: label })
+        ]
+      }
+    );
+  }
+);
+MetricCounter.displayName = "MetricCounter";
+
+export { MetricCounter };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=chunk-YSYR54XR.js.map

package/dist/chunk-YSYR54XR.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/MetricCounter/MetricCounter.tsx"],"names":[],"mappings":";AAAA,SAAgB,YAAY,WAAW,QAAQ,gBAAgB;AAC/D,OAAO,UAAU;AA+GT,SACa,KADb;AAxFD,IAAM,gBAAgB;AAAA,EAC3B,CACE;AAAA,IACE;AAAA,IACA,SAAS;AAAA,IACT,SAAS;AAAA,IACT,WAAW;AAAA,IACX,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,CAAC,cAAc,eAAe,IAAI,SAAS,CAAC;AAClD,UAAM,CAAC,aAAa,cAAc,IAAI,SAAS,KAAK;AACpD,UAAM,eAAe,OAAuB,IAAI;AAChD,UAAM,uBAAuB,OAAO,KAAK;AAEzC,cAAU,MAAM;AACd,2BAAqB,UAAU,OAAO,WAAW,kCAAkC,EAAE;AAErF,UAAI,qBAAqB,SAAS;AAChC,wBAAgB,KAAK;AACrB,uBAAe,IAAI;AACnB;AAAA,MACF;AAEA,YAAM,WAAW,IAAI;AAAA,QACnB,CAAC,YAAY;AACX,cAAI,QAAQ,CAAC,EAAE,kBAAkB,CAAC,aAAa;AAC7C,2BAAe;AACf,qBAAS,WAAW;AAAA,UACtB;AAAA,QACF;AAAA,QACA,EAAE,WAAW,IAAI;AAAA,MACnB;AAEA,UAAI,aAAa,SAAS;AACxB,iBAAS,QAAQ,aAAa,OAAO;AAAA,MACvC;AAEA,aAAO,MAAM,SAAS,WAAW;AAAA,IAEnC,GAAG,CAAC,OAAO,WAAW,CAAC;AAEvB,UAAM,iBAAiB,MAAM;AAC3B,UAAI;AACJ,qBAAe,IAAI;AAEnB,YAAM,cAAc,CAAC,MAAsB;AACzC,eAAO,MAAM,IAAI,IAAI,IAAI,KAAK,IAAI,GAAG,MAAM,CAAC;AAAA,MAC9C;AAEA,YAAM,UAAU,CAAC,gBAAwB;AACvC,YAAI,CAAC,UAAW,aAAY;AAC5B,cAAM,WAAW,KAAK,KAAK,cAAc,aAAa,UAAU,CAAC;AAEjE,cAAM,oBAAoB,YAAY,QAAQ;AAC9C,cAAM,YAAY,QAAQ;AAE1B,wBAAgB,SAAS;AAEzB,YAAI,WAAW,GAAG;AAChB,gCAAsB,OAAO;AAAA,QAC/B,OAAO;AACL,0BAAgB,KAAK;AAAA,QACvB;AAAA,MACF;AAEA,4BAAsB,OAAO;AAAA,IAC/B;AAEA,UAAM,iBAAiB,aAAa,eAAe,QAAW;AAAA,MAC5D,uBAAuB;AAAA,MACvB,uBAAuB;AAAA,IACzB,CAAC;AAED,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK,CAAC,SAAS;AACb,UAAC,aAA+D,UAAU;AAC1E,cAAI,OAAO,QAAQ,WAAY,KAAI,IAAI;AAAA,mBAC9B,IAAK,CAAC,IAAsD,UAAU;AAAA,QACjF;AAAA,QACA,WAAW,KAAK,qBAAqB,SAAS;AAAA,QAC7C,GAAG;AAAA,QAEJ;AAAA,+BAAC,SAAI,WAAU,oCACZ;AAAA,sBAAU,oBAAC,UAAK,WAAU,6BAA6B,kBAAO;AAAA,YAC/D,oBAAC,UAAK,WAAU,4BAA4B,0BAAe;AAAA,YAC1D,UAAU,oBAAC,UAAK,WAAU,6BAA6B,kBAAO;AAAA,aACjE;AAAA,UACC,SAAS,oBAAC,SAAI,WAAU,4BAA4B,iBAAM;AAAA;AAAA;AAAA,IAC7D;AAAA,EAEJ;AACF;AAEA,cAAc,cAAc","sourcesContent":["import React, { forwardRef, useEffect, useRef, useState } from 'react';\nimport clsx from 'clsx';\nimport './MetricCounter.css';\n\nexport interface MetricCounterProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** The target number to count up to */\n  value: number;\n  /** Optional prefix (e.g. \"$\", \"+\") */\n  prefix?: string;\n  /** Optional suffix (e.g. \"%\", \"M\") */\n  suffix?: string;\n  /** Duration of the animation in milliseconds (default: 1500) */\n  duration?: number;\n  /** Number of decimal places to show (default: 0) */\n  decimals?: number;\n  /** A label to display below the number */\n  label?: React.ReactNode;\n}\n\n/**\n * An animated counter for displaying key metrics and social proof.\n * Uses requestAnimationFrame for smooth counting and IntersectionObserver\n * to trigger only when visible. Respects prefers-reduced-motion.\n */\nexport const MetricCounter = forwardRef<HTMLDivElement, MetricCounterProps>(\n  (\n    {\n      value,\n      prefix = '',\n      suffix = '',\n      duration = 1500,\n      decimals = 0,\n      label,\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    const [displayValue, setDisplayValue] = useState(0);\n    const [hasAnimated, setHasAnimated] = useState(false);\n    const containerRef = useRef<HTMLDivElement>(null);\n    const prefersReducedMotion = useRef(false);\n\n    useEffect(() => {\n      prefersReducedMotion.current = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n      \n      if (prefersReducedMotion.current) {\n        setDisplayValue(value);\n        setHasAnimated(true);\n        return;\n      }\n\n      const observer = new IntersectionObserver(\n        (entries) => {\n          if (entries[0].isIntersecting && !hasAnimated) {\n            startAnimation();\n            observer.disconnect();\n          }\n        },\n        { threshold: 0.5 }\n      );\n\n      if (containerRef.current) {\n        observer.observe(containerRef.current);\n      }\n\n      return () => observer.disconnect();\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- startAnimation is stable and intentionally omitted to avoid re-triggering\n    }, [value, hasAnimated]);\n\n    const startAnimation = () => {\n      let startTime: number;\n      setHasAnimated(true);\n\n      const easeOutExpo = (t: number): number => {\n        return t === 1 ? 1 : 1 - Math.pow(2, -10 * t);\n      };\n\n      const animate = (currentTime: number) => {\n        if (!startTime) startTime = currentTime;\n        const progress = Math.min((currentTime - startTime) / duration, 1);\n        \n        const currentMultiplier = easeOutExpo(progress);\n        const nextValue = value * currentMultiplier;\n        \n        setDisplayValue(nextValue);\n\n        if (progress < 1) {\n          requestAnimationFrame(animate);\n        } else {\n          setDisplayValue(value);\n        }\n      };\n\n      requestAnimationFrame(animate);\n    };\n\n    const formattedValue = displayValue.toLocaleString(undefined, {\n      minimumFractionDigits: decimals,\n      maximumFractionDigits: decimals,\n    });\n\n    return (\n      <div\n        ref={(node) => {\n          (containerRef as React.MutableRefObject<HTMLDivElement | null>).current = node;\n          if (typeof ref === 'function') ref(node);\n          else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = node;\n        }}\n        className={clsx('ds-metric-counter', className)}\n        {...props}\n      >\n        <div className=\"ds-metric-counter__value-wrapper\">\n          {prefix && <span className=\"ds-metric-counter__prefix\">{prefix}</span>}\n          <span className=\"ds-metric-counter__value\">{formattedValue}</span>\n          {suffix && <span className=\"ds-metric-counter__suffix\">{suffix}</span>}\n        </div>\n        {label && <div className=\"ds-metric-counter__label\">{label}</div>}\n      </div>\n    );\n  }\n);\n\nMetricCounter.displayName = 'MetricCounter';\n"]}

package/dist/chunk-YTYDQBVY.cjs

@@ -0,0 +1,162 @@
+'use strict';
+
+var chunkH2Y6BSTL_cjs = require('./chunk-H2Y6BSTL.cjs');
+var chunkVC5LMUVQ_cjs = require('./chunk-VC5LMUVQ.cjs');
+var chunkLJADZITX_cjs = require('./chunk-LJADZITX.cjs');
+var react = require('react');
+var lucideReact = require('lucide-react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/web/analytics/create-analytics-loader.ts
+function createAnalyticsLoader(config) {
+  return (trackingId) => {
+    if (typeof document === "undefined") return;
+    if (document.getElementById(config.id)) return;
+    const script = document.createElement("script");
+    script.id = config.id;
+    if (config.inlineScript) {
+      script.textContent = config.inlineScript(trackingId);
+    } else {
+      script.async = config.async ?? true;
+      script.src = config.src(trackingId);
+    }
+    document.head.appendChild(script);
+    config.onLoad?.(trackingId);
+  };
+}
+var loadGoogleAnalytics = createAnalyticsLoader({
+  id: "ga-script",
+  src: (gaId) => `https://www.googletagmanager.com/gtag/js?id=${gaId}`,
+  onLoad: (gaId) => {
+    window.dataLayer = window.dataLayer || [];
+    window.dataLayer.push(["js", /* @__PURE__ */ new Date()]);
+    window.dataLayer.push(["config", gaId]);
+  }
+});
+var loadClarity = createAnalyticsLoader({
+  id: "clarity-script",
+  src: (clarityId) => `https://www.clarity.ms/tag/${clarityId}`,
+  onLoad: () => {
+    if (!window.clarity) {
+      const queue = [];
+      window.clarity = (...args) => {
+        queue.push(args);
+      };
+      window.clarity.q = queue;
+    }
+  }
+});
+var COOKIE_CONSENT_EVENT = "cookie_consent_granted";
+var COOKIE_CONSENT_KEY = "cookie_consent";
+function CookieConsent({
+  delay = 1e3,
+  privacyUrl = "/legal/privacy",
+  onAccept,
+  onDecline,
+  labels,
+  className
+}) {
+  const [state, setState] = react.useState("idle");
+  react.useEffect(() => {
+    const consent = localStorage.getItem(COOKIE_CONSENT_KEY);
+    if (!consent) {
+      const timer = setTimeout(() => setState("open"), delay);
+      return () => clearTimeout(timer);
+    } else {
+      setState("closed");
+    }
+  }, [delay]);
+  const handleDismiss = react.useCallback(() => {
+    setState("closing");
+  }, []);
+  const handleAccept = react.useCallback(() => {
+    localStorage.setItem(COOKIE_CONSENT_KEY, "granted");
+    handleDismiss();
+    if (typeof window !== "undefined") {
+      window.dispatchEvent(new Event(COOKIE_CONSENT_EVENT));
+    }
+    onAccept?.();
+  }, [onAccept, handleDismiss]);
+  const handleDecline = react.useCallback(() => {
+    localStorage.setItem(COOKIE_CONSENT_KEY, "denied");
+    handleDismiss();
+    onDecline?.();
+  }, [onDecline, handleDismiss]);
+  const handleTransitionEnd = react.useCallback(() => {
+    if (state === "closing") {
+      setState("closed");
+    }
+  }, [state]);
+  if (state === "idle" || state === "closed") return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: `ds-cookie-consent ${className ?? ""}`,
+      "data-state": state === "open" ? "open" : "closed",
+      onTransitionEnd: handleTransitionEnd,
+      role: "dialog",
+      "aria-label": labels?.title ?? "Cookie consent",
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-cookie-consent__inner", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-cookie-consent__content", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "ds-cookie-consent__title", children: labels?.title ?? "We use cookies" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "ds-cookie-consent__description", children: [
+            labels?.description ?? "We use tracking cookies to understand how you use the product and help us improve it.",
+            /* @__PURE__ */ jsxRuntime.jsx(chunkLJADZITX_cjs.OutboundLink, { href: privacyUrl, context: "cookie-consent-privacy", className: "ds-cookie-consent__link", children: labels?.privacyLinkText ?? "Privacy Policy" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-cookie-consent__actions", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(chunkH2Y6BSTL_cjs.Button, { variant: "outline", size: "sm", onClick: handleDecline, children: labels?.declineLabel ?? "Decline" }),
+          /* @__PURE__ */ jsxRuntime.jsx(chunkH2Y6BSTL_cjs.Button, { variant: "primary", size: "sm", onClick: handleAccept, children: labels?.acceptLabel ?? "Accept" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: handleDecline,
+            className: "ds-cookie-consent__close",
+            "aria-label": "Close",
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 16 })
+          }
+        )
+      ] })
+    }
+  );
+}
+function useCookieConsent() {
+  const [status, setStatus] = react.useState(() => {
+    if (typeof window === "undefined") return null;
+    const stored = localStorage.getItem(COOKIE_CONSENT_KEY);
+    if (stored === "granted") return "granted";
+    if (stored === "denied") return "denied";
+    return null;
+  });
+  react.useEffect(() => {
+    const handleConsent = () => setStatus("granted");
+    window.addEventListener(COOKIE_CONSENT_EVENT, handleConsent);
+    return () => window.removeEventListener(COOKIE_CONSENT_EVENT, handleConsent);
+  }, []);
+  return status;
+}
+function AnalyticsProvider({ onTrack, debug = false, children }) {
+  const track = react.useCallback(
+    (event, props) => {
+      if (debug && typeof console !== "undefined") {
+        console.log("[DS Analytics]", event, props);
+      }
+      onTrack(event, props);
+    },
+    [onTrack, debug]
+  );
+  const value = react.useMemo(() => ({ track }), [track]);
+  return /* @__PURE__ */ jsxRuntime.jsx(chunkVC5LMUVQ_cjs.AnalyticsContext.Provider, { value, children });
+}
+
+exports.AnalyticsProvider = AnalyticsProvider;
+exports.COOKIE_CONSENT_EVENT = COOKIE_CONSENT_EVENT;
+exports.COOKIE_CONSENT_KEY = COOKIE_CONSENT_KEY;
+exports.CookieConsent = CookieConsent;
+exports.createAnalyticsLoader = createAnalyticsLoader;
+exports.loadClarity = loadClarity;
+exports.loadGoogleAnalytics = loadGoogleAnalytics;
+exports.useCookieConsent = useCookieConsent;
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=chunk-YTYDQBVY.cjs.map

package/dist/chunk-YTYDQBVY.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/web/analytics/create-analytics-loader.ts","../src/web/CookieConsent/CookieConsent.tsx","../src/web/analytics/use-cookie-consent.ts","../src/web/analytics/analytics-provider.tsx"],"names":["useState","useEffect","useCallback","jsx"],"mappings":"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","sourcesContent":["/**\n * Generic analytics script loader.\n *\n * Framework-agnostic: injects a `<script>` tag into `<head>` once,\n * guards against double-loading, and respects cookie consent.\n *\n * @example\n * ```ts\n * import { createAnalyticsLoader } from '@salesmind-ai/design-system/web';\n *\n * const loadGA = createAnalyticsLoader({\n *   id: 'ga-script',\n *   src: (gaId) => `https://www.googletagmanager.com/gtag/js?id=${gaId}`,\n *   onLoad: (gaId) => {\n *     window.dataLayer = window.dataLayer || [];\n *     function gtag(...args: unknown[]) { window.dataLayer.push(args); }\n *     gtag('js', new Date());\n *     gtag('config', gaId);\n *   },\n * });\n *\n * // Later, after consent:\n * loadGA('G-XXXXXX');\n * ```\n */\n\nexport interface AnalyticsLoaderConfig<TId extends string = string> {\n  /** Unique DOM id for the script element (prevents double-loading) */\n  id: string;\n  /** Build the script src URL from the tracking ID */\n  src: (trackingId: TId) => string;\n  /** Async attribute on the script tag (default: true) */\n  async?: boolean;\n  /** Called after the script is appended to the DOM */\n  onLoad?: (trackingId: TId) => void;\n  /** Custom inline script content instead of an external src */\n  inlineScript?: (trackingId: TId) => string;\n}\n\n/**\n * Create a reusable analytics loader function.\n * The returned function injects the script once and is safe to call multiple times.\n */\nexport function createAnalyticsLoader<TId extends string = string>(\n  config: AnalyticsLoaderConfig<TId>,\n): (trackingId: TId) => void {\n  return (trackingId: TId) => {\n    if (typeof document === 'undefined') return;\n    if (document.getElementById(config.id)) return;\n\n    const script = document.createElement('script');\n    script.id = config.id;\n\n    if (config.inlineScript) {\n      script.textContent = config.inlineScript(trackingId);\n    } else {\n      script.async = config.async ?? true;\n      script.src = config.src(trackingId);\n    }\n\n    document.head.appendChild(script);\n    config.onLoad?.(trackingId);\n  };\n}\n\n// ─── Pre-built Loaders ──────────────────────────────────────────────────────\n\ndeclare global {\n  interface Window {\n    dataLayer: unknown[];\n    clarity?: (...args: unknown[]) => void;\n  }\n}\n\n/**\n * Load Google Analytics (gtag.js).\n * Call with your GA measurement ID after cookie consent.\n */\nexport const loadGoogleAnalytics = createAnalyticsLoader({\n  id: 'ga-script',\n  src: (gaId) => `https://www.googletagmanager.com/gtag/js?id=${gaId}`,\n  onLoad: (gaId) => {\n    window.dataLayer = window.dataLayer || [];\n    // Use array push directly to avoid @ts-ignore issues with gtag signature\n    window.dataLayer.push(['js', new Date()]);\n    window.dataLayer.push(['config', gaId]);\n  },\n});\n\n/**\n * Load Microsoft Clarity.\n * Call with your Clarity project ID after cookie consent.\n */\nexport const loadClarity = createAnalyticsLoader({\n  id: 'clarity-script',\n  src: (clarityId) => `https://www.clarity.ms/tag/${clarityId}`,\n  onLoad: () => {\n    // Clarity auto-initializes from the script tag.\n    // Expose the global `clarity` queue function for custom events.\n    if (!window.clarity) {\n      const queue: unknown[][] = [];\n      window.clarity = (...args: unknown[]) => {\n        queue.push(args);\n      };\n      (window.clarity as unknown as { q: unknown[][] }).q = queue;\n    }\n  },\n});\n","\"use client\";\nimport { useState, useEffect, useCallback } from 'react';\nimport { Button } from '../../components/Button/Button';\nimport { OutboundLink } from '../../components/OutboundLink/OutboundLink';\nimport { X } from 'lucide-react';\nimport './CookieConsent.css';\n\n/** Cookie consent state */\nexport type ConsentStatus = 'granted' | 'denied' | null;\n\n/** Event name dispatched on window when consent changes */\nexport const COOKIE_CONSENT_EVENT = 'cookie_consent_granted';\n\n/** localStorage key for cookie consent */\nexport const COOKIE_CONSENT_KEY = 'cookie_consent';\n\n/** Labels for i18n support */\nexport interface CookieConsentLabels {\n  title?: string;\n  description?: string;\n  privacyLinkText?: string;\n  acceptLabel?: string;\n  declineLabel?: string;\n}\n\nexport interface CookieConsentProps {\n  /** Delay in ms before showing the banner (default: 1000) */\n  delay?: number;\n  /** URL to the privacy policy page (default: \"/legal/privacy\") */\n  privacyUrl?: string;\n  /** Called when the user accepts cookies */\n  onAccept?: () => void;\n  /** Called when the user declines cookies */\n  onDecline?: () => void;\n  /** Override default labels for i18n */\n  labels?: CookieConsentLabels;\n  /** Custom className for the container */\n  className?: string;\n}\n\n/**\n * CookieConsent — GDPR-compliant cookie consent banner.\n *\n * - Animated entrance/exit via CSS transitions (no framer-motion)\n * - Respects prior consent stored in localStorage\n * - Dispatches a `cookie_consent_granted` event on the window for analytics loaders\n * - Uses DS Button component\n *\n * @example\n * ```tsx\n * import { CookieConsent } from '@salesmind-ai/design-system/web';\n *\n * <CookieConsent\n *   privacyUrl=\"/legal/privacy\"\n *   onAccept={() => loadGoogleAnalytics('G-XXXX')}\n * />\n * ```\n */\nexport function CookieConsent({\n  delay = 1000,\n  privacyUrl = '/legal/privacy',\n  onAccept,\n  onDecline,\n  labels,\n  className,\n}: CookieConsentProps) {\n  // 'idle' = not yet determined, 'open' = visible, 'closing' = exit animation, 'closed' = hidden\n  const [state, setState] = useState<'idle' | 'open' | 'closing' | 'closed'>('idle');\n\n  useEffect(() => {\n    const consent = localStorage.getItem(COOKIE_CONSENT_KEY);\n    if (!consent) {\n      const timer = setTimeout(() => setState('open'), delay);\n      return () => clearTimeout(timer);\n    } else {\n      setState('closed');\n    }\n  }, [delay]);\n\n  const handleDismiss = useCallback(() => {\n    setState('closing');\n  }, []);\n\n  const handleAccept = useCallback(() => {\n    localStorage.setItem(COOKIE_CONSENT_KEY, 'granted');\n    handleDismiss();\n    if (typeof window !== 'undefined') {\n      window.dispatchEvent(new Event(COOKIE_CONSENT_EVENT));\n    }\n    onAccept?.();\n  }, [onAccept, handleDismiss]);\n\n  const handleDecline = useCallback(() => {\n    localStorage.setItem(COOKIE_CONSENT_KEY, 'denied');\n    handleDismiss();\n    onDecline?.();\n  }, [onDecline, handleDismiss]);\n\n  const handleTransitionEnd = useCallback(() => {\n    if (state === 'closing') {\n      setState('closed');\n    }\n  }, [state]);\n\n  // Don't render anything until we know consent status, or after fully closed\n  if (state === 'idle' || state === 'closed') return null;\n\n  return (\n    <div\n      className={`ds-cookie-consent ${className ?? ''}`}\n      data-state={state === 'open' ? 'open' : 'closed'}\n      onTransitionEnd={handleTransitionEnd}\n      role=\"dialog\"\n      aria-label={labels?.title ?? 'Cookie consent'}\n    >\n      <div className=\"ds-cookie-consent__inner\">\n        <div className=\"ds-cookie-consent__content\">\n          <h3 className=\"ds-cookie-consent__title\">\n            {labels?.title ?? 'We use cookies'}\n          </h3>\n          <p className=\"ds-cookie-consent__description\">\n            {labels?.description ??\n              'We use tracking cookies to understand how you use the product and help us improve it.'}\n            <OutboundLink href={privacyUrl} context=\"cookie-consent-privacy\" className=\"ds-cookie-consent__link\">\n              {labels?.privacyLinkText ?? 'Privacy Policy'}\n            </OutboundLink>\n          </p>\n        </div>\n        <div className=\"ds-cookie-consent__actions\">\n          <Button variant=\"outline\" size=\"sm\" onClick={handleDecline}>\n            {labels?.declineLabel ?? 'Decline'}\n          </Button>\n          <Button variant=\"primary\" size=\"sm\" onClick={handleAccept}>\n            {labels?.acceptLabel ?? 'Accept'}\n          </Button>\n        </div>\n        <button\n          onClick={handleDecline}\n          className=\"ds-cookie-consent__close\"\n          aria-label=\"Close\"\n        >\n          <X size={16} />\n        </button>\n      </div>\n    </div>\n  );\n}\n","\"use client\";\nimport { useState, useEffect } from 'react';\nimport { COOKIE_CONSENT_EVENT, COOKIE_CONSENT_KEY, type ConsentStatus } from '../CookieConsent/CookieConsent';\n\n/**\n * React hook that tracks cookie consent status.\n *\n * Returns `true` once the user has granted cookie consent,\n * `false` if denied, `null` if not yet decided.\n *\n * Listens for the `cookie_consent_granted` window event dispatched\n * by the CookieConsent component.\n *\n * @example\n * ```tsx\n * const hasConsent = useCookieConsent();\n *\n * useEffect(() => {\n *   if (hasConsent) loadGoogleAnalytics('G-XXXX');\n * }, [hasConsent]);\n * ```\n */\nexport function useCookieConsent(): ConsentStatus {\n  const [status, setStatus] = useState<ConsentStatus>(() => {\n    if (typeof window === 'undefined') return null;\n    const stored = localStorage.getItem(COOKIE_CONSENT_KEY);\n    if (stored === 'granted') return 'granted';\n    if (stored === 'denied') return 'denied';\n    return null;\n  });\n\n  useEffect(() => {\n    const handleConsent = () => setStatus('granted');\n    window.addEventListener(COOKIE_CONSENT_EVENT, handleConsent);\n    return () => window.removeEventListener(COOKIE_CONSENT_EVENT, handleConsent);\n  }, []);\n\n  return status;\n}\n","\"use client\";\nimport { useCallback, useMemo } from 'react';\nimport type { ReactNode } from 'react';\nimport { AnalyticsContext } from './analytics-context';\nimport type { TrackFn } from './analytics-context';\n\n/* ============================================================================\n   ANALYTICS PROVIDER — Event Tracking Context\n   ============================================================================\n\n   Provides a unified event tracking interface for all marketing/conversion\n   components. Components call `useAnalytics().track(...)` without knowing\n   which analytics backend is active.\n\n   When no provider is present, all calls are no-ops — safe for Storybook,\n   tests, and SSR.\n\n   Usage:\n     // In your app root:\n     <AnalyticsProvider onTrack={(event, props) => gtag('event', event, props)}>\n       <App />\n     </AnalyticsProvider>\n\n     // In any DS component:\n     const { track } = useAnalytics();\n     track('cta_click', { location: 'hero', label: 'Book Demo' });\n\n   ============================================================================ */\n\n/** Props for the AnalyticsProvider component */\nexport interface AnalyticsProviderProps {\n  /** Callback invoked on every track() call. Wire this to your analytics backend. */\n  onTrack: TrackFn;\n  /** Enable console logging in development (default: false) */\n  debug?: boolean;\n  children: ReactNode;\n}\n\n/**\n * Provides analytics event tracking to all descendant DS components.\n *\n * @example\n * ```tsx\n * <AnalyticsProvider\n *   onTrack={(event, props) => {\n *     window.gtag?.('event', event, props);\n *   }}\n * >\n *   <App />\n * </AnalyticsProvider>\n * ```\n */\nexport function AnalyticsProvider({ onTrack, debug = false, children }: AnalyticsProviderProps) {\n  const track: TrackFn = useCallback(\n    (event, props) => {\n      if (debug && typeof console !== 'undefined') {\n        // eslint-disable-next-line no-console\n        console.log('[DS Analytics]', event, props);\n      }\n      onTrack(event, props);\n    },\n    [onTrack, debug],\n  );\n\n  const value = useMemo(() => ({ track }), [track]);\n\n  return <AnalyticsContext.Provider value={value}>{children}</AnalyticsContext.Provider>;\n}\n"]}