@refraction-ui/react 0.19.1 → 0.19.2

package/dist/chunk-H54FLNAF.js

@@ -0,0 +1,132 @@
+import {
+  cn,
+  cva
+} from "./chunk-ZF3OHCGV.js";
+
+// ../react-video-tile/dist/index.js
+import * as React from "react";
+
+// ../video-tile/dist/index.js
+function createVideoTile(props = {}) {
+  const { speaking = false, pinned = false } = props;
+  return {
+    dataAttributes: {
+      "data-speaking": speaking ? "true" : "false",
+      "data-pinned": pinned ? "true" : "false"
+    },
+    ariaProps: {
+      role: "group"
+    }
+  };
+}
+function getInitials(name) {
+  const words = name.trim().split(/\s+/).filter(Boolean);
+  return words.slice(0, 2).map((w) => w[0].toUpperCase()).join("");
+}
+var videoTileVariants = cva({
+  base: [
+    "relative aspect-video overflow-hidden rounded-lg bg-muted",
+    "transition-shadow duration-200"
+  ].join(" "),
+  variants: {
+    speaking: {
+      "true": "ring-2 ring-emerald-500 dark:ring-emerald-400 ring-offset-2 ring-offset-background",
+      "false": ""
+    },
+    pinned: {
+      "true": "ring-2 ring-primary ring-offset-2 ring-offset-background",
+      "false": ""
+    }
+  },
+  defaultVariants: {
+    speaking: "false",
+    pinned: "false"
+  }
+});
+var videoTileNameChipClass = "absolute bottom-2 left-2 flex items-center gap-1.5 rounded-md bg-background/70 px-2 py-0.5 text-xs font-medium text-foreground backdrop-blur-sm";
+var videoTileMicIconClass = "text-destructive";
+var videoTileAvatarFallbackClass = "absolute inset-0 flex items-center justify-center";
+var videoTileAvatarCircleClass = "flex size-16 items-center justify-center rounded-full bg-card text-foreground text-xl font-semibold select-none";
+var videoTileReactionBadgeClass = "absolute right-2 top-2 flex items-center justify-center rounded-full bg-background/70 px-1.5 py-0.5 text-sm backdrop-blur-sm";
+
+// ../react-video-tile/dist/index.js
+import { jsxs, jsx } from "react/jsx-runtime";
+var VideoTile = React.forwardRef(
+  function VideoTile2({
+    name,
+    micState = "on",
+    speaking = false,
+    pinned = false,
+    avatarUrl,
+    mediaSlot,
+    reaction,
+    className,
+    ...props
+  }, ref) {
+    const api = createVideoTile({ speaking, pinned });
+    const initials = getInitials(name);
+    const isMuted = micState === "muted";
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          videoTileVariants({
+            speaking: speaking ? "true" : "false",
+            pinned: pinned ? "true" : "false"
+          }),
+          className
+        ),
+        "aria-label": name,
+        ...api.ariaProps,
+        ...api.dataAttributes,
+        ...props,
+        children: [
+          mediaSlot != null ? /* @__PURE__ */ jsx("div", { className: "absolute inset-0 h-full w-full object-cover", children: mediaSlot }) : (
+            /* Avatar fallback */
+            /* @__PURE__ */ jsx("div", { className: videoTileAvatarFallbackClass, children: avatarUrl ? /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: avatarUrl,
+                alt: name,
+                className: videoTileAvatarCircleClass
+              }
+            ) : /* @__PURE__ */ jsx("div", { className: videoTileAvatarCircleClass, "aria-hidden": "true", children: initials }) })
+          ),
+          reaction != null && /* @__PURE__ */ jsx("div", { className: videoTileReactionBadgeClass, "aria-hidden": "true", children: reaction }),
+          /* @__PURE__ */ jsxs("div", { className: videoTileNameChipClass, children: [
+            /* @__PURE__ */ jsx("span", { children: `${name}${isMuted ? "" : ""}` }),
+            isMuted && /* @__PURE__ */ jsx("span", { className: videoTileMicIconClass, "aria-label": "Microphone muted", children: /* @__PURE__ */ jsxs(
+              "svg",
+              {
+                xmlns: "http://www.w3.org/2000/svg",
+                width: "12",
+                height: "12",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                "aria-hidden": "true",
+                children: [
+                  /* @__PURE__ */ jsx("line", { x1: "2", y1: "2", x2: "22", y2: "22" }),
+                  /* @__PURE__ */ jsx("path", { d: "M18.89 13.23A7.12 7.12 0 0 0 19 12v-2" }),
+                  /* @__PURE__ */ jsx("path", { d: "M5 10v2a7 7 0 0 0 12 5" }),
+                  /* @__PURE__ */ jsx("path", { d: "M15 9.34V5a3 3 0 0 0-5.68-1.33" }),
+                  /* @__PURE__ */ jsx("path", { d: "M9 9v3a3 3 0 0 0 5.12 2.12" }),
+                  /* @__PURE__ */ jsx("line", { x1: "12", y1: "19", x2: "12", y2: "22" })
+                ]
+              }
+            ) })
+          ] })
+        ]
+      }
+    );
+  }
+);
+
+export {
+  VideoTile
+};
+//# sourceMappingURL=chunk-H54FLNAF.js.map

