@nationaldesignstudio/react 0.6.0 → 0.7.0

package/dist/banner/index.d.ts

@@ -0,0 +1,101 @@
+import * as tailwind_variants from 'tailwind-variants';
+import { VariantProps } from 'tailwind-variants';
+import * as tailwind_variants_dist_config_js from 'tailwind-variants/dist/config.js';
+import * as React from 'react';
+
+/**
+ * Banner component based on Figma BaseKit / Banners
+ *
+ * Used to surface short, important updates or a single key action
+ * without disrupting the main page content.
+ *
+ * Responsive behavior using 24-column grid:
+ * - Mobile (sm): Stacked layout, 20px horizontal / 32px vertical padding
+ * - Tablet (md): Horizontal layout, 56px padding
+ * - Desktop (lg): Horizontal layout, 72px padding
+ *
+ * Must be placed inside a `grid-container`. Uses `col-full` to span all columns.
+ */
+declare const bannerVariants: tailwind_variants.TVReturnType<{
+    colorScheme: {
+        light: string;
+        dark: string;
+    };
+}, undefined, string[], tailwind_variants_dist_config_js.TVConfig<{
+    colorScheme: {
+        light: string;
+        dark: string;
+    };
+}, {
+    colorScheme: {
+        light: string;
+        dark: string;
+    };
+}>, {
+    colorScheme: {
+        light: string;
+        dark: string;
+    };
+}, undefined, tailwind_variants.TVReturnType<{
+    colorScheme: {
+        light: string;
+        dark: string;
+    };
+}, undefined, string[], tailwind_variants_dist_config_js.TVConfig<{
+    colorScheme: {
+        light: string;
+        dark: string;
+    };
+}, {
+    colorScheme: {
+        light: string;
+        dark: string;
+    };
+}>, unknown, unknown, undefined>>;
+interface BannerProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof bannerVariants> {
+    /**
+     * The heading text displayed in the banner
+     */
+    heading: string;
+    /**
+     * The description text displayed below the heading
+     */
+    description: string;
+    /**
+     * Optional action element (typically a Button component)
+     */
+    action?: React.ReactNode;
+}
+/**
+ * Banner component for surfacing important updates or CTAs.
+ *
+ * Uses the 24-column grid system - must be placed inside a `grid-container`.
+ * Spans full width with `col-full`.
+ *
+ * Responsive across breakpoints:
+ * - Mobile: Stacked layout with smaller padding
+ * - Tablet: Horizontal layout with medium padding
+ * - Desktop: Horizontal layout with larger padding
+ *
+ * @example
+ * ```tsx
+ * <div className="grid-container">
+ *   <Banner
+ *     heading="Important Update"
+ *     description="Check out our new features."
+ *     action={<Button>Learn More</Button>}
+ *   />
+ * </div>
+ *
+ * // Dark colorScheme
+ * <Banner
+ *   colorScheme="dark"
+ *   heading="Still Have Questions?"
+ *   description="Contact us at support@example.com"
+ *   action={<Button variant="secondary">Email Us</Button>}
+ * />
+ * ```
+ */
+declare const Banner: React.ForwardRefExoticComponent<BannerProps & React.RefAttributes<HTMLElement>>;
+
+export { Banner, type BannerProps, bannerVariants };

package/dist/banner/index.js

