@mediquo/medicore 0.1.0

package/dist/components/toast/toast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.js","sources":["../../../src/components/toast/toast.tsx"],"sourcesContent":["import {\n  Toast as BaseToast,\n  type ToastObject,\n  type UseToastManagerReturnValue,\n} from \"@base-ui/react/toast\";\nimport { cva } from \"class-variance-authority\";\nimport {\n  createContext,\n  type ReactNode,\n  useCallback,\n  useContext,\n  useMemo,\n} from \"react\";\n\nimport { AlertCircleIcon, CheckCircleIcon, InfoCircleIcon } from \"../../icons\";\nimport { cn } from \"../../lib/cn\";\nimport { useMediCoreLabels } from \"../../provider\";\nimport { Button } from \"../button\";\n\n/**\n * There is no `warning` on purpose: a warning that matters can't vanish on its own,\n * and one that can vanish wasn't a warning. Use a persistent `Banner`.\n */\nexport type ToastStatus = \"neutral\" | \"success\" | \"error\";\n\nexport interface ToastActionOptions {\n  /** Defaults to the MediCore `undo` label (\"Deshacer\"). */\n  label?: string;\n  /** Runs on click; the toast closes right after. */\n  onClick: () => void;\n}\n\nexport interface ToastOptions {\n  /**\n   * What happened, concrete: \"Cita guardada\", \"No se pudo guardar la cita\". Never\n   * \"Operación completada con éxito\" or \"Ha ocurrido un error\".\n   */\n  message: ReactNode;\n  /** `neutral` (default) for system state, `success` in past tense, `error` for what failed. */\n  status?: ToastStatus;\n  /** Undo for success, retry for errors. Leave it out when there is nothing to do. */\n  action?: ToastActionOptions;\n  /** The icon follows the status; pass `false` to hide it. */\n  icon?: boolean;\n  /** Milliseconds before it closes on its own (the provider's default otherwise). `0` keeps it open. */\n  timeout?: number;\n  /** Passing the id of a visible toast updates it in place. */\n  id?: string;\n  onClose?: () => void;\n}\n\nexport interface UseToastReturnValue {\n  /** Shows a toast and returns its id. */\n  toast: (options: ToastOptions) => string;\n  /** Closes a toast by id, or all of them. */\n  close: (id?: string) => void;\n}\n\ninterface ToastData {\n  icon: boolean;\n}\n\ntype ToastApi = Pick<UseToastManagerReturnValue<ToastData>, \"add\" | \"close\">;\n\nconst ToastApiContext = createContext<ToastApi | null>(null);\n\n/**\n * Shows transient notices. Needs a `ToastProvider` above.\n *\n * ```tsx\n * const { toast } = useToast();\n * toast({ message: \"Cita guardada\", status: \"success\", action: { onClick: undo } });\n * ```\n */\nexport function useToast(): UseToastReturnValue {\n  const manager = useContext(ToastApiContext);\n  const labels = useMediCoreLabels();\n\n  if (manager === null) {\n    throw new Error(\n      \"MediCore: useToast() must be used inside <ToastProvider>.\",\n    );\n  }\n\n  const toast = useCallback(\n    ({\n      message,\n      status = \"neutral\",\n      action,\n      icon = true,\n      ...options\n    }: ToastOptions): string => {\n      let id = \"\";\n      id = manager.add({\n        ...options,\n        title: message,\n        type: status,\n        // High priority is announced assertively, so only errors use it.\n        priority: status === \"error\" ? \"high\" : \"low\",\n        data: { icon },\n        actionProps: action && {\n          children: action.label ?? labels.undo,\n          onClick: () => {\n            action.onClick();\n            manager.close(id);\n          },\n        },\n      });\n      return id;\n    },\n    [manager, labels.undo],\n  );\n\n  return useMemo(() => ({ toast, close: manager.close }), [toast, manager]);\n}\n\nexport interface ToastProviderProps {\n  children?: ReactNode;\n  /** Default time on screen in milliseconds. Hovering or focusing the toasts pauses it. */\n  timeout?: number;\n  /** Toasts visible at once; older ones are hidden until there is room. */\n  limit?: number;\n  /** Accessible name of the notifications region. */\n  label?: string;\n}\n\n/**\n * Wrap the app once. Renders the toast region: at the bottom on mobile (full width\n * minus 16px per side) and top right on desktop (360px), at most three at a time.\n * The timer pauses on hover and keyboard focus, and F6 jumps into the region.\n */\nexport function ToastProvider({\n  children,\n  timeout,\n  limit = 3,\n  label = \"Notificaciones\",\n}: ToastProviderProps): React.JSX.Element {\n  return (\n    <BaseToast.Provider timeout={timeout} limit={limit}>\n      <ToastApiBridge>{children}</ToastApiBridge>\n      <Toaster label={label} />\n    </BaseToast.Provider>\n  );\n}\n\n/**\n * Hands `add`/`close` to `useToast()` without the toast list, so components that only\n * show toasts don't re-render every time one appears or goes away. They talk to the\n * provider's store directly, so a toast added from a mount effect isn't lost.\n */\nfunction ToastApiBridge({\n  children,\n}: {\n  children?: ReactNode;\n}): React.JSX.Element {\n  const { add, close } = BaseToast.useToastManager<ToastData>();\n  const api = useMemo(() => ({ add, close }), [add, close]);\n\n  return (\n    <ToastApiContext.Provider value={api}>{children}</ToastApiContext.Provider>\n  );\n}\n\nfunction Toaster({ label }: { label: string }): React.JSX.Element {\n  const { toasts } = BaseToast.useToastManager<ToastData>();\n\n  return (\n    <BaseToast.Portal>\n      <BaseToast.Viewport\n        data-slot=\"toast-viewport\"\n        aria-label={label}\n        className={cn(\n          \"fixed inset-x-4 bottom-4 z-60 flex flex-col-reverse gap-2 outline-hidden\",\n          \"md:inset-x-auto md:top-8 md:right-8 md:bottom-auto md:w-90 md:flex-col\",\n        )}\n      >\n        {toasts.map((toast) => (\n          <ToastItem key={toast.id} toast={toast} />\n        ))}\n      </BaseToast.Viewport>\n    </BaseToast.Portal>\n  );\n}\n\nconst toastVariants = cva(\n  [\n    \"flex items-center gap-3 rounded-lg px-4 py-3 text-text-inverse shadow-lg select-none\",\n    \"[transform:translateX(var(--toast-swipe-movement-x))_translateY(var(--toast-swipe-movement-y))]\",\n    \"transition-[opacity,transform] duration-200 ease-out motion-reduce:transition-none\",\n    \"data-starting-style:opacity-0 data-starting-style:[transform:translateY(100%)] md:data-starting-style:[transform:translateY(-100%)]\",\n    \"data-ending-style:opacity-0\",\n    \"data-ending-style:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))]\",\n    \"data-ending-style:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))]\",\n    \"data-ending-style:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))]\",\n    \"data-ending-style:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))]\",\n    \"data-limited:hidden focus-ring\",\n  ],\n  {\n    variants: {\n      status: {\n        neutral: \"bg-surface-inverse\",\n        // success-STRONG, not the status green: white on #34C759 is 2.22:1.\n        success: \"bg-success-strong\",\n        error: \"bg-error-strong\",\n      },\n    },\n    defaultVariants: {\n      status: \"neutral\",\n    },\n  },\n);\n\nconst statusIcons = {\n  neutral: InfoCircleIcon,\n  success: CheckCircleIcon,\n  error: AlertCircleIcon,\n} as const;\n\nfunction isToastStatus(value: string | undefined): value is ToastStatus {\n  return value === \"neutral\" || value === \"success\" || value === \"error\";\n}\n\nfunction ToastItem({\n  toast,\n}: {\n  toast: ToastObject<ToastData>;\n}): React.JSX.Element {\n  const status = isToastStatus(toast.type) ? toast.type : \"neutral\";\n  const Icon = statusIcons[status];\n\n  return (\n    <BaseToast.Root\n      toast={toast}\n      data-slot=\"toast\"\n      className={toastVariants({ status })}\n    >\n      {toast.data?.icon !== false && <Icon size=\"md\" className=\"shrink-0\" />}\n      <BaseToast.Title\n        render={<p />}\n        className=\"min-w-0 flex-1 text-body-small\"\n      />\n      {/* The 36px button overflows the 12px padding so the toast stays 48px tall. */}\n      <BaseToast.Action\n        render={\n          <Button\n            variant=\"inverse-ghost\"\n            size=\"small\"\n            className=\"-my-1.5 underline underline-offset-2\"\n          />\n        }\n      />\n    </BaseToast.Root>\n  );\n}\n"],"names":["BaseToast"],"mappings":"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"}

