@brycks/core-front 0.12.0 → 0.12.1

package/dist/components/layout.d.ts

@@ -1,2 +1,587 @@
-export * from './layout/index'
-export {}
+import { ComponentPropsWithoutRef } from 'react';
+import { ComponentPropsWithRef } from 'react';
+import { CSSProperties } from 'react';
+import { default as default_2 } from 'react';
+import { ElementType } from 'react';
+import { ForwardRefExoticComponent } from 'react';
+import { HTMLAttributes } from 'react';
+import { ReactNode } from 'react';
+import { RefAttributes } from 'react';
+
+export declare const Article: ForwardRefExoticComponent<SemanticProps & RefAttributes<HTMLElement>>;
+
+export declare type ArticleProps = SemanticProps;
+
+export declare const Aside: ForwardRefExoticComponent<AsideProps & RefAttributes<HTMLElement>>;
+
+export declare interface AsideProps extends SemanticProps {
+    'aria-label'?: string;
+}
+
+export declare const AspectRatio: ForwardRefExoticComponent<AspectRatioProps & RefAttributes<HTMLDivElement>>;
+
+/** Common aspect ratio presets */
+export declare type AspectRatioPreset = '1:1' | '4:3' | '3:2' | '16:9' | '21:9' | '2:3' | '3:4' | '9:16';
+
+export declare interface AspectRatioProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Aspect ratio as a preset string or custom number.
+     * Number represents width/height (e.g., 16/9 = 1.777...)
+     * @default '16:9'
+     */
+    ratio?: AspectRatioPreset | number;
+    /** Content to render inside the ratio container */
+    children?: ReactNode;
+    /** Custom class name */
+    className?: string;
+    /** Test ID */
+    testId?: string;
+}
+
+export declare const Box: BoxComponent;
+
+declare interface BoxComponent {
+    <E extends ElementType = 'div'>(props: BoxProps<E> & {
+        ref?: ComponentPropsWithRef<E>['ref'];
+    }): default_2.JSX.Element | null;
+    displayName?: string;
+}
+
+export declare interface BoxOwnProps extends SpacingProps {
+    /** The element type to render */
+    as?: ElementType;
+    /** Custom class name */
+    className?: string;
+    /** Custom inline styles */
+    style?: CSSProperties;
+    /** Display property */
+    display?: CSSProperties['display'];
+    /** Position property */
+    position?: CSSProperties['position'];
+    /** Width */
+    width?: CSSProperties['width'];
+    /** Height */
+    height?: CSSProperties['height'];
+    /** Min width */
+    minWidth?: CSSProperties['minWidth'];
+    /** Max width */
+    maxWidth?: CSSProperties['maxWidth'];
+    /** Min height */
+    minHeight?: CSSProperties['minHeight'];
+    /** Max height */
+    maxHeight?: CSSProperties['maxHeight'];
+    /** Overflow */
+    overflow?: CSSProperties['overflow'];
+    /** Background color (CSS variable or direct value) */
+    bg?: string;
+    /** Border radius */
+    radius?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full';
+    /** Box shadow */
+    shadow?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+    /** Test ID */
+    testId?: string;
+}
+
+export declare type BoxProps<E extends ElementType = 'div'> = BoxOwnProps & Omit<ComponentPropsWithoutRef<E>, keyof BoxOwnProps>;
+
+export declare const Card: ForwardRefExoticComponent<CardProps & RefAttributes<HTMLDivElement>>;
+
+export declare const CardBody: ForwardRefExoticComponent<CardBodyProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface CardBodyProps extends HTMLAttributes<HTMLDivElement> {
+    /** Custom class name */
+    className?: string;
+}
+
+export declare const CardFooter: ForwardRefExoticComponent<CardFooterProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface CardFooterProps extends HTMLAttributes<HTMLDivElement> {
+    /** Whether to show a divider above the footer */
+    divider?: boolean;
+    /** Footer alignment */
+    align?: 'left' | 'center' | 'right' | 'between';
+    /** Custom class name */
+    className?: string;
+}
+
+export declare const CardHeader: ForwardRefExoticComponent<CardHeaderProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {
+    /** Whether to show a divider below the header */
+    divider?: boolean;
+    /** Custom class name */
+    className?: string;
+}
+
+export declare type CardPadding = 'none' | 'sm' | 'md' | 'lg' | 'xl';
+
+export declare interface CardProps extends HTMLAttributes<HTMLDivElement> {
+    /** Card variant */
+    variant?: CardVariant;
+    /** Card padding */
+    padding?: CardPadding;
+    /** Whether the card is interactive (adds hover effect) */
+    interactive?: boolean;
+    /** Whether the card is selected */
+    selected?: boolean;
+    /** Custom class name */
+    className?: string;
+    /** Test ID */
+    testId?: string;
+}
+
+export declare type CardVariant = 'elevated' | 'outline' | 'filled' | 'ghost';
+
+export declare const Collapse: ForwardRefExoticComponent<CollapseProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface CollapseProps {
+    /** Whether the content is expanded (controlled) */
+    isOpen?: boolean;
+    /** Default expanded state (uncontrolled) */
+    defaultIsOpen?: boolean;
+    /** Content to show when collapsed */
+    children: ReactNode;
+    /** Animation duration in milliseconds */
+    duration?: number;
+    /** Easing function */
+    easing?: string;
+    /** Whether to animate on initial render */
+    animateOnMount?: boolean;
+    /** Whether to unmount content when collapsed */
+    unmountOnCollapse?: boolean;
+    /** Custom class name */
+    className?: string;
+    /** Test ID */
+    testId?: string;
+}
+
+export declare const Collapsible: ForwardRefExoticComponent<CollapsibleProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface CollapsibleProps {
+    /** Header content (always visible) */
+    header: ReactNode;
+    /** Collapsible content */
+    children: ReactNode;
+    /** Whether expanded (controlled) */
+    isOpen?: boolean;
+    /** Default expanded state (uncontrolled) */
+    defaultIsOpen?: boolean;
+    /** Callback when expanded state changes */
+    onToggle?: (isOpen: boolean) => void;
+    /** Whether the collapsible is disabled */
+    disabled?: boolean;
+    /** Custom class name */
+    className?: string;
+    /** Test ID */
+    testId?: string;
+}
+
+export declare const Container: ContainerComponent;
+
+declare interface ContainerComponent {
+    <E extends ElementType = 'div'>(props: ContainerProps<E> & {
+        ref?: ComponentPropsWithRef<E>['ref'];
+    }): default_2.JSX.Element | null;
+    displayName?: string;
+}
+
+export declare interface ContainerOwnProps extends SpacingProps {
+    /** The element type to render */
+    as?: ElementType;
+    /** Custom class name */
+    className?: string;
+    /** Custom inline styles */
+    style?: CSSProperties;
+    /** Container size / max-width */
+    size?: keyof typeof containers;
+    /** Whether to center the container */
+    centered?: boolean;
+    /** Whether to add default horizontal padding */
+    padded?: boolean;
+    /** Children */
+    children?: ReactNode;
+    /** Test ID */
+    testId?: string;
+}
+
+export declare type ContainerProps<E extends ElementType = 'div'> = ContainerOwnProps & Omit<ComponentPropsWithoutRef<E>, keyof ContainerOwnProps>;
+
+/** Container max-widths aligned with breakpoints */
+declare const containers: {
+    readonly xs: 320;
+    readonly sm: 480;
+    readonly md: 640;
+    readonly lg: 768;
+    readonly xl: 1024;
+    readonly '2xl': 1280;
+    readonly '3xl': 1440;
+    readonly full: "100%";
+};
+
+export declare const Flex: ForwardRefExoticComponent<FlexProps & RefAttributes<HTMLDivElement>>;
+
+declare type FlexAlign = 'start' | 'end' | 'center' | 'baseline' | 'stretch';
+
+declare type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
+
+export declare const FlexItem: ForwardRefExoticComponent<FlexItemProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface FlexItemProps extends HTMLAttributes<HTMLDivElement> {
+    /** Flex grow */
+    grow?: number;
+    /** Flex shrink */
+    shrink?: number;
+    /** Flex basis */
+    basis?: string | number;
+    /** Align self */
+    alignSelf?: FlexAlign;
+    /** Order */
+    order?: number;
+    /** Children */
+    children?: ReactNode;
+    /** Custom class name */
+    className?: string;
+    /** Custom styles */
+    style?: CSSProperties;
+    /** Test ID */
+    testId?: string;
+}
+
+declare type FlexJustify = 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly';
+
+export declare interface FlexProps extends HTMLAttributes<HTMLDivElement> {
+    /** Flex direction */
+    direction?: FlexDirection;
+    /** Flex wrap */
+    wrap?: FlexWrap;
+    /** Justify content */
+    justify?: FlexJustify;
+    /** Align items */
+    align?: FlexAlign;
+    /** Gap between items */
+    gap?: SpacingKey_3;
+    /** Row gap */
+    rowGap?: SpacingKey_3;
+    /** Column gap */
+    columnGap?: SpacingKey_3;
+    /** Whether to display inline */
+    inline?: boolean;
+    /** Flex grow */
+    grow?: number;
+    /** Flex shrink */
+    shrink?: number;
+    /** Flex basis */
+    basis?: string | number;
+    /** Children */
+    children?: ReactNode;
+    /** Custom class name */
+    className?: string;
+    /** Custom styles */
+    style?: CSSProperties;
+    /** Test ID */
+    testId?: string;
+}
+
+declare type FlexWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
+
+export declare const Footer: ForwardRefExoticComponent<FooterProps & RefAttributes<HTMLElement>>;
+
+export declare interface FooterProps extends SemanticProps {
+    role?: 'contentinfo' | 'none';
+}
+
+export declare const Grid: GridComponent;
+
+declare interface GridComponent {
+    <E extends ElementType = 'div'>(props: GridProps<E> & {
+        ref?: ComponentPropsWithRef<E>['ref'];
+    }): default_2.JSX.Element | null;
+    displayName?: string;
+}
+
+export declare const GridItem: GridItemComponent;
+
+declare interface GridItemComponent {
+    <E extends ElementType = 'div'>(props: GridItemProps<E> & {
+        ref?: ComponentPropsWithRef<E>['ref'];
+    }): default_2.JSX.Element | null;
+    displayName?: string;
+}
+
+/** Grid Item Component */
+export declare interface GridItemOwnProps {
+    /** Column span */
+    colSpan?: number | 'full';
+    /** Row span */
+    rowSpan?: number;
+    /** Column start */
+    colStart?: number;
+    /** Column end */
+    colEnd?: number;
+    /** Row start */
+    rowStart?: number;
+    /** Row end */
+    rowEnd?: number;
+    /** Custom class name */
+    className?: string;
+    /** Custom inline styles */
+    style?: CSSProperties;
+    /** Children */
+    children?: ReactNode;
+    /** Test ID */
+    testId?: string;
+}
+
+export declare type GridItemProps<E extends ElementType = 'div'> = GridItemOwnProps & Omit<ComponentPropsWithoutRef<E>, keyof GridItemOwnProps> & {
+    as?: E;
+};
+
+export declare interface GridOwnProps extends SpacingProps {
+    /** The element type to render */
+    as?: ElementType;
+    /** Custom class name */
+    className?: string;
+    /** Custom inline styles */
+    style?: CSSProperties;
+    /** Number of columns */
+    columns?: number | string;
+    /** Number of rows */
+    rows?: number | string;
+    /** Gap between items */
+    gap?: SpacingKey;
+    /** Column gap */
+    gapX?: SpacingKey;
+    /** Row gap */
+    gapY?: SpacingKey;
+    /** Align items */
+    align?: CSSProperties['alignItems'];
+    /** Justify items */
+    justify?: CSSProperties['justifyItems'];
+    /** Template columns (CSS value) */
+    templateColumns?: string;
+    /** Template rows (CSS value) */
+    templateRows?: string;
+    /** Auto flow */
+    flow?: CSSProperties['gridAutoFlow'];
+    /** Whether to render as inline-grid */
+    inline?: boolean;
+    /** Children */
+    children?: ReactNode;
+    /** Test ID */
+    testId?: string;
+}
+
+export declare type GridProps<E extends ElementType = 'div'> = GridOwnProps & Omit<ComponentPropsWithoutRef<E>, keyof GridOwnProps>;
+
+export declare const Header: ForwardRefExoticComponent<HeaderProps & RefAttributes<HTMLElement>>;
+
+export declare interface HeaderProps extends SemanticProps {
+    role?: 'banner' | 'none';
+}
+
+export declare const HStack: StackComponent;
+
+export declare const Main: ForwardRefExoticComponent<MainProps & RefAttributes<HTMLElement>>;
+
+export declare interface MainProps extends SemanticProps {
+    id?: string;
+}
+
+export declare const Nav: ForwardRefExoticComponent<NavProps & RefAttributes<HTMLElement>>;
+
+export declare interface NavProps extends SemanticProps {
+    'aria-label'?: string;
+}
+
+export declare const Section: ForwardRefExoticComponent<SectionProps & RefAttributes<HTMLElement>>;
+
+export declare interface SectionProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+    /** Section title */
+    title?: ReactNode;
+    /** Section description */
+    description?: ReactNode;
+    /** Title level for accessibility */
+    titleLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    /** Spacing between sections */
+    spacing?: SectionSpacing;
+    /** Whether to show a divider above the section */
+    divider?: boolean;
+    /** Actions to display in the header (right side) */
+    actions?: ReactNode;
+    /** Custom class name */
+    className?: string;
+    /** Test ID */
+    testId?: string;
+}
+
+export declare type SectionSpacing = 'none' | 'sm' | 'md' | 'lg' | 'xl';
+
+declare interface SemanticProps extends HTMLAttributes<HTMLElement> {
+    children?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+    testId?: string;
+}
+
+export declare const Spacer: ForwardRefExoticComponent<SpacerProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface SpacerProps extends HTMLAttributes<HTMLDivElement> {
+    /** Fixed size in spacing tokens */
+    size?: SpacingKey_2;
+    /** Custom size in pixels */
+    customSize?: number;
+    /** Whether to expand to fill available space (flex: 1) */
+    flex?: boolean;
+    /** Direction of the spacer */
+    direction?: 'horizontal' | 'vertical';
+    /** Custom class name */
+    className?: string;
+}
+
+declare type Spacing = typeof spacing;
+
+/** Spacing scale - values in pixels */
+declare const spacing: {
+    /** 0px */
+    readonly 0: 0;
+    /** 1px - hairline */
+    readonly px: 1;
+    /** 2px - micro */
+    readonly 0.5: number;
+    /** 4px - tiny */
+    readonly 1: 4;
+    /** 6px */
+    readonly 1.5: number;
+    /** 8px - extra small */
+    readonly 2: number;
+    /** 10px */
+    readonly 2.5: number;
+    /** 12px - small */
+    readonly 3: number;
+    /** 14px */
+    readonly 3.5: number;
+    /** 16px - medium (base) */
+    readonly 4: number;
+    /** 20px */
+    readonly 5: number;
+    /** 24px - large */
+    readonly 6: number;
+    /** 28px */
+    readonly 7: number;
+    /** 32px - extra large */
+    readonly 8: number;
+    /** 36px */
+    readonly 9: number;
+    /** 40px */
+    readonly 10: number;
+    /** 44px */
+    readonly 11: number;
+    /** 48px - 2x large */
+    readonly 12: number;
+    /** 56px */
+    readonly 14: number;
+    /** 64px - 3x large */
+    readonly 16: number;
+    /** 80px */
+    readonly 20: number;
+    /** 96px - 4x large */
+    readonly 24: number;
+    /** 112px */
+    readonly 28: number;
+    /** 128px */
+    readonly 32: number;
+    /** 160px */
+    readonly 40: number;
+    /** 192px */
+    readonly 48: number;
+    /** 224px */
+    readonly 56: number;
+    /** 256px */
+    readonly 64: number;
+    /** 320px */
+    readonly 80: number;
+    /** 384px */
+    readonly 96: number;
+};
+
+declare type SpacingKey = keyof Spacing;
+
+declare type SpacingKey_2 = keyof typeof spacing;
+
+declare type SpacingKey_3 = keyof typeof spacing;
+
+/** Spacing props for components */
+declare interface SpacingProps {
+    /** Margin all sides */
+    m?: SpacingKey;
+    /** Margin horizontal (left + right) */
+    mx?: SpacingKey;
+    /** Margin vertical (top + bottom) */
+    my?: SpacingKey;
+    /** Margin top */
+    mt?: SpacingKey;
+    /** Margin right */
+    mr?: SpacingKey;
+    /** Margin bottom */
+    mb?: SpacingKey;
+    /** Margin left */
+    ml?: SpacingKey;
+    /** Padding all sides */
+    p?: SpacingKey;
+    /** Padding horizontal (left + right) */
+    px?: SpacingKey;
+    /** Padding vertical (top + bottom) */
+    py?: SpacingKey;
+    /** Padding top */
+    pt?: SpacingKey;
+    /** Padding right */
+    pr?: SpacingKey;
+    /** Padding bottom */
+    pb?: SpacingKey;
+    /** Padding left */
+    pl?: SpacingKey;
+}
+
+export declare const Stack: StackComponent;
+
+declare interface StackComponent {
+    <E extends ElementType = 'div'>(props: StackProps<E> & {
+        ref?: ComponentPropsWithRef<E>['ref'];
+    }): default_2.JSX.Element | null;
+    displayName?: string;
+}
+
+export declare interface StackOwnProps extends SpacingProps {
+    /** The element type to render */
+    as?: ElementType;
+    /** Custom class name */
+    className?: string;
+    /** Custom inline styles */
+    style?: CSSProperties;
+    /** Stack direction */
+    direction?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
+    /** Gap between items */
+    gap?: SpacingKey;
+    /** Horizontal gap (for row direction) */
+    gapX?: SpacingKey;
+    /** Vertical gap (for column direction) */
+    gapY?: SpacingKey;
+    /** Align items */
+    align?: CSSProperties['alignItems'];
+    /** Justify content */
+    justify?: CSSProperties['justifyContent'];
+    /** Flex wrap */
+    wrap?: CSSProperties['flexWrap'];
+    /** Whether to render as inline-flex */
+    inline?: boolean;
+    /** Children */
+    children?: ReactNode;
+    /** Test ID */
+    testId?: string;
+}
+
+export declare type StackProps<E extends ElementType = 'div'> = StackOwnProps & Omit<ComponentPropsWithoutRef<E>, keyof StackOwnProps>;
+
+export declare const VStack: StackComponent;
+
+export { }

