@lukeashford/aurelius 2.7.0 → 2.9.0

package/README.md

@@ -55,11 +55,30 @@ while staying within design system constraints.
 ### 1. Install
 
 ```bash
+# For Vite projects (Recommended)
 npm install @lukeashford/aurelius
-npm install -D tailwindcss postcss @tailwindcss/postcss eslint @typescript-eslint/parser eslint-plugin-better-tailwindcss @poupe/eslint-plugin-tailwindcss @eslint/css tailwind-csstree
+npm install -D tailwindcss @tailwindcss/vite eslint @typescript-eslint/parser eslint-plugin-better-tailwindcss @poupe/eslint-plugin-tailwindcss @eslint/css tailwind-csstree
+
+# For other projects
+# npm install -D tailwindcss @tailwindcss/postcss postcss ...
+```
+
+### 2. Configure (Vite)
+
+If you are using Vite, add the Tailwind CSS plugin to your `vite.config.ts`:
+
+```typescript
+import {defineConfig} from 'vite'
+import tailwindcss from '@tailwindcss/vite'
+
+export default defineConfig({
+  plugins: [
+    tailwindcss(),
+  ],
+})
 ```
 
-### 2. Import the design system
+### 3. Import the design system
 
 Create or update your `index.css`:
 
@@ -78,7 +97,7 @@ Then import it in your entry file:
 import './index.css'
 ```
 
-### 3. Configure ESLint (simplest form)
+### 4. Configure ESLint (simplest form)
 
 Aurelius ships with a default ESLint config you can re-export in one line. It enforces design system
 constraints — if ESLint complains, you're leaving the rails.
@@ -106,7 +125,7 @@ export default createAureliusESLintConfig({
 - **CSS files:** Tailwind v4 CSS best practices, valid `@apply` directives, no arbitrary value
   overuse, and proper theme token usage
 
-### 4. Update package.json scripts
+### 5. Update package.json scripts
 
 Add a lint script and wire it into your workflow:
 
@@ -123,7 +142,7 @@ Add a lint script and wire it into your workflow:
 If your project already has CI (or you're asked to add one), include `npm run lint` in that
 pipeline so lint failures block merges.
 
-### 5. Use components
+### 6. Use components
 
 ```tsx
 import {Button, Card, Input} from '@lukeashford/aurelius'

package/dist/index.d.mts