package/dist/components/tooltip/index.d.ts

@@ -0,0 +1 @@
+export { Tooltip, TooltipContent, type TooltipContentProps, type TooltipPlacement, type TooltipProps, TooltipProvider, type TooltipProviderProps, TooltipTrigger, type TooltipTriggerProps, } from "./tooltip";

package/dist/components/tooltip/tooltip.d.ts

@@ -0,0 +1,40 @@
+import { Tooltip as BaseTooltip } from "@base-ui/react/tooltip";
+import { type ReactNode } from "react";
+export type TooltipPlacement = "top" | "bottom";
+export interface TooltipProviderProps extends BaseTooltip.Provider.Props {
+}
+/**
+ * Optional, around a toolbar or the whole app: once one tooltip is showing, the
+ * neighbouring ones open without waiting for the delay again.
+ */
+export declare function TooltipProvider(props: TooltipProviderProps): React.JSX.Element;
+export interface TooltipProps extends Omit<BaseTooltip.Root.Props, "children"> {
+    /**
+     * Shortcut: the tooltip text. With it, `children` is the trigger element and the
+     * content is built for you: `<Tooltip label="Editar alergia"><IconButton … /></Tooltip>`.
+     */
+    label?: string;
+    /** Used with `label`. Top by default; it flips on its own when there's no room. */
+    placement?: TooltipPlacement;
+    children?: ReactNode;
+}
+/**
+ * Floating label for controls without visible text — the edit, delete or download
+ * IconButtons. Only to NAME, never to explain: there is no hover on mobile, so
+ * anything the screen needs to be understood can't live here. Two or three words.
+ *
+ * It opens on hover and on keyboard focus, closes with Escape, and is linked to the
+ * trigger with `aria-describedby`. The trigger still needs its own `aria-label`: the
+ * tooltip doesn't replace it.
+ */
+export declare function Tooltip({ label, placement, children, open: openProp, defaultOpen, onOpenChange, ...props }: TooltipProps): React.JSX.Element;
+export interface TooltipTriggerProps extends BaseTooltip.Trigger.Props {
+}
+/** The element the tooltip names. Pass it with `render={<IconButton aria-label="…" />}`. */
+export declare function TooltipTrigger({ "aria-describedby": describedBy, ...props }: TooltipTriggerProps): React.JSX.Element;
+export interface TooltipContentProps extends Omit<BaseTooltip.Popup.Props, "className"> {
+    placement?: TooltipPlacement;
+    className?: string;
+}
+/** The label: `surface-inverse` with white 12px text (16.27:1) and an arrow. */
+export declare function TooltipContent({ placement, className, children, ...props }: TooltipContentProps): React.JSX.Element;

package/dist/components/tooltip/tooltip.js

@@ -0,0 +1,110 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { Tooltip as Tooltip$1 } from "@base-ui/react/tooltip";
+import { useId, useState, useCallback, useMemo, isValidElement, createContext, useContext } from "react";
+import { cn } from "../../lib/cn.js";
+const TooltipContext = createContext(null);
+function useTooltipContext(part) {
+  const context = useContext(TooltipContext);
+  if (context === null) {
+    throw new Error(`MediCore: <${part}> must be used inside <Tooltip>.`);
+  }
+  return context;
+}
+function TooltipProvider(props) {
+  return /* @__PURE__ */ jsx(Tooltip$1.Provider, { ...props });
+}
+function Tooltip({
+  label,
+  placement,
+  children,
+  open: openProp,
+  defaultOpen = false,
+  onOpenChange,
+  ...props
+}) {
+  const id = useId();
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+  const open = openProp ?? uncontrolledOpen;
+  const handleOpenChange = useCallback(
+    (nextOpen, eventDetails) => {
+      onOpenChange?.(nextOpen, eventDetails);
+      if (!eventDetails.isCanceled) {
+        setUncontrolledOpen(nextOpen);
+      }
+    },
+    [onOpenChange]
+  );
+  const context = useMemo(() => ({ id, open }), [id, open]);
+  return /* @__PURE__ */ jsx(TooltipContext.Provider, { value: context, children: /* @__PURE__ */ jsx(
+    Tooltip$1.Root,
+    {
+      open: openProp,
+      defaultOpen,
+      onOpenChange: handleOpenChange,
+      ...props,
+      children: label !== void 0 && isValidElement(children) ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(TooltipTrigger, { render: children }),
+        /* @__PURE__ */ jsx(TooltipContent, { placement, children: label })
+      ] }) : children
+    }
+  ) });
+}
+function TooltipTrigger({
+  "aria-describedby": describedBy,
+  ...props
+}) {
+  const { id, open } = useTooltipContext("TooltipTrigger");
+  const ids = [describedBy, open ? id : void 0].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx(
+    Tooltip$1.Trigger,
+    {
+      "data-slot": "tooltip-trigger",
+      "aria-describedby": ids === "" ? void 0 : ids,
+      ...props
+    }
+  );
+}
+function TooltipContent({
+  placement = "top",
+  className,
+  children,
+  ...props
+}) {
+  const { id } = useTooltipContext("TooltipContent");
+  return /* @__PURE__ */ jsx(Tooltip$1.Portal, { children: /* @__PURE__ */ jsx(Tooltip$1.Positioner, { side: placement, sideOffset: 8, className: "z-70", children: /* @__PURE__ */ jsxs(
+    Tooltip$1.Popup,
+    {
+      id,
+      role: "tooltip",
+      "data-slot": "tooltip",
+      className: cn(
+        "max-w-60 rounded-md bg-surface-inverse px-2 py-1.5 text-label-small text-text-inverse",
+        "origin-(--transform-origin) transition-[opacity,scale] duration-150 ease-out",
+        "data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:opacity-0",
+        "data-instant:transition-none motion-reduce:transition-none",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          Tooltip$1.Arrow,
+          {
+            className: cn(
+              "h-1.5 w-2.5 bg-surface-inverse",
+              "data-[side=top]:top-full data-[side=top]:[clip-path:polygon(0_0,100%_0,50%_100%)]",
+              "data-[side=bottom]:bottom-full data-[side=bottom]:[clip-path:polygon(50%_0,100%_100%,0_100%)]"
+            )
+          }
+        ),
+        children
+      ]
+    }
+  ) }) });
+}
+export {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger
+};
+//# sourceMappingURL=tooltip.js.map

