@refraction-ui/react 0.19.1 → 0.20.0

package/dist/react-pre-call-lobby.js

@@ -0,0 +1,309 @@
+import {
+  cn,
+  cva
+} from "./chunk-ZF3OHCGV.js";
+
+// ../react-pre-call-lobby/dist/index.js
+import * as React from "react";
+
+// ../pre-call-lobby/dist/index.js
+function createPreCallLobby(props) {
+  const { cameraOn, micOn } = props;
+  return {
+    ariaProps: {
+      role: "group",
+      "aria-label": "Device setup"
+    },
+    dataAttributes: {
+      "data-camera": cameraOn ? "on" : "off",
+      "data-mic": micOn ? "on" : "off"
+    }
+  };
+}
+function micLevelToBars(level, barCount) {
+  if (barCount <= 0) return 0;
+  const clamped = Math.min(1, Math.max(0, level));
+  return Math.round(clamped * barCount);
+}
+var preCallLobbyVariants = cva({
+  base: [
+    "flex flex-col gap-6 rounded-2xl border border-border bg-card p-6 shadow-sm",
+    "w-full max-w-lg mx-auto"
+  ].join(" "),
+  variants: {},
+  defaultVariants: {}
+});
+var preCallCameraVariants = cva({
+  base: [
+    "relative flex items-center justify-center overflow-hidden rounded-xl",
+    "aspect-video w-full bg-muted"
+  ].join(" "),
+  variants: {
+    camera: {
+      on: "",
+      off: "bg-muted"
+    }
+  },
+  defaultVariants: {
+    camera: "on"
+  }
+});
+var preCallCameraPlaceholderClass = [
+  "flex flex-col items-center justify-center gap-2",
+  "text-muted-foreground select-none"
+].join(" ");
+var preCallDeviceRowClass = "flex flex-col gap-1";
+var preCallDeviceLabelClass = "text-xs font-medium text-muted-foreground";
+var preCallDeviceSelectClass = [
+  "flex h-9 w-full rounded-md border border-input bg-background px-3 py-1",
+  "text-sm text-foreground shadow-sm",
+  "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  "disabled:cursor-not-allowed disabled:opacity-50"
+].join(" ");
+var preCallMicMeterClass = "flex items-end gap-0.5 h-5";
+var preCallMicBarVariants = cva({
+  base: "w-1.5 rounded-sm transition-colors",
+  variants: {
+    lit: {
+      true: "bg-primary",
+      false: "bg-muted-foreground/30"
+    }
+  },
+  defaultVariants: {
+    lit: "false"
+  }
+});
+var preCallControlsRowClass = "flex items-center gap-3";
+var preCallToggleVariants = cva({
+  base: [
+    "inline-flex items-center justify-center rounded-full p-2.5",
+    "transition-colors focus-visible:outline-none focus-visible:ring-2",
+    "focus-visible:ring-ring focus-visible:ring-offset-2"
+  ].join(" "),
+  variants: {
+    active: {
+      true: "bg-primary text-primary-foreground hover:bg-primary/90",
+      false: "bg-destructive/10 text-destructive hover:bg-destructive/20"
+    }
+  },
+  defaultVariants: {
+    active: "false"
+  }
+});
+var preCallJoinButtonClass = [
+  "inline-flex w-full items-center justify-center rounded-lg px-4 py-2.5",
+  "bg-primary text-primary-foreground text-sm font-semibold",
+  "shadow transition-colors hover:bg-primary/90",
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+  "disabled:pointer-events-none disabled:opacity-50"
+].join(" ");
+
+// ../react-pre-call-lobby/dist/index.js
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+var MIC_BAR_COUNT = 8;
+var PreCallLobby = React.forwardRef(
+  function PreCallLobby2({
+    cameraOn,
+    micOn,
+    onToggleCamera,
+    onToggleMic,
+    micLevel = 0,
+    cameras = [],
+    microphones = [],
+    speakers = [],
+    selectedCamera,
+    selectedMicrophone,
+    selectedSpeaker,
+    onDeviceChange,
+    previewSlot,
+    joinLabel = "Join",
+    onJoin,
+    className,
+    ...props
+  }, ref) {
+    const api = createPreCallLobby({ cameraOn, micOn });
+    const litBars = micLevelToBars(micLevel, MIC_BAR_COUNT);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(preCallLobbyVariants(), className),
+        ...api.ariaProps,
+        ...api.dataAttributes,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: preCallCameraVariants({ camera: cameraOn ? "on" : "off" }), children: cameraOn && previewSlot ? previewSlot : /* @__PURE__ */ jsxs("div", { className: preCallCameraPlaceholderClass, "data-testid": "camera-off-placeholder", children: [
+            /* @__PURE__ */ jsxs(
+              "svg",
+              {
+                xmlns: "http://www.w3.org/2000/svg",
+                width: "40",
+                height: "40",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "1.5",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                "aria-hidden": "true",
+                children: [
+                  /* @__PURE__ */ jsx("path", { d: "M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" }),
+                  /* @__PURE__ */ jsx("circle", { cx: "9", cy: "7", r: "4" }),
+                  /* @__PURE__ */ jsx("line", { x1: "2", y1: "2", x2: "22", y2: "22" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "text-xs", children: "Camera is off" })
+          ] }) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "Mic" }),
+            /* @__PURE__ */ jsx("div", { className: preCallMicMeterClass, "aria-label": `Mic level: ${litBars} of ${MIC_BAR_COUNT}`, children: Array.from({ length: MIC_BAR_COUNT }, (_, i) => /* @__PURE__ */ jsx(
+              "div",
+              {
+                "data-testid": `mic-bar-${i}`,
+                "data-lit": i < litBars ? "true" : "false",
+                className: `${preCallMicBarVariants({ lit: i < litBars ? "true" : "false" })} ${/* Staggered heights for a visual meter effect */
+                i < 2 ? "h-2" : i < 4 ? "h-3" : i < 6 ? "h-4" : "h-5"}`
+              },
+              i
+            )) })
+          ] }),
+          cameras.length > 0 && /* @__PURE__ */ jsxs("div", { className: preCallDeviceRowClass, children: [
+            /* @__PURE__ */ jsx("label", { htmlFor: "pcl-camera-select", className: preCallDeviceLabelClass, children: "Camera" }),
+            /* @__PURE__ */ jsx(
+              "select",
+              {
+                id: "pcl-camera-select",
+                className: preCallDeviceSelectClass,
+                value: selectedCamera,
+                onChange: (e) => onDeviceChange?.("camera", e.target.value),
+                "data-testid": "camera-select",
+                children: cameras.map((d) => /* @__PURE__ */ jsx("option", { value: d.id, children: d.label }, d.id))
+              }
+            )
+          ] }),
+          microphones.length > 0 && /* @__PURE__ */ jsxs("div", { className: preCallDeviceRowClass, children: [
+            /* @__PURE__ */ jsx("label", { htmlFor: "pcl-mic-select", className: preCallDeviceLabelClass, children: "Microphone" }),
+            /* @__PURE__ */ jsx(
+              "select",
+              {
+                id: "pcl-mic-select",
+                className: preCallDeviceSelectClass,
+                value: selectedMicrophone,
+                onChange: (e) => onDeviceChange?.("microphone", e.target.value),
+                "data-testid": "microphone-select",
+                children: microphones.map((d) => /* @__PURE__ */ jsx("option", { value: d.id, children: d.label }, d.id))
+              }
+            )
+          ] }),
+          speakers.length > 0 && /* @__PURE__ */ jsxs("div", { className: preCallDeviceRowClass, children: [
+            /* @__PURE__ */ jsx("label", { htmlFor: "pcl-speaker-select", className: preCallDeviceLabelClass, children: "Speaker" }),
+            /* @__PURE__ */ jsx(
+              "select",
+              {
+                id: "pcl-speaker-select",
+                className: preCallDeviceSelectClass,
+                value: selectedSpeaker,
+                onChange: (e) => onDeviceChange?.("speaker", e.target.value),
+                "data-testid": "speaker-select",
+                children: speakers.map((d) => /* @__PURE__ */ jsx("option", { value: d.id, children: d.label }, d.id))
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: preCallControlsRowClass, children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "aria-label": cameraOn ? "Turn camera off" : "Turn camera on",
+                "aria-pressed": cameraOn,
+                className: preCallToggleVariants({ active: cameraOn ? "true" : "false" }),
+                onClick: onToggleCamera,
+                "data-testid": "camera-toggle",
+                children: /* @__PURE__ */ jsx(
+                  "svg",
+                  {
+                    xmlns: "http://www.w3.org/2000/svg",
+                    width: "18",
+                    height: "18",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "2",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    "aria-hidden": "true",
+                    children: cameraOn ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsx("path", { d: "M23 7l-7 5 7 5V7z" }),
+                      /* @__PURE__ */ jsx("rect", { x: "1", y: "5", width: "15", height: "14", rx: "2", ry: "2" })
+                    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsx("line", { x1: "2", y1: "2", x2: "22", y2: "22" }),
+                      /* @__PURE__ */ jsx("path", { d: "M10.66 6H14a2 2 0 0 1 2 2v2.34l1 1L23 7v10" }),
+                      /* @__PURE__ */ jsx("path", { d: "M16 16a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h2l10 10z" })
+                    ] })
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "aria-label": micOn ? "Mute microphone" : "Unmute microphone",
+                "aria-pressed": micOn,
+                className: preCallToggleVariants({ active: micOn ? "true" : "false" }),
+                onClick: onToggleMic,
+                "data-testid": "mic-toggle",
+                children: /* @__PURE__ */ jsx(
+                  "svg",
+                  {
+                    xmlns: "http://www.w3.org/2000/svg",
+                    width: "18",
+                    height: "18",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "2",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    "aria-hidden": "true",
+                    children: micOn ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsx("path", { d: "M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" }),
+                      /* @__PURE__ */ jsx("path", { d: "M19 10v2a7 7 0 0 1-14 0v-2" }),
+                      /* @__PURE__ */ jsx("line", { x1: "12", y1: "19", x2: "12", y2: "23" }),
+                      /* @__PURE__ */ jsx("line", { x1: "8", y1: "23", x2: "16", y2: "23" })
+                    ] }) : /* @__PURE__ */ jsxs(Fragment, { 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.34V4a3 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: "23" }),
+                      /* @__PURE__ */ jsx("line", { x1: "8", y1: "23", x2: "16", y2: "23" })
+                    ] })
+                  }
+                )
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: preCallJoinButtonClass,
+              onClick: onJoin,
+              "data-testid": "join-button",
+              children: joinLabel
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+export {
+  PreCallLobby,
+  createPreCallLobby,
+  micLevelToBars
+};
+//# sourceMappingURL=react-pre-call-lobby.js.map

