@vite-mf-monorepo/ui 0.4.4 → 0.4.6

package/dist/Tabs/TabsTrigger.js

@@ -0,0 +1,124 @@
+import { jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { useEffect } from "react";
+import { useTabsContext } from "./TabsContext";
+import { useTabsListContext } from "./TabsListContext";
+function TabsTrigger({
+  value,
+  icon,
+  disabled,
+  className,
+  children,
+  ...rest
+}) {
+  const {
+    value: activeValue,
+    onValueChange,
+    variant,
+    prefix
+  } = useTabsContext();
+  const { registerTrigger, unregisterTrigger, getTriggers, isDisabled } = useTabsListContext();
+  const isActive = value === activeValue;
+  const getTabId = (val) => prefix ? `tab-${prefix}-${val}` : `tab-${val}`;
+  const getTabPanelId = (val) => prefix ? `tabpanel-${prefix}-${val}` : `tabpanel-${val}`;
+  useEffect(() => {
+    registerTrigger(value, disabled);
+    return () => {
+      unregisterTrigger(value);
+    };
+  }, [value, disabled, registerTrigger, unregisterTrigger]);
+  const handleClick = () => {
+    if (!disabled) {
+      onValueChange(value);
+    }
+  };
+  const findNextEnabledTab = (triggers, startIndex, direction) => {
+    const length = triggers.length;
+    let index = startIndex;
+    for (let i = 0; i < length; i++) {
+      index = (index + direction + length) % length;
+      if (!isDisabled(triggers[index])) {
+        return index;
+      }
+    }
+    return startIndex;
+  };
+  const handleKeyDown = (event) => {
+    if (disabled) return;
+    const triggers = getTriggers();
+    const currentIndex = triggers.indexOf(value);
+    let newIndex = currentIndex;
+    switch (event.key) {
+      case "ArrowLeft":
+        event.preventDefault();
+        newIndex = findNextEnabledTab(triggers, currentIndex, -1);
+        break;
+      case "ArrowRight":
+        event.preventDefault();
+        newIndex = findNextEnabledTab(triggers, currentIndex, 1);
+        break;
+      case "Home":
+        event.preventDefault();
+        newIndex = 0;
+        while (newIndex < triggers.length && isDisabled(triggers[newIndex])) {
+          newIndex++;
+        }
+        break;
+      case "End":
+        event.preventDefault();
+        newIndex = triggers.length - 1;
+        while (newIndex >= 0 && isDisabled(triggers[newIndex])) {
+          newIndex--;
+        }
+        break;
+      default:
+        return;
+    }
+    const newValue = triggers[newIndex];
+    if (newValue && newValue !== value) {
+      onValueChange(newValue);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      role: "tab",
+      "aria-selected": isActive ? "true" : "false",
+      "aria-controls": getTabPanelId(value),
+      id: getTabId(value),
+      tabIndex: isActive ? 0 : -1,
+      disabled,
+      className: clsx(
+        "ui:px-4 ui:py-2 ui:font-roboto ui:text-sm ui:font-medium",
+        "ui:flex ui:items-center ui:gap-2",
+        "ui:transition-colors ui:duration-200",
+        "focus-visible:ui:outline-none focus-visible:ui:ring-2 focus-visible:ui:ring-ring focus-visible:ui:ring-offset-2",
+        !disabled && "ui:cursor-pointer",
+        variant === "underline" && [
+          "ui:relative ui:border-b-2 ui:border-transparent ui:-mb-px",
+          isActive ? "ui:text-primary ui:border-primary" : "ui:text-foreground hover:ui:text-foreground",
+          disabled && "ui:text-muted-foreground/50 ui:cursor-not-allowed hover:ui:text-muted-foreground/50"
+        ],
+        variant === "pills" && [
+          "ui:rounded-md",
+          isActive ? "ui:bg-primary ui:shadow-sm" : "ui:text-foreground hover:ui:text-foreground",
+          disabled && "ui:text-muted-foreground/50 ui:cursor-not-allowed hover:ui:text-muted-foreground/50"
+        ],
+        className
+      ),
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      ...rest,
+      children: [
+        icon && icon,
+        children
+      ]
+    }
+  );
+}
+var TabsTrigger_default = TabsTrigger;
+export {
+  TabsTrigger_default as default
+};
+//# sourceMappingURL=TabsTrigger.js.map

package/dist/Tabs/TabsTrigger.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Tabs/TabsTrigger.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport { useEffect } from 'react'\n\nimport { useTabsContext } from './TabsContext'\nimport { useTabsListContext } from './TabsListContext'\n\nimport type { ButtonHTMLAttributes, KeyboardEvent, ReactNode } from 'react'\n\nexport interface TabsTriggerProps\n  extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Value that identifies this tab */\n  value: string\n  /** Optional icon component */\n  icon?: ReactNode\n}\n\nfunction TabsTrigger({\n  value,\n  icon,\n  disabled,\n  className,\n  children,\n  ...rest\n}: Readonly<TabsTriggerProps>) {\n  const {\n    value: activeValue,\n    onValueChange,\n    variant,\n    prefix,\n  } = useTabsContext()\n  const { registerTrigger, unregisterTrigger, getTriggers, isDisabled } =\n    useTabsListContext()\n\n  const isActive = value === activeValue\n\n  const getTabId = (val: string) =>\n    prefix ? `tab-${prefix}-${val}` : `tab-${val}`\n  const getTabPanelId = (val: string) =>\n    prefix ? `tabpanel-${prefix}-${val}` : `tabpanel-${val}`\n\n  useEffect(() => {\n    registerTrigger(value, disabled)\n    return () => {\n      unregisterTrigger(value)\n    }\n  }, [value, disabled, registerTrigger, unregisterTrigger])\n\n  const handleClick = () => {\n    if (!disabled) {\n      onValueChange(value)\n    }\n  }\n\n  const findNextEnabledTab = (\n    triggers: string[],\n    startIndex: number,\n    direction: 1 | -1\n  ): number => {\n    const length = triggers.length\n    let index = startIndex\n\n    for (let i = 0; i < length; i++) {\n      index = (index + direction + length) % length\n      if (!isDisabled(triggers[index])) {\n        return index\n      }\n    }\n    return startIndex\n  }\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n    if (disabled) return\n\n    const triggers = getTriggers()\n    const currentIndex = triggers.indexOf(value)\n    let newIndex = currentIndex\n\n    switch (event.key) {\n      case 'ArrowLeft':\n        event.preventDefault()\n        newIndex = findNextEnabledTab(triggers, currentIndex, -1)\n        break\n      case 'ArrowRight':\n        event.preventDefault()\n        newIndex = findNextEnabledTab(triggers, currentIndex, 1)\n        break\n      case 'Home':\n        event.preventDefault()\n        newIndex = 0\n        while (newIndex < triggers.length && isDisabled(triggers[newIndex])) {\n          newIndex++\n        }\n        break\n      case 'End':\n        event.preventDefault()\n        newIndex = triggers.length - 1\n        while (newIndex >= 0 && isDisabled(triggers[newIndex])) {\n          newIndex--\n        }\n        break\n      default:\n        return\n    }\n\n    const newValue = triggers[newIndex]\n    if (newValue && newValue !== value) {\n      onValueChange(newValue)\n    }\n  }\n\n  return (\n    <button\n      type=\"button\"\n      role=\"tab\"\n      aria-selected={isActive ? 'true' : 'false'}\n      aria-controls={getTabPanelId(value)}\n      id={getTabId(value)}\n      tabIndex={isActive ? 0 : -1}\n      disabled={disabled}\n      className={clsx(\n        'ui:px-4 ui:py-2 ui:font-roboto ui:text-sm ui:font-medium',\n        'ui:flex ui:items-center ui:gap-2',\n        'ui:transition-colors ui:duration-200',\n        'focus-visible:ui:outline-none focus-visible:ui:ring-2 focus-visible:ui:ring-ring focus-visible:ui:ring-offset-2',\n        !disabled && 'ui:cursor-pointer',\n        variant === 'underline' && [\n          'ui:relative ui:border-b-2 ui:border-transparent ui:-mb-px',\n          isActive\n            ? 'ui:text-primary ui:border-primary'\n            : 'ui:text-foreground hover:ui:text-foreground',\n          disabled &&\n            'ui:text-muted-foreground/50 ui:cursor-not-allowed hover:ui:text-muted-foreground/50',\n        ],\n        variant === 'pills' && [\n          'ui:rounded-md',\n          isActive\n            ? 'ui:bg-primary ui:shadow-sm'\n            : 'ui:text-foreground hover:ui:text-foreground',\n          disabled &&\n            'ui:text-muted-foreground/50 ui:cursor-not-allowed hover:ui:text-muted-foreground/50',\n        ],\n        className\n      )}\n      onClick={handleClick}\n      onKeyDown={handleKeyDown}\n      {...rest}\n    >\n      {icon && icon}\n      {children}\n    </button>\n  )\n}\n\nexport default TabsTrigger\n"],"mappings":"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","names":[]}