package/dist/components/tooltip/tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.js","sources":["../../../src/components/tooltip/tooltip.tsx"],"sourcesContent":["import { Tooltip as BaseTooltip } from \"@base-ui/react/tooltip\";\nimport {\n  createContext,\n  isValidElement,\n  type ReactNode,\n  useCallback,\n  useContext,\n  useId,\n  useMemo,\n  useState,\n} from \"react\";\n\nimport { cn } from \"../../lib/cn\";\n\nexport type TooltipPlacement = \"top\" | \"bottom\";\n\ninterface TooltipContextValue {\n  id: string;\n  open: boolean;\n}\n\nconst TooltipContext = createContext<TooltipContextValue | null>(null);\n\nfunction useTooltipContext(part: string): TooltipContextValue {\n  const context = useContext(TooltipContext);\n  if (context === null) {\n    throw new Error(`MediCore: <${part}> must be used inside <Tooltip>.`);\n  }\n  return context;\n}\n\nexport interface TooltipProviderProps extends BaseTooltip.Provider.Props {}\n\n/**\n * Optional, around a toolbar or the whole app: once one tooltip is showing, the\n * neighbouring ones open without waiting for the delay again.\n */\nexport function TooltipProvider(\n  props: TooltipProviderProps,\n): React.JSX.Element {\n  return <BaseTooltip.Provider {...props} />;\n}\n\nexport interface TooltipProps extends Omit<BaseTooltip.Root.Props, \"children\"> {\n  /**\n   * Shortcut: the tooltip text. With it, `children` is the trigger element and the\n   * content is built for you: `<Tooltip label=\"Editar alergia\"><IconButton … /></Tooltip>`.\n   */\n  label?: string;\n  /** Used with `label`. Top by default; it flips on its own when there's no room. */\n  placement?: TooltipPlacement;\n  children?: ReactNode;\n}\n\n/**\n * Floating label for controls without visible text — the edit, delete or download\n * IconButtons. Only to NAME, never to explain: there is no hover on mobile, so\n * anything the screen needs to be understood can't live here. Two or three words.\n *\n * It opens on hover and on keyboard focus, closes with Escape, and is linked to the\n * trigger with `aria-describedby`. The trigger still needs its own `aria-label`: the\n * tooltip doesn't replace it.\n */\nexport function Tooltip({\n  label,\n  placement,\n  children,\n  open: openProp,\n  defaultOpen = false,\n  onOpenChange,\n  ...props\n}: TooltipProps): React.JSX.Element {\n  const id = useId();\n  // Mirrors Base UI's open state so the trigger only points at the popup while it exists.\n  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);\n  const open = openProp ?? uncontrolledOpen;\n\n  const handleOpenChange = useCallback<\n    NonNullable<BaseTooltip.Root.Props[\"onOpenChange\"]>\n  >(\n    (nextOpen, eventDetails) => {\n      onOpenChange?.(nextOpen, eventDetails);\n      if (!eventDetails.isCanceled) {\n        setUncontrolledOpen(nextOpen);\n      }\n    },\n    [onOpenChange],\n  );\n\n  const context = useMemo(() => ({ id, open }), [id, open]);\n\n  return (\n    <TooltipContext.Provider value={context}>\n      <BaseTooltip.Root\n        open={openProp}\n        defaultOpen={defaultOpen}\n        onOpenChange={handleOpenChange}\n        {...props}\n      >\n        {label !== undefined && isValidElement(children) ? (\n          <>\n            <TooltipTrigger render={children} />\n            <TooltipContent placement={placement}>{label}</TooltipContent>\n          </>\n        ) : (\n          children\n        )}\n      </BaseTooltip.Root>\n    </TooltipContext.Provider>\n  );\n}\n\nexport interface TooltipTriggerProps extends BaseTooltip.Trigger.Props {}\n\n/** The element the tooltip names. Pass it with `render={<IconButton aria-label=\"…\" />}`. */\nexport function TooltipTrigger({\n  \"aria-describedby\": describedBy,\n  ...props\n}: TooltipTriggerProps): React.JSX.Element {\n  const { id, open } = useTooltipContext(\"TooltipTrigger\");\n  const ids = [describedBy, open ? id : undefined].filter(Boolean).join(\" \");\n\n  return (\n    <BaseTooltip.Trigger\n      data-slot=\"tooltip-trigger\"\n      aria-describedby={ids === \"\" ? undefined : ids}\n      {...props}\n    />\n  );\n}\n\nexport interface TooltipContentProps\n  extends Omit<BaseTooltip.Popup.Props, \"className\"> {\n  placement?: TooltipPlacement;\n  className?: string;\n}\n\n/** The label: `surface-inverse` with white 12px text (16.27:1) and an arrow. */\nexport function TooltipContent({\n  placement = \"top\",\n  className,\n  children,\n  ...props\n}: TooltipContentProps): React.JSX.Element {\n  const { id } = useTooltipContext(\"TooltipContent\");\n\n  return (\n    <BaseTooltip.Portal>\n      <BaseTooltip.Positioner side={placement} sideOffset={8} className=\"z-70\">\n        <BaseTooltip.Popup\n          id={id}\n          role=\"tooltip\"\n          data-slot=\"tooltip\"\n          className={cn(\n            \"max-w-60 rounded-md bg-surface-inverse px-2 py-1.5 text-label-small text-text-inverse\",\n            \"origin-(--transform-origin) transition-[opacity,scale] duration-150 ease-out\",\n            \"data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:opacity-0\",\n            \"data-instant:transition-none motion-reduce:transition-none\",\n            className,\n          )}\n          {...props}\n        >\n          <BaseTooltip.Arrow\n            className={cn(\n              \"h-1.5 w-2.5 bg-surface-inverse\",\n              \"data-[side=top]:top-full data-[side=top]:[clip-path:polygon(0_0,100%_0,50%_100%)]\",\n              \"data-[side=bottom]:bottom-full data-[side=bottom]:[clip-path:polygon(50%_0,100%_100%,0_100%)]\",\n            )}\n          />\n          {children}\n        </BaseTooltip.Popup>\n      </BaseTooltip.Positioner>\n    </BaseTooltip.Portal>\n  );\n}\n"],"names":["BaseTooltip"],"mappings":";;;;AAqBA,MAAM,iBAAiB,cAA0C,IAAI;AAErE,SAAS,kBAAkB,MAAmC;AAC5D,QAAM,UAAU,WAAW,cAAc;AACzC,MAAI,YAAY,MAAM;AACpB,UAAM,IAAI,MAAM,cAAc,IAAI,kCAAkC;AAAA,EACtE;AACA,SAAO;AACT;AAQO,SAAS,gBACd,OACmB;AACnB,SAAO,oBAACA,UAAY,UAAZ,EAAsB,GAAG,MAAA,CAAO;AAC1C;AAsBO,SAAS,QAAQ;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA,MAAM;AAAA,EACN,cAAc;AAAA,EACd;AAAA,EACA,GAAG;AACL,GAAoC;AAClC,QAAM,KAAK,MAAA;AAEX,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAAS,WAAW;AACpE,QAAM,OAAO,YAAY;AAEzB,QAAM,mBAAmB;AAAA,IAGvB,CAAC,UAAU,iBAAiB;AAC1B,qBAAe,UAAU,YAAY;AACrC,UAAI,CAAC,aAAa,YAAY;AAC5B,4BAAoB,QAAQ;AAAA,MAC9B;AAAA,IACF;AAAA,IACA,CAAC,YAAY;AAAA,EAAA;AAGf,QAAM,UAAU,QAAQ,OAAO,EAAE,IAAI,SAAS,CAAC,IAAI,IAAI,CAAC;AAExD,SACE,oBAAC,eAAe,UAAf,EAAwB,OAAO,SAC9B,UAAA;AAAA,IAACA,UAAY;AAAA,IAAZ;AAAA,MACC,MAAM;AAAA,MACN;AAAA,MACA,cAAc;AAAA,MACb,GAAG;AAAA,MAEH,UAAA,UAAU,UAAa,eAAe,QAAQ,IAC7C,qBAAA,UAAA,EACE,UAAA;AAAA,QAAA,oBAAC,gBAAA,EAAe,QAAQ,SAAA,CAAU;AAAA,QAClC,oBAAC,gBAAA,EAAe,WAAuB,UAAA,MAAA,CAAM;AAAA,MAAA,EAAA,CAC/C,IAEA;AAAA,IAAA;AAAA,EAAA,GAGN;AAEJ;AAKO,SAAS,eAAe;AAAA,EAC7B,oBAAoB;AAAA,EACpB,GAAG;AACL,GAA2C;AACzC,QAAM,EAAE,IAAI,SAAS,kBAAkB,gBAAgB;AACvD,QAAM,MAAM,CAAC,aAAa,OAAO,KAAK,MAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAEzE,SACE;AAAA,IAACA,UAAY;AAAA,IAAZ;AAAA,MACC,aAAU;AAAA,MACV,oBAAkB,QAAQ,KAAK,SAAY;AAAA,MAC1C,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;AASO,SAAS,eAAe;AAAA,EAC7B,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA2C;AACzC,QAAM,EAAE,GAAA,IAAO,kBAAkB,gBAAgB;AAEjD,SACE,oBAACA,UAAY,QAAZ,EACC,UAAA,oBAACA,UAAY,YAAZ,EAAuB,MAAM,WAAW,YAAY,GAAG,WAAU,QAChE,UAAA;AAAA,IAACA,UAAY;AAAA,IAAZ;AAAA,MACC;AAAA,MACA,MAAK;AAAA,MACL,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA;AAAA,UAACA,UAAY;AAAA,UAAZ;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA;AAAA,cACA;AAAA,YAAA;AAAA,UACF;AAAA,QAAA;AAAA,QAED;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAEL,EAAA,CACF;AAEJ;"}