package/dist/react-pre-call-lobby.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../pre-call-lobby/src/pre-call-lobby.ts", "../../pre-call-lobby/src/pre-call-lobby.styles.ts", "../../react-pre-call-lobby/src/pre-call-lobby.tsx"],
+  "sourcesContent": ["/** A single selectable media device (camera, microphone, or speaker). */\nexport interface MediaDeviceOption {\n  id: string\n  label: string\n}\n\n/** The kind of media device. */\nexport type DeviceKind = 'camera' | 'microphone' | 'speaker'\n\nexport interface PreCallLobbyProps {\n  /** Whether the camera is currently enabled. */\n  cameraOn: boolean\n  /** Whether the microphone is currently enabled. */\n  micOn: boolean\n}\n\nexport interface PreCallLobbyAPI {\n  /** ARIA attributes to spread on the group element. */\n  ariaProps: { role: 'group'; 'aria-label': string }\n  /** Data attributes for styling hooks. */\n  dataAttributes: { 'data-camera': string; 'data-mic': string }\n}\n\n/**\n * Build the framework-agnostic group props for a pre-call lobby / device-check panel.\n *\n * Returns `role=\"group\"` plus data attributes reflecting camera and mic state.\n * Adapters spread these onto their container and render the device pickers,\n * preview, and join button themselves.\n */\nexport function createPreCallLobby(props: PreCallLobbyProps): PreCallLobbyAPI {\n  const { cameraOn, micOn } = props\n\n  return {\n    ariaProps: {\n      role: 'group',\n      'aria-label': 'Device setup',\n    },\n    dataAttributes: {\n      'data-camera': cameraOn ? 'on' : 'off',\n      'data-mic': micOn ? 'on' : 'off',\n    },\n  }\n}\n\n/**\n * Convert a microphone level (0..1) to a count of lit bars.\n *\n * Pure function — no side effects, no JSX. Adapters use this to render\n * the mic level meter by iterating `0..barCount` and lighting bars up to\n * the returned value.\n *\n * @param level    Current mic level in the range [0, 1].\n * @param barCount Total number of bars in the meter.\n * @returns        Number of bars that should appear \"lit\" (0..barCount).\n */\nexport function micLevelToBars(level: number, barCount: number): number {\n  if (barCount <= 0) return 0\n  const clamped = Math.min(1, Math.max(0, level))\n  return Math.round(clamped * barCount)\n}\n", "import { cva } from '@refraction-ui/shared'\n\n/**\n * Outer lobby card — a centered panel that holds all preflight controls.\n */\nexport const preCallLobbyVariants = cva({\n  base: [\n    'flex flex-col gap-6 rounded-2xl border border-border bg-card p-6 shadow-sm',\n    'w-full max-w-lg mx-auto',\n  ].join(' '),\n  variants: {},\n  defaultVariants: {},\n})\n\n/**\n * Camera preview area. The `camera` variant switches between the live preview\n * slot and an avatar / placeholder shown when the camera is off.\n */\nexport const preCallCameraVariants = cva({\n  base: [\n    'relative flex items-center justify-center overflow-hidden rounded-xl',\n    'aspect-video w-full bg-muted',\n  ].join(' '),\n  variants: {\n    camera: {\n      on: '',\n      off: 'bg-muted',\n    },\n  },\n  defaultVariants: {\n    camera: 'on',\n  },\n})\n\n/** Placeholder shown inside the camera area when the camera is off. */\nexport const preCallCameraPlaceholderClass = [\n  'flex flex-col items-center justify-center gap-2',\n  'text-muted-foreground select-none',\n].join(' ')\n\n/** Row that holds the label and the <select> for a device picker. */\nexport const preCallDeviceRowClass = 'flex flex-col gap-1'\n\n/** Label text above a device picker. */\nexport const preCallDeviceLabelClass = 'text-xs font-medium text-muted-foreground'\n\n/** The <select> element used for device selection. */\nexport const preCallDeviceSelectClass = [\n  'flex h-9 w-full rounded-md border border-input bg-background px-3 py-1',\n  'text-sm text-foreground shadow-sm',\n  'focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',\n  'disabled:cursor-not-allowed disabled:opacity-50',\n].join(' ')\n\n/**\n * Mic level meter container. Renders a row of bars.\n */\nexport const preCallMicMeterClass = 'flex items-end gap-0.5 h-5'\n\n/**\n * An individual bar in the mic level meter.\n * The `lit` variant distinguishes active (lit) from inactive bars.\n */\nexport const preCallMicBarVariants = cva({\n  base: 'w-1.5 rounded-sm transition-colors',\n  variants: {\n    lit: {\n      true: 'bg-primary',\n      false: 'bg-muted-foreground/30',\n    },\n  },\n  defaultVariants: {\n    lit: 'false',\n  },\n})\n\n/** Row holding the camera-toggle and mic-toggle buttons. */\nexport const preCallControlsRowClass = 'flex items-center gap-3'\n\n/**\n * Toggle button for camera or microphone.\n * The `active` variant styles the enabled vs disabled states.\n */\nexport const preCallToggleVariants = cva({\n  base: [\n    'inline-flex items-center justify-center rounded-full p-2.5',\n    'transition-colors focus-visible:outline-none focus-visible:ring-2',\n    'focus-visible:ring-ring focus-visible:ring-offset-2',\n  ].join(' '),\n  variants: {\n    active: {\n      true: 'bg-primary text-primary-foreground hover:bg-primary/90',\n      false: 'bg-destructive/10 text-destructive hover:bg-destructive/20',\n    },\n  },\n  defaultVariants: {\n    active: 'false',\n  },\n})\n\n/** Primary \"Join\" button. */\nexport const preCallJoinButtonClass = [\n  'inline-flex w-full items-center justify-center rounded-lg px-4 py-2.5',\n  'bg-primary text-primary-foreground text-sm font-semibold',\n  'shadow transition-colors hover:bg-primary/90',\n  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n  'disabled:pointer-events-none disabled:opacity-50',\n].join(' ')\n", "import * as React from 'react'\nimport {\n  createPreCallLobby,\n  micLevelToBars,\n  preCallLobbyVariants,\n  preCallCameraVariants,\n  preCallCameraPlaceholderClass,\n  preCallDeviceRowClass,\n  preCallDeviceLabelClass,\n  preCallDeviceSelectClass,\n  preCallMicMeterClass,\n  preCallMicBarVariants,\n  preCallControlsRowClass,\n  preCallToggleVariants,\n  preCallJoinButtonClass,\n  type MediaDeviceOption,\n} from '@refraction-ui/pre-call-lobby'\nimport { cn } from '@refraction-ui/shared'\n\nexport type { MediaDeviceOption }\n\nconst MIC_BAR_COUNT = 8\n\nexport interface PreCallLobbyProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {\n  /** Whether the camera is on. */\n  cameraOn: boolean\n  /** Whether the microphone is on. */\n  micOn: boolean\n  /** Called when the user toggles the camera. */\n  onToggleCamera?: () => void\n  /** Called when the user toggles the microphone. */\n  onToggleMic?: () => void\n  /** Current microphone level (0..1). */\n  micLevel?: number\n  /** Available cameras. */\n  cameras?: MediaDeviceOption[]\n  /** Available microphones. */\n  microphones?: MediaDeviceOption[]\n  /** Available speakers. */\n  speakers?: MediaDeviceOption[]\n  /** Currently selected camera id. */\n  selectedCamera?: string\n  /** Currently selected microphone id. */\n  selectedMicrophone?: string\n  /** Currently selected speaker id. */\n  selectedSpeaker?: string\n  /** Called when the user changes a device. */\n  onDeviceChange?: (kind: 'camera' | 'microphone' | 'speaker', deviceId: string) => void\n  /** Slot rendered inside the camera preview area when the camera is on. */\n  previewSlot?: React.ReactNode\n  /** Label for the join button. */\n  joinLabel?: string\n  /** Called when the user clicks the join button. */\n  onJoin?: () => void\n}\n\n/**\n * PreCallLobby — device-check panel shown before joining a meeting.\n *\n * Renders a camera preview, mic level meter, device selectors for camera /\n * microphone / speaker, toggle buttons for cam and mic, and a primary join CTA.\n * Logic and styles come from the headless `@refraction-ui/pre-call-lobby` core.\n * All device controls are plain HTML elements — no external component deps.\n */\nexport const PreCallLobby = React.forwardRef<HTMLDivElement, PreCallLobbyProps>(\n  function PreCallLobby(\n    {\n      cameraOn,\n      micOn,\n      onToggleCamera,\n      onToggleMic,\n      micLevel = 0,\n      cameras = [],\n      microphones = [],\n      speakers = [],\n      selectedCamera,\n      selectedMicrophone,\n      selectedSpeaker,\n      onDeviceChange,\n      previewSlot,\n      joinLabel = 'Join',\n      onJoin,\n      className,\n      ...props\n    },\n    ref,\n  ) {\n    const api = createPreCallLobby({ cameraOn, micOn })\n    const litBars = micLevelToBars(micLevel, MIC_BAR_COUNT)\n\n    return (\n      <div\n        ref={ref}\n        className={cn(preCallLobbyVariants(), className)}\n        {...api.ariaProps}\n        {...api.dataAttributes}\n        {...props}\n      >\n        {/* Camera preview */}\n        <div className={preCallCameraVariants({ camera: cameraOn ? 'on' : 'off' })}>\n          {cameraOn && previewSlot ? (\n            previewSlot\n          ) : (\n            <div className={preCallCameraPlaceholderClass} data-testid=\"camera-off-placeholder\">\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                width=\"40\"\n                height=\"40\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                strokeWidth=\"1.5\"\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                aria-hidden=\"true\"\n              >\n                <path d=\"M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2\" />\n                <circle cx=\"9\" cy=\"7\" r=\"4\" />\n                <line x1=\"2\" y1=\"2\" x2=\"22\" y2=\"22\" />\n              </svg>\n              <span className=\"text-xs\">Camera is off</span>\n            </div>\n          )}\n        </div>\n\n        {/* Mic level meter */}\n        <div className=\"flex items-center gap-2\">\n          <span className=\"text-xs text-muted-foreground\">Mic</span>\n          <div className={preCallMicMeterClass} aria-label={`Mic level: ${litBars} of ${MIC_BAR_COUNT}`}>\n            {Array.from({ length: MIC_BAR_COUNT }, (_, i) => (\n              <div\n                key={i}\n                data-testid={`mic-bar-${i}`}\n                data-lit={i < litBars ? 'true' : 'false'}\n                className={`${preCallMicBarVariants({ lit: i < litBars ? 'true' : 'false' })} ${\n                  /* Staggered heights for a visual meter effect */\n                  i < 2 ? 'h-2' : i < 4 ? 'h-3' : i < 6 ? 'h-4' : 'h-5'\n                }`}\n              />\n            ))}\n          </div>\n        </div>\n\n        {/* Device selectors */}\n        {cameras.length > 0 && (\n          <div className={preCallDeviceRowClass}>\n            <label htmlFor=\"pcl-camera-select\" className={preCallDeviceLabelClass}>\n              Camera\n            </label>\n            <select\n              id=\"pcl-camera-select\"\n              className={preCallDeviceSelectClass}\n              value={selectedCamera}\n              onChange={(e) => onDeviceChange?.('camera', e.target.value)}\n              data-testid=\"camera-select\"\n            >\n              {cameras.map((d) => (\n                <option key={d.id} value={d.id}>\n                  {d.label}\n                </option>\n              ))}\n            </select>\n          </div>\n        )}\n\n        {microphones.length > 0 && (\n          <div className={preCallDeviceRowClass}>\n            <label htmlFor=\"pcl-mic-select\" className={preCallDeviceLabelClass}>\n              Microphone\n            </label>\n            <select\n              id=\"pcl-mic-select\"\n              className={preCallDeviceSelectClass}\n              value={selectedMicrophone}\n              onChange={(e) => onDeviceChange?.('microphone', e.target.value)}\n              data-testid=\"microphone-select\"\n            >\n              {microphones.map((d) => (\n                <option key={d.id} value={d.id}>\n                  {d.label}\n                </option>\n              ))}\n            </select>\n          </div>\n        )}\n\n        {speakers.length > 0 && (\n          <div className={preCallDeviceRowClass}>\n            <label htmlFor=\"pcl-speaker-select\" className={preCallDeviceLabelClass}>\n              Speaker\n            </label>\n            <select\n              id=\"pcl-speaker-select\"\n              className={preCallDeviceSelectClass}\n              value={selectedSpeaker}\n              onChange={(e) => onDeviceChange?.('speaker', e.target.value)}\n              data-testid=\"speaker-select\"\n            >\n              {speakers.map((d) => (\n                <option key={d.id} value={d.id}>\n                  {d.label}\n                </option>\n              ))}\n            </select>\n          </div>\n        )}\n\n        {/* Controls row (camera / mic toggles) */}\n        <div className={preCallControlsRowClass}>\n          <button\n            type=\"button\"\n            aria-label={cameraOn ? 'Turn camera off' : 'Turn camera on'}\n            aria-pressed={cameraOn}\n            className={preCallToggleVariants({ active: cameraOn ? 'true' : 'false' })}\n            onClick={onToggleCamera}\n            data-testid=\"camera-toggle\"\n          >\n            {/* Camera icon */}\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"18\"\n              height=\"18\"\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              {cameraOn ? (\n                <>\n                  <path d=\"M23 7l-7 5 7 5V7z\" />\n                  <rect x=\"1\" y=\"5\" width=\"15\" height=\"14\" rx=\"2\" ry=\"2\" />\n                </>\n              ) : (\n                <>\n                  <line x1=\"2\" y1=\"2\" x2=\"22\" y2=\"22\" />\n                  <path d=\"M10.66 6H14a2 2 0 0 1 2 2v2.34l1 1L23 7v10\" />\n                  <path d=\"M16 16a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h2l10 10z\" />\n                </>\n              )}\n            </svg>\n          </button>\n\n          <button\n            type=\"button\"\n            aria-label={micOn ? 'Mute microphone' : 'Unmute microphone'}\n            aria-pressed={micOn}\n            className={preCallToggleVariants({ active: micOn ? 'true' : 'false' })}\n            onClick={onToggleMic}\n            data-testid=\"mic-toggle\"\n          >\n            {/* Mic icon */}\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"18\"\n              height=\"18\"\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              {micOn ? (\n                <>\n                  <path d=\"M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z\" />\n                  <path d=\"M19 10v2a7 7 0 0 1-14 0v-2\" />\n                  <line x1=\"12\" y1=\"19\" x2=\"12\" y2=\"23\" />\n                  <line x1=\"8\" y1=\"23\" x2=\"16\" y2=\"23\" />\n                </>\n              ) : (\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.34V4a3 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=\"23\" />\n                  <line x1=\"8\" y1=\"23\" x2=\"16\" y2=\"23\" />\n                </>\n              )}\n            </svg>\n          </button>\n        </div>\n\n        {/* Join button */}\n        <button\n          type=\"button\"\n          className={preCallJoinButtonClass}\n          onClick={onJoin}\n          data-testid=\"join-button\"\n        >\n          {joinLabel}\n        </button>\n      </div>\n    )\n  },\n)\n"],
+  "mappings": "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",
+  "names": ["PreCallLobby"]
+}