@@ -0,0 +1,81 @@
+import * as React from 'react';
+import { tv, cnBase } from 'tailwind-variants';
+import { clsx } from 'clsx';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/components/sections/banner/banner.tsx
+function cn(...inputs) {
+  return cnBase(clsx(inputs));
+}
+var bannerVariants = tv({
+  base: [
+    // Grid alignment - full width
+    "col-full",
+    // Responsive padding: mobile -> tablet -> desktop
+    // Uses primitive spacing tokens
+    "px-20 py-32",
+    "md:p-56",
+    "lg:px-72 lg:pb-72 lg:pt-0"
+  ],
+  variants: {
+    colorScheme: {
+      light: "bg-gray-50",
+      dark: "bg-gray-1200"
+    }
+  },
+  defaultVariants: {
+    colorScheme: "light"
+  }
+});
+var Banner = React.forwardRef(
+  ({ className, colorScheme, heading, description, action, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "section",
+      {
+        ref,
+        className: bannerVariants({ colorScheme, class: className }),
+        ...props,
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              // Uses primitive spacing tokens
+              "flex flex-col md:flex-row gap-20 items-start md:items-center md:justify-between",
+              colorScheme === "dark" && "border-t border-gray-700 py-36"
+            ),
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6 items-start", children: [
+                /* @__PURE__ */ jsx(
+                  "h2",
+                  {
+                    className: cn(
+                      "typography-subheading-small",
+                      colorScheme === "dark" ? "text-gray-100" : "text-gray-900"
+                    ),
+                    children: heading
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    className: cn(
+                      "typography-body-small",
+                      colorScheme === "dark" ? "text-gray-500" : "text-gray-800"
+                    ),
+                    children: description
+                  }
+                )
+              ] }),
+              action
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+Banner.displayName = "Banner";
+
+export { Banner, bannerVariants };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/banner/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/utils.ts","../../src/components/sections/banner/banner.tsx"],"names":["twMerge"],"mappings":";;;;;;AAKO,SAAS,MAAM,MAAA,EAAsB;AAC3C,EAAA,OAAOA,MAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC5B;ACUA,IAAM,iBAAiB,EAAA,CAAG;AAAA,EACzB,IAAA,EAAM;AAAA;AAAA,IAEL,UAAA;AAAA;AAAA;AAAA,IAGA,aAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,GACD;AAAA,EACA,QAAA,EAAU;AAAA,IACT,WAAA,EAAa;AAAA,MACZ,KAAA,EAAO,YAAA;AAAA,MACP,IAAA,EAAM;AAAA;AACP,GACD;AAAA,EACA,eAAA,EAAiB;AAAA,IAChB,WAAA,EAAa;AAAA;AAEf,CAAC;AAiDD,IAAM,MAAA,GAAe,KAAA,CAAA,UAAA;AAAA,EACpB,CAAC,EAAE,SAAA,EAAW,WAAA,EAAa,OAAA,EAAS,aAAa,MAAA,EAAQ,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AAC5E,IAAA,uBACC,GAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACA,GAAA;AAAA,QACA,WAAW,cAAA,CAAe,EAAE,WAAA,EAAa,KAAA,EAAO,WAAW,CAAA;AAAA,QAC1D,GAAG,KAAA;AAAA,QAGJ,QAAA,kBAAA,IAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACA,SAAA,EAAW,EAAA;AAAA;AAAA,cAEV,iFAAA;AAAA,cACA,gBAAgB,MAAA,IAAU;AAAA,aAC3B;AAAA,YAGA,QAAA,EAAA;AAAA,8BAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,iCAAA,EACd,QAAA,EAAA;AAAA,gCAAA,GAAA;AAAA,kBAAC,IAAA;AAAA,kBAAA;AAAA,oBACA,SAAA,EAAW,EAAA;AAAA,sBACV,6BAAA;AAAA,sBACA,WAAA,KAAgB,SAAS,eAAA,GAAkB;AAAA,qBAC5C;AAAA,oBAEC,QAAA,EAAA;AAAA;AAAA,iBACF;AAAA,gCACA,GAAA;AAAA,kBAAC,GAAA;AAAA,kBAAA;AAAA,oBACA,SAAA,EAAW,EAAA;AAAA,sBACV,uBAAA;AAAA,sBACA,WAAA,KAAgB,SAAS,eAAA,GAAkB;AAAA,qBAC5C;AAAA,oBAEC,QAAA,EAAA;AAAA;AAAA;AACF,eAAA,EACD,CAAA;AAAA,cAEC;AAAA;AAAA;AAAA;AACF;AAAA,KACD;AAAA,EAEF;AACD;AACA,MAAA,CAAO,WAAA,GAAc,QAAA","file":"index.js","sourcesContent":["import { type ClassValue, clsx } from \"clsx\";\nimport { cnBase as twMerge } from \"tailwind-variants\";\n\nexport { twMerge };\n\nexport function cn(...inputs: ClassValue[]) {\n\treturn twMerge(clsx(inputs));\n}\n","import * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * Banner component based on Figma BaseKit / Banners\n *\n * Used to surface short, important updates or a single key action\n * without disrupting the main page content.\n *\n * Responsive behavior using 24-column grid:\n * - Mobile (sm): Stacked layout, 20px horizontal / 32px vertical padding\n * - Tablet (md): Horizontal layout, 56px padding\n * - Desktop (lg): Horizontal layout, 72px padding\n *\n * Must be placed inside a `grid-container`. Uses `col-full` to span all columns.\n */\nconst bannerVariants = tv({\n\tbase: [\n\t\t// Grid alignment - full width\n\t\t\"col-full\",\n\t\t// Responsive padding: mobile -> tablet -> desktop\n\t\t// Uses primitive spacing tokens\n\t\t\"px-20 py-32\",\n\t\t\"md:p-56\",\n\t\t\"lg:px-72 lg:pb-72 lg:pt-0\",\n\t],\n\tvariants: {\n\t\tcolorScheme: {\n\t\t\tlight: \"bg-gray-50\",\n\t\t\tdark: \"bg-gray-1200\",\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tcolorScheme: \"light\",\n\t},\n});\n\nexport interface BannerProps\n\textends React.HTMLAttributes<HTMLElement>,\n\t\tVariantProps<typeof bannerVariants> {\n\t/**\n\t * The heading text displayed in the banner\n\t */\n\theading: string;\n\t/**\n\t * The description text displayed below the heading\n\t */\n\tdescription: string;\n\t/**\n\t * Optional action element (typically a Button component)\n\t */\n\taction?: React.ReactNode;\n}\n\n/**\n * Banner component for surfacing important updates or CTAs.\n *\n * Uses the 24-column grid system - must be placed inside a `grid-container`.\n * Spans full width with `col-full`.\n *\n * Responsive across breakpoints:\n * - Mobile: Stacked layout with smaller padding\n * - Tablet: Horizontal layout with medium padding\n * - Desktop: Horizontal layout with larger padding\n *\n * @example\n * ```tsx\n * <div className=\"grid-container\">\n *   <Banner\n *     heading=\"Important Update\"\n *     description=\"Check out our new features.\"\n *     action={<Button>Learn More</Button>}\n *   />\n * </div>\n *\n * // Dark colorScheme\n * <Banner\n *   colorScheme=\"dark\"\n *   heading=\"Still Have Questions?\"\n *   description=\"Contact us at support@example.com\"\n *   action={<Button variant=\"secondary\">Email Us</Button>}\n * />\n * ```\n */\nconst Banner = React.forwardRef<HTMLElement, BannerProps>(\n\t({ className, colorScheme, heading, description, action, ...props }, ref) => {\n\t\treturn (\n\t\t\t<section\n\t\t\t\tref={ref}\n\t\t\t\tclassName={bannerVariants({ colorScheme, class: className })}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{/* Inner container with border-top for dark colorScheme */}\n\t\t\t\t<div\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t// Uses primitive spacing tokens\n\t\t\t\t\t\t\"flex flex-col md:flex-row gap-20 items-start md:items-center md:justify-between\",\n\t\t\t\t\t\tcolorScheme === \"dark\" && \"border-t border-gray-700 py-36\",\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t{/* Copy section */}\n\t\t\t\t\t<div className=\"flex flex-col gap-6 items-start\">\n\t\t\t\t\t\t<h2\n\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\"typography-subheading-small\",\n\t\t\t\t\t\t\t\tcolorScheme === \"dark\" ? \"text-gray-100\" : \"text-gray-900\",\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{heading}\n\t\t\t\t\t\t</h2>\n\t\t\t\t\t\t<p\n\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\"typography-body-small\",\n\t\t\t\t\t\t\t\tcolorScheme === \"dark\" ? \"text-gray-500\" : \"text-gray-800\",\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{description}\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t{/* Action slot */}\n\t\t\t\t\t{action}\n\t\t\t\t</div>\n\t\t\t</section>\n\t\t);\n\t},\n);\nBanner.displayName = \"Banner\";\n\nexport { Banner, bannerVariants };\n"]}

