@salesmind-ai/design-system 0.6.0 → 0.7.0

package/dist/chunk-UGKYP6F3.cjs

@@ -0,0 +1,296 @@
+'use strict';
+
+var react = require('react');
+var clsx = require('clsx');
+var jsxRuntime = require('react/jsx-runtime');
+var dialog = require('@base-ui/react/dialog');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+
+// src/components/StarRating/StarRating.tsx
+var StarRating = react.forwardRef(
+  ({
+    value,
+    max = 5,
+    size = "md",
+    animate = false,
+    showValue = false,
+    valueLabel,
+    className,
+    ...props
+  }, ref) => {
+    const [visible, setVisible] = react.useState(!animate);
+    const containerRef = react.useRef(null);
+    react.useEffect(() => {
+      if (!animate) return;
+      if (typeof window !== "undefined") {
+        const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
+        if (mq.matches) {
+          setVisible(true);
+          return;
+        }
+      }
+      const target = containerRef.current;
+      if (!target) return;
+      const observer = new IntersectionObserver(
+        ([entry]) => {
+          if (entry.isIntersecting) {
+            setVisible(true);
+            observer.disconnect();
+          }
+        },
+        { threshold: 0.5 }
+      );
+      observer.observe(target);
+      return () => observer.disconnect();
+    }, [animate]);
+    const clampedValue = Math.min(Math.max(value, 0), max);
+    const stars = Array.from({ length: max }, (_, i) => {
+      const starIndex = i + 1;
+      const fillPercent = clampedValue >= starIndex ? 100 : clampedValue > starIndex - 1 ? (clampedValue - (starIndex - 1)) * 100 : 0;
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "span",
+        {
+          className: clsx__default.default(
+            "ds-star-rating__star",
+            visible && "ds-star-rating__star--visible"
+          ),
+          style: {
+            "--star-fill": `${fillPercent}%`,
+            "--star-delay": animate ? `${i * 100}ms` : "0ms"
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "svg",
+              {
+                viewBox: "0 0 24 24",
+                fill: "none",
+                xmlns: "http://www.w3.org/2000/svg",
+                className: "ds-star-rating__svg",
+                "aria-hidden": "true",
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "path",
+                  {
+                    d: "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z",
+                    className: "ds-star-rating__empty"
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "svg",
+              {
+                viewBox: "0 0 24 24",
+                fill: "none",
+                xmlns: "http://www.w3.org/2000/svg",
+                className: "ds-star-rating__svg ds-star-rating__svg--filled",
+                "aria-hidden": "true",
+                style: {
+                  clipPath: `inset(0 ${100 - fillPercent}% 0 0)`
+                },
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "path",
+                  {
+                    d: "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z",
+                    className: "ds-star-rating__filled"
+                  }
+                )
+              }
+            )
+          ]
+        },
+        i
+      );
+    });
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref: (node) => {
+          containerRef.current = node;
+          if (typeof ref === "function") ref(node);
+          else if (ref) ref.current = node;
+        },
+        className: clsx__default.default("ds-star-rating", `ds-star-rating--${size}`, className),
+        role: "img",
+        "aria-label": `${clampedValue} out of ${max} stars`,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-star-rating__stars", children: stars }),
+          showValue && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ds-star-rating__value", children: [
+            clampedValue.toLocaleString(void 0, {
+              minimumFractionDigits: clampedValue % 1 !== 0 ? 1 : 0,
+              maximumFractionDigits: 1
+            }),
+            valueLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-star-rating__value-label", children: valueLabel })
+          ] })
+        ]
+      }
+    );
+  }
+);
+StarRating.displayName = "StarRating";
+var TrustpilotIcon = ({ size }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 2l2.9 8.9H24l-7.35 5.34 2.81 8.64L12 19.56l-7.46 5.32 2.81-8.64L0 10.9h9.1L12 2z", fill: "#00B67A" }) });
+var G2Icon = ({ size }) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: [
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z", fill: "#FF492C" }),
+  /* @__PURE__ */ jsxRuntime.jsx("text", { x: "50%", y: "54%", dominantBaseline: "middle", textAnchor: "middle", fill: "white", fontWeight: "bold", fontSize: "11", fontFamily: "Arial, sans-serif", children: "G2" })
+] });
+var GoogleIcon = ({ size }) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: [
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 01-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z", fill: "#4285F4" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z", fill: "#34A853" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18A10.96 10.96 0 001 12c0 1.77.42 3.45 1.18 4.93l3.66-2.84z", fill: "#FBBC05" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z", fill: "#EA4335" })
+] });
+var ChromeWebStoreIcon = ({ size }) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: [
+  /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10", fill: "#4285F4", opacity: "0.1", stroke: "#4285F4", strokeWidth: "1.5" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0 8.5c-1.93 0-3.5-1.57-3.5-3.5S10.07 8.5 12 8.5s3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z", fill: "#4285F4" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M7.5 10.5L4 5.5", stroke: "#EA4335", strokeWidth: "1.5", strokeLinecap: "round" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M16.5 10.5L20 5.5", stroke: "#FBBC05", strokeWidth: "1.5", strokeLinecap: "round" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 17l-3.5 5", stroke: "#34A853", strokeWidth: "1.5", strokeLinecap: "round" })
+] });
+var PLATFORM_ICONS = {
+  trustpilot: TrustpilotIcon,
+  g2: G2Icon,
+  google: GoogleIcon,
+  "chrome-web-store": ChromeWebStoreIcon
+};
+var PLATFORM_LABELS = {
+  trustpilot: "Trustpilot",
+  g2: "G2",
+  google: "Google",
+  "chrome-web-store": "Chrome Web Store"
+};
+var PLATFORM_COLORS = {
+  trustpilot: "#00B67A",
+  g2: "#FF492C",
+  google: "#4285F4",
+  "chrome-web-store": "#4285F4"
+};
+var PlatformBadge = react.forwardRef(
+  ({
+    platform,
+    variant = "icon-label",
+    rating,
+    count,
+    size = "sm",
+    className,
+    ...props
+  }, ref) => {
+    const Icon = PLATFORM_ICONS[platform];
+    const label = PLATFORM_LABELS[platform];
+    const accentColor = PLATFORM_COLORS[platform];
+    const iconSize = size === "sm" ? 18 : 22;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        role: "img",
+        className: clsx__default.default(
+          "ds-platform-badge",
+          `ds-platform-badge--${variant}`,
+          `ds-platform-badge--${size}`,
+          className
+        ),
+        style: { "--platform-accent": accentColor },
+        "aria-label": variant === "full" && rating ? `${label}: ${rating} stars${count ? ` from ${count} reviews` : ""}` : label,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-platform-badge__icon", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: iconSize }) }),
+          variant !== "icon-only" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-platform-badge__label", children: label }),
+          variant === "full" && rating != null && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ds-platform-badge__rating", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(StarRating, { value: rating, size: "sm" }),
+            count != null && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ds-platform-badge__count", children: [
+              "(",
+              count,
+              ")"
+            ] })
+          ] })
+        ]
+      }
+    );
+  }
+);
+PlatformBadge.displayName = "PlatformBadge";
+function getEmbedUrl(src) {
+  const ytMatch = src.match(
+    /(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/)([a-zA-Z0-9_-]+)/
+  );
+  if (ytMatch) return `https://www.youtube-nocookie.com/embed/${ytMatch[1]}?autoplay=1&rel=0`;
+  const vimeoMatch = src.match(/(?:vimeo\.com\/)(\d+)/);
+  if (vimeoMatch) return `https://player.vimeo.com/video/${vimeoMatch[1]}?autoplay=1`;
+  const loomMatch = src.match(/(?:loom\.com\/share\/)([a-zA-Z0-9]+)/);
+  if (loomMatch) return `https://www.loom.com/embed/${loomMatch[1]}?autoplay=1`;
+  return src;
+}
+var PlayIcon = () => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "64", height: "64", viewBox: "0 0 64 64", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: [
+  /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "32", cy: "32", r: "32", className: "ds-video-lightbox__play-bg" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M26 20v24l20-12L26 20z", fill: "white" })
+] });
+var CloseIcon = () => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+  /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+  /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+] });
+var VideoLightbox = react.forwardRef(
+  ({
+    videoUrl,
+    thumbnailSrc,
+    thumbnailAlt,
+    title = "Video",
+    trigger,
+    className,
+    onPlay
+  }, ref) => {
+    const [open, setOpen] = react.useState(false);
+    const handleOpen = react.useCallback(() => {
+      setOpen(true);
+      onPlay?.();
+    }, [onPlay]);
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx__default.default("ds-video-lightbox", className), children: /* @__PURE__ */ jsxRuntime.jsxs(dialog.Dialog.Root, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        dialog.Dialog.Trigger,
+        {
+          className: "ds-video-lightbox__trigger",
+          onClick: handleOpen,
+          children: trigger || /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-video-lightbox__thumbnail-wrap", children: [
+            thumbnailSrc ? /* @__PURE__ */ jsxRuntime.jsx(
+              "img",
+              {
+                src: thumbnailSrc,
+                alt: thumbnailAlt || `Play: ${title}`,
+                className: "ds-video-lightbox__thumbnail",
+                loading: "lazy",
+                decoding: "async"
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-video-lightbox__placeholder" }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-video-lightbox__overlay", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-video-lightbox__play-btn", children: /* @__PURE__ */ jsxRuntime.jsx(PlayIcon, {}) }) })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(dialog.Dialog.Portal, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog.Backdrop, { className: "ds-video-lightbox__backdrop" }),
+        /* @__PURE__ */ jsxRuntime.jsxs(dialog.Dialog.Popup, { className: "ds-video-lightbox__popup", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog.Close, { className: "ds-video-lightbox__close", "aria-label": "Close video", children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, {}) }),
+          /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog.Title, { className: "ds-sr-only", children: title }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-video-lightbox__iframe-wrap", children: open && /* @__PURE__ */ jsxRuntime.jsx(
+            "iframe",
+            {
+              src: getEmbedUrl(videoUrl),
+              title,
+              className: "ds-video-lightbox__iframe",
+              allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
+              allowFullScreen: true
+            }
+          ) })
+        ] })
+      ] })
+    ] }) });
+  }
+);
+VideoLightbox.displayName = "VideoLightbox";
+
+exports.PlatformBadge = PlatformBadge;
+exports.StarRating = StarRating;
+exports.VideoLightbox = VideoLightbox;
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=chunk-UGKYP6F3.cjs.map