package/dist/react-presence-indicator.js

@@ -0,0 +1,86 @@
+import {
+  cn,
+  cva
+} from "./chunk-ZF3OHCGV.js";
+
+// ../react-presence-indicator/dist/index.js
+import * as React from "react";
+
+// ../presence-indicator/dist/index.js
+var STATUS_COLORS = {
+  online: "green",
+  offline: "gray",
+  away: "yellow",
+  busy: "red",
+  dnd: "red"
+};
+var STATUS_LABELS = {
+  online: "Online",
+  offline: "Offline",
+  away: "Away",
+  busy: "Busy",
+  dnd: "Do Not Disturb"
+};
+function createPresence(props) {
+  const { status, showLabel: showLabelProp = false, label: labelOverride } = props;
+  const color = STATUS_COLORS[status];
+  const label = labelOverride ?? STATUS_LABELS[status];
+  const ariaProps = {
+    role: "status",
+    "aria-label": label
+  };
+  return {
+    ariaProps,
+    color,
+    label,
+    showLabel: showLabelProp,
+    status
+  };
+}
+var presenceDotVariants = cva({
+  base: "inline-block rounded-full",
+  variants: {
+    status: {
+      online: "bg-success",
+      offline: "bg-gray-400",
+      away: "bg-warning",
+      busy: "bg-destructive",
+      dnd: "bg-destructive"
+    },
+    size: {
+      sm: "h-2 w-2",
+      md: "h-2.5 w-2.5",
+      lg: "h-3 w-3"
+    }
+  },
+  defaultVariants: {
+    status: "offline",
+    size: "md"
+  }
+});
+var presenceContainerStyles = "inline-flex items-center gap-1.5";
+var presenceLabelStyles = "text-sm text-muted-foreground";
+
+// ../react-presence-indicator/dist/index.js
+var PresenceIndicator = React.forwardRef(
+  function PresenceIndicator2({ status, showLabel = false, label, size = "md", className }, ref) {
+    const api = createPresence({ status, showLabel, label });
+    return React.createElement(
+      "span",
+      { ref, ...api.ariaProps, className: cn(presenceContainerStyles, className) },
+      React.createElement("span", {
+        className: presenceDotVariants({ status, size })
+      }),
+      api.showLabel && React.createElement("span", { className: presenceLabelStyles }, api.label)
+    );
+  }
+);
+export {
+  PresenceIndicator,
+  STATUS_COLORS,
+  STATUS_LABELS,
+  presenceContainerStyles,
+  presenceDotVariants,
+  presenceLabelStyles
+};
+//# sourceMappingURL=react-presence-indicator.js.map