package/dist/blurred-video-backdrop/index.d.ts

@@ -0,0 +1,233 @@
+import * as tailwind_variants from 'tailwind-variants';
+import { VariantProps } from 'tailwind-variants';
+import * as tailwind_variants_dist_config_js from 'tailwind-variants/dist/config.js';
+import * as React from 'react';
+
+type BlurIntensity = "low" | "medium" | "high" | "extreme";
+type OverlayType = "none" | "vignette" | "top-bottom";
+/**
+ * Blurred video backdrop wrapper variants.
+ *
+ * The wrapper extends beyond its bounds (inset: -120px) to cover
+ * blur artifacts at the edges.
+ */
+declare const blurredVideoBackdropVariants: tailwind_variants.TVReturnType<{
+    /**
+     * Blur intensity level.
+     * Higher values provide more diffused backgrounds.
+     */
+    blur: {
+        low: string;
+        medium: string;
+        high: string;
+        extreme: string;
+    };
+    /**
+     * Gradient overlay for visual depth.
+     */
+    overlay: {
+        none: string;
+        vignette: string;
+        "top-bottom": string;
+    };
+}, undefined, string[], tailwind_variants_dist_config_js.TVConfig<{
+    /**
+     * Blur intensity level.
+     * Higher values provide more diffused backgrounds.
+     */
+    blur: {
+        low: string;
+        medium: string;
+        high: string;
+        extreme: string;
+    };
+    /**
+     * Gradient overlay for visual depth.
+     */
+    overlay: {
+        none: string;
+        vignette: string;
+        "top-bottom": string;
+    };
+}, {
+    /**
+     * Blur intensity level.
+     * Higher values provide more diffused backgrounds.
+     */
+    blur: {
+        low: string;
+        medium: string;
+        high: string;
+        extreme: string;
+    };
+    /**
+     * Gradient overlay for visual depth.
+     */
+    overlay: {
+        none: string;
+        vignette: string;
+        "top-bottom": string;
+    };
+}>, {
+    /**
+     * Blur intensity level.
+     * Higher values provide more diffused backgrounds.
+     */
+    blur: {
+        low: string;
+        medium: string;
+        high: string;
+        extreme: string;
+    };
+    /**
+     * Gradient overlay for visual depth.
+     */
+    overlay: {
+        none: string;
+        vignette: string;
+        "top-bottom": string;
+    };
+}, undefined, tailwind_variants.TVReturnType<{
+    /**
+     * Blur intensity level.
+     * Higher values provide more diffused backgrounds.
+     */
+    blur: {
+        low: string;
+        medium: string;
+        high: string;
+        extreme: string;
+    };
+    /**
+     * Gradient overlay for visual depth.
+     */
+    overlay: {
+        none: string;
+        vignette: string;
+        "top-bottom": string;
+    };
+}, undefined, string[], tailwind_variants_dist_config_js.TVConfig<{
+    /**
+     * Blur intensity level.
+     * Higher values provide more diffused backgrounds.
+     */
+    blur: {
+        low: string;
+        medium: string;
+        high: string;
+        extreme: string;
+    };
+    /**
+     * Gradient overlay for visual depth.
+     */
+    overlay: {
+        none: string;
+        vignette: string;
+        "top-bottom": string;
+    };
+}, {
+    /**
+     * Blur intensity level.
+     * Higher values provide more diffused backgrounds.
+     */
+    blur: {
+        low: string;
+        medium: string;
+        high: string;
+        extreme: string;
+    };
+    /**
+     * Gradient overlay for visual depth.
+     */
+    overlay: {
+        none: string;
+        vignette: string;
+        "top-bottom": string;
+    };
+}>, unknown, unknown, undefined>>;
+/**
+ * Canvas element styles.
+ */
+declare const canvasVariants: tailwind_variants.TVReturnType<{} | {} | {}, undefined, string[], tailwind_variants_dist_config_js.TVConfig<unknown, {} | {}>, {} | {}, undefined, tailwind_variants.TVReturnType<unknown, undefined, string[], tailwind_variants_dist_config_js.TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
+/**
+ * Gradient overlay base styles.
+ * Gradient backgrounds are applied via inline styles to avoid arbitrary values.
+ */
+declare const gradientOverlayVariants: tailwind_variants.TVReturnType<{} | {} | {}, undefined, string[], tailwind_variants_dist_config_js.TVConfig<unknown, {} | {}>, {} | {}, undefined, tailwind_variants.TVReturnType<unknown, undefined, string[], tailwind_variants_dist_config_js.TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
+declare const BLUR_AMOUNTS: Record<BlurIntensity, number>;
+interface UseCanvasBlurOptions {
+    /** Ref to the source video element */
+    videoRef: React.RefObject<HTMLVideoElement | null>;
+    /** Blur amount in pixels */
+    blurAmount: number;
+    /** Whether rendering is enabled */
+    enabled?: boolean;
+    /** Target FPS (lower = better performance, default: 30) */
+    targetFps?: number;
+    /** Canvas scale factor (lower = better performance, default: 0.5) */
+    scale?: number;
+}
+interface UseCanvasBlurReturn {
+    /** Ref to attach to the canvas element */
+    canvasRef: React.RefObject<HTMLCanvasElement | null>;
+    /** Whether the canvas is currently rendering */
+    isRendering: boolean;
+    /** Performance metrics */
+    metrics: {
+        fps: number;
+        frameTime: number;
+    };
+}
+/**
+ * Hook for rendering a blurred video to canvas.
+ *
+ * Performance optimizations:
+ * - Renders at reduced resolution (scale factor)
+ * - Throttled to target FPS
+ * - Uses CSS scale to fill container
+ * - Single video decoder (no sync needed)
+ */
+declare function useCanvasBlur({ videoRef, blurAmount, enabled, targetFps, scale, }: UseCanvasBlurOptions): UseCanvasBlurReturn;
+interface BlurredVideoBackdropProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children">, VariantProps<typeof blurredVideoBackdropVariants> {
+    /** Ref to the primary video element to create backdrop from (required) */
+    videoRef: React.RefObject<HTMLVideoElement | null>;
+    /** Opacity of the backdrop (0-1, default: 0.6) */
+    opacity?: number;
+    /** Extension amount in pixels to cover blur artifacts (default: 120) */
+    extension?: number;
+    /** Target FPS for canvas rendering (default: 30) */
+    targetFps?: number;
+    /** Canvas scale factor - lower = better performance (default: 0.5) */
+    scale?: number;
+    /** Whether to show debug metrics */
+    showMetrics?: boolean;
+}
+/**
+ * BlurredVideoBackdrop - A high-performance blurred video backdrop using canvas.
+ *
+ * Renders a blurred copy of a video element to create an ambient backdrop effect.
+ * Uses canvas rendering for optimal performance - no video sync needed.
+ *
+ * Performance features:
+ * - Single video decoder (draws from existing video element)
+ * - Reduced resolution rendering (configurable scale)
+ * - Throttled frame rate (configurable FPS)
+ * - GPU-accelerated canvas scaling
+ *
+ * @example
+ * ```tsx
+ * const videoRef = useRef<HTMLVideoElement>(null);
+ *
+ * <div className="relative">
+ *   <BlurredVideoBackdrop
+ *     videoRef={videoRef}
+ *     blur="high"
+ *     overlay="vignette"
+ *   />
+ *   <VideoPlayer videoRef={videoRef} src="/video.mp4" />
+ * </div>
+ * ```
+ */
+declare const BlurredVideoBackdrop: React.ForwardRefExoticComponent<BlurredVideoBackdropProps & React.RefAttributes<HTMLDivElement>>;
+
+export { BLUR_AMOUNTS, type BlurIntensity, BlurredVideoBackdrop, type BlurredVideoBackdropProps, type OverlayType, type UseCanvasBlurOptions, type UseCanvasBlurReturn, blurredVideoBackdropVariants, canvasVariants, gradientOverlayVariants, useCanvasBlur };