@@ -39,6 +39,7 @@ interface CardMediaProps extends React.HTMLAttributes<HTMLDivElement> {
     alt?: string;
     aspect?: 'video' | 'square' | 'wide';
     position?: 'top' | 'bottom';
+    isVideo?: boolean;
 }
 declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>> & {
     Header: React.ForwardRefExoticComponent<CardHeaderProps & React.RefAttributes<HTMLDivElement>>;
@@ -571,6 +572,25 @@ interface ImageCardProps extends Omit<CardProps, 'title'> {
 }
 declare const ImageCard: React.ForwardRefExoticComponent<ImageCardProps & React.RefAttributes<HTMLDivElement>>;
 
+type VideoAspectRatioPreset = 'video' | 'cinema' | 'square';
+type VideoAspectRatio = VideoAspectRatioPreset | `${number}/${number}`;
+interface VideoCardProps extends Omit<CardProps, 'title'> {
+    src: string;
+    title?: React.ReactNode;
+    subtitle?: React.ReactNode;
+    aspectRatio?: VideoAspectRatio;
+    playing?: boolean;
+    controls?: boolean;
+    light?: boolean | string;
+    volume?: number;
+    muted?: boolean;
+    loop?: boolean;
+    mediaClassName?: string;
+    contentClassName?: string;
+    playerProps?: any;
+}
+declare const VideoCard: React.ForwardRefExoticComponent<VideoCardProps & React.RefAttributes<HTMLDivElement>>;
+
 type SectionHeadingLevel = 'h2' | 'h3';
 interface SectionHeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
     level?: SectionHeadingLevel;
@@ -589,4 +609,4 @@ declare const SectionHeading: React.ForwardRefExoticComponent<SectionHeadingProp
 
 declare const version = "2.0.0";
 
-export { Accordion, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, Alert, AlertDialog, type AlertDialogProps, type AlertProps, type AlertVariant, type AspectRatio, type AspectRatioPreset, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type BadgeVariant, BrandIcon, type BrandIconProps, type BrandIconSize, type BrandIconVariant, Breadcrumb, BreadcrumbItem, type BreadcrumbItemProps, BreadcrumbLink, type BreadcrumbLinkProps, type BreadcrumbProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, type CardBodyProps, type CardFooterProps, type CardHeaderProps, type CardMediaProps, type CardProps, type CardVariant, ChatHistory, type ChatHistoryItem, type ChatHistoryProps, Checkbox, type CheckboxProps, Col, type ColOffset, type ColOrder, type ColProps, type ColSpan, ColorSwatch, type ColorSwatchProps, ConfirmDialog, type ConfirmDialogProps, Container, type ContainerProps, type ContainerSize, Divider, type DividerProps, Drawer, type DrawerPosition, type DrawerProps, HelperText, type HelperTextProps, ImageCard, type ImageCardProps, Input, type InputAddonProps, type InputElementProps, InputGroup, type InputGroupProps, InputLeftAddon, InputLeftElement, type InputProps, InputRightAddon, InputRightElement, InputWrapper, type InputWrapperProps, Label, type LabelProps, List, ListItem, type ListItemProps, ListItemText, type ListItemTextProps, type ListProps, ListSubheader, type ListSubheaderProps, MarkdownContent, type MarkdownContentProps, Menu, MenuContent, type MenuContentProps, MenuItem, type MenuItemProps, MenuLabel, type MenuProps, MenuSeparator, MenuTrigger, type MenuTriggerProps, Message, type MessageProps, type MessageVariant, Modal, type ModalProps, Navbar, NavbarBrand, type NavbarBrandProps, NavbarContent, type NavbarContentProps, NavbarDivider, NavbarItem, type NavbarItemProps, NavbarLink, type NavbarLinkProps, type NavbarProps, Pagination, type PaginationProps, Popover, type PopoverAlign, type PopoverPosition, type PopoverProps, Progress, type ProgressProps, PromptDialog, type PromptDialogProps, Radio, type RadioProps, Row, type RowAlign, type RowGutter, type RowJustify, type RowProps, SectionHeading, type SectionHeadingLevel, type SectionHeadingProps, Select, type SelectOption, type SelectProps, Skeleton, type SkeletonProps, Slider, type SliderProps, Spinner, type SpinnerProps, Stack, type StackDirection, type StackGap, type StackProps, type Step, type StepStatus, Stepper, type StepperProps, StreamingCursor, type StreamingCursorProps, Switch, type SwitchProps, Tab, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Table, TableBody, type TableBodyProps, TableCaption, type TableCaptionProps, TableCell, type TableCellProps, TableFooter, type TableFooterProps, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, type TableProps, TableRow, type TableRowProps, Tabs, type TabsProps, Textarea, type TextareaProps, type ToastData, type ToastPosition, ToastProvider, type ToastProviderProps, type ToastVariant, Tooltip, type TooltipProps, useToast, version };
+export { Accordion, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, Alert, AlertDialog, type AlertDialogProps, type AlertProps, type AlertVariant, type AspectRatio, type AspectRatioPreset, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type BadgeVariant, BrandIcon, type BrandIconProps, type BrandIconSize, type BrandIconVariant, Breadcrumb, BreadcrumbItem, type BreadcrumbItemProps, BreadcrumbLink, type BreadcrumbLinkProps, type BreadcrumbProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, type CardBodyProps, type CardFooterProps, type CardHeaderProps, type CardMediaProps, type CardProps, type CardVariant, ChatHistory, type ChatHistoryItem, type ChatHistoryProps, Checkbox, type CheckboxProps, Col, type ColOffset, type ColOrder, type ColProps, type ColSpan, ColorSwatch, type ColorSwatchProps, ConfirmDialog, type ConfirmDialogProps, Container, type ContainerProps, type ContainerSize, Divider, type DividerProps, Drawer, type DrawerPosition, type DrawerProps, HelperText, type HelperTextProps, ImageCard, type ImageCardProps, Input, type InputAddonProps, type InputElementProps, InputGroup, type InputGroupProps, InputLeftAddon, InputLeftElement, type InputProps, InputRightAddon, InputRightElement, InputWrapper, type InputWrapperProps, Label, type LabelProps, List, ListItem, type ListItemProps, ListItemText, type ListItemTextProps, type ListProps, ListSubheader, type ListSubheaderProps, MarkdownContent, type MarkdownContentProps, Menu, MenuContent, type MenuContentProps, MenuItem, type MenuItemProps, MenuLabel, type MenuProps, MenuSeparator, MenuTrigger, type MenuTriggerProps, Message, type MessageProps, type MessageVariant, Modal, type ModalProps, Navbar, NavbarBrand, type NavbarBrandProps, NavbarContent, type NavbarContentProps, NavbarDivider, NavbarItem, type NavbarItemProps, NavbarLink, type NavbarLinkProps, type NavbarProps, Pagination, type PaginationProps, Popover, type PopoverAlign, type PopoverPosition, type PopoverProps, Progress, type ProgressProps, PromptDialog, type PromptDialogProps, Radio, type RadioProps, Row, type RowAlign, type RowGutter, type RowJustify, type RowProps, SectionHeading, type SectionHeadingLevel, type SectionHeadingProps, Select, type SelectOption, type SelectProps, Skeleton, type SkeletonProps, Slider, type SliderProps, Spinner, type SpinnerProps, Stack, type StackDirection, type StackGap, type StackProps, type Step, type StepStatus, Stepper, type StepperProps, StreamingCursor, type StreamingCursorProps, Switch, type SwitchProps, Tab, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Table, TableBody, type TableBodyProps, TableCaption, type TableCaptionProps, TableCell, type TableCellProps, TableFooter, type TableFooterProps, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, type TableProps, TableRow, type TableRowProps, Tabs, type TabsProps, Textarea, type TextareaProps, type ToastData, type ToastPosition, ToastProvider, type ToastProviderProps, type ToastVariant, Tooltip, type TooltipProps, type VideoAspectRatio, type VideoAspectRatioPreset, VideoCard, type VideoCardProps, useToast, version };

package/dist/index.d.ts

@@ -39,6 +39,7 @@ interface CardMediaProps extends React.HTMLAttributes<HTMLDivElement> {
     alt?: string;
     aspect?: 'video' | 'square' | 'wide';
     position?: 'top' | 'bottom';
+    isVideo?: boolean;
 }
 declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>> & {
     Header: React.ForwardRefExoticComponent<CardHeaderProps & React.RefAttributes<HTMLDivElement>>;
@@ -571,6 +572,25 @@ interface ImageCardProps extends Omit<CardProps, 'title'> {
 }
 declare const ImageCard: React.ForwardRefExoticComponent<ImageCardProps & React.RefAttributes<HTMLDivElement>>;
 
+type VideoAspectRatioPreset = 'video' | 'cinema' | 'square';
+type VideoAspectRatio = VideoAspectRatioPreset | `${number}/${number}`;
+interface VideoCardProps extends Omit<CardProps, 'title'> {
+    src: string;
+    title?: React.ReactNode;
+    subtitle?: React.ReactNode;
+    aspectRatio?: VideoAspectRatio;
+    playing?: boolean;
+    controls?: boolean;
+    light?: boolean | string;
+    volume?: number;
+    muted?: boolean;
+    loop?: boolean;
+    mediaClassName?: string;
+    contentClassName?: string;
+    playerProps?: any;
+}
+declare const VideoCard: React.ForwardRefExoticComponent<VideoCardProps & React.RefAttributes<HTMLDivElement>>;
+
 type SectionHeadingLevel = 'h2' | 'h3';
 interface SectionHeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
     level?: SectionHeadingLevel;
@@ -589,4 +609,4 @@ declare const SectionHeading: React.ForwardRefExoticComponent<SectionHeadingProp
 
 declare const version = "2.0.0";
 
-export { Accordion, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, Alert, AlertDialog, type AlertDialogProps, type AlertProps, type AlertVariant, type AspectRatio, type AspectRatioPreset, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type BadgeVariant, BrandIcon, type BrandIconProps, type BrandIconSize, type BrandIconVariant, Breadcrumb, BreadcrumbItem, type BreadcrumbItemProps, BreadcrumbLink, type BreadcrumbLinkProps, type BreadcrumbProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, type CardBodyProps, type CardFooterProps, type CardHeaderProps, type CardMediaProps, type CardProps, type CardVariant, ChatHistory, type ChatHistoryItem, type ChatHistoryProps, Checkbox, type CheckboxProps, Col, type ColOffset, type ColOrder, type ColProps, type ColSpan, ColorSwatch, type ColorSwatchProps, ConfirmDialog, type ConfirmDialogProps, Container, type ContainerProps, type ContainerSize, Divider, type DividerProps, Drawer, type DrawerPosition, type DrawerProps, HelperText, type HelperTextProps, ImageCard, type ImageCardProps, Input, type InputAddonProps, type InputElementProps, InputGroup, type InputGroupProps, InputLeftAddon, InputLeftElement, type InputProps, InputRightAddon, InputRightElement, InputWrapper, type InputWrapperProps, Label, type LabelProps, List, ListItem, type ListItemProps, ListItemText, type ListItemTextProps, type ListProps, ListSubheader, type ListSubheaderProps, MarkdownContent, type MarkdownContentProps, Menu, MenuContent, type MenuContentProps, MenuItem, type MenuItemProps, MenuLabel, type MenuProps, MenuSeparator, MenuTrigger, type MenuTriggerProps, Message, type MessageProps, type MessageVariant, Modal, type ModalProps, Navbar, NavbarBrand, type NavbarBrandProps, NavbarContent, type NavbarContentProps, NavbarDivider, NavbarItem, type NavbarItemProps, NavbarLink, type NavbarLinkProps, type NavbarProps, Pagination, type PaginationProps, Popover, type PopoverAlign, type PopoverPosition, type PopoverProps, Progress, type ProgressProps, PromptDialog, type PromptDialogProps, Radio, type RadioProps, Row, type RowAlign, type RowGutter, type RowJustify, type RowProps, SectionHeading, type SectionHeadingLevel, type SectionHeadingProps, Select, type SelectOption, type SelectProps, Skeleton, type SkeletonProps, Slider, type SliderProps, Spinner, type SpinnerProps, Stack, type StackDirection, type StackGap, type StackProps, type Step, type StepStatus, Stepper, type StepperProps, StreamingCursor, type StreamingCursorProps, Switch, type SwitchProps, Tab, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Table, TableBody, type TableBodyProps, TableCaption, type TableCaptionProps, TableCell, type TableCellProps, TableFooter, type TableFooterProps, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, type TableProps, TableRow, type TableRowProps, Tabs, type TabsProps, Textarea, type TextareaProps, type ToastData, type ToastPosition, ToastProvider, type ToastProviderProps, type ToastVariant, Tooltip, type TooltipProps, useToast, version };
+export { Accordion, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, Alert, AlertDialog, type AlertDialogProps, type AlertProps, type AlertVariant, type AspectRatio, type AspectRatioPreset, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type BadgeVariant, BrandIcon, type BrandIconProps, type BrandIconSize, type BrandIconVariant, Breadcrumb, BreadcrumbItem, type BreadcrumbItemProps, BreadcrumbLink, type BreadcrumbLinkProps, type BreadcrumbProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, type CardBodyProps, type CardFooterProps, type CardHeaderProps, type CardMediaProps, type CardProps, type CardVariant, ChatHistory, type ChatHistoryItem, type ChatHistoryProps, Checkbox, type CheckboxProps, Col, type ColOffset, type ColOrder, type ColProps, type ColSpan, ColorSwatch, type ColorSwatchProps, ConfirmDialog, type ConfirmDialogProps, Container, type ContainerProps, type ContainerSize, Divider, type DividerProps, Drawer, type DrawerPosition, type DrawerProps, HelperText, type HelperTextProps, ImageCard, type ImageCardProps, Input, type InputAddonProps, type InputElementProps, InputGroup, type InputGroupProps, InputLeftAddon, InputLeftElement, type InputProps, InputRightAddon, InputRightElement, InputWrapper, type InputWrapperProps, Label, type LabelProps, List, ListItem, type ListItemProps, ListItemText, type ListItemTextProps, type ListProps, ListSubheader, type ListSubheaderProps, MarkdownContent, type MarkdownContentProps, Menu, MenuContent, type MenuContentProps, MenuItem, type MenuItemProps, MenuLabel, type MenuProps, MenuSeparator, MenuTrigger, type MenuTriggerProps, Message, type MessageProps, type MessageVariant, Modal, type ModalProps, Navbar, NavbarBrand, type NavbarBrandProps, NavbarContent, type NavbarContentProps, NavbarDivider, NavbarItem, type NavbarItemProps, NavbarLink, type NavbarLinkProps, type NavbarProps, Pagination, type PaginationProps, Popover, type PopoverAlign, type PopoverPosition, type PopoverProps, Progress, type ProgressProps, PromptDialog, type PromptDialogProps, Radio, type RadioProps, Row, type RowAlign, type RowGutter, type RowJustify, type RowProps, SectionHeading, type SectionHeadingLevel, type SectionHeadingProps, Select, type SelectOption, type SelectProps, Skeleton, type SkeletonProps, Slider, type SliderProps, Spinner, type SpinnerProps, Stack, type StackDirection, type StackGap, type StackProps, type Step, type StepStatus, Stepper, type StepperProps, StreamingCursor, type StreamingCursorProps, Switch, type SwitchProps, Tab, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Table, TableBody, type TableBodyProps, TableCaption, type TableCaptionProps, TableCell, type TableCellProps, TableFooter, type TableFooterProps, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, type TableProps, TableRow, type TableRowProps, Tabs, type TabsProps, Textarea, type TextareaProps, type ToastData, type ToastPosition, ToastProvider, type ToastProviderProps, type ToastVariant, Tooltip, type TooltipProps, type VideoAspectRatio, type VideoAspectRatioPreset, VideoCard, type VideoCardProps, useToast, version };

package/dist/index.js

@@ -111,6 +111,7 @@ __export(index_exports, {
   Textarea: () => Textarea,
   ToastProvider: () => ToastProvider,
   Tooltip: () => Tooltip,
+  VideoCard: () => VideoCard,
   useToast: () => useToast,
   version: () => version
 });
@@ -196,6 +197,7 @@ Input.displayName = "Input";
 
 // src/components/Card.tsx
 var import_react3 = __toESM(require("react"));
+var import_react_player = __toESM(require("react-player"));
 var import_lucide_react = require("lucide-react");
 var VARIANT_STYLES = {
   default: "bg-charcoal shadow-sm border border-gold/30",
@@ -229,7 +231,13 @@ var CardBase = import_react3.default.forwardRef(
         ...props
       },
       children,
-      selected && /* @__PURE__ */ import_react3.default.createElement("div", { className: "absolute top-3 right-3 flex items-center justify-center h-6 w-6 rounded-full bg-gold text-obsidian" }, /* @__PURE__ */ import_react3.default.createElement(import_lucide_react.Check, { className: "h-4 w-4" }))
+      selected && /* @__PURE__ */ import_react3.default.createElement(
+        "div",
+        {
+          className: "absolute top-3 right-3 flex items-center justify-center h-6 w-6 rounded-full bg-gold text-obsidian"
+        },
+        /* @__PURE__ */ import_react3.default.createElement(import_lucide_react.Check, { className: "h-4 w-4" })
+      )
     );
   }
 );