package/dist/chunk-H54FLNAF.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../video-tile/src/video-tile.ts", "../../video-tile/src/video-tile.styles.ts", "../../react-video-tile/src/video-tile.tsx"],
+  "sourcesContent": ["/** Microphone state for a video participant. */\nexport type VideoTileMicState = 'on' | 'muted'\n\n/** Data describing a video meeting participant tile. */\nexport interface VideoTileData {\n  /** Unique participant identifier. */\n  id: string\n  /** Display name shown in the name chip. */\n  name: string\n  /** Current microphone state. Defaults to 'on'. */\n  micState?: VideoTileMicState\n  /** Whether the participant is currently speaking (active audio). */\n  speaking?: boolean\n  /** Whether the tile is pinned in the grid. */\n  pinned?: boolean\n}\n\nexport interface VideoTileHeadlessProps {\n  /** Whether the participant is actively speaking. */\n  speaking?: boolean\n  /** Whether the tile is pinned in the grid. */\n  pinned?: boolean\n}\n\nexport interface VideoTileAPI {\n  /** Data attributes for styling hooks — spread onto the tile container. */\n  dataAttributes: {\n    'data-speaking': string\n    'data-pinned': string\n  }\n  /** ARIA props — spread onto the tile container. */\n  ariaProps: {\n    role: 'group'\n  }\n}\n\n/**\n * Derive framework-agnostic data attributes and ARIA props for a VideoTile.\n *\n * Adapters spread `dataAttributes` and `ariaProps` onto the tile container so\n * CSS selectors and assistive technology can reflect the current participant\n * state without coupling to a specific framework.\n */\nexport function createVideoTile(props: VideoTileHeadlessProps = {}): VideoTileAPI {\n  const { speaking = false, pinned = false } = props\n\n  return {\n    dataAttributes: {\n      'data-speaking': speaking ? 'true' : 'false',\n      'data-pinned': pinned ? 'true' : 'false',\n    },\n    ariaProps: {\n      role: 'group',\n    },\n  }\n}\n\n/**\n * Derive up to two uppercase initials from a display name.\n *\n * Splits on whitespace and takes the first character of the first two words.\n * Single-word names produce a single initial.\n *\n * @example\n * getInitials('Maya Goldberg') // 'MG'\n * getInitials('Alice')         // 'A'\n */\nexport function getInitials(name: string): string {\n  const words = name.trim().split(/\\s+/).filter(Boolean)\n  return words\n    .slice(0, 2)\n    .map((w) => w[0].toUpperCase())\n    .join('')\n}\n", "import { cva } from '@refraction-ui/shared'\n\n/**\n * Root tile container — aspect-video, rounded corners, clipped media.\n *\n * `speaking` variant adds a visible ring to indicate active audio.\n * `pinned` variant adds a stronger ring to mark a pinned participant.\n *\n * cva boolean-like variants use string values ('true'/'false') per the\n * refraction-ui convention — callers must pass strings, not raw booleans.\n */\nexport const videoTileVariants = cva({\n  base: [\n    'relative aspect-video overflow-hidden rounded-lg bg-muted',\n    'transition-shadow duration-200',\n  ].join(' '),\n  variants: {\n    speaking: {\n      'true': 'ring-2 ring-emerald-500 dark:ring-emerald-400 ring-offset-2 ring-offset-background',\n      'false': '',\n    },\n    pinned: {\n      'true': 'ring-2 ring-primary ring-offset-2 ring-offset-background',\n      'false': '',\n    },\n  },\n  defaultVariants: {\n    speaking: 'false',\n    pinned: 'false',\n  },\n})\n\n/**\n * Name chip anchored to the bottom-left of the tile.\n * Semi-transparent bg keeps it legible over any media content.\n */\nexport const videoTileNameChipClass =\n  'absolute bottom-2 left-2 flex items-center gap-1.5 rounded-md bg-background/70 px-2 py-0.5 text-xs font-medium text-foreground backdrop-blur-sm'\n\n/**\n * Mic-muted icon container — sits inside the name chip at the trailing edge.\n */\nexport const videoTileMicIconClass = 'text-destructive'\n\n/**\n * Avatar fallback circle — centred in the tile when no media stream is available.\n */\nexport const videoTileAvatarFallbackClass =\n  'absolute inset-0 flex items-center justify-center'\n\n/** Inner circle with initials. */\nexport const videoTileAvatarCircleClass =\n  'flex size-16 items-center justify-center rounded-full bg-card text-foreground text-xl font-semibold select-none'\n\n/**\n * Reaction badge slot — anchored to the top-right corner.\n */\nexport const videoTileReactionBadgeClass =\n  'absolute right-2 top-2 flex items-center justify-center rounded-full bg-background/70 px-1.5 py-0.5 text-sm backdrop-blur-sm'\n", "import * as React from 'react'\nimport {\n  createVideoTile,\n  getInitials,\n  videoTileVariants,\n  videoTileNameChipClass,\n  videoTileMicIconClass,\n  videoTileAvatarFallbackClass,\n  videoTileAvatarCircleClass,\n  videoTileReactionBadgeClass,\n  type VideoTileMicState,\n  type VideoTileData,\n} from '@refraction-ui/video-tile'\nimport { cn } from '@refraction-ui/shared'\n\nexport type { VideoTileMicState, VideoTileData }\n\nexport interface VideoTileProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'content' | 'color'> {\n  /** Participant display name — shown in the name chip and used for initials. */\n  name: string\n  /** Current microphone state. Defaults to 'on'. */\n  micState?: VideoTileMicState\n  /** Whether the participant is actively speaking. Adds an emerald ring. */\n  speaking?: boolean\n  /** Whether the tile is pinned in the grid. Adds a primary ring. */\n  pinned?: boolean\n  /** URL of the participant's avatar image, used in the fallback circle. */\n  avatarUrl?: string\n  /**\n   * Media slot — pass a `<video>` element (or any ReactNode) to render as the\n   * tile's background media layer. When omitted, an avatar fallback is shown.\n   */\n  mediaSlot?: React.ReactNode\n  /** Optional emoji/reaction badge rendered at the top-right of the tile. */\n  reaction?: React.ReactNode\n}\n\n/**\n * VideoTile — a single participant tile for a video meeting grid.\n *\n * Renders a `role=\"group\"` container with an aspect-video aspect ratio.\n * If a `mediaSlot` is provided it fills the tile; otherwise an avatar fallback\n * with initials is centred on a muted background.\n *\n * Overlays:\n * - Name chip (bottom-left) with optional mic-muted indicator\n * - Speaking ring (emerald) when `speaking` is true\n * - Pinned ring (primary) when `pinned` is true\n * - Reaction badge (top-right) when `reaction` is provided\n *\n * Logic and styles come from the headless `@refraction-ui/video-tile` core.\n */\nexport const VideoTile = React.forwardRef<HTMLDivElement, VideoTileProps>(\n  function VideoTile(\n    {\n      name,\n      micState = 'on',\n      speaking = false,\n      pinned = false,\n      avatarUrl,\n      mediaSlot,\n      reaction,\n      className,\n      ...props\n    },\n    ref,\n  ) {\n    const api = createVideoTile({ speaking, pinned })\n    const initials = getInitials(name)\n    const isMuted = micState === 'muted'\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          videoTileVariants({\n            speaking: speaking ? 'true' : 'false',\n            pinned: pinned ? 'true' : 'false',\n          }),\n          className,\n        )}\n        aria-label={name}\n        {...api.ariaProps}\n        {...api.dataAttributes}\n        {...props}\n      >\n        {/* Media layer */}\n        {mediaSlot != null ? (\n          <div className=\"absolute inset-0 h-full w-full object-cover\">\n            {mediaSlot}\n          </div>\n        ) : (\n          /* Avatar fallback */\n          <div className={videoTileAvatarFallbackClass}>\n            {avatarUrl ? (\n              <img\n                src={avatarUrl}\n                alt={name}\n                className={videoTileAvatarCircleClass}\n              />\n            ) : (\n              <div className={videoTileAvatarCircleClass} aria-hidden=\"true\">\n                {initials}\n              </div>\n            )}\n          </div>\n        )}\n\n        {/* Reaction badge (top-right) */}\n        {reaction != null && (\n          <div className={videoTileReactionBadgeClass} aria-hidden=\"true\">\n            {reaction}\n          </div>\n        )}\n\n        {/* Name chip (bottom-left) */}\n        <div className={videoTileNameChipClass}>\n          <span>{`${name}${isMuted ? '' : ''}`}</span>\n          {isMuted && (\n            <span className={videoTileMicIconClass} aria-label=\"Microphone muted\">\n              {/* Inline SVG mic-off icon — no external icon dep */}\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                width=\"12\"\n                height=\"12\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                aria-hidden=\"true\"\n              >\n                <line x1=\"2\" y1=\"2\" x2=\"22\" y2=\"22\" />\n                <path d=\"M18.89 13.23A7.12 7.12 0 0 0 19 12v-2\" />\n                <path d=\"M5 10v2a7 7 0 0 0 12 5\" />\n                <path d=\"M15 9.34V5a3 3 0 0 0-5.68-1.33\" />\n                <path d=\"M9 9v3a3 3 0 0 0 5.12 2.12\" />\n                <line x1=\"12\" y1=\"19\" x2=\"12\" y2=\"22\" />\n              </svg>\n            </span>\n          )}\n        </div>\n      </div>\n    )\n  },\n)\n"],
+  "mappings": ";;;;;;;;;AA2CO,SAAS,gBAAgB,QAAgC,CAAA,GAAkB;AAChF,QAAM,EAAE,WAAW,OAAO,SAAS,MAAA,IAAU;AAE7C,SAAO;IACL,gBAAgB;MACd,iBAAiB,WAAW,SAAS;MACrC,eAAe,SAAS,SAAS;IAAA;IAEnC,WAAW;MACT,MAAM;IAAA;EACR;AAEJ;AAYO,SAAS,YAAY,MAAsB;AAChD,QAAM,QAAQ,KAAK,KAAA,EAAO,MAAM,KAAK,EAAE,OAAO,OAAO;AACrD,SAAO,MACJ,MAAM,GAAG,CAAC,EACV,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,YAAA,CAAa,EAC7B,KAAK,EAAE;AACZ;AC9DO,IAAM,oBAAoB,IAAI;EACnC,MAAM;IACJ;IACA;EAAA,EACA,KAAK,GAAG;EACV,UAAU;IACR,UAAU;MACR,QAAQ;MACR,SAAS;IAAA;IAEX,QAAQ;MACN,QAAQ;MACR,SAAS;IAAA;EACX;EAEF,iBAAiB;IACf,UAAU;IACV,QAAQ;EAAA;AAEZ,CAAC;AAMM,IAAM,yBACX;AAKK,IAAM,wBAAwB;AAK9B,IAAM,+BACX;AAGK,IAAM,6BACX;AAKK,IAAM,8BACX;;;;ACLK,IAAM,YAAkB;EAC7B,SAASA,WACP;IACE;IACA,WAAW;IACX,WAAW;IACX,SAAS;IACT;IACA;IACA;IACA;IACA,GAAG;EAAA,GAEL,KACA;AACA,UAAM,MAAM,gBAAgB,EAAE,UAAU,OAAA,CAAQ;AAChD,UAAM,WAAW,YAAY,IAAI;AACjC,UAAM,UAAU,aAAa;AAE7B,WACE;MAAC;MAAA;QACC;QACA,WAAW;UACT,kBAAkB;YAChB,UAAU,WAAW,SAAS;YAC9B,QAAQ,SAAS,SAAS;UAAA,CAC3B;UACD;QAAA;QAEF,cAAY;QACX,GAAG,IAAI;QACP,GAAG,IAAI;QACP,GAAG;QAGH,UAAA;UAAA,aAAa,OACZ,oBAAC,OAAA,EAAI,WAAU,+CACZ,UAAA,UAAA,CACH;;YAGA,oBAAC,OAAA,EAAI,WAAW,8BACb,UAAA,YACC;cAAC;cAAA;gBACC,KAAK;gBACL,KAAK;gBACL,WAAW;cAAA;YAAA,IACb,oBAEC,OAAA,EAAI,WAAW,4BAA4B,eAAY,QACrD,UAAA,SAAA,CACH,EAAA,CAEJ;;UAID,YAAY,QACX,oBAAC,OAAA,EAAI,WAAW,6BAA6B,eAAY,QACtD,UAAA,SAAA,CACH;UAIF,qBAAC,OAAA,EAAI,WAAW,wBACd,UAAA;YAAA,oBAAC,QAAA,EAAM,UAAA,GAAG,IAAI,GAAG,UAAU,KAAK,EAAE,GAAA,CAAG;YACpC,WACC,oBAAC,QAAA,EAAK,WAAW,uBAAuB,cAAW,oBAEjD,UAAA;cAAC;cAAA;gBACC,OAAM;gBACN,OAAM;gBACN,QAAO;gBACP,SAAQ;gBACR,MAAK;gBACL,QAAO;gBACP,aAAY;gBACZ,eAAc;gBACd,gBAAe;gBACf,eAAY;gBAEZ,UAAA;kBAAA,oBAAC,QAAA,EAAK,IAAG,KAAI,IAAG,KAAI,IAAG,MAAK,IAAG,KAAA,CAAK;kBACpC,oBAAC,QAAA,EAAK,GAAE,wCAAA,CAAwC;kBAChD,oBAAC,QAAA,EAAK,GAAE,yBAAA,CAAyB;kBACjC,oBAAC,QAAA,EAAK,GAAE,iCAAA,CAAiC;kBACzC,oBAAC,QAAA,EAAK,GAAE,6BAAA,CAA6B;kBACrC,oBAAC,QAAA,EAAK,IAAG,MAAK,IAAG,MAAK,IAAG,MAAK,IAAG,KAAA,CAAK;gBAAA;cAAA;YAAA,EACxC,CACF;UAAA,EAAA,CAEJ;QAAA;MAAA;IAAA;EAGN;AACF;",
+  "names": ["VideoTile"]
+}