package/dist/Tabs/index.d.ts

@@ -0,0 +1,6 @@
+export { default as Tabs, TabsProps, TabsVariant } from './Tabs.js';
+export { TabsListProps } from './TabsList.js';
+export { TabsTriggerProps } from './TabsTrigger.js';
+export { TabsPanelProps } from './TabsPanel.js';
+import 'react/jsx-runtime';
+import 'react';

package/dist/Tabs/index.js

@@ -0,0 +1,5 @@
+import { default as default2 } from "./Tabs";
+export {
+  default2 as Tabs
+};
+//# sourceMappingURL=index.js.map

package/dist/Tabs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Tabs/index.ts"],"sourcesContent":["export { default as Tabs } from './Tabs'\nexport type { TabsProps, TabsVariant } from './Tabs'\nexport type { TabsListProps } from './TabsList'\nexport type { TabsTriggerProps } from './TabsTrigger'\nexport type { TabsPanelProps } from './TabsPanel'\n"],"mappings":"AAAA,SAAoB,WAAXA,gBAAuB;","names":["default"]}

package/dist/Talent/Talent.d.ts

@@ -0,0 +1,19 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { AvatarSize } from '../Avatar/Avatar.js';
+import { HTMLAttributes } from 'react';
+
+interface TalentProps extends HTMLAttributes<HTMLDivElement> {
+    /** Full name of the talent (actor, director, writer, etc.) */
+    name?: string;
+    /** Role or job title (e.g., "Director", "Screenplay", "Character Name") */
+    role?: string;
+    /** Optional profile image URL */
+    imageSrc?: string;
+    /** Layout variant - vertical for crew/cast cards, horizontal for lists */
+    variant?: 'vertical' | 'horizontal';
+    /** Avatar size */
+    size?: AvatarSize;
+}
+declare function Talent({ name, role, imageSrc, variant, size, className, ...rest }: Readonly<TalentProps>): react_jsx_runtime.JSX.Element;
+
+export { type TalentProps, Talent as default };