package/dist/react-presence-indicator.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../presence-indicator/src/presence-indicator.ts", "../../presence-indicator/src/presence-indicator.styles.ts", "../../react-presence-indicator/src/presence-indicator.tsx"],
+  "sourcesContent": ["export type PresenceStatus = 'online' | 'offline' | 'away' | 'busy' | 'dnd'\n\nexport interface PresenceProps {\n  /** The presence status to display */\n  status: PresenceStatus\n  /** Show a text label alongside the indicator */\n  showLabel?: boolean\n  /** Custom label override */\n  label?: string\n}\n\nexport interface PresenceAPI {\n  /** ARIA attributes for the indicator */\n  ariaProps: Record<string, string | number | boolean>\n  /** CSS color for the status dot */\n  color: string\n  /** Human-readable label for the status */\n  label: string\n  /** Whether to show the label text */\n  showLabel: boolean\n  /** The current status */\n  status: PresenceStatus\n}\n\nconst STATUS_COLORS: Record<PresenceStatus, string> = {\n  online: 'green',\n  offline: 'gray',\n  away: 'yellow',\n  busy: 'red',\n  dnd: 'red',\n}\n\nconst STATUS_LABELS: Record<PresenceStatus, string> = {\n  online: 'Online',\n  offline: 'Offline',\n  away: 'Away',\n  busy: 'Busy',\n  dnd: 'Do Not Disturb',\n}\n\nexport { STATUS_COLORS, STATUS_LABELS }\n\nexport function createPresence(props: PresenceProps): PresenceAPI {\n  const { status, showLabel: showLabelProp = false, label: labelOverride } = props\n\n  const color = STATUS_COLORS[status]\n  const label = labelOverride ?? STATUS_LABELS[status]\n\n  const ariaProps: Record<string, string | number | boolean> = {\n    role: 'status',\n    'aria-label': label,\n  }\n\n  return {\n    ariaProps,\n    color,\n    label,\n    showLabel: showLabelProp,\n    status,\n  }\n}\n", "import { cva } from '@refraction-ui/shared'\n\nexport const presenceDotVariants = cva({\n  base: 'inline-block rounded-full',\n  variants: {\n    status: {\n      online: 'bg-success',\n      offline: 'bg-gray-400',\n      away: 'bg-warning',\n      busy: 'bg-destructive',\n      dnd: 'bg-destructive',\n    },\n    size: {\n      sm: 'h-2 w-2',\n      md: 'h-2.5 w-2.5',\n      lg: 'h-3 w-3',\n    },\n  },\n  defaultVariants: {\n    status: 'offline',\n    size: 'md',\n  },\n})\n\nexport const presenceContainerStyles =\n  'inline-flex items-center gap-1.5'\n\nexport const presenceLabelStyles =\n  'text-sm text-muted-foreground'\n", "import * as React from 'react'\nimport {\n  createPresence,\n  presenceDotVariants,\n  presenceContainerStyles,\n  presenceLabelStyles,\n  type PresenceStatus,\n} from '@refraction-ui/presence-indicator'\nimport { cn } from '@refraction-ui/shared'\n\nexport interface PresenceIndicatorProps {\n  status: PresenceStatus\n  showLabel?: boolean\n  label?: string\n  size?: 'sm' | 'md' | 'lg'\n  className?: string\n}\n\nexport const PresenceIndicator = React.forwardRef<HTMLSpanElement, PresenceIndicatorProps>(\n  function PresenceIndicator({ status, showLabel = false, label, size = 'md', className }, ref) {\n  const api = createPresence({ status, showLabel, label })\n\n  return React.createElement(\n    'span',\n    { ref, ...api.ariaProps, className: cn(presenceContainerStyles, className) },\n    React.createElement('span', {\n      className: presenceDotVariants({ status, size }),\n    }),\n    api.showLabel &&\n      React.createElement('span', { className: presenceLabelStyles }, api.label),\n  )\n  },\n)\n"],
+  "mappings": ";;;;;;;;;AAwBA,IAAM,gBAAgD;EACpD,QAAQ;EACR,SAAS;EACT,MAAM;EACN,MAAM;EACN,KAAK;AACP;AAEA,IAAM,gBAAgD;EACpD,QAAQ;EACR,SAAS;EACT,MAAM;EACN,MAAM;EACN,KAAK;AACP;AAIO,SAAS,eAAe,OAAmC;AAChE,QAAM,EAAE,QAAQ,WAAW,gBAAgB,OAAO,OAAO,cAAA,IAAkB;AAE3E,QAAM,QAAQ,cAAc,MAAM;AAClC,QAAM,QAAQ,iBAAiB,cAAc,MAAM;AAEnD,QAAM,YAAuD;IAC3D,MAAM;IACN,cAAc;EAAA;AAGhB,SAAO;IACL;IACA;IACA;IACA,WAAW;IACX;EAAA;AAEJ;AC1DO,IAAM,sBAAsB,IAAI;EACrC,MAAM;EACN,UAAU;IACR,QAAQ;MACN,QAAQ;MACR,SAAS;MACT,MAAM;MACN,MAAM;MACN,KAAK;IAAA;IAEP,MAAM;MACJ,IAAI;MACJ,IAAI;MACJ,IAAI;IAAA;EACN;EAEF,iBAAiB;IACf,QAAQ;IACR,MAAM;EAAA;AAEV,CAAC;AAEM,IAAM,0BACX;AAEK,IAAM,sBACX;;;ACVK,IAAM,oBAA0B;EACrC,SAASA,mBAAkB,EAAE,QAAQ,YAAY,OAAO,OAAO,OAAO,MAAM,UAAA,GAAa,KAAK;AAC9F,UAAM,MAAM,eAAe,EAAE,QAAQ,WAAW,MAAA,CAAO;AAEvD,WAAa;MACX;MACA,EAAE,KAAK,GAAG,IAAI,WAAW,WAAW,GAAG,yBAAyB,SAAS,EAAA;MACnE,oBAAc,QAAQ;QAC1B,WAAW,oBAAoB,EAAE,QAAQ,KAAA,CAAM;MAAA,CAChD;MACD,IAAI,aACI,oBAAc,QAAQ,EAAE,WAAW,oBAAA,GAAuB,IAAI,KAAK;IAAA;EAE7E;AACF;",
+  "names": ["PresenceIndicator"]
+}