package/dist/components/video/index.d.ts

@@ -0,0 +1,4 @@
+export { type VideoControl, VideoControlButton, type VideoControlButtonProps, type VideoControlState, videoControlButtonVariants, } from "./video-control-button";
+export { VideoLabel, type VideoLabelProps } from "./video-label";
+export { VideoStage, type VideoStageLayout, type VideoStagePhase, type VideoStageProps, } from "./video-stage";
+export { type VideoCamera, type VideoParticipant, VideoTile, type VideoTileProps, videoTileVariants, } from "./video-tile";

package/dist/components/video/video-control-button.d.ts

@@ -0,0 +1,33 @@
+import { type ComponentProps } from "react";
+export type VideoControl = "microphone" | "camera" | "chat";
+/** `on`: the device works · `off`: muted microphone / camera turned off. */
+export type VideoControlState = "on" | "off";
+export declare const videoControlButtonVariants: (props?: ({
+    state?: "off" | "on" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface VideoControlButtonProps extends Omit<ComponentProps<"button">, "children" | "value"> {
+    control: VideoControl;
+    /**
+     * Microphone and camera. Controlled: pass it with `onStateChange`. `chat` has no
+     * off state: it opens the chat.
+     */
+    state?: VideoControlState;
+    /** Uncontrolled initial state. Default `on`. */
+    defaultState?: VideoControlState;
+    onStateChange?: (state: VideoControlState) => void;
+    /** `chat` only: new messages. Shows the red dot and says it in the button's name. */
+    unreadCount?: number;
+}
+/**
+ * Button over the video: microphone, camera and (on mobile) chat. 44×44 drawn:
+ * over the video there is no label next to it to extend the hit area.
+ *
+ * - On: `surface-inverse` fill. Off: `error-strong` fill AND the crossed-out icon —
+ *   colour is never the only cue. White icon in both, over any image (the button
+ *   is opaque).
+ * - Microphone and camera are toggle buttons (`aria-pressed`, pressed = muted /
+ *   camera off) and their name says the action: "Silenciar micrófono" / "Activar
+ *   micrófono", "Apagar cámara" / "Encender cámara".
+ * - Chat is a plain button: "Abrir chat, 1 mensaje nuevo".
+ */
+export declare function VideoControlButton({ control, state: stateProp, defaultState, onStateChange, unreadCount, className, type, ...props }: VideoControlButtonProps): React.JSX.Element;

package/dist/components/video/video-control-button.js

@@ -0,0 +1,119 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Button } from "@base-ui/react/button";
+import { Toggle } from "@base-ui/react/toggle";
+import { cva } from "class-variance-authority";
+import { useState } from "react";
+import { MessageIcon } from "../../icons/generated/message.js";
+import { Microphone01Icon } from "../../icons/generated/microphone-01.js";
+import { MicrophoneOff01Icon } from "../../icons/generated/microphone-off-01.js";
+import { VideoRecorderIcon } from "../../icons/generated/video-recorder.js";
+import { VideoRecorderOffIcon } from "../../icons/generated/video-recorder-off.js";
+import { cn } from "../../lib/cn.js";
+import { useMediCoreLabels } from "../../provider/medicore-provider.js";
+const videoControlButtonVariants = cva(
+  [
+    "relative inline-flex size-11 shrink-0 cursor-pointer items-center justify-center rounded-xl",
+    "text-text-inverse transition-colors focus-ring [&_svg]:size-icon-md",
+    "data-disabled:cursor-not-allowed"
+  ],
+  {
+    variants: {
+      state: {
+        on: "border border-border-inverse bg-surface-inverse",
+        off: "bg-error-strong"
+      }
+    },
+    defaultVariants: {
+      state: "on"
+    }
+  }
+);
+function VideoControlButton({
+  control,
+  state: stateProp,
+  defaultState = "on",
+  onStateChange,
+  unreadCount = 0,
+  className,
+  type = "button",
+  ...props
+}) {
+  const labels = useMediCoreLabels();
+  if (control === "chat") {
+    const unread = unreadCount > 0;
+    return /* @__PURE__ */ jsxs(
+      Button,
+      {
+        "data-slot": "video-control-button",
+        "data-control": control,
+        type,
+        "aria-label": unread ? `${labels.videoOpenChat}, ${labels.chatNewMessages(unreadCount)}` : labels.videoOpenChat,
+        className: cn(videoControlButtonVariants({ state: "on" }), className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(MessageIcon, {}),
+          unread && /* @__PURE__ */ jsx(
+            "span",
+            {
+              "data-slot": "video-control-button-unread",
+              className: "absolute top-1 right-1 size-2.5 rounded-full bg-error ring-2 ring-text-inverse"
+            }
+          )
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    VideoToggle,
+    {
+      control,
+      state: stateProp,
+      defaultState,
+      onStateChange,
+      className,
+      type,
+      ...props
+    }
+  );
+}
+function VideoToggle({
+  control,
+  state: stateProp,
+  defaultState,
+  onStateChange,
+  className,
+  ...props
+}) {
+  const labels = useMediCoreLabels();
+  const controlled = stateProp !== void 0;
+  const [uncontrolledState, setUncontrolledState] = useState(defaultState);
+  const state = stateProp ?? uncontrolledState;
+  const off = state === "off";
+  const label = control === "microphone" ? off ? labels.videoUnmuteMicrophone : labels.videoMuteMicrophone : off ? labels.videoTurnOnCamera : labels.videoTurnOffCamera;
+  const Icon = control === "microphone" ? off ? MicrophoneOff01Icon : Microphone01Icon : off ? VideoRecorderOffIcon : VideoRecorderIcon;
+  return /* @__PURE__ */ jsx(
+    Toggle,
+    {
+      "data-slot": "video-control-button",
+      "data-control": control,
+      "data-state": state,
+      pressed: off,
+      onPressedChange: (pressed) => {
+        const next = pressed ? "off" : "on";
+        if (!controlled) {
+          setUncontrolledState(next);
+        }
+        onStateChange?.(next);
+      },
+      "aria-label": label,
+      className: cn(videoControlButtonVariants({ state }), className),
+      ...props,
+      children: /* @__PURE__ */ jsx(Icon, {})
+    }
+  );
+}
+export {
+  VideoControlButton,
+  videoControlButtonVariants
+};
+//# sourceMappingURL=video-control-button.js.map

package/dist/components/video/video-control-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"video-control-button.js","sources":["../../../src/components/video/video-control-button.tsx"],"sourcesContent":["import { Button as BaseButton } from \"@base-ui/react/button\";\nimport { Toggle } from \"@base-ui/react/toggle\";\nimport { cva } from \"class-variance-authority\";\nimport { type ComponentProps, useState } from \"react\";\n\nimport {\n  MessageIcon,\n  Microphone01Icon,\n  MicrophoneOff01Icon,\n  VideoRecorderIcon,\n  VideoRecorderOffIcon,\n} from \"../../icons\";\nimport { cn } from \"../../lib/cn\";\nimport { useMediCoreLabels } from \"../../provider\";\n\nexport type VideoControl = \"microphone\" | \"camera\" | \"chat\";\n\n/** `on`: the device works · `off`: muted microphone / camera turned off. */\nexport type VideoControlState = \"on\" | \"off\";\n\nexport const videoControlButtonVariants = cva(\n  [\n    \"relative inline-flex size-11 shrink-0 cursor-pointer items-center justify-center rounded-xl\",\n    \"text-text-inverse transition-colors focus-ring [&_svg]:size-icon-md\",\n    \"data-disabled:cursor-not-allowed\",\n  ],\n  {\n    variants: {\n      state: {\n        on: \"border border-border-inverse bg-surface-inverse\",\n        off: \"bg-error-strong\",\n      },\n    },\n    defaultVariants: {\n      state: \"on\",\n    },\n  },\n);\n\nexport interface VideoControlButtonProps\n  extends Omit<ComponentProps<\"button\">, \"children\" | \"value\"> {\n  control: VideoControl;\n  /**\n   * Microphone and camera. Controlled: pass it with `onStateChange`. `chat` has no\n   * off state: it opens the chat.\n   */\n  state?: VideoControlState;\n  /** Uncontrolled initial state. Default `on`. */\n  defaultState?: VideoControlState;\n  onStateChange?: (state: VideoControlState) => void;\n  /** `chat` only: new messages. Shows the red dot and says it in the button's name. */\n  unreadCount?: number;\n}\n\n/**\n * Button over the video: microphone, camera and (on mobile) chat. 44×44 drawn:\n * over the video there is no label next to it to extend the hit area.\n *\n * - On: `surface-inverse` fill. Off: `error-strong` fill AND the crossed-out icon —\n *   colour is never the only cue. White icon in both, over any image (the button\n *   is opaque).\n * - Microphone and camera are toggle buttons (`aria-pressed`, pressed = muted /\n *   camera off) and their name says the action: \"Silenciar micrófono\" / \"Activar\n *   micrófono\", \"Apagar cámara\" / \"Encender cámara\".\n * - Chat is a plain button: \"Abrir chat, 1 mensaje nuevo\".\n */\nexport function VideoControlButton({\n  control,\n  state: stateProp,\n  defaultState = \"on\",\n  onStateChange,\n  unreadCount = 0,\n  className,\n  type = \"button\",\n  ...props\n}: VideoControlButtonProps): React.JSX.Element {\n  const labels = useMediCoreLabels();\n\n  if (control === \"chat\") {\n    const unread = unreadCount > 0;\n    return (\n      <BaseButton\n        data-slot=\"video-control-button\"\n        data-control={control}\n        type={type}\n        aria-label={\n          unread\n            ? `${labels.videoOpenChat}, ${labels.chatNewMessages(unreadCount)}`\n            : labels.videoOpenChat\n        }\n        className={cn(videoControlButtonVariants({ state: \"on\" }), className)}\n        {...props}\n      >\n        <MessageIcon />\n        {unread && (\n          <span\n            data-slot=\"video-control-button-unread\"\n            className=\"absolute top-1 right-1 size-2.5 rounded-full bg-error ring-2 ring-text-inverse\"\n          />\n        )}\n      </BaseButton>\n    );\n  }\n\n  return (\n    <VideoToggle\n      control={control}\n      state={stateProp}\n      defaultState={defaultState}\n      onStateChange={onStateChange}\n      className={className}\n      type={type}\n      {...props}\n    />\n  );\n}\n\ninterface VideoToggleProps\n  extends Omit<VideoControlButtonProps, \"control\" | \"unreadCount\"> {\n  control: Exclude<VideoControl, \"chat\">;\n  defaultState: VideoControlState;\n}\n\nfunction VideoToggle({\n  control,\n  state: stateProp,\n  defaultState,\n  onStateChange,\n  className,\n  ...props\n}: VideoToggleProps): React.JSX.Element {\n  const labels = useMediCoreLabels();\n  const controlled = stateProp !== undefined;\n  const [uncontrolledState, setUncontrolledState] = useState(defaultState);\n  const state = stateProp ?? uncontrolledState;\n  const off = state === \"off\";\n\n  const label =\n    control === \"microphone\"\n      ? off\n        ? labels.videoUnmuteMicrophone\n        : labels.videoMuteMicrophone\n      : off\n        ? labels.videoTurnOnCamera\n        : labels.videoTurnOffCamera;\n\n  const Icon =\n    control === \"microphone\"\n      ? off\n        ? MicrophoneOff01Icon\n        : Microphone01Icon\n      : off\n        ? VideoRecorderOffIcon\n        : VideoRecorderIcon;\n\n  return (\n    <Toggle\n      data-slot=\"video-control-button\"\n      data-control={control}\n      data-state={state}\n      pressed={off}\n      onPressedChange={(pressed) => {\n        const next: VideoControlState = pressed ? \"off\" : \"on\";\n        if (!controlled) {\n          setUncontrolledState(next);\n        }\n        onStateChange?.(next);\n      }}\n      aria-label={label}\n      className={cn(videoControlButtonVariants({ state }), className)}\n      {...props}\n    >\n      <Icon />\n    </Toggle>\n  );\n}\n"],"names":["BaseButton"],"mappings":";;;;;;;;;;;;AAoBO,MAAM,6BAA6B;AAAA,EACxC;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAAA,EAEF;AAAA,IACE,UAAU;AAAA,MACR,OAAO;AAAA,QACL,IAAI;AAAA,QACJ,KAAK;AAAA,MAAA;AAAA,IACP;AAAA,IAEF,iBAAiB;AAAA,MACf,OAAO;AAAA,IAAA;AAAA,EACT;AAEJ;AA6BO,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA,OAAO;AAAA,EACP,eAAe;AAAA,EACf;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA,OAAO;AAAA,EACP,GAAG;AACL,GAA+C;AAC7C,QAAM,SAAS,kBAAA;AAEf,MAAI,YAAY,QAAQ;AACtB,UAAM,SAAS,cAAc;AAC7B,WACE;AAAA,MAACA;AAAAA,MAAA;AAAA,QACC,aAAU;AAAA,QACV,gBAAc;AAAA,QACd;AAAA,QACA,cACE,SACI,GAAG,OAAO,aAAa,KAAK,OAAO,gBAAgB,WAAW,CAAC,KAC/D,OAAO;AAAA,QAEb,WAAW,GAAG,2BAA2B,EAAE,OAAO,KAAA,CAAM,GAAG,SAAS;AAAA,QACnE,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAA,oBAAC,aAAA,EAAY;AAAA,UACZ,UACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,aAAU;AAAA,cACV,WAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QACZ;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AAEA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;AAQA,SAAS,YAAY;AAAA,EACnB;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAwC;AACtC,QAAM,SAAS,kBAAA;AACf,QAAM,aAAa,cAAc;AACjC,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,SAAS,YAAY;AACvE,QAAM,QAAQ,aAAa;AAC3B,QAAM,MAAM,UAAU;AAEtB,QAAM,QACJ,YAAY,eACR,MACE,OAAO,wBACP,OAAO,sBACT,MACE,OAAO,oBACP,OAAO;AAEf,QAAM,OACJ,YAAY,eACR,MACE,sBACA,mBACF,MACE,uBACA;AAER,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,gBAAc;AAAA,MACd,cAAY;AAAA,MACZ,SAAS;AAAA,MACT,iBAAiB,CAAC,YAAY;AAC5B,cAAM,OAA0B,UAAU,QAAQ;AAClD,YAAI,CAAC,YAAY;AACf,+BAAqB,IAAI;AAAA,QAC3B;AACA,wBAAgB,IAAI;AAAA,MACtB;AAAA,MACA,cAAY;AAAA,MACZ,WAAW,GAAG,2BAA2B,EAAE,MAAA,CAAO,GAAG,SAAS;AAAA,MAC7D,GAAG;AAAA,MAEJ,8BAAC,MAAA,CAAA,CAAK;AAAA,IAAA;AAAA,EAAA;AAGZ;"}

package/dist/components/video/video-label.d.ts

@@ -0,0 +1,14 @@
+import type { ComponentProps } from "react";
+export interface VideoLabelProps extends ComponentProps<"span"> {
+    /**
+     * The call's duration ("2:37"): tabular figures so it doesn't jump, and
+     * `role="timer"` without `aria-live`, so it isn't announced every second.
+     */
+    timer?: boolean;
+}
+/**
+ * Label over the video: the professional's name or the call's duration. Opaque
+ * `brand` fill with white text (10.32:1 light, 6.55:1 dark): legible over any
+ * image.
+ */
+export declare function VideoLabel({ timer, className, ...props }: VideoLabelProps): React.JSX.Element;

package/dist/components/video/video-label.js

@@ -0,0 +1,25 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/cn.js";
+function VideoLabel({
+  timer = false,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "video-label",
+      role: timer ? "timer" : void 0,
+      className: cn(
+        "inline-flex w-fit shrink-0 items-center whitespace-nowrap rounded-md bg-brand px-2 py-1 text-label-strong text-text-inverse",
+        timer && "tabular-nums",
+        className
+      ),
+      ...props
+    }
+  );
+}
+export {
+  VideoLabel
+};
+//# sourceMappingURL=video-label.js.map

package/dist/components/video/video-label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"video-label.js","sources":["../../../src/components/video/video-label.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\n\nimport { cn } from \"../../lib/cn\";\n\nexport interface VideoLabelProps extends ComponentProps<\"span\"> {\n  /**\n   * The call's duration (\"2:37\"): tabular figures so it doesn't jump, and\n   * `role=\"timer\"` without `aria-live`, so it isn't announced every second.\n   */\n  timer?: boolean;\n}\n\n/**\n * Label over the video: the professional's name or the call's duration. Opaque\n * `brand` fill with white text (10.32:1 light, 6.55:1 dark): legible over any\n * image.\n */\nexport function VideoLabel({\n  timer = false,\n  className,\n  ...props\n}: VideoLabelProps): React.JSX.Element {\n  return (\n    <span\n      data-slot=\"video-label\"\n      role={timer ? \"timer\" : undefined}\n      className={cn(\n        \"inline-flex w-fit shrink-0 items-center whitespace-nowrap rounded-md bg-brand px-2 py-1 text-label-strong text-text-inverse\",\n        timer && \"tabular-nums\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n"],"names":[],"mappings":";;AAiBO,SAAS,WAAW;AAAA,EACzB,QAAQ;AAAA,EACR;AAAA,EACA,GAAG;AACL,GAAuC;AACrC,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,MAAM,QAAQ,UAAU;AAAA,MACxB,WAAW;AAAA,QACT;AAAA,QACA,SAAS;AAAA,QACT;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;"}

package/dist/components/video/video-stage.d.ts

@@ -0,0 +1,39 @@
+import type { ComponentProps, ReactNode } from "react";
+export type VideoStageLayout = "desktop" | "mobile";
+/** `waiting`: the waiting room (only your camera) · `in-call`: the consultation. */
+export type VideoStagePhase = "in-call" | "waiting";
+export interface VideoStageProps extends ComponentProps<"section"> {
+    /** Default `desktop`. `mobile` puts the video full-bleed and fills the screen. */
+    layout?: VideoStageLayout;
+    /** Default `in-call`. */
+    phase?: VideoStagePhase;
+    /** In call: `<VideoTile participant="remote" />`. It fills the stage. */
+    remote?: ReactNode;
+    /**
+     * `<VideoTile participant="self" />`. In call it is the thumbnail in the top-right
+     * corner; in the waiting room it fills the stage, so you can check you are seen
+     * and heard before the professional comes in.
+     */
+    self: ReactNode;
+    /** In call: the professional's name, in a `VideoLabel` top-left. */
+    name?: ReactNode;
+    /** In call: the duration ("2:37"), in a timer `VideoLabel` next to the name. */
+    duration?: ReactNode;
+    /**
+     * `VideoControlButton`s: microphone and camera (plus chat on mobile). Bottom-left
+     * in call, centred in the waiting room. No hang-up button, on purpose: the
+     * professional ends the call.
+     */
+    controls?: ReactNode;
+}
+/**
+ * The video call canvas, already assembled: remote video, your thumbnail, labels
+ * and controls. It is a region named "Videollamada".
+ *
+ * - Desktop: the chat lives outside the video (`ChatLauncher`).
+ * - Mobile: full-bleed, the chat opens from the canvas (`VideoControlButton
+ *   control="chat"`), and the overlays keep clear of the notch and the home bar.
+ *
+ * Pending in Figma: the reconnecting state (when the signal drops).
+ */
+export declare function VideoStage({ layout, phase, remote, self, name, duration, controls, className, ...props }: VideoStageProps): React.JSX.Element;

package/dist/components/video/video-stage.js

@@ -0,0 +1,96 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { cn } from "../../lib/cn.js";
+import { VideoLabel } from "./video-label.js";
+import { useMediCoreLabels } from "../../provider/medicore-provider.js";
+const layouts = {
+  desktop: {
+    "in-call": "aspect-[16/10] w-full rounded-2xl",
+    waiting: "aspect-video w-full rounded-xl"
+  },
+  mobile: {
+    "in-call": "h-dvh w-full",
+    waiting: "aspect-[343/460] w-full rounded-xl"
+  }
+};
+function VideoStage({
+  layout = "desktop",
+  phase = "in-call",
+  remote,
+  self,
+  name,
+  duration,
+  controls,
+  className,
+  ...props
+}) {
+  const labels = useMediCoreLabels();
+  const mobile = layout === "mobile";
+  const waiting = phase === "waiting";
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "data-slot": "video-stage",
+      "data-layout": layout,
+      "data-phase": phase,
+      "aria-label": labels.videoCall,
+      className: cn(
+        "relative overflow-hidden bg-brand-dark",
+        layouts[layout][phase],
+        className
+      ),
+      ...props,
+      children: [
+        waiting ? /* @__PURE__ */ jsx("div", { className: "absolute inset-0 *:size-full", children: self }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "absolute inset-0 *:size-full",
+                mobile && "*:rounded-none"
+              ),
+              children: remote
+            }
+          ),
+          (name || duration) && /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "absolute left-4 flex flex-wrap gap-1",
+                mobile ? "top-[calc(env(safe-area-inset-top)+--spacing(4))] max-w-[calc(100%-var(--spacing)*42)]" : "top-4 max-w-[calc(100%-var(--spacing)*57)]"
+              ),
+              children: [
+                name && /* @__PURE__ */ jsx(VideoLabel, { children: name }),
+                duration && /* @__PURE__ */ jsx(VideoLabel, { timer: true, children: duration })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "absolute right-4 *:size-full",
+                mobile ? "top-[calc(env(safe-area-inset-top)+--spacing(4))] h-50 w-30" : "top-4 h-30 w-45"
+              ),
+              children: self
+            }
+          )
+        ] }),
+        controls && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "absolute flex gap-2",
+              waiting ? "left-1/2 -translate-x-1/2" : "left-4",
+              mobile && !waiting ? "bottom-[calc(env(safe-area-inset-bottom)+--spacing(4))]" : "bottom-4"
+            ),
+            children: controls
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  VideoStage
+};
+//# sourceMappingURL=video-stage.js.map