package/dist/chunk-UGKYP6F3.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/StarRating/StarRating.tsx","../src/components/PlatformBadge/PlatformBadge.tsx","../src/components/VideoLightbox/VideoLightbox.tsx"],"names":["forwardRef","clsx","jsx","jsxs","useState"],"mappings":"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","sourcesContent":["import React, { forwardRef, useEffect, useRef, useState } from 'react';\nimport clsx from 'clsx';\nimport './StarRating.css';\n\n/* ============================================================================\n   STAR RATING\n   ============================================================================\n   Animated star display with half-star support, configurable sizes, and\n   optional viewport-triggered fill animation. Replaces text-character\n   star displays across all social proof surfaces.\n\n   Strategic objective: Instant visual trust signal\n   ============================================================================ */\n\nexport interface StarRatingProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Rating value (0-5, supports decimals for half-stars) */\n  value: number;\n  /** Maximum number of stars */\n  max?: number;\n  /** Star size variant */\n  size?: 'sm' | 'md' | 'lg';\n  /** Animate stars filling on viewport entry */\n  animate?: boolean;\n  /** Show numeric value next to stars */\n  showValue?: boolean;\n  /** Label shown after value (e.g., \"/ 5\") */\n  valueLabel?: string;\n}\n\n/**\n * Star rating display with gold-fill, half-star support, and optional\n * entrance animation. Uses inline SVGs with clip-path for precise\n * partial fills.\n *\n * @example\n * ```tsx\n * <StarRating value={4.5} size=\"lg\" animate />\n * <StarRating value={5} size=\"sm\" showValue />\n * ```\n */\nexport const StarRating = forwardRef<HTMLDivElement, StarRatingProps>(\n  (\n    {\n      value,\n      max = 5,\n      size = 'md',\n      animate = false,\n      showValue = false,\n      valueLabel,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const [visible, setVisible] = useState(!animate);\n    const containerRef = useRef<HTMLDivElement>(null);\n\n    useEffect(() => {\n      if (!animate) return;\n\n      // Respect reduced motion\n      if (typeof window !== 'undefined') {\n        const mq = window.matchMedia('(prefers-reduced-motion: reduce)');\n        if (mq.matches) {\n          setVisible(true);\n          return;\n        }\n      }\n\n      const target = containerRef.current;\n      if (!target) return;\n\n      const observer = new IntersectionObserver(\n        ([entry]) => {\n          if (entry.isIntersecting) {\n            setVisible(true);\n            observer.disconnect();\n          }\n        },\n        { threshold: 0.5 },\n      );\n\n      observer.observe(target);\n      return () => observer.disconnect();\n    }, [animate]);\n\n    const clampedValue = Math.min(Math.max(value, 0), max);\n\n    const stars = Array.from({ length: max }, (_, i) => {\n      const starIndex = i + 1;\n      const fillPercent =\n        clampedValue >= starIndex\n          ? 100\n          : clampedValue > starIndex - 1\n            ? (clampedValue - (starIndex - 1)) * 100\n            : 0;\n\n      return (\n        <span\n          key={i}\n          className={clsx(\n            'ds-star-rating__star',\n            visible && 'ds-star-rating__star--visible',\n          )}\n          style={{\n            '--star-fill': `${fillPercent}%`,\n            '--star-delay': animate ? `${i * 100}ms` : '0ms',\n          } as React.CSSProperties}\n        >\n          {/* Background (empty) star */}\n          <svg\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            className=\"ds-star-rating__svg\"\n            aria-hidden=\"true\"\n          >\n            <path\n              d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"\n              className=\"ds-star-rating__empty\"\n            />\n          </svg>\n          {/* Foreground (filled) star with clip */}\n          <svg\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            className=\"ds-star-rating__svg ds-star-rating__svg--filled\"\n            aria-hidden=\"true\"\n            style={{\n              clipPath: `inset(0 ${100 - fillPercent}% 0 0)`,\n            }}\n          >\n            <path\n              d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"\n              className=\"ds-star-rating__filled\"\n            />\n          </svg>\n        </span>\n      );\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-star-rating', `ds-star-rating--${size}`, className)}\n        role=\"img\"\n        aria-label={`${clampedValue} out of ${max} stars`}\n        {...props}\n      >\n        <span className=\"ds-star-rating__stars\">{stars}</span>\n        {showValue && (\n          <span className=\"ds-star-rating__value\">\n            {clampedValue.toLocaleString(undefined, {\n              minimumFractionDigits: clampedValue % 1 !== 0 ? 1 : 0,\n              maximumFractionDigits: 1,\n            })}\n            {valueLabel && (\n              <span className=\"ds-star-rating__value-label\">{valueLabel}</span>\n            )}\n          </span>\n        )}\n      </div>\n    );\n  },\n);\n\nStarRating.displayName = 'StarRating';\n","import React, { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport { StarRating } from '../StarRating/StarRating';\nimport './PlatformBadge.css';\n\n/* ============================================================================\n   PLATFORM BADGE\n   ============================================================================\n   Recognizable review platform icons (Trustpilot, G2, Google, Chrome Web\n   Store) with optional rating display. Builds instant trust through visual\n   brand recognition.\n\n   Strategic objective: Third-party authority signal\n   ============================================================================ */\n\nexport type Platform = 'trustpilot' | 'g2' | 'google' | 'chrome-web-store';\n\nexport interface PlatformBadgeProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Review platform */\n  platform: Platform;\n  /** Display mode */\n  variant?: 'icon-only' | 'icon-label' | 'full';\n  /** Platform rating (used in 'full' variant) */\n  rating?: number;\n  /** Number of reviews (used in 'full' variant) */\n  count?: number;\n  /** Size variant */\n  size?: 'sm' | 'md';\n}\n\n/* --------------------------------------------------------------------------\n   Platform SVG Icons — inline for zero-latency rendering\n   -------------------------------------------------------------------------- */\n\nconst TrustpilotIcon = ({ size }: { size: number }) => (\n  <svg width={size} height={size} viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n    <path d=\"M12 2l2.9 8.9H24l-7.35 5.34 2.81 8.64L12 19.56l-7.46 5.32 2.81-8.64L0 10.9h9.1L12 2z\" fill=\"#00B67A\" />\n  </svg>\n);\n\nconst G2Icon = ({ size }: { size: number }) => (\n  <svg width={size} height={size} viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n    <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z\" fill=\"#FF492C\" />\n    <text x=\"50%\" y=\"54%\" dominantBaseline=\"middle\" textAnchor=\"middle\" fill=\"white\" fontWeight=\"bold\" fontSize=\"11\" fontFamily=\"Arial, sans-serif\">G2</text>\n  </svg>\n);\n\nconst GoogleIcon = ({ size }: { size: number }) => (\n  <svg width={size} height={size} viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n    <path d=\"M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 01-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z\" fill=\"#4285F4\"/>\n    <path d=\"M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z\" fill=\"#34A853\"/>\n    <path d=\"M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18A10.96 10.96 0 001 12c0 1.77.42 3.45 1.18 4.93l3.66-2.84z\" fill=\"#FBBC05\"/>\n    <path d=\"M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z\" fill=\"#EA4335\"/>\n  </svg>\n);\n\nconst ChromeWebStoreIcon = ({ size }: { size: number }) => (\n  <svg width={size} height={size} viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n    <circle cx=\"12\" cy=\"12\" r=\"10\" fill=\"#4285F4\" opacity=\"0.1\" stroke=\"#4285F4\" strokeWidth=\"1.5\"/>\n    <path d=\"M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0 8.5c-1.93 0-3.5-1.57-3.5-3.5S10.07 8.5 12 8.5s3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z\" fill=\"#4285F4\"/>\n    <path d=\"M7.5 10.5L4 5.5\" stroke=\"#EA4335\" strokeWidth=\"1.5\" strokeLinecap=\"round\"/>\n    <path d=\"M16.5 10.5L20 5.5\" stroke=\"#FBBC05\" strokeWidth=\"1.5\" strokeLinecap=\"round\"/>\n    <path d=\"M12 17l-3.5 5\" stroke=\"#34A853\" strokeWidth=\"1.5\" strokeLinecap=\"round\"/>\n  </svg>\n);\n\nconst PLATFORM_ICONS: Record<Platform, React.FC<{ size: number }>> = {\n  trustpilot: TrustpilotIcon,\n  g2: G2Icon,\n  google: GoogleIcon,\n  'chrome-web-store': ChromeWebStoreIcon,\n};\n\nconst PLATFORM_LABELS: Record<Platform, string> = {\n  trustpilot: 'Trustpilot',\n  g2: 'G2',\n  google: 'Google',\n  'chrome-web-store': 'Chrome Web Store',\n};\n\nconst PLATFORM_COLORS: Record<Platform, string> = {\n  trustpilot: '#00B67A',\n  g2: '#FF492C',\n  google: '#4285F4',\n  'chrome-web-store': '#4285F4',\n};\n\n/**\n * Review platform badge with recognizable brand icon, optional label,\n * and optional rating display.\n *\n * @example\n * ```tsx\n * <PlatformBadge platform=\"trustpilot\" variant=\"icon-only\" />\n * <PlatformBadge platform=\"g2\" variant=\"icon-label\" />\n * <PlatformBadge platform=\"google\" variant=\"full\" rating={4.9} count={42} />\n * ```\n */\nexport const PlatformBadge = forwardRef<HTMLDivElement, PlatformBadgeProps>(\n  (\n    {\n      platform,\n      variant = 'icon-label',\n      rating,\n      count,\n      size = 'sm',\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const Icon = PLATFORM_ICONS[platform];\n    const label = PLATFORM_LABELS[platform];\n    const accentColor = PLATFORM_COLORS[platform];\n    const iconSize = size === 'sm' ? 18 : 22;\n\n    return (\n      <div\n        ref={ref}\n        role=\"img\"\n        className={clsx(\n          'ds-platform-badge',\n          `ds-platform-badge--${variant}`,\n          `ds-platform-badge--${size}`,\n          className,\n        )}\n        style={{ '--platform-accent': accentColor } as React.CSSProperties}\n        aria-label={\n          variant === 'full' && rating\n            ? `${label}: ${rating} stars${count ? ` from ${count} reviews` : ''}`\n            : label\n        }\n        {...props}\n      >\n        <span className=\"ds-platform-badge__icon\">\n          <Icon size={iconSize} />\n        </span>\n\n        {variant !== 'icon-only' && (\n          <span className=\"ds-platform-badge__label\">{label}</span>\n        )}\n\n        {variant === 'full' && rating != null && (\n          <span className=\"ds-platform-badge__rating\">\n            <StarRating value={rating} size=\"sm\" />\n            {count != null && (\n              <span className=\"ds-platform-badge__count\">({count})</span>\n            )}\n          </span>\n        )}\n      </div>\n    );\n  },\n);\n\nPlatformBadge.displayName = 'PlatformBadge';\n","import React, { forwardRef, useState, useCallback } from 'react';\nimport { Dialog as BaseDialog } from '@base-ui/react/dialog';\nimport clsx from 'clsx';\nimport './VideoLightbox.css';\n\n/* ============================================================================\n   VIDEO LIGHTBOX\n   ============================================================================\n   Modal overlay video player built on @base-ui/react Dialog. Opens a lazy\n   iframe embed (YouTube/Vimeo/Loom) with backdrop blur, keyboard navigation,\n   and focus trap. Designed for inline playback from thumbnail cards without\n   navigating away from the current page.\n\n   Strategic objective: Engagement — keep users on the Wall of Love\n   ============================================================================ */\n\nexport interface VideoLightboxProps {\n  /** Video embed URL (YouTube, Vimeo, Loom) */\n  videoUrl: string;\n  /** Poster image shown as thumbnail trigger */\n  thumbnailSrc?: string;\n  /** Alt text for thumbnail */\n  thumbnailAlt?: string;\n  /** Video title for accessibility */\n  title?: string;\n  /** Custom trigger element (overrides default thumbnail + play button) */\n  trigger?: React.ReactNode;\n  /** Additional class name for the trigger wrapper */\n  className?: string;\n  /** Callback when video starts playing */\n  onPlay?: () => void;\n}\n\n/* --------------------------------------------------------------------------\n   Helpers\n   -------------------------------------------------------------------------- */\n\nfunction getEmbedUrl(src: string): string {\n  // YouTube\n  const ytMatch = src.match(\n    /(?:youtube\\.com\\/watch\\?v=|youtu\\.be\\/|youtube\\.com\\/embed\\/)([a-zA-Z0-9_-]+)/,\n  );\n  if (ytMatch) return `https://www.youtube-nocookie.com/embed/${ytMatch[1]}?autoplay=1&rel=0`;\n\n  // Vimeo\n  const vimeoMatch = src.match(/(?:vimeo\\.com\\/)(\\d+)/);\n  if (vimeoMatch) return `https://player.vimeo.com/video/${vimeoMatch[1]}?autoplay=1`;\n\n  // Loom\n  const loomMatch = src.match(/(?:loom\\.com\\/share\\/)([a-zA-Z0-9]+)/);\n  if (loomMatch) return `https://www.loom.com/embed/${loomMatch[1]}?autoplay=1`;\n\n  return src;\n}\n\nconst PlayIcon = () => (\n  <svg width=\"64\" height=\"64\" viewBox=\"0 0 64 64\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n    <circle cx=\"32\" cy=\"32\" r=\"32\" className=\"ds-video-lightbox__play-bg\" />\n    <path d=\"M26 20v24l20-12L26 20z\" fill=\"white\" />\n  </svg>\n);\n\nconst CloseIcon = () => (\n  <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\">\n    <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n    <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n  </svg>\n);\n\n/**\n * Modal video player triggered by a thumbnail or custom element.\n * Opens a full-screen overlay with lazy iframe injection.\n *\n * @example\n * ```tsx\n * <VideoLightbox\n *   videoUrl=\"https://www.youtube.com/watch?v=dQw4w9WgXcQ\"\n *   thumbnailSrc=\"/thumbnails/demo.jpg\"\n *   title=\"Customer testimonial\"\n * />\n *\n * <VideoLightbox\n *   videoUrl=\"https://vimeo.com/123456789\"\n *   trigger={<Button>Watch Video</Button>}\n * />\n * ```\n */\nexport const VideoLightbox = forwardRef<HTMLDivElement, VideoLightboxProps>(\n  (\n    {\n      videoUrl,\n      thumbnailSrc,\n      thumbnailAlt,\n      title = 'Video',\n      trigger,\n      className,\n      onPlay,\n    },\n    ref,\n  ) => {\n    const [open, setOpen] = useState(false);\n\n    const handleOpen = useCallback(() => {\n      setOpen(true);\n      onPlay?.();\n    }, [onPlay]);\n\n    return (\n      <div ref={ref} className={clsx('ds-video-lightbox', className)}>\n        <BaseDialog.Root open={open} onOpenChange={setOpen}>\n          <BaseDialog.Trigger\n            className=\"ds-video-lightbox__trigger\"\n            onClick={handleOpen}\n          >\n            {trigger || (\n              <div className=\"ds-video-lightbox__thumbnail-wrap\">\n                {thumbnailSrc ? (\n                  <img\n                    src={thumbnailSrc}\n                    alt={thumbnailAlt || `Play: ${title}`}\n                    className=\"ds-video-lightbox__thumbnail\"\n                    loading=\"lazy\"\n                    decoding=\"async\"\n                  />\n                ) : (\n                  <div className=\"ds-video-lightbox__placeholder\" />\n                )}\n                <div className=\"ds-video-lightbox__overlay\">\n                  <div className=\"ds-video-lightbox__play-btn\">\n                    <PlayIcon />\n                  </div>\n                </div>\n              </div>\n            )}\n          </BaseDialog.Trigger>\n\n          <BaseDialog.Portal>\n            <BaseDialog.Backdrop className=\"ds-video-lightbox__backdrop\" />\n            <BaseDialog.Popup className=\"ds-video-lightbox__popup\">\n              <BaseDialog.Close className=\"ds-video-lightbox__close\" aria-label=\"Close video\">\n                <CloseIcon />\n              </BaseDialog.Close>\n              <BaseDialog.Title className=\"ds-sr-only\">{title}</BaseDialog.Title>\n              <div className=\"ds-video-lightbox__iframe-wrap\">\n                {open && (\n                  <iframe\n                    src={getEmbedUrl(videoUrl)}\n                    title={title}\n                    className=\"ds-video-lightbox__iframe\"\n                    allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\n                    allowFullScreen\n                  />\n                )}\n              </div>\n            </BaseDialog.Popup>\n          </BaseDialog.Portal>\n        </BaseDialog.Root>\n      </div>\n    );\n  },\n);\n\nVideoLightbox.displayName = 'VideoLightbox';\n"]}

package/dist/chunk-WB6XDNU7.js

@@ -0,0 +1,115 @@
+import { useRef, useState, useEffect, useCallback } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/CursorSpotlight/CursorSpotlight.tsx
+var CursorSpotlight = ({
+  children,
+  color = "var(--accent-rgb)",
+  size = 400,
+  opacity = 0.15,
+  borderGlow = true,
+  className,
+  disabled = false
+}) => {
+  const containerRef = useRef(null);
+  const [position, setPosition] = useState({ x: 0, y: 0 });
+  const [isHovering, setIsHovering] = useState(false);
+  const [reducedMotion, setReducedMotion] = useState(false);
+  useEffect(() => {
+    const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+    setReducedMotion(mediaQuery.matches);
+    const handler = (e) => setReducedMotion(e.matches);
+    mediaQuery.addEventListener("change", handler);
+    return () => mediaQuery.removeEventListener("change", handler);
+  }, []);
+  const isDisabled = disabled || reducedMotion;
+  const handleMouseMove = useCallback(
+    (e) => {
+      if (!containerRef.current || isDisabled) return;
+      const rect = containerRef.current.getBoundingClientRect();
+      setPosition({
+        x: e.clientX - rect.left,
+        y: e.clientY - rect.top
+      });
+    },
+    [isDisabled]
+  );
+  const handleMouseEnter = useCallback(() => {
+    if (!isDisabled) setIsHovering(true);
+  }, [isDisabled]);
+  const handleMouseLeave = useCallback(() => {
+    setIsHovering(false);
+  }, []);
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container || isDisabled) return;
+    container.addEventListener("mousemove", handleMouseMove);
+    container.addEventListener("mouseenter", handleMouseEnter);
+    container.addEventListener("mouseleave", handleMouseLeave);
+    return () => {
+      container.removeEventListener("mousemove", handleMouseMove);
+      container.removeEventListener("mouseenter", handleMouseEnter);
+      container.removeEventListener("mouseleave", handleMouseLeave);
+    };
+  }, [handleMouseMove, handleMouseEnter, handleMouseLeave, isDisabled]);
+  const spotlightColor = color.startsWith("var(") ? `rgba(${color.replace("var(", "").replace(")", "")}, ${opacity})` : color.includes(",") ? `rgba(${color}, ${opacity})` : color;
+  const borderColor = color.startsWith("var(") ? `rgba(${color.replace("var(", "").replace(")", "")}, 0.5)` : color.includes(",") ? `rgba(${color}, 0.5)` : color;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: `ds-cursor-spotlight ${className || ""}`,
+      style: {
+        "--spotlight-x": `${position.x}px`,
+        "--spotlight-y": `${position.y}px`,
+        "--spotlight-size": `${size}px`,
+        "--spotlight-color": spotlightColor,
+        "--spotlight-border-color": borderColor,
+        "--spotlight-opacity": isHovering ? 1 : 0
+      },
+      "data-hovering": isHovering,
+      "data-border-glow": borderGlow,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "ds-cursor-spotlight__glow", "aria-hidden": "true" }),
+        borderGlow && /* @__PURE__ */ jsx("div", { className: "ds-cursor-spotlight__border", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx("div", { className: "ds-cursor-spotlight__content", children })
+      ]
+    }
+  );
+};
+CursorSpotlight.displayName = "CursorSpotlight";
+var SpotlightCard = ({
+  title,
+  description,
+  icon,
+  children,
+  onClick,
+  ...spotlightProps
+}) => {
+  return /* @__PURE__ */ jsx(CursorSpotlight, { ...spotlightProps, className: "ds-spotlight-card", children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "ds-spotlight-card__inner",
+      onClick,
+      role: onClick ? "button" : void 0,
+      tabIndex: onClick ? 0 : void 0,
+      onKeyDown: onClick ? (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onClick();
+        }
+      } : void 0,
+      children: [
+        icon && /* @__PURE__ */ jsx("div", { className: "ds-spotlight-card__icon", children: icon }),
+        title && /* @__PURE__ */ jsx("h3", { className: "ds-spotlight-card__title", children: title }),
+        description && /* @__PURE__ */ jsx("p", { className: "ds-spotlight-card__description", children: description }),
+        children
+      ]
+    }
+  ) });
+};
+SpotlightCard.displayName = "SpotlightCard";
+
+export { CursorSpotlight, SpotlightCard };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=chunk-WB6XDNU7.js.map

