@mediquo/medicore 0.4.0 → 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,15 +2,17 @@ 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:
|
|
6
|
-
*
|
|
7
|
-
*
|
|
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
|
+
* reads like a short video, in the same language as the portal's home hero, for the
|
|
8
|
+
* `AuthPanel` and any other full-bleed brand surface.
|
|
8
9
|
*
|
|
9
10
|
* - Decorative: `aria-hidden`, no pointer events, never carries meaning.
|
|
10
11
|
* - Fills its parent (`absolute inset-0`, `slice`), so the parent is `relative`
|
|
11
12
|
* and clips overflow.
|
|
12
13
|
* - Coloured with tokens (`text-inverse`, `brand`), so it follows a clinic's brand.
|
|
13
14
|
* - Motion only under `prefers-reduced-motion: no-preference`; otherwise it is a
|
|
14
|
-
* still composition.
|
|
15
|
+
* still composition. Transforms and opacity only, with gradients instead of blur
|
|
16
|
+
* filters, so it stays smooth on large panels.
|
|
15
17
|
*/
|
|
16
18
|
export declare function BrandBubbles({ className, ...props }: BrandBubblesProps): React.JSX.Element;
|
|
@@ -1,8 +1,16 @@
|
|
|
1
1
|
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
2
|
import { useId } from "react";
|
|
3
3
|
import { cn } from "../../lib/cn.js";
|
|
4
|
-
const
|
|
5
|
-
const
|
|
4
|
+
const float = "motion-safe:animate-float";
|
|
5
|
+
const scaled = "origin-center [transform-box:fill-box]";
|
|
6
|
+
const breathe = cn("motion-safe:animate-breathe", scaled);
|
|
7
|
+
const twinkle = cn("motion-safe:animate-twinkle", scaled);
|
|
8
|
+
const CONSTELLATION = [
|
|
9
|
+
{ cx: 120, cy: 330, timing: "[animation-delay:0s]" },
|
|
10
|
+
{ cx: 300, cy: 520, timing: "[animation-delay:-0.8s]" },
|
|
11
|
+
{ cx: 380, cy: 420, timing: "[animation-delay:-1.6s]" },
|
|
12
|
+
{ cx: 180, cy: 700, timing: "[animation-delay:-2.4s]" }
|
|
13
|
+
];
|
|
6
14
|
function BrandBubbles({
|
|
7
15
|
className,
|
|
8
16
|
...props
|
|
@@ -22,43 +30,53 @@ function BrandBubbles({
|
|
|
22
30
|
),
|
|
23
31
|
...props,
|
|
24
32
|
children: [
|
|
25
|
-
/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */
|
|
26
|
-
/* @__PURE__ */ jsxs("g", { filter: `url(#${glowId})`, children: [
|
|
33
|
+
/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("radialGradient", { id: glowId, children: [
|
|
27
34
|
/* @__PURE__ */ jsx(
|
|
28
|
-
"
|
|
35
|
+
"stop",
|
|
29
36
|
{
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
r: "220",
|
|
33
|
-
className: cn(
|
|
34
|
-
"fill-brand opacity-50",
|
|
35
|
-
breathe,
|
|
36
|
-
"[animation-duration:22s]"
|
|
37
|
-
)
|
|
37
|
+
offset: "0%",
|
|
38
|
+
className: "[stop-color:var(--color-brand)] [stop-opacity:0.6]"
|
|
38
39
|
}
|
|
39
40
|
),
|
|
40
41
|
/* @__PURE__ */ jsx(
|
|
41
|
-
"
|
|
42
|
+
"stop",
|
|
42
43
|
{
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
r: "190",
|
|
46
|
-
className: cn(
|
|
47
|
-
"fill-brand opacity-40",
|
|
48
|
-
breathe,
|
|
49
|
-
"[animation-duration:18s] [animation-delay:-7s]"
|
|
50
|
-
)
|
|
44
|
+
offset: "100%",
|
|
45
|
+
className: "[stop-color:var(--color-brand)] [stop-opacity:0]"
|
|
51
46
|
}
|
|
52
47
|
)
|
|
53
|
-
] }),
|
|
54
|
-
/* @__PURE__ */
|
|
48
|
+
] }) }),
|
|
49
|
+
/* @__PURE__ */ jsx(
|
|
50
|
+
"circle",
|
|
51
|
+
{
|
|
52
|
+
cx: "440",
|
|
53
|
+
cy: "180",
|
|
54
|
+
r: "320",
|
|
55
|
+
fill: `url(#${glowId})`,
|
|
56
|
+
className: cn(breathe, "[animation-duration:11s]")
|
|
57
|
+
}
|
|
58
|
+
),
|
|
59
|
+
/* @__PURE__ */ jsx(
|
|
60
|
+
"circle",
|
|
61
|
+
{
|
|
62
|
+
cx: "90",
|
|
63
|
+
cy: "860",
|
|
64
|
+
r: "300",
|
|
65
|
+
fill: `url(#${glowId})`,
|
|
66
|
+
className: cn(
|
|
67
|
+
breathe,
|
|
68
|
+
"[animation-duration:13s] [animation-delay:-5s]"
|
|
69
|
+
)
|
|
70
|
+
}
|
|
71
|
+
),
|
|
72
|
+
/* @__PURE__ */ jsxs("g", { className: "fill-text-inverse/5", children: [
|
|
55
73
|
/* @__PURE__ */ jsx(
|
|
56
74
|
"circle",
|
|
57
75
|
{
|
|
58
76
|
cx: "430",
|
|
59
77
|
cy: "150",
|
|
60
78
|
r: "92",
|
|
61
|
-
className: "
|
|
79
|
+
className: cn(float, "[animation-duration:12s]")
|
|
62
80
|
}
|
|
63
81
|
),
|
|
64
82
|
/* @__PURE__ */ jsx(
|
|
@@ -67,71 +85,46 @@ function BrandBubbles({
|
|
|
67
85
|
cx: "470",
|
|
68
86
|
cy: "760",
|
|
69
87
|
r: "140",
|
|
70
|
-
className:
|
|
88
|
+
className: cn(
|
|
89
|
+
float,
|
|
90
|
+
"[animation-duration:16s] [animation-delay:-6s]"
|
|
91
|
+
)
|
|
71
92
|
}
|
|
72
93
|
),
|
|
73
94
|
/* @__PURE__ */ jsx(
|
|
74
95
|
"circle",
|
|
75
96
|
{
|
|
76
|
-
cx: "
|
|
77
|
-
cy: "
|
|
78
|
-
r: "
|
|
79
|
-
className:
|
|
97
|
+
cx: "120",
|
|
98
|
+
cy: "330",
|
|
99
|
+
r: "62",
|
|
100
|
+
className: cn(
|
|
101
|
+
float,
|
|
102
|
+
"[animation-duration:10s] [animation-delay:-3s]"
|
|
103
|
+
)
|
|
80
104
|
}
|
|
81
105
|
)
|
|
82
106
|
] }),
|
|
83
107
|
/* @__PURE__ */ jsxs(
|
|
84
108
|
"g",
|
|
85
109
|
{
|
|
86
|
-
className: cn(
|
|
110
|
+
className: cn(float, "[animation-duration:18s] [animation-delay:-4s]"),
|
|
87
111
|
children: [
|
|
88
|
-
/* @__PURE__ */
|
|
89
|
-
"circle",
|
|
90
|
-
{
|
|
91
|
-
cx: "120",
|
|
92
|
-
cy: "330",
|
|
93
|
-
r: "62",
|
|
94
|
-
className: "fill-text-inverse opacity-5"
|
|
95
|
-
}
|
|
96
|
-
),
|
|
97
|
-
/* @__PURE__ */ jsx(
|
|
98
|
-
"circle",
|
|
99
|
-
{
|
|
100
|
-
cx: "180",
|
|
101
|
-
cy: "700",
|
|
102
|
-
r: "24",
|
|
103
|
-
className: "fill-text-inverse opacity-10"
|
|
104
|
-
}
|
|
105
|
-
),
|
|
106
|
-
/* @__PURE__ */ jsx(
|
|
107
|
-
"circle",
|
|
108
|
-
{
|
|
109
|
-
cx: "380",
|
|
110
|
-
cy: "420",
|
|
111
|
-
r: "14",
|
|
112
|
-
className: "fill-text-inverse opacity-15"
|
|
113
|
-
}
|
|
114
|
-
)
|
|
115
|
-
]
|
|
116
|
-
}
|
|
117
|
-
),
|
|
118
|
-
/* @__PURE__ */ jsxs(
|
|
119
|
-
"g",
|
|
120
|
-
{
|
|
121
|
-
className: cn(drift, "[animation-duration:14s] [animation-delay:-3s]"),
|
|
122
|
-
children: [
|
|
123
|
-
/* @__PURE__ */ jsxs("g", { className: "stroke-text-inverse opacity-10", strokeWidth: "1", children: [
|
|
112
|
+
/* @__PURE__ */ jsxs("g", { className: "stroke-text-inverse opacity-15", strokeWidth: "1", children: [
|
|
124
113
|
/* @__PURE__ */ jsx("path", { d: "M120 330 L300 520" }),
|
|
125
114
|
/* @__PURE__ */ jsx("path", { d: "M300 520 L380 420" }),
|
|
126
115
|
/* @__PURE__ */ jsx("path", { d: "M300 520 L180 700" })
|
|
127
116
|
] }),
|
|
128
|
-
/* @__PURE__ */
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
117
|
+
/* @__PURE__ */ jsx("g", { className: "fill-text-inverse/40", children: CONSTELLATION.map((dot) => /* @__PURE__ */ jsx(
|
|
118
|
+
"circle",
|
|
119
|
+
{
|
|
120
|
+
cx: dot.cx,
|
|
121
|
+
cy: dot.cy,
|
|
122
|
+
r: "5",
|
|
123
|
+
className: cn(twinkle, dot.timing)
|
|
124
|
+
},
|
|
125
|
+
`${dot.cx}-${dot.cy}`
|
|
126
|
+
)) }),
|
|
127
|
+
/* @__PURE__ */ jsxs("g", { className: "fill-text-inverse/25", children: [
|
|
135
128
|
/* @__PURE__ */ jsx("rect", { x: "412", y: "258", width: "36", height: "10", rx: "5" }),
|
|
136
129
|
/* @__PURE__ */ jsx("rect", { x: "425", y: "245", width: "10", height: "36", rx: "5" })
|
|
137
130
|
] })
|
|
@@ -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
|
|
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
|
@@ -51,27 +51,51 @@
|
|
|
51
51
|
--shadow-xl: 0 16px 32px -4px rgb(10 10 34 / 0.12);
|
|
52
52
|
|
|
53
53
|
/*
|
|
54
|
-
* Motion for brand backdrops (BrandBubbles)
|
|
55
|
-
*
|
|
54
|
+
* Motion for brand backdrops (BrandBubbles), a seamless loop like a short video:
|
|
55
|
+
* bubbles float on a wide path, glows breathe and the constellation twinkles.
|
|
56
|
+
* Transforms and opacity only. Always behind `motion-safe:`.
|
|
56
57
|
*/
|
|
57
|
-
--animate-drift:
|
|
58
|
-
--animate-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
58
|
+
--animate-drift: float 16s ease-in-out infinite;
|
|
59
|
+
--animate-float: float 12s ease-in-out infinite;
|
|
60
|
+
--animate-breathe: breathe 10s ease-in-out infinite alternate;
|
|
61
|
+
--animate-twinkle: twinkle 3s ease-in-out infinite;
|
|
62
|
+
|
|
63
|
+
@keyframes float {
|
|
64
|
+
0%,
|
|
65
|
+
100% {
|
|
62
66
|
transform: translate3d(0, 0, 0);
|
|
63
67
|
}
|
|
64
|
-
|
|
65
|
-
transform: translate3d(
|
|
68
|
+
25% {
|
|
69
|
+
transform: translate3d(16px, -28px, 0);
|
|
70
|
+
}
|
|
71
|
+
50% {
|
|
72
|
+
transform: translate3d(-8px, -48px, 0);
|
|
73
|
+
}
|
|
74
|
+
75% {
|
|
75
|
+
transform: translate3d(-20px, -20px, 0);
|
|
66
76
|
}
|
|
67
77
|
}
|
|
68
78
|
|
|
69
79
|
@keyframes breathe {
|
|
70
80
|
from {
|
|
71
81
|
transform: scale(1);
|
|
82
|
+
opacity: 0.7;
|
|
72
83
|
}
|
|
73
84
|
to {
|
|
74
|
-
transform: scale(1.
|
|
85
|
+
transform: scale(1.3);
|
|
86
|
+
opacity: 1;
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
@keyframes twinkle {
|
|
91
|
+
0%,
|
|
92
|
+
100% {
|
|
93
|
+
transform: scale(1);
|
|
94
|
+
opacity: 1;
|
|
95
|
+
}
|
|
96
|
+
50% {
|
|
97
|
+
transform: scale(1.8);
|
|
98
|
+
opacity: 0.4;
|
|
75
99
|
}
|
|
76
100
|
}
|
|
77
101
|
|