package/dist/Talent/Talent.js

@@ -0,0 +1,69 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { Avatar } from "../Avatar";
+import { Typography } from "../Typography";
+function Talent({
+  name,
+  role,
+  imageSrc,
+  variant = "vertical",
+  size = "lg",
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: clsx(
+        "ui:flex ui:items-center",
+        {
+          "ui:flex-col ui:text-center ui:gap-3": variant === "vertical",
+          "ui:flex-row ui:gap-4": variant === "horizontal"
+        },
+        className
+      ),
+      "data-testid": "talent",
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(
+          Avatar,
+          {
+            testId: "avatar",
+            src: imageSrc,
+            alt: name ?? "Unknown",
+            size
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: clsx({ "ui:flex ui:flex-col": variant === "horizontal" }),
+            children: [
+              /* @__PURE__ */ jsx(
+                Typography,
+                {
+                  variant: "body",
+                  className: "ui:font-semibold ui:text-foreground",
+                  children: name ?? "Unknown"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Typography,
+                {
+                  variant: "caption",
+                  className: "ui:text-muted-foreground ui:[.media-section:nth-of-type(odd)_&]:text-badge-foreground",
+                  children: role ?? "N/A"
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+var Talent_default = Talent;
+export {
+  Talent_default as default
+};
+//# sourceMappingURL=Talent.js.map

package/dist/Talent/Talent.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Talent/Talent.tsx"],"sourcesContent":["import clsx from 'clsx'\n\nimport { Avatar } from '../Avatar'\nimport { Typography } from '../Typography'\n\nimport type { AvatarSize } from '../Avatar'\nimport type { HTMLAttributes } from 'react'\n\nexport interface TalentProps extends HTMLAttributes<HTMLDivElement> {\n  /** Full name of the talent (actor, director, writer, etc.) */\n  name?: string\n  /** Role or job title (e.g., \"Director\", \"Screenplay\", \"Character Name\") */\n  role?: string\n  /** Optional profile image URL */\n  imageSrc?: string\n  /** Layout variant - vertical for crew/cast cards, horizontal for lists */\n  variant?: 'vertical' | 'horizontal'\n  /** Avatar size */\n  size?: AvatarSize\n}\n\nfunction Talent({\n  name,\n  role,\n  imageSrc,\n  variant = 'vertical',\n  size = 'lg',\n  className,\n  ...rest\n}: Readonly<TalentProps>) {\n  return (\n    <div\n      className={clsx(\n        'ui:flex ui:items-center',\n        {\n          'ui:flex-col ui:text-center ui:gap-3': variant === 'vertical',\n          'ui:flex-row ui:gap-4': variant === 'horizontal',\n        },\n        className\n      )}\n      data-testid=\"talent\"\n      {...rest}\n    >\n      <Avatar\n        testId=\"avatar\"\n        src={imageSrc}\n        alt={name ?? 'Unknown'}\n        size={size}\n      />\n      <div\n        className={clsx({ 'ui:flex ui:flex-col': variant === 'horizontal' })}\n      >\n        <Typography\n          variant=\"body\"\n          className=\"ui:font-semibold ui:text-foreground\"\n        >\n          {name ?? 'Unknown'}\n        </Typography>\n        <Typography\n          variant=\"caption\"\n          className=\"ui:text-muted-foreground ui:[.media-section:nth-of-type(odd)_&]:text-badge-foreground\"\n        >\n          {role ?? 'N/A'}\n        </Typography>\n      </div>\n    </div>\n  )\n}\n\nexport default Talent\n"],"mappings":"AA2CM,cAMA,YANA;AA3CN,OAAO,UAAU;AAEjB,SAAS,cAAc;AACvB,SAAS,kBAAkB;AAkB3B,SAAS,OAAO;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP;AAAA,EACA,GAAG;AACL,GAA0B;AACxB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,UACE,uCAAuC,YAAY;AAAA,UACnD,wBAAwB,YAAY;AAAA,QACtC;AAAA,QACA;AAAA,MACF;AAAA,MACA,eAAY;AAAA,MACX,GAAG;AAAA,MAEJ;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,QAAO;AAAA,YACP,KAAK;AAAA,YACL,KAAK,QAAQ;AAAA,YACb;AAAA;AAAA,QACF;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,KAAK,EAAE,uBAAuB,YAAY,aAAa,CAAC;AAAA,YAEnE;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACC,SAAQ;AAAA,kBACR,WAAU;AAAA,kBAET,kBAAQ;AAAA;AAAA,cACX;AAAA,cACA;AAAA,gBAAC;AAAA;AAAA,kBACC,SAAQ;AAAA,kBACR,WAAU;AAAA,kBAET,kBAAQ;AAAA;AAAA,cACX;AAAA;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,iBAAQ;","names":[]}

package/dist/Talent/index.d.ts

@@ -0,0 +1,4 @@
+export { default as Talent, TalentProps } from './Talent.js';
+import 'react/jsx-runtime';
+import '../Avatar/Avatar.js';
+import 'react';

package/dist/Talent/index.js

@@ -0,0 +1,5 @@
+import { default as default2 } from "./Talent";
+export {
+  default2 as Talent
+};
+//# sourceMappingURL=index.js.map

package/dist/Talent/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Talent/index.ts"],"sourcesContent":["export { default as Talent } from './Talent'\nexport type { TalentProps } from './Talent'\n"],"mappings":"AAAA,SAAoB,WAAXA,gBAAyB;","names":["default"]}

package/dist/TrailerCard/TrailerCard.d.ts

@@ -0,0 +1,15 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface TrailerCardProps {
+    /** YouTube video ID */
+    videoKey: string;
+    /** Trailer title/name */
+    title: string;
+    /** Video type (Trailer, Clip, Featurette, etc.) */
+    type?: string;
+    /** Additional className for the card */
+    className?: string;
+}
+declare function TrailerCard({ videoKey, title, type, className, }: Readonly<TrailerCardProps>): react_jsx_runtime.JSX.Element;
+
+export { type TrailerCardProps, TrailerCard as default };

package/dist/TrailerCard/TrailerCard.js

@@ -0,0 +1,86 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { useState } from "react";
+import { Button } from "../Button";
+import { Modal } from "../Modal";
+function TrailerCard({
+  videoKey,
+  title,
+  type = "Trailer",
+  className
+}) {
+  const [isPlaying, setIsPlaying] = useState(false);
+  const thumbnailUrl = `https://img.youtube.com/vi/${videoKey}/hqdefault.jpg`;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        className: clsx(
+          "ui:group ui:relative ui:flex ui:aspect-video ui:w-full ui:cursor-pointer ui:overflow-hidden ui:rounded-lg ui:bg-gray-200",
+          "ui:transition-transform ui:duration-200 hover:ui:scale-[1.02]",
+          className
+        ),
+        onClick: () => {
+          setIsPlaying(true);
+        },
+        tabIndex: 0,
+        "aria-label": `Play ${title}`,
+        children: [
+          /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: thumbnailUrl,
+              alt: title,
+              className: "ui:h-full ui:w-full ui:object-cover",
+              loading: "lazy"
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "ui:absolute ui:inset-0 ui:flex ui:items-center ui:justify-center ui:bg-black/30 ui:opacity-0 ui:transition-opacity ui:duration-200 group-hover:ui:opacity-100", children: /* @__PURE__ */ jsx("div", { className: "ui:flex ui:items-center ui:justify-center ui:h-16 ui:w-16 ui:rounded-full ui:bg-white/90", children: /* @__PURE__ */ jsx("span", { className: "ui:text-2xl ui:ml-1", children: "\u25B6" }) }) }),
+          type && /* @__PURE__ */ jsx("div", { className: "ui:absolute ui:bottom-2 ui:left-2 ui:rounded ui:bg-black/80 ui:px-2 ui:py-1 ui:text-xs ui:font-semibold ui:text-white", children: type })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Modal,
+      {
+        isOpen: isPlaying,
+        onClose: () => {
+          setIsPlaying(false);
+        },
+        "aria-label": `Play ${title}`,
+        children: /* @__PURE__ */ jsxs("div", { className: "ui:flex ui:h-full ui:w-full ui:items-center ui:justify-center ui:p-4", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              icon: "XMark",
+              size: "sm",
+              variant: "ghost",
+              iconPosition: "left",
+              onClick: () => {
+                setIsPlaying(false);
+              },
+              className: "ui:absolute ui:top-4 ui:right-4 ui:text-white hover:ui:bg-white/10 ui:z-10 ui:focus:border-none",
+              "aria-label": "Close video",
+              children: "Close video"
+            }
+          ),
+          isPlaying && /* @__PURE__ */ jsx(
+            "iframe",
+            {
+              className: "ui:w-full ui:max-w-4xl ui:aspect-video ui:rounded-lg",
+              src: `https://www.youtube.com/embed/${videoKey}`,
+              title,
+              allow: "accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
+              allowFullScreen: true
+            }
+          )
+        ] })
+      }
+    )
+  ] });
+}
+var TrailerCard_default = TrailerCard;
+export {
+  TrailerCard_default as default
+};
+//# sourceMappingURL=TrailerCard.js.map