@@ -279,7 +287,16 @@ var CardFooter = import_react3.default.forwardRef(
 );
 CardFooter.displayName = "CardFooter";
 var CardMedia = import_react3.default.forwardRef(
-  ({ src, alt = "", aspect = "video", position = "top", className, children, ...props }, ref) => {
+  ({
+    src,
+    alt = "",
+    aspect = "video",
+    position = "top",
+    isVideo = false,
+    className,
+    children,
+    ...props
+  }, ref) => {
     const aspectClass = {
       video: "aspect-video",
       square: "aspect-square",
@@ -290,7 +307,7 @@ var CardMedia = import_react3.default.forwardRef(
       {
         ref,
         className: cx(
-          "overflow-hidden",
+          "overflow-hidden relative",
           aspectClass,
           position === "top" && "border-b border-ash",
           position === "bottom" && "border-t border-ash",
@@ -298,7 +315,16 @@ var CardMedia = import_react3.default.forwardRef(
         ),
         ...props
       },
-      src ? /* @__PURE__ */ import_react3.default.createElement("img", { src, alt, className: "w-full h-full object-cover" }) : children
+      src ? isVideo ? /* @__PURE__ */ import_react3.default.createElement(
+        import_react_player.default,
+        {
+          src,
+          width: "100%",
+          height: "100%",
+          className: "absolute top-0 left-0",
+          controls: true
+        }
+      ) : /* @__PURE__ */ import_react3.default.createElement("img", { src, alt, className: "w-full h-full object-cover" }) : children
     );
   }
 );
@@ -3412,21 +3438,91 @@ var ImageCard = import_react45.default.forwardRef(
         },
         overlay
       )
-    ), (title || subtitle || children) && /* @__PURE__ */ import_react45.default.createElement("div", { className: cx("px-4 pt-4", contentClassName) }, title && /* @__PURE__ */ import_react45.default.createElement("h4", { className: "text-lg font-semibold leading-tight" }, title), subtitle && /* @__PURE__ */ import_react45.default.createElement("p", { className: "text-sm text-silver leading-normal" }, subtitle), children));
+    ), (title || subtitle || children) && /* @__PURE__ */ import_react45.default.createElement("div", { className: cx("px-4 py-4", contentClassName) }, title && /* @__PURE__ */ import_react45.default.createElement("h4", { className: "text-lg font-semibold leading-tight" }, title), subtitle && /* @__PURE__ */ import_react45.default.createElement("p", { className: "text-sm text-silver leading-normal" }, subtitle), children));
   }
 );
 ImageCard.displayName = "ImageCard";
 