package/dist/chunk-WB6XDNU7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CursorSpotlight/CursorSpotlight.tsx"],"names":[],"mappings":";AAAA,SAAgB,WAAW,QAAQ,UAAU,mBAAmB;AA8G5D,SAiBE,KAjBF;AA3EG,IAAM,kBAAkD,CAAC;AAAA,EAC9D;AAAA,EACA,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,UAAU;AAAA,EACV,aAAa;AAAA,EACb;AAAA,EACA,WAAW;AACb,MAAM;AACJ,QAAM,eAAe,OAAuB,IAAI;AAChD,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,EAAE,GAAG,GAAG,GAAG,EAAE,CAAC;AACvD,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,KAAK;AAClD,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,KAAK;AAExD,YAAU,MAAM;AACd,UAAM,aAAa,OAAO,WAAW,kCAAkC;AACvE,qBAAiB,WAAW,OAAO;AAEnC,UAAM,UAAU,CAAC,MAA2B,iBAAiB,EAAE,OAAO;AACtE,eAAW,iBAAiB,UAAU,OAAO;AAC7C,WAAO,MAAM,WAAW,oBAAoB,UAAU,OAAO;AAAA,EAC/D,GAAG,CAAC,CAAC;AAEL,QAAM,aAAa,YAAY;AAE/B,QAAM,kBAAkB;AAAA,IACtB,CAAC,MAAkB;AACjB,UAAI,CAAC,aAAa,WAAW,WAAY;AAEzC,YAAM,OAAO,aAAa,QAAQ,sBAAsB;AACxD,kBAAY;AAAA,QACV,GAAG,EAAE,UAAU,KAAK;AAAA,QACpB,GAAG,EAAE,UAAU,KAAK;AAAA,MACtB,CAAC;AAAA,IACH;AAAA,IACA,CAAC,UAAU;AAAA,EACb;AAEA,QAAM,mBAAmB,YAAY,MAAM;AACzC,QAAI,CAAC,WAAY,eAAc,IAAI;AAAA,EACrC,GAAG,CAAC,UAAU,CAAC;AAEf,QAAM,mBAAmB,YAAY,MAAM;AACzC,kBAAc,KAAK;AAAA,EACrB,GAAG,CAAC,CAAC;AAEL,YAAU,MAAM;AACd,UAAM,YAAY,aAAa;AAC/B,QAAI,CAAC,aAAa,WAAY;AAE9B,cAAU,iBAAiB,aAAa,eAAe;AACvD,cAAU,iBAAiB,cAAc,gBAAgB;AACzD,cAAU,iBAAiB,cAAc,gBAAgB;AAEzD,WAAO,MAAM;AACX,gBAAU,oBAAoB,aAAa,eAAe;AAC1D,gBAAU,oBAAoB,cAAc,gBAAgB;AAC5D,gBAAU,oBAAoB,cAAc,gBAAgB;AAAA,IAC9D;AAAA,EACF,GAAG,CAAC,iBAAiB,kBAAkB,kBAAkB,UAAU,CAAC;AAGpE,QAAM,iBAAiB,MAAM,WAAW,MAAM,IAC1C,QAAQ,MAAM,QAAQ,QAAQ,EAAE,EAAE,QAAQ,KAAK,EAAE,CAAC,KAAK,OAAO,MAC9D,MAAM,SAAS,GAAG,IAChB,QAAQ,KAAK,KAAK,OAAO,MACzB;AAEN,QAAM,cAAc,MAAM,WAAW,MAAM,IACvC,QAAQ,MAAM,QAAQ,QAAQ,EAAE,EAAE,QAAQ,KAAK,EAAE,CAAC,WAClD,MAAM,SAAS,GAAG,IAChB,QAAQ,KAAK,WACb;AAEN,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAW,uBAAuB,aAAa,EAAE;AAAA,MACjD,OACE;AAAA,QACE,iBAAiB,GAAG,SAAS,CAAC;AAAA,QAC9B,iBAAiB,GAAG,SAAS,CAAC;AAAA,QAC9B,oBAAoB,GAAG,IAAI;AAAA,QAC3B,qBAAqB;AAAA,QACrB,4BAA4B;AAAA,QAC5B,uBAAuB,aAAa,IAAI;AAAA,MAC1C;AAAA,MAEF,iBAAe;AAAA,MACf,oBAAkB;AAAA,MAGlB;AAAA,4BAAC,SAAI,WAAU,6BAA4B,eAAY,QAAO;AAAA,QAG7D,cAAc,oBAAC,SAAI,WAAU,+BAA8B,eAAY,QAAO;AAAA,QAG/E,oBAAC,SAAI,WAAU,gCAAgC,UAAS;AAAA;AAAA;AAAA,EAC1D;AAEJ;AAEA,gBAAgB,cAAc;AAmBvB,IAAM,gBAA8C,CAAC;AAAA,EAC1D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,SACE,oBAAC,mBAAiB,GAAG,gBAAgB,WAAU,qBAC7C;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV;AAAA,MACA,MAAM,UAAU,WAAW;AAAA,MAC3B,UAAU,UAAU,IAAI;AAAA,MACxB,WACE,UACI,CAAC,MAAM;AACL,YAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,YAAE,eAAe;AACjB,kBAAQ;AAAA,QACV;AAAA,MACF,IACA;AAAA,MAGL;AAAA,gBAAQ,oBAAC,SAAI,WAAU,2BAA2B,gBAAK;AAAA,QACvD,SAAS,oBAAC,QAAG,WAAU,4BAA4B,iBAAM;AAAA,QACzD,eAAe,oBAAC,OAAE,WAAU,kCAAkC,uBAAY;AAAA,QAC1E;AAAA;AAAA;AAAA,EACH,GACF;AAEJ;AAEA,cAAc,cAAc","sourcesContent":["import React, { useEffect, useRef, useState, useCallback } from 'react';\nimport './CursorSpotlight.css';\n\n/* ============================================================================\n   CURSOR SPOTLIGHT — \"The Glow\" Effect\n   ============================================================================\n   \n   A mouse-following spotlight effect that creates a premium, interactive feel\n   on cards, buttons, and other surfaces. The spotlight reveals a subtle glow\n   that follows the cursor position.\n   \n   Usage:\n   <CursorSpotlight>\n     <YourCard />\n   </CursorSpotlight>\n   \n   ============================================================================ */\n\nexport interface CursorSpotlightProps {\n  /** Children to wrap with spotlight effect */\n  children: React.ReactNode;\n  /** Spotlight color (CSS color or rgb values) */\n  color?: string;\n  /** Spotlight size in pixels */\n  size?: number;\n  /** Spotlight opacity (0-1) */\n  opacity?: number;\n  /** Enable border glow effect */\n  borderGlow?: boolean;\n  /** Custom class name */\n  className?: string;\n  /** Disable the effect */\n  disabled?: boolean;\n}\n\nexport const CursorSpotlight: React.FC<CursorSpotlightProps> = ({\n  children,\n  color = 'var(--accent-rgb)',\n  size = 400,\n  opacity = 0.15,\n  borderGlow = true,\n  className,\n  disabled = false,\n}) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [position, setPosition] = useState({ x: 0, y: 0 });\n  const [isHovering, setIsHovering] = useState(false);\n  const [reducedMotion, setReducedMotion] = useState(false);\n\n  useEffect(() => {\n    const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');\n    setReducedMotion(mediaQuery.matches);\n\n    const handler = (e: MediaQueryListEvent) => setReducedMotion(e.matches);\n    mediaQuery.addEventListener('change', handler);\n    return () => mediaQuery.removeEventListener('change', handler);\n  }, []);\n\n  const isDisabled = disabled || reducedMotion;\n\n  const handleMouseMove = useCallback(\n    (e: MouseEvent) => {\n      if (!containerRef.current || isDisabled) return;\n\n      const rect = containerRef.current.getBoundingClientRect();\n      setPosition({\n        x: e.clientX - rect.left,\n        y: e.clientY - rect.top,\n      });\n    },\n    [isDisabled],\n  );\n\n  const handleMouseEnter = useCallback(() => {\n    if (!isDisabled) setIsHovering(true);\n  }, [isDisabled]);\n\n  const handleMouseLeave = useCallback(() => {\n    setIsHovering(false);\n  }, []);\n\n  useEffect(() => {\n    const container = containerRef.current;\n    if (!container || isDisabled) return;\n\n    container.addEventListener('mousemove', handleMouseMove);\n    container.addEventListener('mouseenter', handleMouseEnter);\n    container.addEventListener('mouseleave', handleMouseLeave);\n\n    return () => {\n      container.removeEventListener('mousemove', handleMouseMove);\n      container.removeEventListener('mouseenter', handleMouseEnter);\n      container.removeEventListener('mouseleave', handleMouseLeave);\n    };\n  }, [handleMouseMove, handleMouseEnter, handleMouseLeave, isDisabled]);\n\n  // Parse color to handle both CSS variables and rgb values\n  const spotlightColor = color.startsWith('var(')\n    ? `rgba(${color.replace('var(', '').replace(')', '')}, ${opacity})`\n    : color.includes(',')\n      ? `rgba(${color}, ${opacity})`\n      : color;\n\n  const borderColor = color.startsWith('var(')\n    ? `rgba(${color.replace('var(', '').replace(')', '')}, 0.5)`\n    : color.includes(',')\n      ? `rgba(${color}, 0.5)`\n      : color;\n\n  return (\n    <div\n      ref={containerRef}\n      className={`ds-cursor-spotlight ${className || ''}`}\n      style={\n        {\n          '--spotlight-x': `${position.x}px`,\n          '--spotlight-y': `${position.y}px`,\n          '--spotlight-size': `${size}px`,\n          '--spotlight-color': spotlightColor,\n          '--spotlight-border-color': borderColor,\n          '--spotlight-opacity': isHovering ? 1 : 0,\n        } as React.CSSProperties\n      }\n      data-hovering={isHovering}\n      data-border-glow={borderGlow}\n    >\n      {/* Spotlight overlay */}\n      <div className=\"ds-cursor-spotlight__glow\" aria-hidden=\"true\" />\n\n      {/* Border glow */}\n      {borderGlow && <div className=\"ds-cursor-spotlight__border\" aria-hidden=\"true\" />}\n\n      {/* Content */}\n      <div className=\"ds-cursor-spotlight__content\">{children}</div>\n    </div>\n  );\n};\n\nCursorSpotlight.displayName = 'CursorSpotlight';\n\n/* ============================================================================\n   SPOTLIGHT CARD — Pre-styled card with spotlight effect\n   ============================================================================ */\n\nexport interface SpotlightCardProps extends Omit<CursorSpotlightProps, 'children'> {\n  /** Card title */\n  title?: string;\n  /** Card description */\n  description?: string;\n  /** Card icon */\n  icon?: React.ReactNode;\n  /** Card children */\n  children?: React.ReactNode;\n  /** Click handler */\n  onClick?: () => void;\n}\n\nexport const SpotlightCard: React.FC<SpotlightCardProps> = ({\n  title,\n  description,\n  icon,\n  children,\n  onClick,\n  ...spotlightProps\n}) => {\n  return (\n    <CursorSpotlight {...spotlightProps} className=\"ds-spotlight-card\">\n      <div\n        className=\"ds-spotlight-card__inner\"\n        onClick={onClick}\n        role={onClick ? 'button' : undefined}\n        tabIndex={onClick ? 0 : undefined}\n        onKeyDown={\n          onClick\n            ? (e) => {\n                if (e.key === 'Enter' || e.key === ' ') {\n                  e.preventDefault();\n                  onClick();\n                }\n              }\n            : undefined\n        }\n      >\n        {icon && <div className=\"ds-spotlight-card__icon\">{icon}</div>}\n        {title && <h3 className=\"ds-spotlight-card__title\">{title}</h3>}\n        {description && <p className=\"ds-spotlight-card__description\">{description}</p>}\n        {children}\n      </div>\n    </CursorSpotlight>\n  );\n};\n\nSpotlightCard.displayName = 'SpotlightCard';\n"]}