@brycks/core-front 0.12.0 → 0.12.1

package/dist/components/media/Video/Video.js

@@ -1,8 +1,8 @@
-import { jsxs as J, jsx as n } from "react/jsx-runtime";
-import { forwardRef as K, useRef as L, useState as w, useImperativeHandle as Q, useEffect as W, useCallback as c } from "react";
-import { cx as N } from "../../../utils/styles.js";
-import { usePrefersReducedMotion as X } from "../../../hooks/useMediaQuery.js";
-const R = {
+import { jsxs as G, jsx as n } from "react/jsx-runtime";
+import { forwardRef as J, useRef as K, useState as R, useImperativeHandle as L, useEffect as Q, useCallback as c } from "react";
+import { cx as w } from "../../../utils/styles.js";
+import { usePrefersReducedMotion as W } from "../../../hooks/useMediaQuery.js";
+const N = {
   none: "0",
   sm: "var(--brycks-radius-sm)",
   md: "var(--brycks-radius-md)",
@@ -10,42 +10,42 @@ const R = {
   xl: "var(--brycks-radius-xl)",
   full: "var(--brycks-radius-full)"
 };
-function Y(r) {
+function X(r) {
   if (r === void 0) return;
   if (typeof r == "number") return r;
-  const o = r.split(/[:/]/);
-  if (o.length === 2) {
-    const l = parseFloat(o[0]), a = parseFloat(o[1]);
-    if (!isNaN(l) && !isNaN(a) && a !== 0)
-      return l / a;
+  const s = r.split(/[:/]/);
+  if (s.length === 2) {
+    const d = parseFloat(s[0]), a = parseFloat(s[1]);
+    if (!isNaN(d) && !isNaN(a) && a !== 0)
+      return d / a;
   }
   const i = parseFloat(r);
   return isNaN(i) ? void 0 : i;
 }
-const Z = K(function({
-  src: o,
+const Y = J(function({
+  src: s,
   poster: i,
-  aspectRatio: l,
+  aspectRatio: d,
   fit: a = "cover",
   preload: x = "metadata",
   autoPlay: p = !1,
   loop: E = !1,
   controls: P = !0,
   muted: C,
-  playsInline: S = !0,
-  radius: j = "none",
+  playsInline: M = !0,
+  radius: S = "none",
   onPlay: y,
   onPause: m,
   onEnded: v,
-  onCanPlay: A,
+  onCanPlay: j,
   onError: b,
   className: g,
-  style: F,
+  style: A,
   testId: h,
-  ...M
+  ...F
 }, V) {
-  const e = L(null), [T, u] = w(!1), [z, B] = w(!1), H = X(), f = !(H || p === !1), I = C ?? (f || p === "muted");
-  Q(
+  const e = K(null), [T, u] = R(!1), [z, B] = R(!1), f = !(W() || p === !1), H = C ?? (f || p === "muted");
+  L(
     V,
     () => ({
       play: async () => {
@@ -66,7 +66,7 @@ const Z = K(function({
       getElement: () => e.current
     }),
     []
-  ), W(() => {
+  ), Q(() => {
     f && e.current && (async () => {
       try {
         await e.current?.play();
@@ -74,41 +74,41 @@ const Z = K(function({
       }
     })();
   }, [f]);
-  const $ = c(
+  const I = c(
     (t) => {
       u(!0), y?.(t);
     },
     [y]
-  ), D = c(
+  ), $ = c(
     (t) => {
       u(!1), m?.(t);
     },
     [m]
-  ), O = c(
+  ), D = c(
     (t) => {
       u(!1), v?.(t);
     },
     [v]
-  ), U = c(
+  ), O = c(
     (t) => {
       B(!0), b?.(t);
     },
     [b]
-  ), s = Y(l), d = R[j] ?? R.none, k = {
+  ), o = X(d), l = N[S] ?? N.none, k = {
     position: "relative",
     overflow: "hidden",
-    borderRadius: d,
+    borderRadius: l,
     backgroundColor: "var(--brycks-background-muted)",
-    ...s ? {
+    ...o ? {
       width: "100%",
-      paddingBottom: `${1 / s * 100}%`
+      paddingBottom: `${1 / o * 100}%`
     } : {},
-    ...F
-  }, q = {
+    ...A
+  }, U = {
     display: "block",
     objectFit: a,
-    borderRadius: d,
-    ...s ? {
+    borderRadius: l,
+    ...o ? {
       position: "absolute",
       top: 0,
       left: 0,
@@ -118,7 +118,7 @@ const Z = K(function({
       width: "100%",
       height: "auto"
     }
-  }, G = {
+  }, q = {
     position: "absolute",
     top: 0,
     left: 0,
@@ -130,56 +130,56 @@ const Z = K(function({
     backgroundColor: "var(--brycks-background-muted)",
     color: "var(--brycks-foreground-muted)",
     fontSize: "var(--brycks-font-size-sm)",
-    borderRadius: d
+    borderRadius: l
   };
-  return z ? /* @__PURE__ */ J(
+  return z ? /* @__PURE__ */ G(
     "div",
     {
-      className: N("brycks-video", "brycks-video--error", g),
+      className: w("brycks-video", "brycks-video--error", g),
       style: k,
       "data-testid": h,
       role: "img",
       "aria-label": "Video failed to load",
       children: [
-        s && /* @__PURE__ */ n("div", { style: { paddingBottom: `${1 / s * 100}%` } }),
-        /* @__PURE__ */ n("div", { style: G, children: /* @__PURE__ */ n("span", { children: "Unable to load video" }) })
+        o && /* @__PURE__ */ n("div", { style: { paddingBottom: `${1 / o * 100}%` } }),
+        /* @__PURE__ */ n("div", { style: q, children: /* @__PURE__ */ n("span", { children: "Unable to load video" }) })
       ]
     }
   ) : /* @__PURE__ */ n(
     "div",
     {
-      className: N(
+      className: w(
         "brycks-video",
         T && "brycks-video--playing",
         g
       ),
-      style: s ? k : { position: "relative", borderRadius: d },
+      style: o ? k : { position: "relative", borderRadius: l },
       "data-testid": h,
       children: /* @__PURE__ */ n(
         "video",
         {
           ref: e,
-          src: o,
+          src: s,
           poster: i,
           preload: x,
           loop: E,
           controls: P,
-          muted: I,
-          playsInline: S,
-          onPlay: $,
-          onPause: D,
-          onEnded: O,
-          onCanPlay: A,
-          onError: U,
-          style: q,
-          ...M
+          muted: H,
+          playsInline: M,
+          onPlay: I,
+          onPause: $,
+          onEnded: D,
+          onCanPlay: j,
+          onError: O,
+          style: U,
+          ...F
         }
       )
     }
   );
 });
-Z.displayName = "Video";
+Y.displayName = "Video";
 export {
-  Z as Video
+  Y as Video
 };
 //# sourceMappingURL=Video.js.map

package/dist/components/media/Video/Video.js.map

@@ -1 +1 @@
-{"version":3,"file":"Video.js","sources":["../../../../src/components/media/Video/Video.tsx"],"sourcesContent":["/**\r\n * Video Component\r\n *\r\n * Accessible video player with customizable controls, poster support,\r\n * and respect for user motion preferences.\r\n */\r\n\r\nimport {\r\n  forwardRef,\r\n  useRef,\r\n  useState,\r\n  useCallback,\r\n  useEffect,\r\n  useImperativeHandle,\r\n  type CSSProperties,\r\n  type VideoHTMLAttributes,\r\n  type SyntheticEvent,\r\n} from 'react'\r\nimport { cx } from '../../../utils/styles'\r\nimport { usePrefersReducedMotion } from '../../../hooks/useMediaQuery'\r\n\r\nexport type VideoFit = 'cover' | 'contain' | 'fill' | 'none' | 'scale-down'\r\nexport type VideoPreload = 'none' | 'metadata' | 'auto'\r\n\r\nexport interface VideoProps\r\n  extends Omit<VideoHTMLAttributes<HTMLVideoElement>, 'autoPlay'> {\r\n  /** Video source URL */\r\n  src: string\r\n  /** Poster image URL shown before playback */\r\n  poster?: string\r\n  /** Aspect ratio (width/height) */\r\n  aspectRatio?: number | string\r\n  /** How the video should fit within its container */\r\n  fit?: VideoFit\r\n  /** Preload behavior */\r\n  preload?: VideoPreload\r\n  /**\r\n   * Autoplay behavior.\r\n   * - true: Autoplay (muted, respects reduced motion)\r\n   * - 'muted': Autoplay muted only\r\n   * - false: No autoplay\r\n   * @default false\r\n   */\r\n  autoPlay?: boolean | 'muted'\r\n  /** Loop video playback */\r\n  loop?: boolean\r\n  /** Show native controls */\r\n  controls?: boolean\r\n  /** Start muted */\r\n  muted?: boolean\r\n  /** Play inline on mobile (vs fullscreen) */\r\n  playsInline?: boolean\r\n  /** Border radius using design tokens */\r\n  radius?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'\r\n  /** Callback when video starts playing */\r\n  onPlay?: (event: SyntheticEvent<HTMLVideoElement>) => void\r\n  /** Callback when video pauses */\r\n  onPause?: (event: SyntheticEvent<HTMLVideoElement>) => void\r\n  /** Callback when video ends */\r\n  onEnded?: (event: SyntheticEvent<HTMLVideoElement>) => void\r\n  /** Callback when video can play */\r\n  onCanPlay?: (event: SyntheticEvent<HTMLVideoElement>) => void\r\n  /** Callback on error */\r\n  onError?: (event: SyntheticEvent<HTMLVideoElement>) => void\r\n  /** Custom class name */\r\n  className?: string\r\n  /** Test ID */\r\n  testId?: string\r\n}\r\n\r\nexport interface VideoRef {\r\n  /** Play the video */\r\n  play: () => Promise<void>\r\n  /** Pause the video */\r\n  pause: () => void\r\n  /** Toggle play/pause */\r\n  toggle: () => void\r\n  /** Seek to time in seconds */\r\n  seek: (time: number) => void\r\n  /** Get current time in seconds */\r\n  getCurrentTime: () => number\r\n  /** Get duration in seconds */\r\n  getDuration: () => number\r\n  /** Check if video is playing */\r\n  isPlaying: () => boolean\r\n  /** Get the underlying video element */\r\n  getElement: () => HTMLVideoElement | null\r\n}\r\n\r\nconst radiusMap: Record<string, string> = {\r\n  none: '0',\r\n  sm: 'var(--brycks-radius-sm)',\r\n  md: 'var(--brycks-radius-md)',\r\n  lg: 'var(--brycks-radius-lg)',\r\n  xl: 'var(--brycks-radius-xl)',\r\n  full: 'var(--brycks-radius-full)',\r\n}\r\n\r\nfunction parseAspectRatio(ratio: number | string | undefined): number | undefined {\r\n  if (ratio === undefined) return undefined\r\n  if (typeof ratio === 'number') return ratio\r\n\r\n  const parts = ratio.split(/[:/]/)\r\n  if (parts.length === 2) {\r\n    const width = parseFloat(parts[0])\r\n    const height = parseFloat(parts[1])\r\n    if (!isNaN(width) && !isNaN(height) && height !== 0) {\r\n      return width / height\r\n    }\r\n  }\r\n\r\n  const parsed = parseFloat(ratio)\r\n  return isNaN(parsed) ? undefined : parsed\r\n}\r\n\r\nexport const Video = forwardRef<VideoRef, VideoProps>(function Video(\r\n  {\r\n    src,\r\n    poster,\r\n    aspectRatio,\r\n    fit = 'cover',\r\n    preload = 'metadata',\r\n    autoPlay = false,\r\n    loop = false,\r\n    controls = true,\r\n    muted,\r\n    playsInline = true,\r\n    radius = 'none',\r\n    onPlay,\r\n    onPause,\r\n    onEnded,\r\n    onCanPlay,\r\n    onError,\r\n    className,\r\n    style,\r\n    testId,\r\n    ...props\r\n  },\r\n  ref\r\n) {\r\n  const videoRef = useRef<HTMLVideoElement>(null)\r\n  const [isPlaying, setIsPlaying] = useState(false)\r\n  const [hasError, setHasError] = useState(false)\r\n  const prefersReducedMotion = usePrefersReducedMotion()\r\n\r\n  // Determine if autoplay should be enabled\r\n  const shouldAutoPlay = (() => {\r\n    // Never autoplay if user prefers reduced motion\r\n    if (prefersReducedMotion) return false\r\n    if (autoPlay === false) return false\r\n    return true\r\n  })()\r\n\r\n  // Autoplay must be muted to work in most browsers\r\n  const shouldMute = muted ?? (shouldAutoPlay || autoPlay === 'muted')\r\n\r\n  // Expose imperative handle\r\n  useImperativeHandle(\r\n    ref,\r\n    () => ({\r\n      play: async () => {\r\n        if (videoRef.current) {\r\n          await videoRef.current.play()\r\n        }\r\n      },\r\n      pause: () => {\r\n        videoRef.current?.pause()\r\n      },\r\n      toggle: () => {\r\n        if (videoRef.current) {\r\n          if (videoRef.current.paused) {\r\n            videoRef.current.play()\r\n          } else {\r\n            videoRef.current.pause()\r\n          }\r\n        }\r\n      },\r\n      seek: (time: number) => {\r\n        if (videoRef.current) {\r\n          videoRef.current.currentTime = time\r\n        }\r\n      },\r\n      getCurrentTime: () => videoRef.current?.currentTime ?? 0,\r\n      getDuration: () => videoRef.current?.duration ?? 0,\r\n      isPlaying: () => !videoRef.current?.paused,\r\n      getElement: () => videoRef.current,\r\n    }),\r\n    []\r\n  )\r\n\r\n  // Handle autoplay on mount\r\n  useEffect(() => {\r\n    if (shouldAutoPlay && videoRef.current) {\r\n      // Use a small delay to ensure video is ready\r\n      const attemptAutoplay = async () => {\r\n        try {\r\n          await videoRef.current?.play()\r\n        } catch {\r\n          // Autoplay was blocked - this is expected in many browsers\r\n          // The video will remain paused with poster visible\r\n        }\r\n      }\r\n      attemptAutoplay()\r\n    }\r\n  }, [shouldAutoPlay])\r\n\r\n  const handlePlay = useCallback(\r\n    (event: SyntheticEvent<HTMLVideoElement>) => {\r\n      setIsPlaying(true)\r\n      onPlay?.(event)\r\n    },\r\n    [onPlay]\r\n  )\r\n\r\n  const handlePause = useCallback(\r\n    (event: SyntheticEvent<HTMLVideoElement>) => {\r\n      setIsPlaying(false)\r\n      onPause?.(event)\r\n    },\r\n    [onPause]\r\n  )\r\n\r\n  const handleEnded = useCallback(\r\n    (event: SyntheticEvent<HTMLVideoElement>) => {\r\n      setIsPlaying(false)\r\n      onEnded?.(event)\r\n    },\r\n    [onEnded]\r\n  )\r\n\r\n  const handleError = useCallback(\r\n    (event: SyntheticEvent<HTMLVideoElement>) => {\r\n      setHasError(true)\r\n      onError?.(event)\r\n    },\r\n    [onError]\r\n  )\r\n\r\n  const parsedRatio = parseAspectRatio(aspectRatio)\r\n  const borderRadius = radiusMap[radius] ?? radiusMap.none\r\n\r\n  const containerStyle: CSSProperties = {\r\n    position: 'relative',\r\n    overflow: 'hidden',\r\n    borderRadius,\r\n    backgroundColor: 'var(--brycks-background-muted)',\r\n    ...(parsedRatio\r\n      ? {\r\n          width: '100%',\r\n          paddingBottom: `${(1 / parsedRatio) * 100}%`,\r\n        }\r\n      : {}),\r\n    ...style,\r\n  }\r\n\r\n  const videoStyle: CSSProperties = {\r\n    display: 'block',\r\n    objectFit: fit,\r\n    borderRadius,\r\n    ...(parsedRatio\r\n      ? {\r\n          position: 'absolute',\r\n          top: 0,\r\n          left: 0,\r\n          width: '100%',\r\n          height: '100%',\r\n        }\r\n      : {\r\n          width: '100%',\r\n          height: 'auto',\r\n        }),\r\n  }\r\n\r\n  const errorOverlayStyle: CSSProperties = {\r\n    position: 'absolute',\r\n    top: 0,\r\n    left: 0,\r\n    right: 0,\r\n    bottom: 0,\r\n    display: 'flex',\r\n    alignItems: 'center',\r\n    justifyContent: 'center',\r\n    backgroundColor: 'var(--brycks-background-muted)',\r\n    color: 'var(--brycks-foreground-muted)',\r\n    fontSize: 'var(--brycks-font-size-sm)',\r\n    borderRadius,\r\n  }\r\n\r\n  if (hasError) {\r\n    return (\r\n      <div\r\n        className={cx('brycks-video', 'brycks-video--error', className)}\r\n        style={containerStyle}\r\n        data-testid={testId}\r\n        role=\"img\"\r\n        aria-label=\"Video failed to load\"\r\n      >\r\n        {parsedRatio && <div style={{ paddingBottom: `${(1 / parsedRatio) * 100}%` }} />}\r\n        <div style={errorOverlayStyle}>\r\n          <span>Unable to load video</span>\r\n        </div>\r\n      </div>\r\n    )\r\n  }\r\n\r\n  return (\r\n    <div\r\n      className={cx(\r\n        'brycks-video',\r\n        isPlaying && 'brycks-video--playing',\r\n        className\r\n      )}\r\n      style={parsedRatio ? containerStyle : { position: 'relative', borderRadius }}\r\n      data-testid={testId}\r\n    >\r\n      <video\r\n        ref={videoRef}\r\n        src={src}\r\n        poster={poster}\r\n        preload={preload}\r\n        loop={loop}\r\n        controls={controls}\r\n        muted={shouldMute}\r\n        playsInline={playsInline}\r\n        onPlay={handlePlay}\r\n        onPause={handlePause}\r\n        onEnded={handleEnded}\r\n        onCanPlay={onCanPlay}\r\n        onError={handleError}\r\n        style={videoStyle}\r\n        {...props}\r\n      />\r\n    </div>\r\n  )\r\n})\r\n\r\nVideo.displayName = 'Video'\r\n"],"names":["radiusMap","parseAspectRatio","ratio","parts","width","height","parsed","Video","forwardRef","src","poster","aspectRatio","fit","preload","autoPlay","loop","controls","muted","playsInline","radius","onPlay","onPause","onEnded","onCanPlay","onError","className","style","testId","props","ref","videoRef","useRef","isPlaying","setIsPlaying","useState","hasError","setHasError","prefersReducedMotion","usePrefersReducedMotion","shouldAutoPlay","shouldMute","useImperativeHandle","time","useEffect","handlePlay","useCallback","event","handlePause","handleEnded","handleError","parsedRatio","borderRadius","containerStyle","videoStyle","errorOverlayStyle","jsxs","cx","jsx"],"mappings":"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"}
+{"version":3,"file":"Video.js","sources":["../../../../src/components/media/Video/Video.tsx"],"sourcesContent":["/**\r\n * Video Component\r\n *\r\n * Accessible video player with customizable controls, poster support,\r\n * and respect for user motion preferences.\r\n */\r\n\r\nimport {\r\n  forwardRef,\r\n  useRef,\r\n  useState,\r\n  useCallback,\r\n  useEffect,\r\n  useImperativeHandle,\r\n  type CSSProperties,\r\n  type VideoHTMLAttributes,\r\n  type SyntheticEvent,\r\n} from 'react'\r\nimport { cx } from '../../../utils/styles'\r\nimport { usePrefersReducedMotion } from '../../../hooks/useMediaQuery'\r\n\r\nexport type VideoFit = 'cover' | 'contain' | 'fill' | 'none' | 'scale-down'\r\nexport type VideoPreload = 'none' | 'metadata' | 'auto'\r\n\r\nexport interface VideoProps\r\n  extends Omit<VideoHTMLAttributes<HTMLVideoElement>, 'autoPlay'> {\r\n  /** Video source URL */\r\n  src: string\r\n  /** Poster image URL shown before playback */\r\n  poster?: string\r\n  /** Aspect ratio (width/height) */\r\n  aspectRatio?: number | string\r\n  /** How the video should fit within its container */\r\n  fit?: VideoFit\r\n  /** Preload behavior */\r\n  preload?: VideoPreload\r\n  /**\r\n   * Autoplay behavior.\r\n   * - true: Autoplay (muted, respects reduced motion)\r\n   * - 'muted': Autoplay muted only\r\n   * - false: No autoplay\r\n   * @default false\r\n   */\r\n  autoPlay?: boolean | 'muted'\r\n  /** Loop video playback */\r\n  loop?: boolean\r\n  /** Show native controls */\r\n  controls?: boolean\r\n  /** Start muted */\r\n  muted?: boolean\r\n  /** Play inline on mobile (vs fullscreen) */\r\n  playsInline?: boolean\r\n  /** Border radius using design tokens */\r\n  radius?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'\r\n  /** Callback when video starts playing */\r\n  onPlay?: (event: SyntheticEvent<HTMLVideoElement>) => void\r\n  /** Callback when video pauses */\r\n  onPause?: (event: SyntheticEvent<HTMLVideoElement>) => void\r\n  /** Callback when video ends */\r\n  onEnded?: (event: SyntheticEvent<HTMLVideoElement>) => void\r\n  /** Callback when video can play */\r\n  onCanPlay?: (event: SyntheticEvent<HTMLVideoElement>) => void\r\n  /** Callback on error */\r\n  onError?: (event: SyntheticEvent<HTMLVideoElement>) => void\r\n  /** Custom class name */\r\n  className?: string\r\n  /** Test ID */\r\n  testId?: string\r\n}\r\n\r\nexport interface VideoRef {\r\n  /** Play the video */\r\n  play: () => Promise<void>\r\n  /** Pause the video */\r\n  pause: () => void\r\n  /** Toggle play/pause */\r\n  toggle: () => void\r\n  /** Seek to time in seconds */\r\n  seek: (time: number) => void\r\n  /** Get current time in seconds */\r\n  getCurrentTime: () => number\r\n  /** Get duration in seconds */\r\n  getDuration: () => number\r\n  /** Check if video is playing */\r\n  isPlaying: () => boolean\r\n  /** Get the underlying video element */\r\n  getElement: () => HTMLVideoElement | null\r\n}\r\n\r\nconst radiusMap: Record<string, string> = {\r\n  none: '0',\r\n  sm: 'var(--brycks-radius-sm)',\r\n  md: 'var(--brycks-radius-md)',\r\n  lg: 'var(--brycks-radius-lg)',\r\n  xl: 'var(--brycks-radius-xl)',\r\n  full: 'var(--brycks-radius-full)',\r\n}\r\n\r\nfunction parseAspectRatio(ratio: number | string | undefined): number | undefined {\r\n  if (ratio === undefined) return undefined\r\n  if (typeof ratio === 'number') return ratio\r\n\r\n  const parts = ratio.split(/[:/]/)\r\n  if (parts.length === 2) {\r\n    const width = parseFloat(parts[0])\r\n    const height = parseFloat(parts[1])\r\n    if (!isNaN(width) && !isNaN(height) && height !== 0) {\r\n      return width / height\r\n    }\r\n  }\r\n\r\n  const parsed = parseFloat(ratio)\r\n  return isNaN(parsed) ? undefined : parsed\r\n}\r\n\r\nexport const Video = forwardRef<VideoRef, VideoProps>(function Video(\r\n  {\r\n    src,\r\n    poster,\r\n    aspectRatio,\r\n    fit = 'cover',\r\n    preload = 'metadata',\r\n    autoPlay = false,\r\n    loop = false,\r\n    controls = true,\r\n    muted,\r\n    playsInline = true,\r\n    radius = 'none',\r\n    onPlay,\r\n    onPause,\r\n    onEnded,\r\n    onCanPlay,\r\n    onError,\r\n    className,\r\n    style,\r\n    testId,\r\n    ...props\r\n  },\r\n  ref\r\n) {\r\n  const videoRef = useRef<HTMLVideoElement>(null)\r\n  const [isPlaying, setIsPlaying] = useState(false)\r\n  const [hasError, setHasError] = useState(false)\r\n  const prefersReducedMotion = usePrefersReducedMotion()\r\n\r\n  // Determine if autoplay should be enabled\r\n  const shouldAutoPlay = (() => {\r\n    // Never autoplay if user prefers reduced motion\r\n    if (prefersReducedMotion) return false\r\n    if (autoPlay === false) return false\r\n    return true\r\n  })()\r\n\r\n  // Autoplay must be muted to work in most browsers\r\n  const shouldMute = muted ?? (shouldAutoPlay || autoPlay === 'muted')\r\n\r\n  // Expose imperative handle\r\n  useImperativeHandle(\r\n    ref,\r\n    () => ({\r\n      play: async () => {\r\n        if (videoRef.current) {\r\n          await videoRef.current.play()\r\n        }\r\n      },\r\n      pause: () => {\r\n        videoRef.current?.pause()\r\n      },\r\n      toggle: () => {\r\n        if (videoRef.current) {\r\n          if (videoRef.current.paused) {\r\n            videoRef.current.play()\r\n          } else {\r\n            videoRef.current.pause()\r\n          }\r\n        }\r\n      },\r\n      seek: (time: number) => {\r\n        if (videoRef.current) {\r\n          videoRef.current.currentTime = time\r\n        }\r\n      },\r\n      getCurrentTime: () => videoRef.current?.currentTime ?? 0,\r\n      getDuration: () => videoRef.current?.duration ?? 0,\r\n      isPlaying: () => !videoRef.current?.paused,\r\n      getElement: () => videoRef.current,\r\n    }),\r\n    []\r\n  )\r\n\r\n  // Handle autoplay on mount\r\n  useEffect(() => {\r\n    if (shouldAutoPlay && videoRef.current) {\r\n      // Use a small delay to ensure video is ready\r\n      const attemptAutoplay = async () => {\r\n        try {\r\n          await videoRef.current?.play()\r\n        } catch {\r\n          // Autoplay was blocked - this is expected in many browsers\r\n          // The video will remain paused with poster visible\r\n        }\r\n      }\r\n      attemptAutoplay()\r\n    }\r\n  }, [shouldAutoPlay])\r\n\r\n  const handlePlay = useCallback(\r\n    (event: SyntheticEvent<HTMLVideoElement>) => {\r\n      setIsPlaying(true)\r\n      onPlay?.(event)\r\n    },\r\n    [onPlay]\r\n  )\r\n\r\n  const handlePause = useCallback(\r\n    (event: SyntheticEvent<HTMLVideoElement>) => {\r\n      setIsPlaying(false)\r\n      onPause?.(event)\r\n    },\r\n    [onPause]\r\n  )\r\n\r\n  const handleEnded = useCallback(\r\n    (event: SyntheticEvent<HTMLVideoElement>) => {\r\n      setIsPlaying(false)\r\n      onEnded?.(event)\r\n    },\r\n    [onEnded]\r\n  )\r\n\r\n  const handleError = useCallback(\r\n    (event: SyntheticEvent<HTMLVideoElement>) => {\r\n      setHasError(true)\r\n      onError?.(event)\r\n    },\r\n    [onError]\r\n  )\r\n\r\n  const parsedRatio = parseAspectRatio(aspectRatio)\r\n  const borderRadius = radiusMap[radius] ?? radiusMap.none\r\n\r\n  const containerStyle: CSSProperties = {\r\n    position: 'relative',\r\n    overflow: 'hidden',\r\n    borderRadius,\r\n    backgroundColor: 'var(--brycks-background-muted)',\r\n    ...(parsedRatio\r\n      ? {\r\n          width: '100%',\r\n          paddingBottom: `${(1 / parsedRatio) * 100}%`,\r\n        }\r\n      : {}),\r\n    ...style,\r\n  }\r\n\r\n  const videoStyle: CSSProperties = {\r\n    display: 'block',\r\n    objectFit: fit,\r\n    borderRadius,\r\n    ...(parsedRatio\r\n      ? {\r\n          position: 'absolute',\r\n          top: 0,\r\n          left: 0,\r\n          width: '100%',\r\n          height: '100%',\r\n        }\r\n      : {\r\n          width: '100%',\r\n          height: 'auto',\r\n        }),\r\n  }\r\n\r\n  const errorOverlayStyle: CSSProperties = {\r\n    position: 'absolute',\r\n    top: 0,\r\n    left: 0,\r\n    right: 0,\r\n    bottom: 0,\r\n    display: 'flex',\r\n    alignItems: 'center',\r\n    justifyContent: 'center',\r\n    backgroundColor: 'var(--brycks-background-muted)',\r\n    color: 'var(--brycks-foreground-muted)',\r\n    fontSize: 'var(--brycks-font-size-sm)',\r\n    borderRadius,\r\n  }\r\n\r\n  if (hasError) {\r\n    return (\r\n      <div\r\n        className={cx('brycks-video', 'brycks-video--error', className)}\r\n        style={containerStyle}\r\n        data-testid={testId}\r\n        role=\"img\"\r\n        aria-label=\"Video failed to load\"\r\n      >\r\n        {parsedRatio && <div style={{ paddingBottom: `${(1 / parsedRatio) * 100}%` }} />}\r\n        <div style={errorOverlayStyle}>\r\n          <span>Unable to load video</span>\r\n        </div>\r\n      </div>\r\n    )\r\n  }\r\n\r\n  return (\r\n    <div\r\n      className={cx(\r\n        'brycks-video',\r\n        isPlaying && 'brycks-video--playing',\r\n        className\r\n      )}\r\n      style={parsedRatio ? containerStyle : { position: 'relative', borderRadius }}\r\n      data-testid={testId}\r\n    >\r\n      <video\r\n        ref={videoRef}\r\n        src={src}\r\n        poster={poster}\r\n        preload={preload}\r\n        loop={loop}\r\n        controls={controls}\r\n        muted={shouldMute}\r\n        playsInline={playsInline}\r\n        onPlay={handlePlay}\r\n        onPause={handlePause}\r\n        onEnded={handleEnded}\r\n        onCanPlay={onCanPlay}\r\n        onError={handleError}\r\n        style={videoStyle}\r\n        {...props}\r\n      />\r\n    </div>\r\n  )\r\n})\r\n\r\nVideo.displayName = 'Video'\r\n"],"names":["radiusMap","parseAspectRatio","ratio","parts","width","height","parsed","Video","forwardRef","src","poster","aspectRatio","fit","preload","autoPlay","loop","controls","muted","playsInline","radius","onPlay","onPause","onEnded","onCanPlay","onError","className","style","testId","props","ref","videoRef","useRef","isPlaying","setIsPlaying","useState","hasError","setHasError","shouldAutoPlay","usePrefersReducedMotion","shouldMute","useImperativeHandle","time","useEffect","handlePlay","useCallback","event","handlePause","handleEnded","handleError","parsedRatio","borderRadius","containerStyle","videoStyle","errorOverlayStyle","jsxs","cx","jsx"],"mappings":"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"}