package/dist/react-pricing-card.js

@@ -0,0 +1,142 @@
+import {
+  cn,
+  cva
+} from "./chunk-ZF3OHCGV.js";
+
+// ../react-pricing-card/dist/index.js
+import * as React from "react";
+
+// ../pricing-card/dist/index.js
+function createPricingCard(options = {}) {
+  const { featured = false } = options;
+  const ariaProps = {
+    role: "group"
+  };
+  const dataAttributes = {
+    "data-featured": String(featured)
+  };
+  return { ariaProps, dataAttributes };
+}
+var pricingCardVariants = cva({
+  base: [
+    "relative flex flex-col rounded-2xl border border-border bg-card p-6",
+    "transition-shadow"
+  ].join(" "),
+  variants: {
+    featured: {
+      true: "ring-1 ring-primary",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    featured: "false"
+  }
+});
+var pricingCardBadgeClass = "mb-3 inline-flex items-center rounded-full bg-primary/10 px-2.5 py-0.5 text-xs font-medium text-primary";
+var pricingCardNameClass = "text-lg font-bold text-foreground";
+var pricingCardPriceClass = "text-3xl font-bold text-foreground";
+var pricingCardPeriodClass = "text-sm text-muted-foreground";
+var pricingCardDescriptionClass = "text-sm text-muted-foreground";
+var pricingCardFeatureListClass = "flex flex-col gap-2";
+var pricingCardFeatureRowClass = "flex items-start gap-2 text-sm text-foreground";
+var pricingCardFeatureTickClass = "mt-0.5 size-4 shrink-0 text-primary";
+var pricingCtaVariants = cva({
+  base: [
+    "mt-auto inline-flex w-full items-center justify-center rounded-lg px-4 py-2",
+    "text-sm font-medium transition-colors",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+    "disabled:pointer-events-none disabled:opacity-50"
+  ].join(" "),
+  variants: {
+    variant: {
+      default: "bg-primary text-primary-foreground hover:bg-primary/90",
+      outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground"
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
+
+// ../react-pricing-card/dist/index.js
+import { jsxs, jsx } from "react/jsx-runtime";
+var PricingCard = React.forwardRef(
+  function PricingCard2({
+    badge,
+    name,
+    price,
+    period,
+    description,
+    features,
+    cta,
+    ctaVariant = "default",
+    ctaHref,
+    onCtaClick,
+    featured = false,
+    className,
+    ...props
+  }, ref) {
+    const { ariaProps, dataAttributes } = createPricingCard({ featured });
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(pricingCardVariants({ featured: featured ? "true" : "false" }), className),
+        ...ariaProps,
+        ...dataAttributes,
+        ...props,
+        children: [
+          badge != null && /* @__PURE__ */ jsx("span", { className: pricingCardBadgeClass, children: badge }),
+          /* @__PURE__ */ jsx("p", { className: pricingCardNameClass, children: name }),
+          /* @__PURE__ */ jsxs("div", { className: "mt-4 flex items-baseline gap-1", children: [
+            /* @__PURE__ */ jsx("span", { className: pricingCardPriceClass, children: price }),
+            period != null && /* @__PURE__ */ jsx("span", { className: pricingCardPeriodClass, children: period })
+          ] }),
+          description != null && /* @__PURE__ */ jsx("p", { className: `mt-2 ${pricingCardDescriptionClass}`, children: description }),
+          /* @__PURE__ */ jsx("ul", { className: `mt-6 ${pricingCardFeatureListClass}`, children: features.map((feature) => /* @__PURE__ */ jsxs("li", { className: pricingCardFeatureRowClass, children: [
+            /* @__PURE__ */ jsx(
+              "svg",
+              {
+                className: pricingCardFeatureTickClass,
+                viewBox: "0 0 16 16",
+                fill: "none",
+                "aria-hidden": "true",
+                children: /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    d: "M3 8l3.5 3.5L13 4.5",
+                    stroke: "currentColor",
+                    strokeWidth: "1.75",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round"
+                  }
+                )
+              }
+            ),
+            feature
+          ] }, feature)) }),
+          /* @__PURE__ */ jsx("div", { className: "mt-6", children: ctaHref != null ? /* @__PURE__ */ jsx(
+            "a",
+            {
+              href: ctaHref,
+              className: pricingCtaVariants({ variant: ctaVariant }),
+              children: cta
+            }
+          ) : /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: pricingCtaVariants({ variant: ctaVariant }),
+              onClick: onCtaClick,
+              children: cta
+            }
+          ) })
+        ]
+      }
+    );
+  }
+);
+export {
+  PricingCard
+};
+//# sourceMappingURL=react-pricing-card.js.map