package/dist/TrailerCard/TrailerCard.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/TrailerCard/TrailerCard.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport { useState } from 'react'\n\nimport { Button } from '../Button'\nimport { Modal } from '../Modal'\n\nexport interface TrailerCardProps {\n  /** YouTube video ID */\n  videoKey: string\n  /** Trailer title/name */\n  title: string\n  /** Video type (Trailer, Clip, Featurette, etc.) */\n  type?: string\n  /** Additional className for the card */\n  className?: string\n}\n\nfunction TrailerCard({\n  videoKey,\n  title,\n  type = 'Trailer',\n  className,\n}: Readonly<TrailerCardProps>) {\n  const [isPlaying, setIsPlaying] = useState(false)\n\n  const thumbnailUrl = `https://img.youtube.com/vi/${videoKey}/hqdefault.jpg`\n\n  return (\n    <>\n      {/* Thumbnail card with play button overlay */}\n      <button\n        className={clsx(\n          'ui:group ui:relative ui:flex ui:aspect-video ui:w-full ui:cursor-pointer ui:overflow-hidden ui:rounded-lg ui:bg-gray-200',\n          'ui:transition-transform ui:duration-200 hover:ui:scale-[1.02]',\n          className\n        )}\n        onClick={() => {\n          setIsPlaying(true)\n        }}\n        tabIndex={0}\n        aria-label={`Play ${title}`}\n      >\n        {/* Thumbnail image */}\n        <img\n          src={thumbnailUrl}\n          alt={title}\n          className=\"ui:h-full ui:w-full ui:object-cover\"\n          loading=\"lazy\"\n        />\n\n        {/* Play button overlay */}\n        <div className=\"ui:absolute ui:inset-0 ui:flex ui:items-center ui:justify-center ui:bg-black/30 ui:opacity-0 ui:transition-opacity ui:duration-200 group-hover:ui:opacity-100\">\n          <div className=\"ui:flex ui:items-center ui:justify-center ui:h-16 ui:w-16 ui:rounded-full ui:bg-white/90\">\n            <span className=\"ui:text-2xl ui:ml-1\">▶</span>\n          </div>\n        </div>\n\n        {/* Type badge */}\n        {type && (\n          <div className=\"ui:absolute ui:bottom-2 ui:left-2 ui:rounded ui:bg-black/80 ui:px-2 ui:py-1 ui:text-xs ui:font-semibold ui:text-white\">\n            {type}\n          </div>\n        )}\n      </button>\n\n      {/* Modal with YouTube embed */}\n      <Modal\n        isOpen={isPlaying}\n        onClose={() => {\n          setIsPlaying(false)\n        }}\n        aria-label={`Play ${title}`}\n      >\n        {/* Inner wrapper: flex centering — must NOT be on <dialog> itself to preserve display:none when closed */}\n        <div className=\"ui:flex ui:h-full ui:w-full ui:items-center ui:justify-center ui:p-4\">\n          {/* Close button */}\n          <Button\n            icon=\"XMark\"\n            size=\"sm\"\n            variant=\"ghost\"\n            iconPosition=\"left\"\n            onClick={() => {\n              setIsPlaying(false)\n            }}\n            className=\"ui:absolute ui:top-4 ui:right-4 ui:text-white hover:ui:bg-white/10 ui:z-10 ui:focus:border-none\"\n            aria-label=\"Close video\"\n          >\n            Close video\n          </Button>\n\n          {/* Responsive 16:9 iframe container */}\n          {isPlaying && (\n            <iframe\n              className=\"ui:w-full ui:max-w-4xl ui:aspect-video ui:rounded-lg\"\n              src={`https://www.youtube.com/embed/${videoKey}`}\n              title={title}\n              allow=\"accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\n              allowFullScreen\n            />\n          )}\n        </div>\n      </Modal>\n    </>\n  )\n}\n\nexport default TrailerCard\n"],"mappings":"AA4BI,mBAeI,KAbF,YAFF;AA5BJ,OAAO,UAAU;AACjB,SAAS,gBAAgB;AAEzB,SAAS,cAAc;AACvB,SAAS,aAAa;AAatB,SAAS,YAAY;AAAA,EACnB;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AACF,GAA+B;AAC7B,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAEhD,QAAM,eAAe,8BAA8B,QAAQ;AAE3D,SACE,iCAEE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QACA,SAAS,MAAM;AACb,uBAAa,IAAI;AAAA,QACnB;AAAA,QACA,UAAU;AAAA,QACV,cAAY,QAAQ,KAAK;AAAA,QAGzB;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,KAAK;AAAA,cACL,KAAK;AAAA,cACL,WAAU;AAAA,cACV,SAAQ;AAAA;AAAA,UACV;AAAA,UAGA,oBAAC,SAAI,WAAU,iKACb,8BAAC,SAAI,WAAU,4FACb,8BAAC,UAAK,WAAU,uBAAsB,oBAAC,GACzC,GACF;AAAA,UAGC,QACC,oBAAC,SAAI,WAAU,yHACZ,gBACH;AAAA;AAAA;AAAA,IAEJ;AAAA,IAGA;AAAA,MAAC;AAAA;AAAA,QACC,QAAQ;AAAA,QACR,SAAS,MAAM;AACb,uBAAa,KAAK;AAAA,QACpB;AAAA,QACA,cAAY,QAAQ,KAAK;AAAA,QAGzB,+BAAC,SAAI,WAAU,wEAEb;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,MAAK;AAAA,cACL,SAAQ;AAAA,cACR,cAAa;AAAA,cACb,SAAS,MAAM;AACb,6BAAa,KAAK;AAAA,cACpB;AAAA,cACA,WAAU;AAAA,cACV,cAAW;AAAA,cACZ;AAAA;AAAA,UAED;AAAA,UAGC,aACC;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACV,KAAK,iCAAiC,QAAQ;AAAA,cAC9C;AAAA,cACA,OAAM;AAAA,cACN,iBAAe;AAAA;AAAA,UACjB;AAAA,WAEJ;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;AAEA,IAAO,sBAAQ;","names":[]}