package/dist/components/media/Video/Video.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),r=require("react"),x=require("../../../utils/styles.cjs"),G=require("../../../hooks/useMediaQuery.cjs"),j={none:"0",sm:"var(--brycks-radius-sm)",md:"var(--brycks-radius-md)",lg:"var(--brycks-radius-lg)",xl:"var(--brycks-radius-xl)",full:"var(--brycks-radius-full)"};function J(s){if(s===void 0)return;if(typeof s=="number")return s;const n=s.split(/[:/]/);if(n.length===2){const u=parseFloat(n[0]),i=parseFloat(n[1]);if(!isNaN(u)&&!isNaN(i)&&i!==0)return u/i}const l=parseFloat(s);return isNaN(l)?void 0:l}const R=r.forwardRef(function({src:n,poster:l,aspectRatio:u,fit:i="cover",preload:w="metadata",autoPlay:y=!1,loop:C=!1,controls:N=!0,muted:S,playsInline:P=!0,radius:E="none",onPlay:p,onPause:b,onEnded:v,onCanPlay:M,onError:m,className:g,style:V,testId:h,...q},A){const e=r.useRef(null),[F,d]=r.useState(!1),[T,z]=r.useState(!1),B=G.usePrefersReducedMotion(),f=!(B||y===!1),H=S??(f||y==="muted");r.useImperativeHandle(A,()=>({play:async()=>{e.current&&await e.current.play()},pause:()=>{e.current?.pause()},toggle:()=>{e.current&&(e.current.paused?e.current.play():e.current.pause())},seek:t=>{e.current&&(e.current.currentTime=t)},getCurrentTime:()=>e.current?.currentTime??0,getDuration:()=>e.current?.duration??0,isPlaying:()=>!e.current?.paused,getElement:()=>e.current}),[]),r.useEffect(()=>{f&&e.current&&(async()=>{try{await e.current?.play()}catch{}})()},[f]);const I=r.useCallback(t=>{d(!0),p?.(t)},[p]),O=r.useCallback(t=>{d(!1),b?.(t)},[b]),$=r.useCallback(t=>{d(!1),v?.(t)},[v]),D=r.useCallback(t=>{z(!0),m?.(t)},[m]),a=J(u),c=j[E]??j.none,k={position:"relative",overflow:"hidden",borderRadius:c,backgroundColor:"var(--brycks-background-muted)",...a?{width:"100%",paddingBottom:`${1/a*100}%`}:{},...V},Q={display:"block",objectFit:i,borderRadius:c,...a?{position:"absolute",top:0,left:0,width:"100%",height:"100%"}:{width:"100%",height:"auto"}},U={position:"absolute",top:0,left:0,right:0,bottom:0,display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:"var(--brycks-background-muted)",color:"var(--brycks-foreground-muted)",fontSize:"var(--brycks-font-size-sm)",borderRadius:c};return T?o.jsxs("div",{className:x.cx("brycks-video","brycks-video--error",g),style:k,"data-testid":h,role:"img","aria-label":"Video failed to load",children:[a&&o.jsx("div",{style:{paddingBottom:`${1/a*100}%`}}),o.jsx("div",{style:U,children:o.jsx("span",{children:"Unable to load video"})})]}):o.jsx("div",{className:x.cx("brycks-video",F&&"brycks-video--playing",g),style:a?k:{position:"relative",borderRadius:c},"data-testid":h,children:o.jsx("video",{ref:e,src:n,poster:l,preload:w,loop:C,controls:N,muted:H,playsInline:P,onPlay:I,onPause:O,onEnded:$,onCanPlay:M,onError:D,style:Q,...q})})});R.displayName="Video";exports.Video=R;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),r=require("react"),x=require("../../../utils/styles.cjs"),U=require("../../../hooks/useMediaQuery.cjs"),R={none:"0",sm:"var(--brycks-radius-sm)",md:"var(--brycks-radius-md)",lg:"var(--brycks-radius-lg)",xl:"var(--brycks-radius-xl)",full:"var(--brycks-radius-full)"};function G(s){if(s===void 0)return;if(typeof s=="number")return s;const n=s.split(/[:/]/);if(n.length===2){const l=parseFloat(n[0]),i=parseFloat(n[1]);if(!isNaN(l)&&!isNaN(i)&&i!==0)return l/i}const u=parseFloat(s);return isNaN(u)?void 0:u}const j=r.forwardRef(function({src:n,poster:u,aspectRatio:l,fit:i="cover",preload:w="metadata",autoPlay:y=!1,loop:C=!1,controls:N=!0,muted:S,playsInline:M=!0,radius:P="none",onPlay:p,onPause:b,onEnded:v,onCanPlay:E,onError:m,className:g,style:V,testId:h,...q},A){const e=r.useRef(null),[F,d]=r.useState(!1),[T,z]=r.useState(!1),f=!(U.usePrefersReducedMotion()||y===!1),B=S??(f||y==="muted");r.useImperativeHandle(A,()=>({play:async()=>{e.current&&await e.current.play()},pause:()=>{e.current?.pause()},toggle:()=>{e.current&&(e.current.paused?e.current.play():e.current.pause())},seek:t=>{e.current&&(e.current.currentTime=t)},getCurrentTime:()=>e.current?.currentTime??0,getDuration:()=>e.current?.duration??0,isPlaying:()=>!e.current?.paused,getElement:()=>e.current}),[]),r.useEffect(()=>{f&&e.current&&(async()=>{try{await e.current?.play()}catch{}})()},[f]);const H=r.useCallback(t=>{d(!0),p?.(t)},[p]),I=r.useCallback(t=>{d(!1),b?.(t)},[b]),O=r.useCallback(t=>{d(!1),v?.(t)},[v]),$=r.useCallback(t=>{z(!0),m?.(t)},[m]),a=G(l),c=R[P]??R.none,k={position:"relative",overflow:"hidden",borderRadius:c,backgroundColor:"var(--brycks-background-muted)",...a?{width:"100%",paddingBottom:`${1/a*100}%`}:{},...V},D={display:"block",objectFit:i,borderRadius:c,...a?{position:"absolute",top:0,left:0,width:"100%",height:"100%"}:{width:"100%",height:"auto"}},Q={position:"absolute",top:0,left:0,right:0,bottom:0,display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:"var(--brycks-background-muted)",color:"var(--brycks-foreground-muted)",fontSize:"var(--brycks-font-size-sm)",borderRadius:c};return T?o.jsxs("div",{className:x.cx("brycks-video","brycks-video--error",g),style:k,"data-testid":h,role:"img","aria-label":"Video failed to load",children:[a&&o.jsx("div",{style:{paddingBottom:`${1/a*100}%`}}),o.jsx("div",{style:Q,children:o.jsx("span",{children:"Unable to load video"})})]}):o.jsx("div",{className:x.cx("brycks-video",F&&"brycks-video--playing",g),style:a?k:{position:"relative",borderRadius:c},"data-testid":h,children:o.jsx("video",{ref:e,src:n,poster:u,preload:w,loop:C,controls:N,muted:B,playsInline:M,onPlay:H,onPause:I,onEnded:O,onCanPlay:E,onError:$,style:D,...q})})});j.displayName="Video";exports.Video=j;
 //# sourceMappingURL=Video.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Video.cjs","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.cjs","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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"}