package/dist/react-pricing-card.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../pricing-card/src/pricing-card.ts", "../../pricing-card/src/pricing-card.styles.ts", "../../react-pricing-card/src/pricing-card.tsx"],
+  "sourcesContent": ["import type { AccessibilityProps } from '@refraction-ui/shared'\n\n/** CTA button/link visual variant. */\nexport type PricingCtaVariant = 'default' | 'outline'\n\nexport interface PricingCardOptions {\n  /** Whether this card is highlighted as the featured / recommended plan. */\n  featured?: boolean\n}\n\nexport interface PricingCardAPI {\n  /** ARIA props to spread on the card container. */\n  ariaProps: Partial<AccessibilityProps>\n  /** Data attributes for styling hooks and CSS selectors. */\n  dataAttributes: Record<string, string>\n}\n\n/**\n * Build the framework-agnostic props for a pricing plan card.\n *\n * Returns `role=\"group\"` (semantically groups the plan's content without\n * imposing listitem semantics on a standalone card) and a `data-featured`\n * attribute that adapters can use for conditional ring/highlight styling.\n */\nexport function createPricingCard(options: PricingCardOptions = {}): PricingCardAPI {\n  const { featured = false } = options\n\n  const ariaProps: Partial<AccessibilityProps> = {\n    role: 'group',\n  }\n\n  const dataAttributes: Record<string, string> = {\n    'data-featured': String(featured),\n  }\n\n  return { ariaProps, dataAttributes }\n}\n", "import { cva } from '@refraction-ui/shared'\n\n/**\n * Root pricing card container. The `featured` variant adds a primary-coloured\n * ring to draw the eye to the recommended plan.\n */\nexport const pricingCardVariants = cva({\n  base: [\n    'relative flex flex-col rounded-2xl border border-border bg-card p-6',\n    'transition-shadow',\n  ].join(' '),\n  variants: {\n    featured: {\n      true: 'ring-1 ring-primary',\n      false: '',\n    },\n  },\n  defaultVariants: {\n    featured: 'false',\n  },\n})\n\n/** \"Best value\" / \"Most popular\" badge above the plan name. */\nexport const pricingCardBadgeClass =\n  'mb-3 inline-flex items-center rounded-full bg-primary/10 px-2.5 py-0.5 text-xs font-medium text-primary'\n\n/** Plan name (e.g. \"Pro\", \"Starter\"). */\nexport const pricingCardNameClass = 'text-lg font-bold text-foreground'\n\n/** Main price figure (e.g. \"$29\", \"Free\"). */\nexport const pricingCardPriceClass = 'text-3xl font-bold text-foreground'\n\n/** Billing period or qualifier (e.g. \"/ month\", \"forever\"). */\nexport const pricingCardPeriodClass = 'text-sm text-muted-foreground'\n\n/** Short marketing description beneath the price. */\nexport const pricingCardDescriptionClass = 'text-sm text-muted-foreground'\n\n/** Unordered list of included features. */\nexport const pricingCardFeatureListClass = 'flex flex-col gap-2'\n\n/** A single feature row — tick icon + text. */\nexport const pricingCardFeatureRowClass = 'flex items-start gap-2 text-sm text-foreground'\n\n/** Inline check SVG rendered before each feature string. */\nexport const pricingCardFeatureTickClass = 'mt-0.5 size-4 shrink-0 text-primary'\n\n/**\n * CTA button/link that appears at the bottom of the card.\n *\n * `default` — filled primary style (call to action on featured plans).\n * `outline` — bordered secondary style (for non-featured plans).\n */\nexport const pricingCtaVariants = cva({\n  base: [\n    'mt-auto inline-flex w-full items-center justify-center rounded-lg px-4 py-2',\n    'text-sm font-medium transition-colors',\n    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n    'disabled:pointer-events-none disabled:opacity-50',\n  ].join(' '),\n  variants: {\n    variant: {\n      default: 'bg-primary text-primary-foreground hover:bg-primary/90',\n      outline:\n        'border border-input bg-background hover:bg-accent hover:text-accent-foreground',\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n  },\n})\n", "import * as React from 'react'\nimport {\n  createPricingCard,\n  pricingCardVariants,\n  pricingCardBadgeClass,\n  pricingCardNameClass,\n  pricingCardPriceClass,\n  pricingCardPeriodClass,\n  pricingCardDescriptionClass,\n  pricingCardFeatureListClass,\n  pricingCardFeatureRowClass,\n  pricingCardFeatureTickClass,\n  pricingCtaVariants,\n  type PricingCtaVariant,\n} from '@refraction-ui/pricing-card'\nimport { cn } from '@refraction-ui/shared'\n\nexport type { PricingCtaVariant }\n\nexport interface PricingCardProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'content'> {\n  /** Optional badge label shown above the plan name (e.g. \"Most popular\"). */\n  badge?: string\n  /** Plan name (e.g. \"Pro\", \"Starter\"). */\n  name: string\n  /** Price string (e.g. \"$29\", \"Free\"). */\n  price: string\n  /** Billing period or qualifier (e.g. \"/ month\"). */\n  period?: string\n  /** Short marketing description. */\n  description?: string\n  /** List of included features to render as a checklist. */\n  features: string[]\n  /** CTA button/link label. */\n  cta: string\n  /** Visual variant for the CTA. */\n  ctaVariant?: PricingCtaVariant\n  /** When provided, the CTA renders as an `<a>` tag. */\n  ctaHref?: string\n  /** Click handler for the CTA button (ignored when `ctaHref` is provided). */\n  onCtaClick?: React.MouseEventHandler<HTMLButtonElement>\n  /** Highlights the card with a primary ring. */\n  featured?: boolean\n}\n\n/**\n * PricingCard — a self-contained pricing plan card.\n *\n * Renders an optional badge, the plan name, price + optional period, optional\n * description, a feature checklist, and a full-width CTA (anchor when\n * `ctaHref` is set, button otherwise). The `featured` prop adds a primary-\n * colour ring to highlight the recommended plan. Logic and styles come from\n * the headless `@refraction-ui/pricing-card` core.\n */\nexport const PricingCard = React.forwardRef<HTMLDivElement, PricingCardProps>(\n  function PricingCard(\n    {\n      badge,\n      name,\n      price,\n      period,\n      description,\n      features,\n      cta,\n      ctaVariant = 'default',\n      ctaHref,\n      onCtaClick,\n      featured = false,\n      className,\n      ...props\n    },\n    ref,\n  ) {\n    const { ariaProps, dataAttributes } = createPricingCard({ featured })\n\n    return (\n      <div\n        ref={ref}\n        className={cn(pricingCardVariants({ featured: featured ? 'true' : 'false' }), className)}\n        {...ariaProps}\n        {...dataAttributes}\n        {...props}\n      >\n        {badge != null && (\n          <span className={pricingCardBadgeClass}>{badge}</span>\n        )}\n\n        <p className={pricingCardNameClass}>{name}</p>\n\n        <div className=\"mt-4 flex items-baseline gap-1\">\n          <span className={pricingCardPriceClass}>{price}</span>\n          {period != null && (\n            <span className={pricingCardPeriodClass}>{period}</span>\n          )}\n        </div>\n\n        {description != null && (\n          <p className={`mt-2 ${pricingCardDescriptionClass}`}>{description}</p>\n        )}\n\n        <ul className={`mt-6 ${pricingCardFeatureListClass}`}>\n          {features.map((feature) => (\n            <li key={feature} className={pricingCardFeatureRowClass}>\n              <svg\n                className={pricingCardFeatureTickClass}\n                viewBox=\"0 0 16 16\"\n                fill=\"none\"\n                aria-hidden=\"true\"\n              >\n                <path\n                  d=\"M3 8l3.5 3.5L13 4.5\"\n                  stroke=\"currentColor\"\n                  strokeWidth=\"1.75\"\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                />\n              </svg>\n              {feature}\n            </li>\n          ))}\n        </ul>\n\n        <div className=\"mt-6\">\n          {ctaHref != null ? (\n            <a\n              href={ctaHref}\n              className={pricingCtaVariants({ variant: ctaVariant })}\n            >\n              {cta}\n            </a>\n          ) : (\n            <button\n              type=\"button\"\n              className={pricingCtaVariants({ variant: ctaVariant })}\n              onClick={onCtaClick}\n            >\n              {cta}\n            </button>\n          )}\n        </div>\n      </div>\n    )\n  },\n)\n"],
+  "mappings": ";;;;;;;;;AAwBO,SAAS,kBAAkB,UAA8B,CAAA,GAAoB;AAClF,QAAM,EAAE,WAAW,MAAA,IAAU;AAE7B,QAAM,YAAyC;IAC7C,MAAM;EAAA;AAGR,QAAM,iBAAyC;IAC7C,iBAAiB,OAAO,QAAQ;EAAA;AAGlC,SAAO,EAAE,WAAW,eAAA;AACtB;AC9BO,IAAM,sBAAsB,IAAI;EACrC,MAAM;IACJ;IACA;EAAA,EACA,KAAK,GAAG;EACV,UAAU;IACR,UAAU;MACR,MAAM;MACN,OAAO;IAAA;EACT;EAEF,iBAAiB;IACf,UAAU;EAAA;AAEd,CAAC;AAGM,IAAM,wBACX;AAGK,IAAM,uBAAuB;AAG7B,IAAM,wBAAwB;AAG9B,IAAM,yBAAyB;AAG/B,IAAM,8BAA8B;AAGpC,IAAM,8BAA8B;AAGpC,IAAM,6BAA6B;AAGnC,IAAM,8BAA8B;AAQpC,IAAM,qBAAqB,IAAI;EACpC,MAAM;IACJ;IACA;IACA;IACA;EAAA,EACA,KAAK,GAAG;EACV,UAAU;IACR,SAAS;MACP,SAAS;MACT,SACE;IAAA;EACJ;EAEF,iBAAiB;IACf,SAAS;EAAA;AAEb,CAAC;;;;AChBM,IAAM,cAAoB;EAC/B,SAASA,aACP;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA,aAAa;IACb;IACA;IACA,WAAW;IACX;IACA,GAAG;EAAA,GAEL,KACA;AACA,UAAM,EAAE,WAAW,eAAA,IAAmB,kBAAkB,EAAE,SAAA,CAAU;AAEpE,WACE;MAAC;MAAA;QACC;QACA,WAAW,GAAG,oBAAoB,EAAE,UAAU,WAAW,SAAS,QAAA,CAAS,GAAG,SAAS;QACtF,GAAG;QACH,GAAG;QACH,GAAG;QAEH,UAAA;UAAA,SAAS,QACR,oBAAC,QAAA,EAAK,WAAW,uBAAwB,UAAA,MAAA,CAAM;UAGjD,oBAAC,KAAA,EAAE,WAAW,sBAAuB,UAAA,KAAA,CAAK;UAE1C,qBAAC,OAAA,EAAI,WAAU,kCACb,UAAA;YAAA,oBAAC,QAAA,EAAK,WAAW,uBAAwB,UAAA,MAAA,CAAM;YAC9C,UAAU,QACT,oBAAC,QAAA,EAAK,WAAW,wBAAyB,UAAA,OAAA,CAAO;UAAA,EAAA,CAErD;UAEC,eAAe,QACd,oBAAC,KAAA,EAAE,WAAW,QAAQ,2BAA2B,IAAK,UAAA,YAAA,CAAY;UAGpE,oBAAC,MAAA,EAAG,WAAW,QAAQ,2BAA2B,IAC/C,UAAA,SAAS,IAAI,CAAC,YACb,qBAAC,MAAA,EAAiB,WAAW,4BAC3B,UAAA;YAAA;cAAC;cAAA;gBACC,WAAW;gBACX,SAAQ;gBACR,MAAK;gBACL,eAAY;gBAEZ,UAAA;kBAAC;kBAAA;oBACC,GAAE;oBACF,QAAO;oBACP,aAAY;oBACZ,eAAc;oBACd,gBAAe;kBAAA;gBAAA;cACjB;YAAA;YAED;UAAA,EAAA,GAfM,OAgBT,CACD,EAAA,CACH;UAEA,oBAAC,OAAA,EAAI,WAAU,QACZ,UAAA,WAAW,OACV;YAAC;YAAA;cACC,MAAM;cACN,WAAW,mBAAmB,EAAE,SAAS,WAAA,CAAY;cAEpD,UAAA;YAAA;UAAA,IAGH;YAAC;YAAA;cACC,MAAK;cACL,WAAW,mBAAmB,EAAE,SAAS,WAAA,CAAY;cACrD,SAAS;cAER,UAAA;YAAA;UAAA,EACH,CAEJ;QAAA;MAAA;IAAA;EAGN;AACF;",
+  "names": ["PricingCard"]
+}