package/dist/components/video/video-stage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"video-stage.js","sources":["../../../src/components/video/video-stage.tsx"],"sourcesContent":["import type { ComponentProps, ReactNode } from \"react\";\n\nimport { cn } from \"../../lib/cn\";\nimport { useMediCoreLabels } from \"../../provider\";\nimport { VideoLabel } from \"./video-label\";\n\nexport type VideoStageLayout = \"desktop\" | \"mobile\";\n\n/** `waiting`: the waiting room (only your camera) · `in-call`: the consultation. */\nexport type VideoStagePhase = \"in-call\" | \"waiting\";\n\nexport interface VideoStageProps extends ComponentProps<\"section\"> {\n  /** Default `desktop`. `mobile` puts the video full-bleed and fills the screen. */\n  layout?: VideoStageLayout;\n  /** Default `in-call`. */\n  phase?: VideoStagePhase;\n  /** In call: `<VideoTile participant=\"remote\" />`. It fills the stage. */\n  remote?: ReactNode;\n  /**\n   * `<VideoTile participant=\"self\" />`. In call it is the thumbnail in the top-right\n   * corner; in the waiting room it fills the stage, so you can check you are seen\n   * and heard before the professional comes in.\n   */\n  self: ReactNode;\n  /** In call: the professional's name, in a `VideoLabel` top-left. */\n  name?: ReactNode;\n  /** In call: the duration (\"2:37\"), in a timer `VideoLabel` next to the name. */\n  duration?: ReactNode;\n  /**\n   * `VideoControlButton`s: microphone and camera (plus chat on mobile). Bottom-left\n   * in call, centred in the waiting room. No hang-up button, on purpose: the\n   * professional ends the call.\n   */\n  controls?: ReactNode;\n}\n\nconst layouts = {\n  desktop: {\n    \"in-call\": \"aspect-[16/10] w-full rounded-2xl\",\n    waiting: \"aspect-video w-full rounded-xl\",\n  },\n  mobile: {\n    \"in-call\": \"h-dvh w-full\",\n    waiting: \"aspect-[343/460] w-full rounded-xl\",\n  },\n} as const;\n\n/**\n * The video call canvas, already assembled: remote video, your thumbnail, labels\n * and controls. It is a region named \"Videollamada\".\n *\n * - Desktop: the chat lives outside the video (`ChatLauncher`).\n * - Mobile: full-bleed, the chat opens from the canvas (`VideoControlButton\n *   control=\"chat\"`), and the overlays keep clear of the notch and the home bar.\n *\n * Pending in Figma: the reconnecting state (when the signal drops).\n */\nexport function VideoStage({\n  layout = \"desktop\",\n  phase = \"in-call\",\n  remote,\n  self,\n  name,\n  duration,\n  controls,\n  className,\n  ...props\n}: VideoStageProps): React.JSX.Element {\n  const labels = useMediCoreLabels();\n  const mobile = layout === \"mobile\";\n  const waiting = phase === \"waiting\";\n\n  return (\n    <section\n      data-slot=\"video-stage\"\n      data-layout={layout}\n      data-phase={phase}\n      aria-label={labels.videoCall}\n      className={cn(\n        \"relative overflow-hidden bg-brand-dark\",\n        layouts[layout][phase],\n        className,\n      )}\n      {...props}\n    >\n      {waiting ? (\n        <div className=\"absolute inset-0 *:size-full\">{self}</div>\n      ) : (\n        <>\n          <div\n            className={cn(\n              \"absolute inset-0 *:size-full\",\n              mobile && \"*:rounded-none\",\n            )}\n          >\n            {remote}\n          </div>\n          {(name || duration) && (\n            <div\n              className={cn(\n                \"absolute left-4 flex flex-wrap gap-1\",\n                mobile\n                  ? \"top-[calc(env(safe-area-inset-top)+--spacing(4))] max-w-[calc(100%-var(--spacing)*42)]\"\n                  : \"top-4 max-w-[calc(100%-var(--spacing)*57)]\",\n              )}\n            >\n              {name && <VideoLabel>{name}</VideoLabel>}\n              {duration && <VideoLabel timer>{duration}</VideoLabel>}\n            </div>\n          )}\n          <div\n            className={cn(\n              \"absolute right-4 *:size-full\",\n              mobile\n                ? \"top-[calc(env(safe-area-inset-top)+--spacing(4))] h-50 w-30\"\n                : \"top-4 h-30 w-45\",\n            )}\n          >\n            {self}\n          </div>\n        </>\n      )}\n      {controls && (\n        <div\n          className={cn(\n            \"absolute flex gap-2\",\n            waiting ? \"left-1/2 -translate-x-1/2\" : \"left-4\",\n            mobile && !waiting\n              ? \"bottom-[calc(env(safe-area-inset-bottom)+--spacing(4))]\"\n              : \"bottom-4\",\n          )}\n        >\n          {controls}\n        </div>\n      )}\n    </section>\n  );\n}\n"],"names":[],"mappings":";;;;AAoCA,MAAM,UAAU;AAAA,EACd,SAAS;AAAA,IACP,WAAW;AAAA,IACX,SAAS;AAAA,EAAA;AAAA,EAEX,QAAQ;AAAA,IACN,WAAW;AAAA,IACX,SAAS;AAAA,EAAA;AAEb;AAYO,SAAS,WAAW;AAAA,EACzB,SAAS;AAAA,EACT,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAuC;AACrC,QAAM,SAAS,kBAAA;AACf,QAAM,SAAS,WAAW;AAC1B,QAAM,UAAU,UAAU;AAE1B,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,eAAa;AAAA,MACb,cAAY;AAAA,MACZ,cAAY,OAAO;AAAA,MACnB,WAAW;AAAA,QACT;AAAA,QACA,QAAQ,MAAM,EAAE,KAAK;AAAA,QACrB;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,MAEH,UAAA;AAAA,QAAA,8BACE,OAAA,EAAI,WAAU,gCAAgC,UAAA,KAAA,CAAK,IAEpD,qBAAA,UAAA,EACE,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW;AAAA,gBACT;AAAA,gBACA,UAAU;AAAA,cAAA;AAAA,cAGX,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,WAED,QAAQ,aACR;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW;AAAA,gBACT;AAAA,gBACA,SACI,2FACA;AAAA,cAAA;AAAA,cAGL,UAAA;AAAA,gBAAA,QAAQ,oBAAC,cAAY,UAAA,KAAA,CAAK;AAAA,gBAC1B,YAAY,oBAAC,YAAA,EAAW,OAAK,MAAE,UAAA,SAAA,CAAS;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA;AAAA,UAG7C;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW;AAAA,gBACT;AAAA,gBACA,SACI,gEACA;AAAA,cAAA;AAAA,cAGL,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACH,GACF;AAAA,QAED,YACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA,UAAU,8BAA8B;AAAA,cACxC,UAAU,CAAC,UACP,4DACA;AAAA,YAAA;AAAA,YAGL,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAAA;AAIR;"}