package/dist/blurred-video-backdrop/index.js

@@ -0,0 +1,266 @@
+"use client";
+import * as React from 'react';
+import { tv, cnBase } from 'tailwind-variants';
+import { clsx } from 'clsx';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/atoms/blurred-video-backdrop/blurred-video-backdrop.tsx
+function cn(...inputs) {
+  return cnBase(clsx(inputs));
+}
+var blurredVideoBackdropVariants = tv({
+  base: [
+    "absolute",
+    "pointer-events-none",
+    "select-none",
+    "will-change-contents",
+    "transform-gpu"
+  ],
+  variants: {
+    /**
+     * Blur intensity level.
+     * Higher values provide more diffused backgrounds.
+     */
+    blur: {
+      low: "",
+      medium: "",
+      high: "",
+      extreme: ""
+    },
+    /**
+     * Gradient overlay for visual depth.
+     */
+    overlay: {
+      none: "",
+      vignette: "",
+      "top-bottom": ""
+    }
+  },
+  defaultVariants: {
+    blur: "high",
+    overlay: "none"
+  }
+});
+var canvasVariants = tv({
+  base: ["w-full", "h-full", "object-cover"]
+});
+var gradientOverlayVariants = tv({
+  base: ["absolute", "inset-0", "pointer-events-none"]
+});
+var OVERLAY_GRADIENTS = {
+  vignette: "radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.4) 100%)",
+  "top-bottom": "linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, transparent 30%, transparent 70%, rgba(0, 0, 0, 0.4) 100%)"
+};
+var BLUR_AMOUNTS = {
+  low: 40,
+  medium: 80,
+  high: 100,
+  extreme: 120
+};
+function useCanvasBlur({
+  videoRef,
+  blurAmount,
+  enabled = true,
+  targetFps = 30,
+  scale = 0.5
+}) {
+  const canvasRef = React.useRef(null);
+  const ctxRef = React.useRef(null);
+  const [isRendering, setIsRendering] = React.useState(false);
+  const [metrics, setMetrics] = React.useState({ fps: 0, frameTime: 0 });
+  const [videoReady, setVideoReady] = React.useState(false);
+  const lastFrameTimeRef = React.useRef(0);
+  const frameCountRef = React.useRef(0);
+  const fpsIntervalRef = React.useRef(0);
+  const frameInterval = 1e3 / targetFps;
+  React.useEffect(() => {
+    if (!enabled) return;
+    const checkRef = () => {
+      if (videoRef.current && canvasRef.current) {
+        setVideoReady(true);
+      }
+    };
+    checkRef();
+    const frameId = requestAnimationFrame(checkRef);
+    const timeoutId = setTimeout(checkRef, 100);
+    const timeoutId2 = setTimeout(checkRef, 500);
+    return () => {
+      cancelAnimationFrame(frameId);
+      clearTimeout(timeoutId);
+      clearTimeout(timeoutId2);
+    };
+  }, [enabled, videoRef]);
+  React.useEffect(() => {
+    if (!enabled || !videoReady) return;
+    const video = videoRef.current;
+    const canvas = canvasRef.current;
+    if (!video || !canvas) return;
+    const ctx = canvas.getContext("2d", {
+      alpha: false,
+      desynchronized: true
+      // Reduces latency
+    });
+    if (!ctx) return;
+    ctxRef.current = ctx;
+    let animationFrameId;
+    let isActive = true;
+    const updateCanvasSize = () => {
+      if (video.videoWidth && video.videoHeight) {
+        canvas.width = Math.floor(video.videoWidth * scale);
+        canvas.height = Math.floor(video.videoHeight * scale);
+      }
+    };
+    const render = (timestamp) => {
+      if (!isActive || !video || !ctx) return;
+      const elapsed = timestamp - lastFrameTimeRef.current;
+      if (elapsed >= frameInterval) {
+        const frameStart = performance.now();
+        if (canvas.width === 0 || canvas.height === 0) {
+          updateCanvasSize();
+        }
+        if (video.readyState >= 2 && !video.paused) {
+          ctx.filter = `blur(${blurAmount * scale}px)`;
+          ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+          setIsRendering(true);
+        }
+        const frameTime = performance.now() - frameStart;
+        frameCountRef.current++;
+        if (timestamp - fpsIntervalRef.current >= 1e3) {
+          setMetrics({
+            fps: frameCountRef.current,
+            frameTime: Math.round(frameTime * 100) / 100
+          });
+          frameCountRef.current = 0;
+          fpsIntervalRef.current = timestamp;
+        }
+        lastFrameTimeRef.current = timestamp - elapsed % frameInterval;
+      }
+      animationFrameId = requestAnimationFrame(render);
+    };
+    const handleLoadedMetadata = () => {
+      updateCanvasSize();
+    };
+    const handlePlay = () => {
+      if (isActive) {
+        animationFrameId = requestAnimationFrame(render);
+      }
+    };
+    const handlePause = () => {
+      setIsRendering(false);
+    };
+    video.addEventListener("loadedmetadata", handleLoadedMetadata);
+    video.addEventListener("play", handlePlay);
+    video.addEventListener("pause", handlePause);
+    if (video.readyState >= 1) {
+      updateCanvasSize();
+    }
+    if (!video.paused) {
+      animationFrameId = requestAnimationFrame(render);
+    }
+    return () => {
+      isActive = false;
+      cancelAnimationFrame(animationFrameId);
+      video.removeEventListener("loadedmetadata", handleLoadedMetadata);
+      video.removeEventListener("play", handlePlay);
+      video.removeEventListener("pause", handlePause);
+      setIsRendering(false);
+    };
+  }, [enabled, videoReady, videoRef, blurAmount, frameInterval, scale]);
+  return {
+    canvasRef,
+    isRendering,
+    metrics
+  };
+}
+var BlurredVideoBackdrop = React.forwardRef(
+  ({
+    className,
+    videoRef,
+    blur = "high",
+    overlay = "none",
+    opacity = 0.6,
+    extension = 120,
+    targetFps = 30,
+    scale = 0.5,
+    showMetrics = false,
+    style,
+    ...props
+  }, ref) => {
+    const blurAmount = BLUR_AMOUNTS[blur ?? "high"];
+    const { canvasRef, isRendering, metrics } = useCanvasBlur({
+      videoRef,
+      blurAmount,
+      enabled: true,
+      targetFps,
+      scale
+    });
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          blurredVideoBackdropVariants({ blur, overlay }),
+          className
+        ),
+        style: {
+          inset: `-${extension}px`,
+          opacity,
+          contain: "layout style paint",
+          ...style
+        },
+        "data-blur": blur ?? "high",
+        "data-overlay": overlay ?? "none",
+        "data-rendering": isRendering,
+        "aria-hidden": "true",
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(
+            "canvas",
+            {
+              ref: canvasRef,
+              className: cn(
+                canvasVariants(),
+                // Scale up the low-res canvas to fill container
+                "scale-[2]",
+                // Inverse of 0.5 scale factor
+                "origin-center"
+              ),
+              style: {
+                // Additional CSS blur for smoother appearance
+                filter: `blur(${blurAmount * 0.3}px)`
+              }
+            }
+          ),
+          overlay && overlay !== "none" && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: gradientOverlayVariants(),
+              style: { background: OVERLAY_GRADIENTS[overlay] }
+            }
+          ),
+          showMetrics && /* @__PURE__ */ jsxs("div", { className: "absolute bottom-8 left-8 z-10 bg-black/80 text-white typography-caption px-8 py-4 rounded-4 font-mono", children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              "FPS: ",
+              metrics.fps
+            ] }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              "Frame: ",
+              metrics.frameTime,
+              "ms"
+            ] }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              "Scale: ",
+              scale,
+              "x"
+            ] })
+          ] })
+        ]
+      }
+    );
+  }
+);
+BlurredVideoBackdrop.displayName = "BlurredVideoBackdrop";
+
+export { BLUR_AMOUNTS, BlurredVideoBackdrop, blurredVideoBackdropVariants, canvasVariants, gradientOverlayVariants, useCanvasBlur };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map