@bmsuisse/ui 0.17.0 → 0.18.0

package/dist/index.js

@@ -3461,11 +3461,660 @@ function Stepper({
     ] })
   );
 }
+
+// src/patterns/animated-brand/AnimatedBrand.tsx
+import {
+  useEffect as useEffect9,
+  useRef as useRef9,
+  useState as useState16
+} from "react";
+
+// src/patterns/animated-brand/brandMotion.ts
+var BRAND_ANIMATIONS = [
+  { id: "bounce", label: "Bounce home" },
+  { id: "orbit", label: "Orbit and settle" },
+  { id: "impact", label: "Shot in, boom" },
+  { id: "liquid", label: "Liquid split" },
+  { id: "signature", label: "Solid to signature" },
+  { id: "burst", label: "Big bang, small dot" },
+  { id: "gravity", label: "Gravity press" }
+];
+function playBrandMotion(p, name, onComplete) {
+  const list = [];
+  if (!p.animate || window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+    onComplete?.();
+    return () => {
+    };
+  }
+  const accent2 = "var(--bms-brand-dot)";
+  const q = (s) => {
+    const element = p.querySelector(s);
+    if (!element) throw new Error(`Missing logo part: ${s}`);
+    return element;
+  }, logo = q('[data-logo-part="logo"]'), ring = q('[data-logo-part="ring"]'), bead = q('[data-logo-part="bead"]'), tail = q('[data-logo-part="tail"]'), core = q('[data-logo-part="core"]');
+  const unit = parseFloat(getComputedStyle(logo).fontSize) || 48;
+  const a = (el, k, d = 2e3, delay = 0) => {
+    const v = el.animate(k, {
+      duration: d,
+      delay,
+      iterations: 1,
+      fill: "both",
+      easing: "linear"
+    });
+    list.push(v);
+    return v;
+  };
+  const t = (x, y, sx = 1, sy = sx) => `translate(${x}em,${y}em) scale(${sx},${sy})`;
+  const points = (items) => items.map(([offset, x, y, sx = 1, sy = sx, color = accent2]) => ({
+    offset,
+    transform: t(x, y, sx, sy),
+    background: color
+  }));
+  const shock = (delay, strength = 1) => p.querySelectorAll('[data-logo-part="echo"]').forEach((e, j) => {
+    a(
+      e,
+      [
+        { opacity: 0, transform: "scale(1)" },
+        { opacity: 0.48 * strength, transform: "scale(1.6)", offset: 0.08 },
+        { opacity: 0, transform: `scale(${j ? 8 : 6})`, offset: 1 }
+      ],
+      650,
+      delay + j * 110
+    );
+  });
+  const sparks = (delay, out = 1) => p.querySelectorAll('[data-logo-part="particle"]').forEach((e, j) => {
+    const angle = j * Math.PI / 4, x = Math.cos(angle) * out, y = Math.sin(angle) * out;
+    a(
+      e,
+      [
+        { opacity: 0, transform: t(0, 0, 0.2) },
+        { opacity: 0.85, transform: t(x * 0.3, y * 0.3), offset: 0.12 },
+        { opacity: 0, transform: t(x, y, 0.25), offset: 1 }
+      ],
+      650,
+      delay
+    );
+  });
+  const impact = (start, duration) => {
+    a(
+      ring,
+      [
+        { offset: 0, transform: "scale(1)" },
+        { offset: start - 0.015, transform: "scale(1)" },
+        { offset: start + 0.045, transform: "scale(.82,1.12)" },
+        { offset: start + 0.12, transform: "scale(1.06,.97)" },
+        { offset: start + 0.24, transform: "scale(1)" },
+        { offset: 1, transform: "scale(1)" }
+      ],
+      duration
+    );
+    a(
+      tail,
+      [
+        { offset: 0, transform: "translateX(0)" },
+        { offset: start, transform: "translateX(0)" },
+        { offset: start + 0.04, transform: "translateX(-.065em)" },
+        { offset: start + 0.14, transform: "translateX(.018em)" },
+        { offset: start + 0.24, transform: "translateX(0)" },
+        { offset: 1, transform: "translateX(0)" }
+      ],
+      duration
+    );
+  };
+  if (name === "bounce") {
+    const beadRect = bead.getBoundingClientRect();
+    const viewportUnitX = beadRect.width > 0 ? beadRect.width / 0.2 : unit;
+    const viewportUnitY = beadRect.height > 0 ? beadRect.height / 0.2 : unit;
+    const originX = beadRect.x + beadRect.width / 2;
+    const originY = beadRect.y + beadRect.height / 2;
+    const letters = Array.from(
+      p.querySelectorAll("[data-brand-letter]")
+    ).reverse();
+    const baseline = p.querySelector("[data-brand-baseline]")?.getBoundingClientRect().top ?? originY;
+    const pen = typeof CanvasRenderingContext2D !== "undefined" ? document.createElement("canvas").getContext("2d") : null;
+    if (pen) pen.font = getComputedStyle(logo).font;
+    const stops = letters.length ? letters.map((letter) => {
+      const rect = letter.getBoundingClientRect();
+      const ascent = pen?.measureText(letter.textContent ?? "").actualBoundingBoxAscent ?? unit * 0.7;
+      return {
+        x: (rect.x + rect.width / 2 - originX) / viewportUnitX,
+        y: (baseline - originY) / viewportUnitY - ascent / unit - 0.1
+      };
+    }) : [
+      { x: -1.1, y: -0.7 },
+      { x: -0.3, y: -0.4 },
+      { x: 0.3, y: -0.4 }
+    ];
+    const duration = 1e3 + stops.length * 340;
+    let from = { x: stops[0].x + 0.5, y: stops[0].y - 0.65 };
+    const frames = [{ offset: 0, transform: t(from.x, from.y) }];
+    const destinations = [...stops, { x: 0, y: 0 }];
+    const jumpEnd = 0.94;
+    destinations.forEach((to, index) => {
+      const start = index / destinations.length * jumpEnd;
+      const length = jumpEnd / destinations.length;
+      for (let k = 1; k <= 10; k++) {
+        const u = k / 10;
+        frames.push({
+          offset: start + length * u * 0.87,
+          transform: t(
+            from.x + (to.x - from.x) * u,
+            from.y + (to.y - from.y) * u - 1.6 * u * (1 - u)
+          )
+        });
+      }
+      frames.push({
+        offset: start + length * 0.94,
+        transform: t(to.x, to.y + 0.018, 1.15, 0.82)
+      });
+      frames.push({ offset: start + length, transform: t(to.x, to.y) });
+      from = to;
+    });
+    frames.push({ offset: 1, transform: t(0, 0) });
+    a(bead, frames, duration);
+    shock(duration * 0.94, 0.5);
+  } else if (name === "orbit") {
+    const frames = [];
+    for (let step = 0; step <= 72; step++) {
+      const u = step / 72;
+      const angle = -Math.PI / 2 + u * Math.PI * 3.7;
+      const radius = 0.683 * (1 - u ** 2.4);
+      frames.push({
+        offset: u,
+        transform: t(Math.cos(angle) * radius, Math.sin(angle) * radius)
+      });
+    }
+    a(bead, frames, 2500);
+    a(
+      ring,
+      [
+        { transform: "scale(1)" },
+        { offset: 0.8, transform: "scale(1.06)" },
+        { offset: 1, transform: "scale(1)" }
+      ],
+      2500
+    );
+    shock(2400, 0.5);
+  } else if (name === "impact") {
+    const d = 1650;
+    a(
+      bead,
+      points([
+        [0, 6.5, 0, 4, 0.38],
+        [0.2, 6.5, 0, 4, 0.38],
+        [0.3, 1.5, 0, 4, 0.38],
+        [0.33, 0, 0, 0.55, 1.55],
+        [0.39, -0.09, 0, 1.35, 0.72],
+        [0.48, 0.035, 0, 0.93, 1.06],
+        [0.65, 0, 0, 1, 1],
+        [1, 0, 0, 1, 1]
+      ]),
+      d
+    );
+    a(
+      q('[data-logo-part="trail"]'),
+      [
+        { opacity: 0, transform: t(6.5, 0, 2, 1) },
+        { opacity: 0, transform: t(6.5, 0, 2, 1), offset: 0.2 },
+        { opacity: 0.6, transform: t(0.5, 0, 1.8, 1), offset: 0.32 },
+        { opacity: 0, transform: t(0, 0, 0.1, 1), offset: 0.39 },
+        { opacity: 0, offset: 1 }
+      ],
+      d
+    );
+    impact(0.33, d);
+    shock(545);
+    sparks(545, 0.94);
+  } else if (name === "liquid") {
+    const d = 2400;
+    a(
+      bead,
+      points([
+        [0, 0, 0, 4],
+        [0.15, 0, 0, 4],
+        [0.3, 0, 0, 5.2, 2.7],
+        [0.43, 0, 0, 2.8, 4.4],
+        [0.58, 0, 0, 1.6, 2],
+        [0.74, 0, 0, 0.85, 1.15],
+        [0.88, 0, 0, 1.06, 0.94],
+        [1, 0, 0, 1]
+      ]),
+      d
+    );
+    a(
+      ring,
+      [
+        { offset: 0, opacity: 0, transform: "scale(.2) rotate(-35deg)" },
+        { offset: 0.36, opacity: 0, transform: "scale(.2) rotate(-35deg)" },
+        { offset: 0.63, opacity: 1, transform: "scale(1.1,.9) rotate(8deg)" },
+        { offset: 0.8, opacity: 1, transform: "scale(.97,1.03) rotate(-2deg)" },
+        { offset: 1, opacity: 1, transform: "scale(1) rotate(0deg)" }
+      ],
+      d
+    );
+    a(
+      tail,
+      [
+        { offset: 0, opacity: 0, transform: "translateX(-.25em)" },
+        { offset: 0.35, opacity: 0, transform: "translateX(-.25em)" },
+        { offset: 0.72, opacity: 1, transform: "translateX(.025em)" },
+        { offset: 1, opacity: 1, transform: "translateX(0)" }
+      ],
+      d
+    );
+  } else if (name === "gravity") {
+    const d = 2600;
+    a(
+      bead,
+      points([
+        [0, 0, -1.15, 4],
+        [0.12, 0, -1.15, 4],
+        [0.24, 0, -0.88, 4],
+        [0.34, 0, -0.35, 3.7, 4.3],
+        [0.4, 0, 0.15, 5.1, 2.5],
+        [0.49, 0, -0.32, 3.4, 4.2],
+        [0.58, 0, 0.07, 4.4, 3.5],
+        [0.67, 0, 0, 3.8, 4],
+        [0.81, 0, 0, 0.78, 1.22],
+        [0.91, 0, 0, 1.1, 0.9],
+        [1, 0, 0, 1]
+      ]),
+      d
+    );
+    a(
+      ring,
+      [
+        { offset: 0, opacity: 0, transform: "scale(.25)" },
+        { offset: 0.64, opacity: 0, transform: "scale(.25)" },
+        { offset: 0.81, opacity: 1, transform: "scale(1.12,.88)" },
+        { offset: 0.92, opacity: 1, transform: "scale(.97,1.03)" },
+        { offset: 1, opacity: 1, transform: "scale(1)" }
+      ],
+      d
+    );
+    a(
+      tail,
+      [
+        { offset: 0, opacity: 0, transform: "translateY(.12em)" },
+        { offset: 0.43, opacity: 0, transform: "translateY(.12em)" },
+        { offset: 0.72, opacity: 1, transform: "translateY(0)" },
+        { offset: 1, opacity: 1, transform: "translateY(0)" }
+      ],
+      d
+    );
+    shock(1040, 0.5);
+  } else if (name === "signature") {
+    const d = 2200;
+    a(
+      core,
+      [
+        { opacity: 1, background: accent2, transform: "scale(1)" },
+        { opacity: 1, background: accent2, transform: "scale(1.08)", offset: 0.22 },
+        { opacity: 1, background: accent2, transform: "scale(.22)", offset: 0.65 },
+        { opacity: 1, background: accent2, transform: "scale(.25)", offset: 0.84 },
+        { opacity: 0, background: accent2, transform: "scale(.25)", offset: 1 }
+      ],
+      d
+    );
+    a(
+      bead,
+      [{ opacity: 0 }, { opacity: 0, offset: 0.85 }, { opacity: 1, offset: 1 }],
+      d
+    );
+    a(
+      ring,
+      [
+        { opacity: 0, transform: "scale(.3)" },
+        { opacity: 0, transform: "scale(.3)", offset: 0.25 },
+        { opacity: 1, transform: "scale(1.04)", offset: 0.65 },
+        { opacity: 1, transform: "scale(1)", offset: 0.83 },
+        { opacity: 1, transform: "scale(1)", offset: 1 }
+      ],
+      d
+    );
+    a(
+      tail,
+      [
+        { opacity: 0, transform: "translateX(-.18em)" },
+        { opacity: 0, transform: "translateX(-.18em)", offset: 0.22 },
+        { opacity: 1, transform: "translateX(0)", offset: 0.64 },
+        { opacity: 1, transform: "translateX(0)", offset: 1 }
+      ],
+      d
+    );
+  } else {
+    const d = 2500;
+    a(
+      core,
+      [
+        { opacity: 1, background: accent2, transform: "scale(.92)" },
+        { opacity: 1, background: accent2, transform: "scale(1.14)", offset: 0.24 },
+        { opacity: 0, background: accent2, transform: "scale(.1)", offset: 0.36 },
+        { opacity: 0, offset: 1 }
+      ],
+      d
+    );
+    a(
+      bead,
+      [
+        { opacity: 0, transform: "scale(.2)" },
+        { opacity: 0, transform: "scale(.2)", offset: 0.69 },
+        { opacity: 1, transform: "scale(1.2)", offset: 0.84 },
+        { opacity: 1, transform: "scale(1)", offset: 1 }
+      ],
+      d
+    );
+    a(
+      ring,
+      [
+        { opacity: 0, transform: "scale(.82)" },
+        { opacity: 0, transform: "scale(.82)", offset: 0.34 },
+        { opacity: 0.7, transform: "scale(1.04)", offset: 0.57 },
+        { opacity: 1, transform: "scale(1)", offset: 0.82 },
+        { opacity: 1, transform: "scale(1)", offset: 1 }
+      ],
+      d
+    );
+    a(
+      tail,
+      [
+        { opacity: 0.15, transform: "translateX(-.06em)" },
+        { opacity: 0.15, transform: "translateX(-.06em)", offset: 0.3 },
+        { opacity: 1, transform: "translateX(0)", offset: 0.68 },
+        { opacity: 1, transform: "translateX(0)", offset: 1 }
+      ],
+      d
+    );
+    p.querySelectorAll('[data-logo-part="particle"]').forEach((el, j) => {
+      const angle = j * Math.PI / 4, x = Math.cos(angle) * 0.86, y = Math.sin(angle) * 0.86;
+      a(
+        el,
+        [
+          { opacity: 0, transform: t(0, 0, 0.2) },
+          { opacity: 0, transform: t(0, 0, 0.2), offset: 0.27 },
+          { opacity: 1, transform: t(x, y, 1.2), offset: 0.43 },
+          { opacity: 1, transform: t(x * 0.85, y * 0.85), offset: 0.59 },
+          { opacity: 0, transform: t(0, 0, 0.5), offset: 0.82 },
+          { opacity: 0, transform: t(0, 0, 0.5), offset: 1 }
+        ],
+        d
+      );
+    });
+    shock(1800, 0.6);
+  }
+  let cancelled = false;
+  void Promise.all(list.map((animation) => animation.finished)).then(
+    () => {
+      if (!cancelled) {
+        for (const animation of list) animation.cancel();
+        onComplete?.();
+      }
+    },
+    () => {
+    }
+  );
+  return () => {
+    cancelled = true;
+    for (const animation of list) animation.cancel();
+  };
+}
+
+// src/patterns/animated-brand/AnimatedBrand.tsx
+import { jsx as jsx49, jsxs as jsxs31 } from "react/jsx-runtime";
+var absolute = {
+  position: "absolute",
+  borderRadius: "50%",
+  pointerEvents: "none"
+};
+var centered = {
+  ...absolute,
+  width: ".2em",
+  height: ".2em",
+  left: "50%",
+  top: "50%",
+  margin: "-.1em"
+};
+var accent = "var(--bms-brand-dot)";
+function AnimatedBrand({
+  product = "Brain",
+  dotColor = "#e60028",
+  textColor = "#929292",
+  oneColor,
+  productColor,
+  ringColor,
+  mode = "full",
+  animation = "random",
+  size = 48,
+  autoPlay = true,
+  replayKey,
+  onComplete,
+  className,
+  style
+}) {
+  const ref = useRef9(null);
+  const completion = useRef9(onComplete);
+  const [segmented, setSegmented] = useState16(null);
+  useEffect9(() => {
+    const letters2 = typeof Intl.Segmenter === "function" ? Array.from(new Intl.Segmenter(void 0, { granularity: "grapheme" }).segment(product), ({ segment }) => segment) : product ? [product] : [];
+    setSegmented({ product, letters: letters2 });
+  }, [product]);
+  useEffect9(() => {
+    completion.current = onComplete;
+  }, [onComplete]);
+  useEffect9(() => {
+    const element = ref.current;
+    if (!element || !autoPlay || segmented?.product !== product) return;
+    let disposed = false;
+    let stop;
+    let completed = false;
+    const finish = () => {
+      if (!disposed && !completed) {
+        completed = true;
+        completion.current?.();
+      }
+    };
+    const reduced = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const changed = () => {
+      if (reduced.matches) {
+        stop?.();
+        finish();
+      }
+    };
+    reduced.addEventListener("change", changed);
+    const start = () => {
+      if (disposed || completed) return;
+      if (reduced.matches) {
+        finish();
+        return;
+      }
+      const choice = animation === "random" ? BRAND_ANIMATIONS[Math.floor(Math.random() * BRAND_ANIMATIONS.length)].id : animation;
+      stop = playBrandMotion(element, choice, finish);
+    };
+    void (document.fonts?.ready ?? Promise.resolve()).then(start, start);
+    return () => {
+      disposed = true;
+      stop?.();
+      reduced.removeEventListener("change", changed);
+    };
+  }, [product, mode, animation, size, autoPlay, replayKey, segmented]);
+  const tail = mode === "full" ? `ne${product}` : mode === "one" ? "ne" : "";
+  const suffix = mode === "full" && product ? segmented?.product === product ? segmented.letters : [product] : [];
+  const letters = tail ? ["n", "e", ...suffix] : [];
+  const label = mode === "full" ? `One${product}` : mode === "one" ? "One" : "O";
+  const wrapperStyle = {
+    "--bms-brand-dot": dotColor,
+    display: "inline-flex",
+    fontSize: size,
+    color: textColor,
+    ...style
+  };
+  return /* @__PURE__ */ jsx49(
+    "span",
+    {
+      ref,
+      className,
+      style: wrapperStyle,
+      children: /* @__PURE__ */ jsxs31(
+        "span",
+        {
+          "data-logo-part": "logo",
+          role: "img",
+          "aria-label": label,
+          style: {
+            display: "inline-flex",
+            position: "relative",
+            alignItems: "center",
+            fontSize: "inherit",
+            fontWeight: 700,
+            lineHeight: 1,
+            letterSpacing: "-.055em",
+            whiteSpace: "nowrap",
+            userSelect: "none"
+          },
+          children: [
+            /* @__PURE__ */ jsxs31(
+              "span",
+              {
+                "data-logo-part": "mark",
+                "aria-hidden": "true",
+                style: {
+                  position: "relative",
+                  flex: "none",
+                  color: ringColor ?? oneColor,
+                  width: ".8em",
+                  height: ".8em",
+                  marginRight: tail ? ".04em" : 0
+                },
+                children: [
+                  /* @__PURE__ */ jsx49(
+                    "span",
+                    {
+                      "data-logo-part": "ring",
+                      style: {
+                        ...absolute,
+                        inset: 0,
+                        border: ".157em solid currentColor",
+                        boxSizing: "border-box"
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx49(
+                    "span",
+                    {
+                      "data-logo-part": "core",
+                      style: {
+                        ...absolute,
+                        inset: 0,
+                        background: accent,
+                        opacity: 0,
+                        zIndex: 2
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx49(
+                    "span",
+                    {
+                      "data-logo-part": "trail",
+                      style: {
+                        position: "absolute",
+                        width: "1.8em",
+                        height: ".045em",
+                        left: "50%",
+                        top: "50%",
+                        marginTop: "-.0225em",
+                        background: `linear-gradient(90deg, ${accent}, transparent)`,
+                        transformOrigin: "left center",
+                        opacity: 0,
+                        pointerEvents: "none"
+                      }
+                    }
+                  ),
+                  [0, 1].map((id) => /* @__PURE__ */ jsx49(
+                    "span",
+                    {
+                      "data-logo-part": "echo",
+                      style: {
+                        ...centered,
+                        border: `.025em solid ${accent}`,
+                        boxSizing: "border-box",
+                        opacity: 0
+                      }
+                    },
+                    id
+                  )),
+                  Array.from({ length: 8 }, (_, id) => /* @__PURE__ */ jsx49(
+                    "span",
+                    {
+                      "data-logo-part": "particle",
+                      style: {
+                        ...centered,
+                        width: ".055em",
+                        height: ".055em",
+                        margin: "-.0275em",
+                        background: accent,
+                        opacity: 0
+                      }
+                    },
+                    id
+                  )),
+                  /* @__PURE__ */ jsx49(
+                    "span",
+                    {
+                      "data-logo-part": "bead",
+                      style: { ...centered, background: accent, zIndex: 3 }
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs31(
+              "span",
+              {
+                "data-logo-part": "tail",
+                "aria-hidden": "true",
+                style: {
+                  display: "inline-flex",
+                  alignItems: "baseline",
+                  whiteSpace: "pre"
+                },
+                children: [
+                  letters.map((letter, index) => /* @__PURE__ */ jsx49(
+                    "span",
+                    {
+                      "data-brand-letter": "",
+                      style: { display: "inline-block", color: index < 2 ? oneColor : productColor },
+                      children: letter
+                    },
+                    `${index}-${letter}`
+                  )),
+                  /* @__PURE__ */ jsx49(
+                    "span",
+                    {
+                      "data-brand-baseline": "",
+                      style: {
+                        display: "inline-block",
+                        width: 0,
+                        height: 0,
+                        alignSelf: "baseline"
+                      }
+                    }
+                  )
+                ]
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
 export {
   AiButton,
   AiExplainButton,
   AlertBox,
+  AnimatedBrand,
   AsyncBoundary,
+  BRAND_ANIMATIONS,
   Badge,
   Button,
   ButtonGroup,