@mediquo/medicore 0.3.1 → 0.4.1

package/dist/components/auth-panel/auth-panel.d.ts

@@ -5,6 +5,12 @@ export interface AuthPanelProps extends Omit<ComponentProps<"div">, "children">
      * (`scrim-brand`) always goes on top so the white headline reads over any image.
      */
     imageSrc?: string;
+    /**
+     * A full-bleed decoration drawn with tokens instead of (or over) the photo: the
+     * `BrandBubbles`. It sits above the veil and under the headline, hidden from
+     * assistive technology.
+     */
+    decoration?: ReactNode;
     /**
      * Optional context for the step: "Escribe tus datos exactamente como figuran en tu
      * documento oficial." Don't repeat the form's title here. It is a `<p>`, not a
@@ -16,5 +22,8 @@ export interface AuthPanelProps extends Omit<ComponentProps<"div">, "children">
  * Left panel of the access screens on desktop (≥1024px), 560px wide and full height.
  * It doesn't exist on mobile: the form takes the whole screen, so hide it below
  * `lg` in the layout (`className="hidden lg:flex"`).
+ *
+ * Without a photo, give it a `decoration` (`BrandBubbles`): a flat brand-dark block
+ * next to a form reads as unfinished.
  */
-export declare function AuthPanel({ imageSrc, headline, className, ...props }: AuthPanelProps): React.JSX.Element;
+export declare function AuthPanel({ imageSrc, decoration, headline, className, ...props }: AuthPanelProps): React.JSX.Element;

package/dist/components/auth-panel/auth-panel.js

@@ -2,6 +2,7 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { cn } from "../../lib/cn.js";
 function AuthPanel({
   imageSrc,
+  decoration,
   headline,
   className,
   ...props
@@ -25,6 +26,15 @@ function AuthPanel({
           }
         ),
         /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "absolute inset-0 bg-scrim-brand" }),
+        decoration && /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": true,
+            "data-slot": "auth-panel-decoration",
+            className: "pointer-events-none absolute inset-0 overflow-hidden",
+            children: decoration
+          }
+        ),
         headline && /* @__PURE__ */ jsx("p", { className: "relative text-heading-h2 text-text-inverse", children: headline })
       ]
     }