package/dist/TrailerCard/index.d.ts

@@ -0,0 +1,2 @@
+export { default as TrailerCard, TrailerCardProps } from './TrailerCard.js';
+import 'react/jsx-runtime';

package/dist/TrailerCard/index.js

@@ -0,0 +1,5 @@
+import { default as default2 } from "./TrailerCard";
+export {
+  default2 as TrailerCard
+};
+//# sourceMappingURL=index.js.map

package/dist/TrailerCard/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/TrailerCard/index.ts"],"sourcesContent":["export { default as TrailerCard } from './TrailerCard'\nexport type { TrailerCardProps } from './TrailerCard'\n"],"mappings":"AAAA,SAAoB,WAAXA,gBAA8B;","names":["default"]}

package/dist/Typography/Typography.d.ts

@@ -0,0 +1,17 @@
+import * as react from 'react';
+import { HTMLAttributes, ElementType, ReactNode } from 'react';
+
+type TypographyVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'body' | 'body-sm' | 'body-lg' | 'lead' | 'caption' | 'caption-xs' | 'label' | 'muted' | 'blockquote';
+interface TypographyProps extends HTMLAttributes<HTMLElement> {
+    /** Visual style variant */
+    variant: TypographyVariant;
+    /** Override semantic HTML tag */
+    as?: ElementType;
+    /** Additional CSS classes */
+    className?: string;
+    /** Content */
+    children: ReactNode;
+}
+declare function Typography({ variant, as, className, children, ...rest }: Readonly<TypographyProps>): react.ReactElement<any, string | react.JSXElementConstructor<any>>;
+
+export { type TypographyProps, type TypographyVariant, Typography as default };

