@mediquo/medicore 0.3.1 → 0.4.0

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,16 @@
+import { type ComponentProps } from "react";
+export interface BrandBubblesProps extends Omit<ComponentProps<"svg">, "children"> {
+}
+/**
+ * mediQuo's brand backdrop on a dark brand surface: soft translucent bubbles, a
+ * small constellation and the cross, drifting slowly. 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. Nothing moves fast or far: 14–22s cycles, a few pixels.
+ */
+export declare function BrandBubbles({ className, ...props }: BrandBubblesProps): React.JSX.Element;

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

@@ -0,0 +1,148 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useId } from "react";
+import { cn } from "../../lib/cn.js";
+const drift = "motion-safe:animate-drift";
+const breathe = "motion-safe:animate-breathe origin-center [transform-box:fill-box]";
+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__ */ jsx("filter", { id: glowId, x: "-50%", y: "-50%", width: "200%", height: "200%", children: /* @__PURE__ */ jsx("feGaussianBlur", { stdDeviation: "70" }) }) }),
+        /* @__PURE__ */ jsxs("g", { filter: `url(#${glowId})`, children: [
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              cx: "440",
+              cy: "180",
+              r: "220",
+              className: cn(
+                "fill-brand opacity-50",
+                breathe,
+                "[animation-duration:22s]"
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              cx: "90",
+              cy: "880",
+              r: "190",
+              className: cn(
+                "fill-brand opacity-40",
+                breathe,
+                "[animation-duration:18s] [animation-delay:-7s]"
+              )
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("g", { className: cn(drift, "[animation-duration:16s]"), children: [
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              cx: "430",
+              cy: "150",
+              r: "92",
+              className: "fill-text-inverse opacity-5"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              cx: "470",
+              cy: "760",
+              r: "140",
+              className: "fill-text-inverse opacity-5"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              cx: "300",
+              cy: "520",
+              r: "42",
+              className: "fill-text-inverse opacity-10"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "g",
+          {
+            className: cn(drift, "[animation-duration:20s] [animation-delay:-9s]"),
+            children: [
+              /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  cx: "120",
+                  cy: "330",
+                  r: "62",
+                  className: "fill-text-inverse opacity-5"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  cx: "180",
+                  cy: "700",
+                  r: "24",
+                  className: "fill-text-inverse opacity-10"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  cx: "380",
+                  cy: "420",
+                  r: "14",
+                  className: "fill-text-inverse opacity-15"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "g",
+          {
+            className: cn(drift, "[animation-duration:14s] [animation-delay:-3s]"),
+            children: [
+              /* @__PURE__ */ jsxs("g", { className: "stroke-text-inverse opacity-10", 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__ */ jsxs("g", { className: "fill-text-inverse opacity-25", children: [
+                /* @__PURE__ */ jsx("circle", { cx: "120", cy: "330", r: "5" }),
+                /* @__PURE__ */ jsx("circle", { cx: "300", cy: "520", r: "5" }),
+                /* @__PURE__ */ jsx("circle", { cx: "380", cy: "420", r: "5" }),
+                /* @__PURE__ */ jsx("circle", { cx: "180", cy: "700", r: "5" })
+              ] }),
+              /* @__PURE__ */ jsxs("g", { className: "fill-text-inverse opacity-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 drift = \"motion-safe:animate-drift\";\nconst breathe =\n  \"motion-safe:animate-breathe origin-center [transform-box:fill-box]\";\n\n/**\n * mediQuo's brand backdrop on a dark brand surface: soft translucent bubbles, a\n * small constellation and the cross, drifting slowly. The same language as the\n * portal's home hero, for the `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. Nothing moves fast or far: 14–22s cycles, a few pixels.\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        <filter id={glowId} x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\">\n          <feGaussianBlur stdDeviation=\"70\" />\n        </filter>\n      </defs>\n\n      <g filter={`url(#${glowId})`}>\n        <circle\n          cx=\"440\"\n          cy=\"180\"\n          r=\"220\"\n          className={cn(\n            \"fill-brand opacity-50\",\n            breathe,\n            \"[animation-duration:22s]\",\n          )}\n        />\n        <circle\n          cx=\"90\"\n          cy=\"880\"\n          r=\"190\"\n          className={cn(\n            \"fill-brand opacity-40\",\n            breathe,\n            \"[animation-duration:18s] [animation-delay:-7s]\",\n          )}\n        />\n      </g>\n\n      <g className={cn(drift, \"[animation-duration:16s]\")}>\n        <circle\n          cx=\"430\"\n          cy=\"150\"\n          r=\"92\"\n          className=\"fill-text-inverse opacity-5\"\n        />\n        <circle\n          cx=\"470\"\n          cy=\"760\"\n          r=\"140\"\n          className=\"fill-text-inverse opacity-5\"\n        />\n        <circle\n          cx=\"300\"\n          cy=\"520\"\n          r=\"42\"\n          className=\"fill-text-inverse opacity-10\"\n        />\n      </g>\n\n      <g\n        className={cn(drift, \"[animation-duration:20s] [animation-delay:-9s]\")}\n      >\n        <circle\n          cx=\"120\"\n          cy=\"330\"\n          r=\"62\"\n          className=\"fill-text-inverse opacity-5\"\n        />\n        <circle\n          cx=\"180\"\n          cy=\"700\"\n          r=\"24\"\n          className=\"fill-text-inverse opacity-10\"\n        />\n        <circle\n          cx=\"380\"\n          cy=\"420\"\n          r=\"14\"\n          className=\"fill-text-inverse opacity-15\"\n        />\n      </g>\n\n      <g\n        className={cn(drift, \"[animation-duration:14s] [animation-delay:-3s]\")}\n      >\n        <g className=\"stroke-text-inverse opacity-10\" 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 opacity-25\">\n          <circle cx=\"120\" cy=\"330\" r=\"5\" />\n          <circle cx=\"300\" cy=\"520\" r=\"5\" />\n          <circle cx=\"380\" cy=\"420\" r=\"5\" />\n          <circle cx=\"180\" cy=\"700\" r=\"5\" />\n        </g>\n        <g className=\"fill-text-inverse opacity-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,31 @@
   --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 slow drift of a few pixels and a
+   * slow breathe of a few percent. Always behind `motion-safe:`.
+   */
+  --animate-drift: drift 16s ease-in-out infinite alternate;
+  --animate-breathe: breathe 20s ease-in-out infinite alternate;
+
+  @keyframes drift {
+    from {
+      transform: translate3d(0, 0, 0);
+    }
+    to {
+      transform: translate3d(0, -18px, 0);
+    }
+  }
+
+  @keyframes breathe {
+    from {
+      transform: scale(1);
+    }
+    to {
+      transform: scale(1.08);
+    }
+  }
+
   /* 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.0",
   "type": "module",
   "license": "UNLICENSED",
   "sideEffects": [