package/dist/components/video/video-tile.d.ts

@@ -0,0 +1,37 @@
+import type { ComponentProps, ReactNode } from "react";
+/**
+ * Figma `Role`. Renamed to `participant` in code: `role` is the ARIA attribute.
+ * `remote`: the professional (large) · `self`: your camera (thumbnail).
+ */
+export type VideoParticipant = "remote" | "self";
+export type VideoCamera = "on" | "off";
+export declare const videoTileVariants: (props?: ({
+    participant?: "remote" | "self" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface VideoTileProps extends ComponentProps<"div"> {
+    /** Default `remote`. */
+    participant?: VideoParticipant;
+    /**
+     * `on`: `children` (the `<video>` or an `<img>`) fills the tile, full-bleed.
+     * `off`: avatar, name and "Cámara desactivada" — without it, when the professional
+     * turns the camera off the patient sees a black box and thinks the call dropped.
+     */
+    camera?: VideoCamera;
+    /** The stream: a `<video autoPlay playsInline muted />` or a still `<img alt="" />`. */
+    children?: ReactNode;
+    /** Camera off: `<Avatar size={56} />` for the remote, `size={40}` for yourself. */
+    avatar?: ReactNode;
+    /** Camera off, remote only: "Dra. María Rodríguez". */
+    name?: ReactNode;
+    /** Camera off: overrides "Cámara desactivada" / "Cámara apagada". */
+    status?: ReactNode;
+}
+/**
+ * One video of the call. The fill is `brand-dark` with inverse text, the same in
+ * light and dark mode: the video is just as dark in both. The content is centred,
+ * so size it freely; `VideoStage` places the tiles.
+ *
+ * Mobile: the remote goes full-bleed (`className="rounded-none"`), the self view is
+ * 120×200 upright.
+ */
+export declare function VideoTile({ participant, camera, children, avatar, name, status, className, ...props }: VideoTileProps): React.JSX.Element;