package/dist/components/auth-panel/auth-panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"auth-panel.js","sources":["../../../src/components/auth-panel/auth-panel.tsx"],"sourcesContent":["import type { ComponentProps, ReactNode } from \"react\";\n\nimport { cn } from \"../../lib/cn\";\n\nexport interface AuthPanelProps\n  extends Omit<ComponentProps<\"div\">, \"children\"> {\n  /**\n   * The photo, full-bleed. It is decorative: it renders with `alt=\"\"`. The brand veil\n   * (`scrim-brand`) always goes on top so the white headline reads over any image.\n   */\n  imageSrc?: string;\n  /**\n   * Optional context for the step: \"Escribe tus datos exactamente como figuran en tu\n   * documento oficial.\" Don't repeat the form's title here. It is a `<p>`, not a\n   * heading.\n   */\n  headline?: ReactNode;\n}\n\n/**\n * Left panel of the access screens on desktop (≥1024px), 560px wide and full height.\n * It doesn't exist on mobile: the form takes the whole screen, so hide it below\n * `lg` in the layout (`className=\"hidden lg:flex\"`).\n */\nexport function AuthPanel({\n  imageSrc,\n  headline,\n  className,\n  ...props\n}: AuthPanelProps): React.JSX.Element {\n  return (\n    <div\n      data-slot=\"auth-panel\"\n      className={cn(\n        \"relative flex w-140 shrink-0 flex-col justify-center overflow-hidden bg-brand-dark px-16\",\n        className,\n      )}\n      {...props}\n    >\n      {imageSrc && (\n        <img\n          src={imageSrc}\n          alt=\"\"\n          className=\"absolute inset-0 size-full object-cover\"\n        />\n      )}\n      <div aria-hidden className=\"absolute inset-0 bg-scrim-brand\" />\n      {headline && (\n        <p className=\"relative text-heading-h2 text-text-inverse\">{headline}</p>\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;AAwBO,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAsC;AACpC,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,MAEH,UAAA;AAAA,QAAA,YACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAK;AAAA,YACL,KAAI;AAAA,YACJ,WAAU;AAAA,UAAA;AAAA,QAAA;AAAA,QAGd,oBAAC,OAAA,EAAI,eAAW,MAAC,WAAU,mCAAkC;AAAA,QAC5D,YACC,oBAAC,KAAA,EAAE,WAAU,8CAA8C,UAAA,SAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAI5E;"}
+{"version":3,"file":"auth-panel.js","sources":["../../../src/components/auth-panel/auth-panel.tsx"],"sourcesContent":["import type { ComponentProps, ReactNode } from \"react\";\n\nimport { cn } from \"../../lib/cn\";\n\nexport interface AuthPanelProps\n  extends Omit<ComponentProps<\"div\">, \"children\"> {\n  /**\n   * The photo, full-bleed. It is decorative: it renders with `alt=\"\"`. The brand veil\n   * (`scrim-brand`) always goes on top so the white headline reads over any image.\n   */\n  imageSrc?: string;\n  /**\n   * A full-bleed decoration drawn with tokens instead of (or over) the photo: the\n   * `BrandBubbles`. It sits above the veil and under the headline, hidden from\n   * assistive technology.\n   */\n  decoration?: ReactNode;\n  /**\n   * Optional context for the step: \"Escribe tus datos exactamente como figuran en tu\n   * documento oficial.\" Don't repeat the form's title here. It is a `<p>`, not a\n   * heading.\n   */\n  headline?: ReactNode;\n}\n\n/**\n * Left panel of the access screens on desktop (≥1024px), 560px wide and full height.\n * It doesn't exist on mobile: the form takes the whole screen, so hide it below\n * `lg` in the layout (`className=\"hidden lg:flex\"`).\n *\n * Without a photo, give it a `decoration` (`BrandBubbles`): a flat brand-dark block\n * next to a form reads as unfinished.\n */\nexport function AuthPanel({\n  imageSrc,\n  decoration,\n  headline,\n  className,\n  ...props\n}: AuthPanelProps): React.JSX.Element {\n  return (\n    <div\n      data-slot=\"auth-panel\"\n      className={cn(\n        \"relative flex w-140 shrink-0 flex-col justify-center overflow-hidden bg-brand-dark px-16\",\n        className,\n      )}\n      {...props}\n    >\n      {imageSrc && (\n        <img\n          src={imageSrc}\n          alt=\"\"\n          className=\"absolute inset-0 size-full object-cover\"\n        />\n      )}\n      <div aria-hidden className=\"absolute inset-0 bg-scrim-brand\" />\n      {decoration && (\n        <div\n          aria-hidden\n          data-slot=\"auth-panel-decoration\"\n          className=\"pointer-events-none absolute inset-0 overflow-hidden\"\n        >\n          {decoration}\n        </div>\n      )}\n      {headline && (\n        <p className=\"relative text-heading-h2 text-text-inverse\">{headline}</p>\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;AAiCO,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAsC;AACpC,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,MAEH,UAAA;AAAA,QAAA,YACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAK;AAAA,YACL,KAAI;AAAA,YACJ,WAAU;AAAA,UAAA;AAAA,QAAA;AAAA,QAGd,oBAAC,OAAA,EAAI,eAAW,MAAC,WAAU,mCAAkC;AAAA,QAC5D,cACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,eAAW;AAAA,YACX,aAAU;AAAA,YACV,WAAU;AAAA,YAET,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAGJ,YACC,oBAAC,KAAA,EAAE,WAAU,8CAA8C,UAAA,SAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAI5E;"}

package/dist/components/brand-bubbles/brand-bubbles.d.ts

@@ -0,0 +1,18 @@
+import { type ComponentProps } from "react";
+export interface BrandBubblesProps extends Omit<ComponentProps<"svg">, "children"> {
+}
+/**
+ * mediQuo's brand backdrop on a dark brand surface: translucent bubbles that float and
+ * rise, breathing glows, a twinkling constellation and the cross. A seamless loop that
+ * reads like a short video, in the same language as the portal's home hero, for the
+ * `AuthPanel` and any other full-bleed brand surface.
+ *
+ * - Decorative: `aria-hidden`, no pointer events, never carries meaning.
+ * - Fills its parent (`absolute inset-0`, `slice`), so the parent is `relative`
+ *   and clips overflow.
+ * - Coloured with tokens (`text-inverse`, `brand`), so it follows a clinic's brand.
+ * - Motion only under `prefers-reduced-motion: no-preference`; otherwise it is a
+ *   still composition. Transforms and opacity only, with gradients instead of blur
+ *   filters, so it stays smooth on large panels.
+ */
+export declare function BrandBubbles({ className, ...props }: BrandBubblesProps): React.JSX.Element;

package/dist/components/brand-bubbles/brand-bubbles.js

@@ -0,0 +1,163 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useId } from "react";
+import { cn } from "../../lib/cn.js";
+const float = "motion-safe:animate-float";
+const rise = "motion-safe:animate-rise";
+const scaled = "origin-center [transform-box:fill-box]";
+const breathe = cn("motion-safe:animate-breathe", scaled);
+const twinkle = cn("motion-safe:animate-twinkle", scaled);
+const RISING_BUBBLES = [
+  { cx: 70, r: 10, timing: "[animation-duration:15s]" },
+  { cx: 150, r: 22, timing: "[animation-duration:19s] [animation-delay:-11s]" },
+  { cx: 235, r: 7, timing: "[animation-duration:13s] [animation-delay:-4s]" },
+  { cx: 300, r: 16, timing: "[animation-duration:17s] [animation-delay:-8s]" },
+  { cx: 380, r: 9, timing: "[animation-duration:14s] [animation-delay:-2s]" },
+  { cx: 445, r: 26, timing: "[animation-duration:21s] [animation-delay:-15s]" },
+  { cx: 510, r: 12, timing: "[animation-duration:16s] [animation-delay:-6s]" },
+  { cx: 110, r: 6, timing: "[animation-duration:12s] [animation-delay:-9s]" },
+  { cx: 345, r: 5, timing: "[animation-duration:11s] [animation-delay:-5s]" }
+];
+const CONSTELLATION = [
+  { cx: 120, cy: 330, timing: "[animation-delay:0s]" },
+  { cx: 300, cy: 520, timing: "[animation-delay:-0.8s]" },
+  { cx: 380, cy: 420, timing: "[animation-delay:-1.6s]" },
+  { cx: 180, cy: 700, timing: "[animation-delay:-2.4s]" }
+];
+function BrandBubbles({
+  className,
+  ...props
+}) {
+  const glowId = useId();
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: "0 0 560 1024",
+      preserveAspectRatio: "xMidYMid slice",
+      "aria-hidden": "true",
+      focusable: "false",
+      "data-slot": "brand-bubbles",
+      className: cn(
+        "pointer-events-none absolute inset-0 size-full select-none",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("radialGradient", { id: glowId, children: [
+          /* @__PURE__ */ jsx(
+            "stop",
+            {
+              offset: "0%",
+              className: "[stop-color:var(--color-brand)] [stop-opacity:0.6]"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "stop",
+            {
+              offset: "100%",
+              className: "[stop-color:var(--color-brand)] [stop-opacity:0]"
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            cx: "440",
+            cy: "180",
+            r: "320",
+            fill: `url(#${glowId})`,
+            className: cn(breathe, "[animation-duration:11s]")
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            cx: "90",
+            cy: "860",
+            r: "300",
+            fill: `url(#${glowId})`,
+            className: cn(
+              breathe,
+              "[animation-duration:13s] [animation-delay:-5s]"
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs("g", { className: "fill-text-inverse/5", children: [
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              cx: "430",
+              cy: "150",
+              r: "92",
+              className: cn(float, "[animation-duration:12s]")
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              cx: "470",
+              cy: "760",
+              r: "140",
+              className: cn(
+                float,
+                "[animation-duration:16s] [animation-delay:-6s]"
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              cx: "120",
+              cy: "330",
+              r: "62",
+              className: cn(
+                float,
+                "[animation-duration:10s] [animation-delay:-3s]"
+              )
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("g", { "data-slot": "brand-bubbles-rising", className: "fill-text-inverse/15", children: RISING_BUBBLES.map((bubble) => /* @__PURE__ */ jsx(
+          "circle",
+          {
+            cx: bubble.cx,
+            cy: "1080",
+            r: bubble.r,
+            className: cn(rise, bubble.timing)
+          },
+          bubble.cx
+        )) }),
+        /* @__PURE__ */ jsxs(
+          "g",
+          {
+            className: cn(float, "[animation-duration:18s] [animation-delay:-4s]"),
+            children: [
+              /* @__PURE__ */ jsxs("g", { className: "stroke-text-inverse opacity-15", strokeWidth: "1", children: [
+                /* @__PURE__ */ jsx("path", { d: "M120 330 L300 520" }),
+                /* @__PURE__ */ jsx("path", { d: "M300 520 L380 420" }),
+                /* @__PURE__ */ jsx("path", { d: "M300 520 L180 700" })
+              ] }),
+              /* @__PURE__ */ jsx("g", { className: "fill-text-inverse/40", children: CONSTELLATION.map((dot) => /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  cx: dot.cx,
+                  cy: dot.cy,
+                  r: "5",
+                  className: cn(twinkle, dot.timing)
+                },
+                `${dot.cx}-${dot.cy}`
+              )) }),
+              /* @__PURE__ */ jsxs("g", { className: "fill-text-inverse/25", children: [
+                /* @__PURE__ */ jsx("rect", { x: "412", y: "258", width: "36", height: "10", rx: "5" }),
+                /* @__PURE__ */ jsx("rect", { x: "425", y: "245", width: "10", height: "36", rx: "5" })
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  BrandBubbles
+};
+//# sourceMappingURL=brand-bubbles.js.map

package/dist/components/brand-bubbles/brand-bubbles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"brand-bubbles.js","sources":["../../../src/components/brand-bubbles/brand-bubbles.tsx"],"sourcesContent":["import { type ComponentProps, useId } from \"react\";\n\nimport { cn } from \"../../lib/cn\";\n\nexport interface BrandBubblesProps\n  extends Omit<ComponentProps<\"svg\">, \"children\"> {}\n\nconst float = \"motion-safe:animate-float\";\nconst rise = \"motion-safe:animate-rise\";\nconst scaled = \"origin-center [transform-box:fill-box]\";\nconst breathe = cn(\"motion-safe:animate-breathe\", scaled);\nconst twinkle = cn(\"motion-safe:animate-twinkle\", scaled);\n\nconst RISING_BUBBLES = [\n  { cx: 70, r: 10, timing: \"[animation-duration:15s]\" },\n  { cx: 150, r: 22, timing: \"[animation-duration:19s] [animation-delay:-11s]\" },\n  { cx: 235, r: 7, timing: \"[animation-duration:13s] [animation-delay:-4s]\" },\n  { cx: 300, r: 16, timing: \"[animation-duration:17s] [animation-delay:-8s]\" },\n  { cx: 380, r: 9, timing: \"[animation-duration:14s] [animation-delay:-2s]\" },\n  { cx: 445, r: 26, timing: \"[animation-duration:21s] [animation-delay:-15s]\" },\n  { cx: 510, r: 12, timing: \"[animation-duration:16s] [animation-delay:-6s]\" },\n  { cx: 110, r: 6, timing: \"[animation-duration:12s] [animation-delay:-9s]\" },\n  { cx: 345, r: 5, timing: \"[animation-duration:11s] [animation-delay:-5s]\" },\n] as const;\n\nconst CONSTELLATION = [\n  { cx: 120, cy: 330, timing: \"[animation-delay:0s]\" },\n  { cx: 300, cy: 520, timing: \"[animation-delay:-0.8s]\" },\n  { cx: 380, cy: 420, timing: \"[animation-delay:-1.6s]\" },\n  { cx: 180, cy: 700, timing: \"[animation-delay:-2.4s]\" },\n] as const;\n\n/**\n * mediQuo's brand backdrop on a dark brand surface: translucent bubbles that float and\n * rise, breathing glows, a twinkling constellation and the cross. A seamless loop that\n * reads like a short video, in the same language as the portal's home hero, for the\n * `AuthPanel` and any other full-bleed brand surface.\n *\n * - Decorative: `aria-hidden`, no pointer events, never carries meaning.\n * - Fills its parent (`absolute inset-0`, `slice`), so the parent is `relative`\n *   and clips overflow.\n * - Coloured with tokens (`text-inverse`, `brand`), so it follows a clinic's brand.\n * - Motion only under `prefers-reduced-motion: no-preference`; otherwise it is a\n *   still composition. Transforms and opacity only, with gradients instead of blur\n *   filters, so it stays smooth on large panels.\n */\nexport function BrandBubbles({\n  className,\n  ...props\n}: BrandBubblesProps): React.JSX.Element {\n  const glowId = useId();\n\n  return (\n    <svg\n      viewBox=\"0 0 560 1024\"\n      preserveAspectRatio=\"xMidYMid slice\"\n      aria-hidden=\"true\"\n      focusable=\"false\"\n      data-slot=\"brand-bubbles\"\n      className={cn(\n        \"pointer-events-none absolute inset-0 size-full select-none\",\n        className,\n      )}\n      {...props}\n    >\n      <defs>\n        <radialGradient id={glowId}>\n          <stop\n            offset=\"0%\"\n            className=\"[stop-color:var(--color-brand)] [stop-opacity:0.6]\"\n          />\n          <stop\n            offset=\"100%\"\n            className=\"[stop-color:var(--color-brand)] [stop-opacity:0]\"\n          />\n        </radialGradient>\n      </defs>\n\n      <circle\n        cx=\"440\"\n        cy=\"180\"\n        r=\"320\"\n        fill={`url(#${glowId})`}\n        className={cn(breathe, \"[animation-duration:11s]\")}\n      />\n      <circle\n        cx=\"90\"\n        cy=\"860\"\n        r=\"300\"\n        fill={`url(#${glowId})`}\n        className={cn(\n          breathe,\n          \"[animation-duration:13s] [animation-delay:-5s]\",\n        )}\n      />\n\n      <g className=\"fill-text-inverse/5\">\n        <circle\n          cx=\"430\"\n          cy=\"150\"\n          r=\"92\"\n          className={cn(float, \"[animation-duration:12s]\")}\n        />\n        <circle\n          cx=\"470\"\n          cy=\"760\"\n          r=\"140\"\n          className={cn(\n            float,\n            \"[animation-duration:16s] [animation-delay:-6s]\",\n          )}\n        />\n        <circle\n          cx=\"120\"\n          cy=\"330\"\n          r=\"62\"\n          className={cn(\n            float,\n            \"[animation-duration:10s] [animation-delay:-3s]\",\n          )}\n        />\n      </g>\n\n      <g data-slot=\"brand-bubbles-rising\" className=\"fill-text-inverse/15\">\n        {RISING_BUBBLES.map((bubble) => (\n          <circle\n            key={bubble.cx}\n            cx={bubble.cx}\n            cy=\"1080\"\n            r={bubble.r}\n            className={cn(rise, bubble.timing)}\n          />\n        ))}\n      </g>\n\n      <g\n        className={cn(float, \"[animation-duration:18s] [animation-delay:-4s]\")}\n      >\n        <g className=\"stroke-text-inverse opacity-15\" strokeWidth=\"1\">\n          <path d=\"M120 330 L300 520\" />\n          <path d=\"M300 520 L380 420\" />\n          <path d=\"M300 520 L180 700\" />\n        </g>\n        <g className=\"fill-text-inverse/40\">\n          {CONSTELLATION.map((dot) => (\n            <circle\n              key={`${dot.cx}-${dot.cy}`}\n              cx={dot.cx}\n              cy={dot.cy}\n              r=\"5\"\n              className={cn(twinkle, dot.timing)}\n            />\n          ))}\n        </g>\n        <g className=\"fill-text-inverse/25\">\n          <rect x=\"412\" y=\"258\" width=\"36\" height=\"10\" rx=\"5\" />\n          <rect x=\"425\" y=\"245\" width=\"10\" height=\"36\" rx=\"5\" />\n        </g>\n      </g>\n    </svg>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/components/brand-bubbles/index.d.ts

@@ -0,0 +1 @@
+export { BrandBubbles, type BrandBubblesProps } from "./brand-bubbles";

package/dist/index.d.ts

@@ -9,6 +9,7 @@ export * from "./components/avatar";
 export * from "./components/badge";
 export * from "./components/banner";
 export * from "./components/bottom-bar";
+export * from "./components/brand-bubbles";
 export * from "./components/brand-mark";
 export * from "./components/breadcrumb";
 export * from "./components/button";

package/dist/index.js

@@ -11,6 +11,7 @@ import { Avatar, avatarStatusVariants, avatarVariants } from "./components/avata
 import { Badge, badgeVariants } from "./components/badge/badge.js";
 import { Banner } from "./components/banner/banner.js";
 import { BottomBar, BottomBarItem, bottomBarItemVariants } from "./components/bottom-bar/bottom-bar.js";
+import { BrandBubbles } from "./components/brand-bubbles/brand-bubbles.js";
 import { BrandMark } from "./components/brand-mark/brand-mark.js";
 import { Breadcrumb, BreadcrumbItem, BreadcrumbPage } from "./components/breadcrumb/breadcrumb.js";
 import { Button, buttonVariants } from "./components/button/button.js";
@@ -107,6 +108,7 @@ export {
   Banner,
   BottomBar,
   BottomBarItem,
+  BrandBubbles,
   BrandMark,
   Breadcrumb,
   BreadcrumbItem,

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/styles/tokens.css

@@ -50,6 +50,76 @@
   --shadow-lg: 0 8px 16px -2px rgb(10 10 34 / 0.08);
   --shadow-xl: 0 16px 32px -4px rgb(10 10 34 / 0.12);
 
+  /*
+   * Motion for brand backdrops (BrandBubbles), a seamless loop like a short video:
+   * bubbles float on a wide path, small ones rise through the panel, glows breathe and
+   * the constellation twinkles. Transforms and opacity only. Always behind `motion-safe:`.
+   */
+  --animate-drift: float 16s ease-in-out infinite;
+  --animate-float: float 12s ease-in-out infinite;
+  --animate-rise: rise 16s linear infinite;
+  --animate-breathe: breathe 10s ease-in-out infinite alternate;
+  --animate-twinkle: twinkle 3s ease-in-out infinite;
+
+  @keyframes float {
+    0%,
+    100% {
+      transform: translate3d(0, 0, 0);
+    }
+    25% {
+      transform: translate3d(16px, -28px, 0);
+    }
+    50% {
+      transform: translate3d(-8px, -48px, 0);
+    }
+    75% {
+      transform: translate3d(-20px, -20px, 0);
+    }
+  }
+
+  @keyframes rise {
+    0% {
+      transform: translate3d(0, 0, 0);
+      opacity: 0;
+    }
+    12% {
+      opacity: 1;
+    }
+    50% {
+      transform: translate3d(24px, -600px, 0);
+    }
+    88% {
+      opacity: 1;
+    }
+    100% {
+      transform: translate3d(0, -1200px, 0);
+      opacity: 0;
+    }
+  }
+
+  @keyframes breathe {
+    from {
+      transform: scale(1);
+      opacity: 0.7;
+    }
+    to {
+      transform: scale(1.3);
+      opacity: 1;
+    }
+  }
+
+  @keyframes twinkle {
+    0%,
+    100% {
+      transform: scale(1);
+      opacity: 1;
+    }
+    50% {
+      transform: scale(1.8);
+      opacity: 0.4;
+    }
+  }
+
   /* Sizing (Figma "Sizing" collection) → size-icon-md, h-control-sm, size-avatar-lg… */
   --spacing-icon-xs: 12px;
   --spacing-icon-sm: 16px;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mediquo/medicore",
   "description": "MediCore — design system de las plataformas web de mediQuo",
-  "version": "0.3.1",
+  "version": "0.4.1",
   "type": "module",
   "license": "UNLICENSED",
   "sideEffects": [