package/dist/Typography/Typography.js

@@ -0,0 +1,55 @@
+import clsx from "clsx";
+import { createElement } from "react";
+const variantStyles = {
+  h1: "ui:font-roboto ui:text-xl ui:sm:text-2xl ui:md:text-3xl ui:lg:text-4xl ui:font-bold ui:leading-tight ui:text-foreground",
+  h2: "ui:font-roboto ui:text-lg ui:sm:text-xl ui:md:text-2xl ui:lg:text-3xl ui:font-bold ui:leading-tight ui:text-foreground",
+  h3: "ui:font-roboto ui:text-base ui:sm:text-lg ui:md:text-xl ui:lg:text-2xl ui:font-semibold ui:leading-snug ui:text-foreground",
+  h4: "ui:font-roboto ui:text-sm ui:sm:text-base ui:md:text-lg ui:lg:text-xl ui:font-semibold ui:leading-snug ui:text-foreground",
+  h5: "ui:font-roboto ui:text-sm ui:sm:text-base ui:md:text-lg ui:font-medium ui:leading-normal ui:text-foreground",
+  h6: "ui:font-roboto ui:text-xs ui:sm:text-sm ui:md:text-base ui:font-medium ui:leading-normal ui:text-foreground",
+  body: "ui:font-inter ui:text-xs ui:sm:text-sm ui:md:text-base ui:leading-relaxed ui:text-foreground",
+  "body-sm": "ui:font-inter ui:text-xs ui:sm:text-sm ui:leading-relaxed ui:text-foreground",
+  "body-lg": "ui:font-inter ui:text-sm ui:sm:text-base ui:md:text-lg ui:leading-relaxed ui:text-foreground",
+  lead: "ui:font-inter ui:text-sm ui:sm:text-base ui:md:text-lg ui:lg:text-xl ui:leading-relaxed ui:text-muted-foreground",
+  caption: "ui:font-inter ui:text-xs ui:sm:text-sm ui:text-muted-foreground",
+  "caption-xs": "ui:font-inter ui:text-xs ui:text-muted-foreground",
+  label: "ui:font-inter ui:text-xs ui:sm:text-sm ui:font-medium ui:text-foreground",
+  muted: "ui:font-inter ui:text-xs ui:sm:text-sm ui:text-muted-foreground",
+  blockquote: "ui:font-inter ui:text-xs ui:sm:text-sm ui:md:text-base ui:border-l-4 ui:border-border ui:pl-4 ui:italic ui:text-muted-foreground"
+};
+const variantToTag = {
+  h1: "h1",
+  h2: "h2",
+  h3: "h3",
+  h4: "h4",
+  h5: "h5",
+  h6: "h6",
+  body: "p",
+  "body-sm": "p",
+  "body-lg": "p",
+  lead: "p",
+  caption: "span",
+  "caption-xs": "span",
+  label: "label",
+  muted: "p",
+  blockquote: "blockquote"
+};
+function Typography({
+  variant,
+  as,
+  className,
+  children,
+  ...rest
+}) {
+  const Component = as ?? variantToTag[variant];
+  return createElement(
+    Component,
+    { className: clsx(variantStyles[variant], className), ...rest },
+    children
+  );
+}
+var Typography_default = Typography;
+export {
+  Typography_default as default
+};
+//# sourceMappingURL=Typography.js.map