-// src/components/SectionHeading.tsx
+// src/components/VideoCard.tsx
 var import_react46 = __toESM(require("react"));
+var import_react_player2 = __toESM(require("react-player"));
+var ASPECT_RATIO_PRESETS2 = {
+  video: "16 / 9",
+  cinema: "21 / 9",
+  square: "1 / 1"
+};
+function resolveAspectRatio2(ratio) {
+  if (ratio in ASPECT_RATIO_PRESETS2) {
+    return ASPECT_RATIO_PRESETS2[ratio];
+  }
+  return ratio.replace("/", " / ");
+}
+var VideoCard = import_react46.default.forwardRef(
+  ({
+    src,
+    title,
+    subtitle,
+    aspectRatio = "video",
+    playing = false,
+    controls = true,
+    light = false,
+    volume,
+    muted = false,
+    loop = false,
+    mediaClassName,
+    contentClassName,
+    className,
+    children,
+    playerProps,
+    ...props
+  }, ref) => {
+    const hasAspectRatio = aspectRatio !== void 0;
+    return /* @__PURE__ */ import_react46.default.createElement(Card, { ref, className: cx("p-0 overflow-hidden group w-full", className), ...props }, /* @__PURE__ */ import_react46.default.createElement(
+      "div",
+      {
+        className: cx(
+          "relative bg-black overflow-hidden",
+          mediaClassName
+        ),
+        style: { aspectRatio: resolveAspectRatio2(aspectRatio) }
+      },
+      /* @__PURE__ */ import_react46.default.createElement(
+        import_react_player2.default,
+        {
+          src,
+          playing,
+          controls,
+          light,
+          volume,
+          muted,
+          loop,
+          width: "100%",
+          height: "100%",
+          className: "absolute top-0 left-0",
+          ...playerProps
+        }
+      )
+    ), (title || subtitle || children) && /* @__PURE__ */ import_react46.default.createElement("div", { className: cx("px-4 py-4", contentClassName) }, title && /* @__PURE__ */ import_react46.default.createElement("h4", { className: "text-lg font-semibold leading-tight" }, title), subtitle && /* @__PURE__ */ import_react46.default.createElement(
+      "p",
+      {
+        className: "text-sm text-silver leading-normal mt-1"
+      },
+      subtitle
+    ), children));
+  }
+);
+VideoCard.displayName = "VideoCard";
+
+// src/components/SectionHeading.tsx
+var import_react47 = __toESM(require("react"));
 var levelStyles = {
   h2: "text-2xl mb-4",
   h3: "text-xl mb-3"
 };
-var SectionHeading = import_react46.default.forwardRef(
+var SectionHeading = import_react47.default.forwardRef(
   ({ level = "h2", children, className, ...rest }, ref) => {
     const Component = level;
-    return /* @__PURE__ */ import_react46.default.createElement(
+    return /* @__PURE__ */ import_react47.default.createElement(
       Component,
       {
         ref,
@@ -3528,6 +3624,7 @@ var version = "2.0.0";
   Textarea,
   ToastProvider,
   Tooltip,
+  VideoCard,
   useToast,
   version
 });