@mediquo/medicore 0.4.1 → 0.4.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -2,8 +2,8 @@ import { type ComponentProps } from "react";
|
|
|
2
2
|
export interface BrandBubblesProps extends Omit<ComponentProps<"svg">, "children"> {
|
|
3
3
|
}
|
|
4
4
|
/**
|
|
5
|
-
* mediQuo's brand backdrop on a dark brand surface: translucent bubbles that float
|
|
6
|
-
*
|
|
5
|
+
* mediQuo's brand backdrop on a dark brand surface: translucent bubbles that float on a
|
|
6
|
+
* wide path, breathing glows, a twinkling constellation and the cross. A seamless loop that
|
|
7
7
|
* reads like a short video, in the same language as the portal's home hero, for the
|
|
8
8
|
* `AuthPanel` and any other full-bleed brand surface.
|
|
9
9
|
*
|
|
@@ -2,21 +2,9 @@ import { jsxs, jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import { useId } from "react";
|
|
3
3
|
import { cn } from "../../lib/cn.js";
|
|
4
4
|
const float = "motion-safe:animate-float";
|
|
5
|
-
const rise = "motion-safe:animate-rise";
|
|
6
5
|
const scaled = "origin-center [transform-box:fill-box]";
|
|
7
6
|
const breathe = cn("motion-safe:animate-breathe", scaled);
|
|
8
7
|
const twinkle = cn("motion-safe:animate-twinkle", scaled);
|
|
9
|
-
const RISING_BUBBLES = [
|
|
10
|
-
{ cx: 70, r: 10, timing: "[animation-duration:15s]" },
|
|
11
|
-
{ cx: 150, r: 22, timing: "[animation-duration:19s] [animation-delay:-11s]" },
|
|
12
|
-
{ cx: 235, r: 7, timing: "[animation-duration:13s] [animation-delay:-4s]" },
|
|
13
|
-
{ cx: 300, r: 16, timing: "[animation-duration:17s] [animation-delay:-8s]" },
|
|
14
|
-
{ cx: 380, r: 9, timing: "[animation-duration:14s] [animation-delay:-2s]" },
|
|
15
|
-
{ cx: 445, r: 26, timing: "[animation-duration:21s] [animation-delay:-15s]" },
|
|
16
|
-
{ cx: 510, r: 12, timing: "[animation-duration:16s] [animation-delay:-6s]" },
|
|
17
|
-
{ cx: 110, r: 6, timing: "[animation-duration:12s] [animation-delay:-9s]" },
|
|
18
|
-
{ cx: 345, r: 5, timing: "[animation-duration:11s] [animation-delay:-5s]" }
|
|
19
|
-
];
|
|
20
8
|
const CONSTELLATION = [
|
|
21
9
|
{ cx: 120, cy: 330, timing: "[animation-delay:0s]" },
|
|
22
10
|
{ cx: 300, cy: 520, timing: "[animation-delay:-0.8s]" },
|
|
@@ -116,16 +104,6 @@ function BrandBubbles({
|
|
|
116
104
|
}
|
|
117
105
|
)
|
|
118
106
|
] }),
|
|
119
|
-
/* @__PURE__ */ jsx("g", { "data-slot": "brand-bubbles-rising", className: "fill-text-inverse/15", children: RISING_BUBBLES.map((bubble) => /* @__PURE__ */ jsx(
|
|
120
|
-
"circle",
|
|
121
|
-
{
|
|
122
|
-
cx: bubble.cx,
|
|
123
|
-
cy: "1080",
|
|
124
|
-
r: bubble.r,
|
|
125
|
-
className: cn(rise, bubble.timing)
|
|
126
|
-
},
|
|
127
|
-
bubble.cx
|
|
128
|
-
)) }),
|
|
129
107
|
/* @__PURE__ */ jsxs(
|
|
130
108
|
"g",
|
|
131
109
|
{
|
|
@@ -1 +1 @@
|
|
|
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
|
|
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 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 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 on a\n * wide path, 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\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/styles/tokens.css
CHANGED
|
@@ -52,12 +52,11 @@
|
|
|
52
52
|
|
|
53
53
|
/*
|
|
54
54
|
* Motion for brand backdrops (BrandBubbles), a seamless loop like a short video:
|
|
55
|
-
* bubbles float on a wide path,
|
|
56
|
-
*
|
|
55
|
+
* bubbles float on a wide path, glows breathe and the constellation twinkles.
|
|
56
|
+
* Transforms and opacity only. Always behind `motion-safe:`.
|
|
57
57
|
*/
|
|
58
58
|
--animate-drift: float 16s ease-in-out infinite;
|
|
59
59
|
--animate-float: float 12s ease-in-out infinite;
|
|
60
|
-
--animate-rise: rise 16s linear infinite;
|
|
61
60
|
--animate-breathe: breathe 10s ease-in-out infinite alternate;
|
|
62
61
|
--animate-twinkle: twinkle 3s ease-in-out infinite;
|
|
63
62
|
|
|
@@ -77,26 +76,6 @@
|
|
|
77
76
|
}
|
|
78
77
|
}
|
|
79
78
|
|
|
80
|
-
@keyframes rise {
|
|
81
|
-
0% {
|
|
82
|
-
transform: translate3d(0, 0, 0);
|
|
83
|
-
opacity: 0;
|
|
84
|
-
}
|
|
85
|
-
12% {
|
|
86
|
-
opacity: 1;
|
|
87
|
-
}
|
|
88
|
-
50% {
|
|
89
|
-
transform: translate3d(24px, -600px, 0);
|
|
90
|
-
}
|
|
91
|
-
88% {
|
|
92
|
-
opacity: 1;
|
|
93
|
-
}
|
|
94
|
-
100% {
|
|
95
|
-
transform: translate3d(0, -1200px, 0);
|
|
96
|
-
opacity: 0;
|
|
97
|
-
}
|
|
98
|
-
}
|
|
99
|
-
|
|
100
79
|
@keyframes breathe {
|
|
101
80
|
from {
|
|
102
81
|
transform: scale(1);
|