package/dist/Typography/Typography.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Typography/Typography.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport { createElement } from 'react'\n\nimport type { ElementType, HTMLAttributes, ReactNode } from 'react'\n\nexport type TypographyVariant =\n  | 'h1'\n  | 'h2'\n  | 'h3'\n  | 'h4'\n  | 'h5'\n  | 'h6'\n  | 'body'\n  | 'body-sm'\n  | 'body-lg'\n  | 'lead'\n  | 'caption'\n  | 'caption-xs'\n  | 'label'\n  | 'muted'\n  | 'blockquote'\n\nexport interface TypographyProps extends HTMLAttributes<HTMLElement> {\n  /** Visual style variant */\n  variant: TypographyVariant\n  /** Override semantic HTML tag */\n  as?: ElementType\n  /** Additional CSS classes */\n  className?: string\n  /** Content */\n  children: ReactNode\n}\n\nconst variantStyles: Record<TypographyVariant, string> = {\n  h1: 'ui:font-roboto ui:text-xl ui:sm:text-2xl ui:md:text-3xl ui:lg:text-4xl ui:font-bold ui:leading-tight ui:text-foreground',\n  h2: 'ui:font-roboto ui:text-lg ui:sm:text-xl ui:md:text-2xl ui:lg:text-3xl ui:font-bold ui:leading-tight ui:text-foreground',\n  h3: 'ui:font-roboto ui:text-base ui:sm:text-lg ui:md:text-xl ui:lg:text-2xl ui:font-semibold ui:leading-snug ui:text-foreground',\n  h4: 'ui:font-roboto ui:text-sm ui:sm:text-base ui:md:text-lg ui:lg:text-xl ui:font-semibold ui:leading-snug ui:text-foreground',\n  h5: 'ui:font-roboto ui:text-sm ui:sm:text-base ui:md:text-lg ui:font-medium ui:leading-normal ui:text-foreground',\n  h6: 'ui:font-roboto ui:text-xs ui:sm:text-sm ui:md:text-base ui:font-medium ui:leading-normal ui:text-foreground',\n  body: 'ui:font-inter ui:text-xs ui:sm:text-sm ui:md:text-base ui:leading-relaxed ui:text-foreground',\n  'body-sm':\n    'ui:font-inter ui:text-xs ui:sm:text-sm ui:leading-relaxed ui:text-foreground',\n  'body-lg':\n    'ui:font-inter ui:text-sm ui:sm:text-base ui:md:text-lg ui:leading-relaxed ui:text-foreground',\n  lead: 'ui:font-inter ui:text-sm ui:sm:text-base ui:md:text-lg ui:lg:text-xl ui:leading-relaxed ui:text-muted-foreground',\n  caption: 'ui:font-inter ui:text-xs ui:sm:text-sm ui:text-muted-foreground',\n  'caption-xs': 'ui:font-inter ui:text-xs ui:text-muted-foreground',\n  label:\n    'ui:font-inter ui:text-xs ui:sm:text-sm ui:font-medium ui:text-foreground',\n  muted: 'ui:font-inter ui:text-xs ui:sm:text-sm ui:text-muted-foreground',\n  blockquote:\n    'ui:font-inter ui:text-xs ui:sm:text-sm ui:md:text-base ui:border-l-4 ui:border-border ui:pl-4 ui:italic ui:text-muted-foreground',\n}\n\nconst variantToTag: Record<TypographyVariant, ElementType> = {\n  h1: 'h1',\n  h2: 'h2',\n  h3: 'h3',\n  h4: 'h4',\n  h5: 'h5',\n  h6: 'h6',\n  body: 'p',\n  'body-sm': 'p',\n  'body-lg': 'p',\n  lead: 'p',\n  caption: 'span',\n  'caption-xs': 'span',\n  label: 'label',\n  muted: 'p',\n  blockquote: 'blockquote',\n}\n\nfunction Typography({\n  variant,\n  as,\n  className,\n  children,\n  ...rest\n}: Readonly<TypographyProps>) {\n  const Component = as ?? variantToTag[variant]\n\n  return createElement(\n    Component,\n    { className: clsx(variantStyles[variant], className), ...rest },\n    children\n  )\n}\n\nexport default Typography\n"],"mappings":"AAAA,OAAO,UAAU;AACjB,SAAS,qBAAqB;AAgC9B,MAAM,gBAAmD;AAAA,EACvD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,WACE;AAAA,EACF,WACE;AAAA,EACF,MAAM;AAAA,EACN,SAAS;AAAA,EACT,cAAc;AAAA,EACd,OACE;AAAA,EACF,OAAO;AAAA,EACP,YACE;AACJ;AAEA,MAAM,eAAuD;AAAA,EAC3D,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,WAAW;AAAA,EACX,WAAW;AAAA,EACX,MAAM;AAAA,EACN,SAAS;AAAA,EACT,cAAc;AAAA,EACd,OAAO;AAAA,EACP,OAAO;AAAA,EACP,YAAY;AACd;AAEA,SAAS,WAAW;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA8B;AAC5B,QAAM,YAAY,MAAM,aAAa,OAAO;AAE5C,SAAO;AAAA,IACL;AAAA,IACA,EAAE,WAAW,KAAK,cAAc,OAAO,GAAG,SAAS,GAAG,GAAG,KAAK;AAAA,IAC9D;AAAA,EACF;AACF;AAEA,IAAO,qBAAQ;","names":[]}

package/dist/Typography/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Typography, TypographyProps, TypographyVariant } from './Typography.js';
+import 'react';

package/dist/Typography/index.js

@@ -0,0 +1,5 @@
+import { default as default2 } from "./Typography";
+export {
+  default2 as Typography
+};
+//# sourceMappingURL=index.js.map

package/dist/Typography/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Typography/index.ts"],"sourcesContent":["export { default as Typography } from './Typography'\nexport type { TypographyProps, TypographyVariant } from './Typography'\n"],"mappings":"AAAA,SAAoB,WAAXA,gBAA6B;","names":["default"]}