@vvedantb/ui 0.35.0 → 0.37.0

package/src/logos/logo-svg.tsx

@@ -0,0 +1,32 @@
+import type { ComponentProps, ReactNode } from "react";
+
+/** Props shared by every third-party logo. Other SVG props (`id`, `style`, `data-*`, `ref`) go to the svg. */
+export interface LogoProps extends Omit<ComponentProps<"svg">, "children" | "width" | "height" | "viewBox"> {
+  /** Width and height in px (or any CSS length). Default `24`. */
+  size?: number | string;
+  /**
+   * Accessible name. With `title` (or an `aria-label`) the svg is a labelled
+   * `role="img"`; without one it is decorative and `aria-hidden`.
+   */
+  title?: string;
+}
+
+/** The svg wrapper the logos share: size, viewBox and the decorative or labelled a11y pattern. */
+export function LogoSvg({
+  size = 24,
+  title,
+  viewBox,
+  children,
+  ...props
+}: LogoProps & { viewBox: string; children: ReactNode }) {
+  const label = title ?? props["aria-label"];
+  const a11y = label
+    ? { role: "img" as const, "aria-label": label }
+    : { "aria-hidden": true as const };
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox={viewBox} {...a11y} {...props}>
+      {title ? <title>{title}</title> : null}
+      {children}
+    </svg>
+  );
+}

package/src/logos/notion-icon.tsx

@@ -0,0 +1,19 @@
+import { LogoSvg, type LogoProps } from "./logo-svg";
+
+/** Notion mark. */
+export function NotionIcon(props: LogoProps) {
+  return (
+    <LogoSvg viewBox="0 0 100 100" {...props}>
+      <path
+        d="M6.017 4.313l55.333 -4.087c6.797 -0.583 8.543 -0.19 12.817 2.917l17.663 12.443c2.913 2.14 3.883 2.723 3.883 5.053v68.243c0 4.277 -1.553 6.807 -6.99 7.193L24.467 99.967c-4.08 0.193 -6.023 -0.39 -8.16 -3.113L3.3 79.94c-2.333 -3.113 -3.3 -5.443 -3.3 -8.167V11.113c0 -3.497 1.553 -6.413 6.017 -6.8z"
+        fill="#fff"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M61.35 0.227l-55.333 4.087C1.553 4.7 0 7.617 0 11.113v60.66c0 2.723 0.967 5.053 3.3 8.167l13.007 16.913c2.137 2.723 4.08 3.307 8.16 3.113l64.257 -3.89c5.433 -0.387 6.99 -2.917 6.99 -7.193V20.64c0 -2.21 -0.873 -2.847 -3.443 -4.733L74.167 3.143c-4.273 -3.107 -6.02 -3.5 -12.817 -2.917zM25.92 19.523c-5.247 0.353 -6.437 0.433 -9.417 -1.99L8.927 11.507c-0.77 -0.78 -0.383 -1.753 1.557 -1.947l53.193 -3.887c4.467 -0.39 6.793 1.167 8.54 2.527l9.123 6.61c0.39 0.197 1.36 1.36 0.193 1.36l-54.933 3.307 -0.68 0.047zM19.803 88.3V30.367c0 -2.53 0.777 -3.697 3.103 -3.893L86 22.78c2.14 -0.193 3.107 1.167 3.107 3.693v57.547c0 2.53 -0.39 4.67 -3.883 4.863l-60.377 3.5c-3.493 0.193 -5.043 -0.97 -5.043 -4.083zm59.6 -54.827c0.387 1.75 0 3.5 -1.75 3.7l-2.91 0.577v42.773c-2.527 1.36 -4.853 2.137 -6.797 2.137 -3.107 0 -3.883 -0.973 -6.21 -3.887l-19.03 -29.94v28.967l6.02 1.363s0 3.5 -4.857 3.5l-13.39 0.777c-0.39 -0.78 0 -2.723 1.357 -3.11l3.497 -0.97v-38.3L30.48 40.667c-0.39 -1.75 0.58 -4.277 3.3 -4.473l14.367 -0.967 19.8 30.327v-26.83l-5.047 -0.58c-0.39 -2.143 1.163 -3.7 3.103 -3.89l13.4 -0.78z"
+        fill="#000"
+      />
+    </LogoSvg>
+  );
+}

package/src/logos/onedrive-icon.tsx

@@ -0,0 +1,165 @@
+import { useId } from "react";
+import { LogoSvg, type LogoProps } from "./logo-svg";
+
+/** Microsoft OneDrive mark (svgl `microsoft-onedrive.svg`). Gradient ids are unique per instance. */
+export function OneDriveIcon(props: LogoProps) {
+  const id = useId();
+  return (
+    <LogoSvg viewBox="0 0 1000 615" {...props}>
+      <defs>
+        <radialGradient
+          id={`${id}a`}
+          cx="-446.23"
+          cy="850.24"
+          r="6.99"
+          fx="-446.23"
+          fy="850.24"
+          gradientTransform="matrix(28.87975 32.00675 53.69646 -48.39975 -32750.77 55564.7)"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0" stopColor="#4894fe" />
+          <stop offset=".7" stopColor="#0934b3" />
+        </radialGradient>
+        <radialGradient
+          id={`${id}b`}
+          cx="-463.71"
+          cy="855.09"
+          r="6.99"
+          fx="-463.71"
+          fy="855.09"
+          gradientTransform="matrix(-126.93754 135.45874 101.23704 94.7798 -144561.83 -18444.24)"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset=".17" stopColor="#23c0fe" />
+          <stop offset=".53" stopColor="#1c91ff" />
+        </radialGradient>
+        <radialGradient
+          id={`${id}c`}
+          cx="-478.67"
+          cy="847.12"
+          r="6.99"
+          fx="-478.67"
+          fy="847.12"
+          gradientTransform="matrix(-30.17956 -23.43498 -52.80172 67.93278 30509.91 -68620.88)"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0" stopColor="#fff" />
+          <stop offset=".66" stopColor="#adc0ff" stopOpacity="0" />
+        </radialGradient>
+        <radialGradient
+          id={`${id}d`}
+          cx="-484.89"
+          cy="847.31"
+          r="6.99"
+          fx="-484.89"
+          fy="847.31"
+          gradientTransform="matrix(-33.90072 -26.53382 -39.69188 50.66325 17714.49 -55348.26)"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0" stopColor="#033acc" />
+          <stop offset="1" stopColor="#368eff" stopOpacity="0" />
+        </radialGradient>
+        <radialGradient
+          id={`${id}e`}
+          cx="-454.42"
+          cy="853.18"
+          r="6.99"
+          fx="-454.42"
+          fy="853.18"
+          gradientTransform="matrix(38.74213 82.7056 94.03873 -44.01576 -62416.51 75114.97)"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset=".59" stopColor="#3464e3" stopOpacity="0" />
+          <stop offset="1" stopColor="#033acc" />
+        </radialGradient>
+        <radialGradient
+          id={`${id}f`}
+          cx="-465.3"
+          cy="852.63"
+          r="6.99"
+          fx="-465.3"
+          fy="852.63"
+          gradientTransform="matrix(-101.35519 93.7574 146.5162 158.24743 -171232.53 -91444.13)"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0" stopColor="#4bfde8" />
+          <stop offset=".54" stopColor="#4bfde8" stopOpacity="0" />
+        </radialGradient>
+        <radialGradient
+          id={`${id}h`}
+          cx="-445.42"
+          cy="847.35"
+          r="6.99"
+          fx="-445.42"
+          fy="847.35"
+          gradientTransform="matrix(60.3777 22.14291 39.59688 -107.87213 -6264.92 101508.79)"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0" stopColor="#fff" />
+          <stop offset=".79" stopColor="#fff" stopOpacity="0" />
+        </radialGradient>
+        <radialGradient
+          id={`${id}i`}
+          cx="-468.67"
+          cy="861.39"
+          r="6.99"
+          fx="-468.67"
+          fy="861.39"
+          gradientTransform="matrix(-67.45933 53.77501 53.21816 66.68832 -76468.45 -32083.78)"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0" stopColor="#4bfde8" />
+          <stop offset=".58" stopColor="#4bfde8" stopOpacity="0" />
+        </radialGradient>
+        <linearGradient
+          id={`${id}g`}
+          x1="638.67"
+          x2="638.67"
+          y1="2.44"
+          y2="421.76"
+          gradientTransform="matrix(1 0 0 -1 0 617.01)"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0" stopColor="#0086ff" />
+          <stop offset=".49" stopColor="#0bf" />
+        </linearGradient>
+      </defs>
+      <path
+        d="M276.36 94.08C123.48 94.08 9.21 209.84.6 338.79c5.33 27.79 22.83 82.65 50.24 79.84 34.26-3.52 120.56 0 194.17-123.26 53.77-90.04 164.37-201.29 31.35-201.29Z"
+        style={{ fill: `url(#${id}a)` }}
+      />
+      <path
+        d="M240.99 142.19c-51.39 75.26-120.56 183.1-143.91 217.03-27.75 40.34-101.25 23.2-95.16-34.62a237.4 237.4 0 0 0-1.38 14.19C-9.51 489.22 119.43 614.14 279.88 614.14c176.84 0 598.58-203.81 555.9-408.02C790.8 86.1 664.36 0 521.07 0S285.94 76.36 241 142.19Z"
+        style={{ fill: `url(#${id}b)` }}
+      />
+      <path
+        d="M240.99 142.19c-51.39 75.26-120.56 183.1-143.91 217.03-27.75 40.34-101.25 23.2-95.16-34.62a237.4 237.4 0 0 0-1.38 14.19C-9.51 489.22 119.43 614.14 279.88 614.14c176.84 0 598.58-203.81 555.9-408.02C790.8 86.1 664.36 0 521.07 0S285.94 76.36 241 142.19Z"
+        style={{ fillOpacity: 0.4, fill: `url(#${id}c)` }}
+      />
+      <path
+        d="M240.99 142.19c-51.39 75.26-120.56 183.1-143.91 217.03-27.75 40.34-101.25 23.2-95.16-34.62a237.4 237.4 0 0 0-1.38 14.19C-9.51 489.22 119.43 614.14 279.88 614.14c176.84 0 598.58-203.81 555.9-408.02C790.8 86.1 664.36 0 521.07 0S285.94 76.36 241 142.19Z"
+        style={{ fill: `url(#${id}d)` }}
+      />
+      <path
+        d="M240.99 142.19c-51.39 75.26-120.56 183.1-143.91 217.03-27.75 40.34-101.25 23.2-95.16-34.62a237.4 237.4 0 0 0-1.38 14.19C-9.51 489.22 119.43 614.14 279.88 614.14c176.84 0 598.58-203.81 555.9-408.02C790.8 86.1 664.36 0 521.07 0S285.94 76.36 241 142.19Z"
+        style={{ fill: `url(#${id}e)`, fillOpacity: 0.6 }}
+      />
+      <path
+        d="M240.99 142.19c-51.39 75.26-120.56 183.1-143.91 217.03-27.75 40.34-101.25 23.2-95.16-34.62a237.4 237.4 0 0 0-1.38 14.19C-9.51 489.22 119.43 614.14 279.88 614.14c176.84 0 598.58-203.81 555.9-408.02C790.8 86.1 664.36 0 521.07 0S285.94 76.36 241 142.19Z"
+        style={{ fillOpacity: 0.9, fill: `url(#${id}f)` }}
+      />
+      <path
+        d="M277.34 614.23s422.24.77 493.86.77c129.97 0 228.8-98.16 228.8-212.69s-100.8-212.1-228.8-212.1-201.7 88.57-257.06 185.25c-64.87 113.29-147.62 237.41-236.8 238.77Z"
+        style={{ fill: `url(#${id}g)` }}
+      />
+      <path
+        d="M277.34 614.23s422.24.77 493.86.77c129.97 0 228.8-98.16 228.8-212.69s-100.8-212.1-228.8-212.1-201.7 88.57-257.06 185.25c-64.87 113.29-147.62 237.41-236.8 238.77Z"
+        style={{ fill: `url(#${id}h)`, fillOpacity: 0.4 }}
+      />
+      <path
+        d="M277.34 614.23s422.24.77 493.86.77c129.97 0 228.8-98.16 228.8-212.69s-100.8-212.1-228.8-212.1-201.7 88.57-257.06 185.25c-64.87 113.29-147.62 237.41-236.8 238.77Z"
+        style={{ fill: `url(#${id}i)`, fillOpacity: 0.9 }}
+      />
+    </LogoSvg>
+  );
+}

package/src/logos/sharepoint-icon.tsx

@@ -0,0 +1,222 @@
+import { useId } from "react";
+import { LogoSvg, type LogoProps } from "./logo-svg";
+
+/** Microsoft SharePoint mark. Gradient ids are unique per instance. */
+export function SharePointIcon(props: LogoProps) {
+  const id = useId();
+  return (
+    <LogoSvg viewBox="0 0 450 500" {...props}>
+      <defs>
+        <radialGradient
+          id={`${id}b`}
+          cx="-777.14"
+          cy="770.84"
+          r=".9"
+          fx="-777.14"
+          fy="770.84"
+          gradientTransform="matrix(-98.02204 -236.87999 -426.55553 175.97802 252868.13 -319393.72)"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset=".29" stopColor="#003b5d" />
+          <stop offset=".61" stopColor="#004a6c" stopOpacity=".69" />
+          <stop offset=".97" stopColor="#006f94" stopOpacity="0" />
+        </radialGradient>
+        <radialGradient
+          id={`${id}c`}
+          cx="-785.23"
+          cy="766.9"
+          r=".9"
+          fx="-785.23"
+          fy="766.9"
+          gradientTransform="matrix(-81.36865 -200.4872 -360.58286 145.8959 212855.73 -269057.38)"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset=".26" stopColor="#002a42" />
+          <stop offset=".61" stopColor="#004261" stopOpacity=".69" />
+          <stop offset=".97" stopColor="#006f94" stopOpacity="0" />
+        </radialGradient>
+        <radialGradient
+          id={`${id}d`}
+          cx="-739.84"
+          cy="872.71"
+          r=".9"
+          fx="-739.84"
+          fy="872.71"
+          gradientTransform="matrix(-102.53313 149.24243 149.46801 102.38138 -206024.5 21094.22)"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0" stopColor="#78edff" />
+          <stop offset="1" stopColor="#2ccfca" stopOpacity="0" />
+        </radialGradient>
+        <radialGradient
+          id={`${id}f`}
+          cx="-746.38"
+          cy="743.75"
+          r=".9"
+          fx="-746.38"
+          fy="743.75"
+          gradientTransform="matrix(56.60729 -162.28035 -292.83982 -101.83188 260296.26 -45019.25)"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0" stopColor="#003b5d" />
+          <stop offset=".49" stopColor="#004c6c" stopOpacity=".72" />
+          <stop offset=".97" stopColor="#007a86" stopOpacity="0" />
+        </radialGradient>
+        <radialGradient
+          id={`${id}g`}
+          cx="-741.46"
+          cy="888.91"
+          r=".9"
+          fx="-741.46"
+          fy="888.91"
+          gradientTransform="matrix(-85.44333 124.36732 124.55255 85.31498 -173675.69 16546.9)"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0" stopColor="#78edff" />
+          <stop offset="1" stopColor="#2ccfca" stopOpacity="0" />
+        </radialGradient>
+        <radialGradient
+          id={`${id}j`}
+          cx="-686.6"
+          cy="804.18"
+          r=".9"
+          fx="-686.6"
+          fy="804.18"
+          gradientTransform="matrix(222.887 222.57601 222.92613 -222.53738 -26208.17 332025.54)"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset=".06" stopColor="#00b6bd" />
+          <stop offset=".89" stopColor="#00495c" />
+        </radialGradient>
+        <radialGradient
+          id={`${id}k`}
+          cx="-686.07"
+          cy="864.41"
+          r=".9"
+          fx="-686.07"
+          fy="864.41"
+          gradientTransform="matrix(0 155.79 177.62 0 -153439.14 107241.64)"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset=".57" stopColor="#1e8581" stopOpacity="0" />
+          <stop offset=".97" stopColor="#1ecbe6" />
+        </radialGradient>
+        <linearGradient
+          id={`${id}a`}
+          x1="92.18"
+          x2="292.29"
+          y1="477.48"
+          y2="214.84"
+          gradientTransform="matrix(1 0 0 -1 0 502)"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0" stopColor="#00e3df" />
+          <stop offset=".41" stopColor="#0097a8" />
+          <stop offset="1" stopColor="#007791" />
+        </linearGradient>
+        <linearGradient
+          id={`${id}e`}
+          x1="245.14"
+          x2="411.9"
+          y1="331.57"
+          y2="112.7"
+          gradientTransform="matrix(1 0 0 -1 0 502)"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0" stopColor="#00e3df" />
+          <stop offset=".48" stopColor="#00a2b8" />
+          <stop offset=".95" stopColor="#00637c" />
+        </linearGradient>
+        <linearGradient
+          id={`${id}h`}
+          x1="153.42"
+          x2="259.71"
+          y1="214.53"
+          y2="1.97"
+          gradientTransform="matrix(1 0 0 -1 0 502)"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset=".05" stopColor="#75fff6" />
+          <stop offset=".51" stopColor="#00c7d1" />
+          <stop offset=".96" stopColor="#0096ad" />
+        </linearGradient>
+        <linearGradient
+          id={`${id}i`}
+          x1="292.44"
+          x2="235.63"
+          y1="-12.27"
+          y2="67.45"
+          gradientTransform="matrix(1 0 0 -1 0 502)"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset=".26" stopColor="#0e5a5d" />
+          <stop offset=".54" stopColor="#126c6b" stopOpacity=".69" />
+          <stop offset=".97" stopColor="#1c948a" stopOpacity="0" />
+        </linearGradient>
+      </defs>
+      <path
+        d="M187.79 300c82.97 0 150.23-67.16 150.23-150S270.75 0 187.79 0 37.56 67.16 37.56 150s67.26 150 150.23 150Z"
+        fill={`url(#${id}a)`}
+      />
+      <path
+        d="M187.79 300c82.97 0 150.23-67.16 150.23-150S270.75 0 187.79 0 37.56 67.16 37.56 150s67.26 150 150.23 150Z"
+        fill={`url(#${id}b)`}
+        fillOpacity=".2"
+      />
+      <path
+        d="M187.79 300c82.97 0 150.23-67.16 150.23-150S270.75 0 187.79 0 37.56 67.16 37.56 150s67.26 150 150.23 150Z"
+        fill={`url(#${id}c)`}
+        fillOpacity=".31"
+      />
+      <path
+        d="M187.79 300c82.97 0 150.23-67.16 150.23-150S270.75 0 187.79 0 37.56 67.16 37.56 150s67.26 150 150.23 150Z"
+        fill={`url(#${id}d)`}
+        fillOpacity=".7"
+      />
+      <path
+        d="M324.81 400C393.95 400 450 344.04 450 275s-56.05-125-125.19-125-125.19 55.96-125.19 125 56.05 125 125.19 125Z"
+        fill={`url(#${id}e)`}
+      />
+      <path
+        d="M324.81 400C393.95 400 450 344.04 450 275s-56.05-125-125.19-125-125.19 55.96-125.19 125 56.05 125 125.19 125Z"
+        fill={`url(#${id}f)`}
+        fillOpacity=".5"
+      />
+      <path
+        d="M324.81 400C393.95 400 450 344.04 450 275s-56.05-125-125.19-125-125.19 55.96-125.19 125 56.05 125 125.19 125Z"
+        fill={`url(#${id}g)`}
+        fillOpacity=".7"
+      />
+      <path
+        d="M206.56 500c58.77 0 106.41-47.57 106.41-106.25S265.33 287.5 206.56 287.5s-106.41 47.57-106.41 106.25S147.79 500 206.56 500Z"
+        fill={`url(#${id}h)`}
+      />
+      <path
+        d="M206.56 500c58.77 0 106.41-47.57 106.41-106.25S265.33 287.5 206.56 287.5s-106.41 47.57-106.41 106.25S147.79 500 206.56 500Z"
+        fill={`url(#${id}i)`}
+        fillOpacity=".32"
+      />
+      <rect
+        width="200.3"
+        height="200"
+        y="237.5"
+        rx="40.66"
+        ry="40.66"
+        fill={`url(#${id}j)`}
+      />
+      <rect
+        width="200.3"
+        height="200"
+        y="237.5"
+        rx="40.66"
+        ry="40.66"
+        fill={`url(#${id}k)`}
+        fillOpacity=".6"
+      />
+      <path
+        d="m57 372.15 21.72-11.32c2.45 4.94 5.64 8.58 9.58 10.92 3.99 2.34 8.36 3.51 13.09 3.51 5.27 0 9.29-1.06 12.05-3.19 2.77-2.18 4.15-5.45 4.15-9.8 0-3.4-1.33-6.27-3.99-8.61-2.66-2.39-7.37-4.2-14.13-5.42-12.88-2.34-22.25-6.43-28.1-12.28-5.8-5.85-8.7-13.13-8.7-21.84 0-10.84 3.83-19.5 11.5-25.99 7.66-6.48 17.78-9.72 30.34-9.72 8.46 0 15.91 1.73 22.35 5.18 6.44 3.45 11.55 8.4 15.33 14.83l-21.23 10.92c-2.34-3.61-4.87-6.22-7.58-7.81-2.72-1.65-6.12-2.47-10.22-2.47-4.9 0-8.62 1.06-11.18 3.19-2.5 2.13-3.75 4.89-3.75 8.29 0 2.92 1.2 5.5 3.59 7.73 2.45 2.18 7.34 3.96 14.69 5.34 12.35 2.34 21.56 6.59 27.62 12.76 6.12 6.11 9.18 13.84 9.18 23.2 0 11.37-3.65 20.38-10.94 27.02-7.29 6.64-17.7 9.96-31.21 9.96-9.79 0-18.63-2.13-26.5-6.38-7.82-4.3-13.7-10.31-17.64-18.02Z"
+        fill="#fff"
+      />
+    </LogoSvg>
+  );
+}

package/src/logos/slack-icon.tsx

@@ -0,0 +1,25 @@
+import { LogoSvg, type LogoProps } from "./logo-svg";
+
+/** Slack mark. */
+export function SlackIcon(props: LogoProps) {
+  return (
+    <LogoSvg viewBox="0 0 24 24" {...props}>
+      <path
+        d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zM6.313 15.165a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313z"
+        fill="#E01E5A"
+      />
+      <path
+        d="M8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zM8.834 6.313a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312z"
+        fill="#36C5F0"
+      />
+      <path
+        d="M18.956 8.834a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522V8.834zM17.688 8.834a2.528 2.528 0 0 1-2.523 2.521 2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.165 0a2.528 2.528 0 0 1 2.523 2.522v6.312z"
+        fill="#2EB67D"
+      />
+      <path
+        d="M15.165 18.956a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.52-2.522v-2.522h2.52zM15.165 17.688a2.527 2.527 0 0 1-2.52-2.523 2.526 2.526 0 0 1 2.52-2.52h6.313A2.527 2.527 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.523h-6.313z"
+        fill="#ECB22E"
+      />
+    </LogoSvg>
+  );
+}

package/src/logos/vercel-icon.tsx

@@ -0,0 +1,10 @@
+import { LogoSvg, type LogoProps } from "./logo-svg";
+
+/** Vercel mark (svgl). Monochrome: uses `currentColor`, so set the colour with a text class. */
+export function VercelIcon(props: LogoProps) {
+  return (
+    <LogoSvg viewBox="0 0 24 24" fill="currentColor" {...props}>
+      <path d="M24 22.525H0l12-21.05 12 21.05z" />
+    </LogoSvg>
+  );
+}

package/src/marketing/SiteFooter.tsx

@@ -1,5 +1,6 @@
 import type { ComponentType, ReactNode } from "react";
-import { APP_ICONS, type AppName } from "../brand";
+import { IconBrandGithub, IconBrandInstagram, IconBrandX } from "@tabler/icons-react";
+import { APP_ICONS, AppWordmark, projectVAppsColumn, type AppName, type ProductAppName } from "../brand";
 import { Button } from "../ui/button";
 import { Separator } from "../ui/separator";
 import { siteFooterClasses, type SiteFooterVariant } from "./marketing-classes";
@@ -23,47 +24,100 @@ export type SiteFooterSocial = {
   label?: string;
 };
 
-export type SiteFooterProps = {
-  /** Wordmark text above the tagline. */
-  brand: ReactNode;
+/** Text size in px of the built-in `AppWordmark` brand. Fixed: `SiteFooter` has no size prop. */
+export const SITE_FOOTER_WORDMARK_SIZE = 16;
+
+/** Default `socials` on the `app` path: X, Instagram and GitHub. */
+export const PROJECT_V_SOCIALS: readonly SiteFooterSocial[] = [
+  { href: "https://x.com/projectvdotuk", icon: IconBrandX, label: "Project V on X" },
+  { href: "https://www.instagram.com/projectvdotuk/", icon: IconBrandInstagram, label: "Project V on Instagram" },
+  { href: "https://github.com/projectvdotuk", icon: IconBrandGithub, label: "Project V on GitHub" },
+];
+
+/** Default `legalLinks` on the `app` path. */
+export const PROJECT_V_LEGAL_LINKS: readonly { href: string; label: string }[] = [
+  { href: "https://projectv.uk/privacy", label: "Privacy Policy" },
+  { href: "https://projectv.uk/terms", label: "Terms of Service" },
+];
+
+export type SiteFooterColumn = { heading: string; links: readonly SiteFooterLink[] };
+
+type SiteFooterCommonProps = {
   tagline: ReactNode;
-  /** Icon buttons under the tagline. Always open in a new tab. */
-  socials: readonly SiteFooterSocial[];
   /** Link columns to the right of the brand block. */
-  columns: readonly { heading: string; links: readonly SiteFooterLink[] }[];
-  /** Name in "Copyright © {year} {name}". */
-  name: string;
+  columns: readonly SiteFooterColumn[];
   /** Default: the current year. */
   year?: number;
-  /** Bottom-right links, for example Privacy Policy and Terms of Service. Always open in a new tab. */
-  legalLinks: readonly { href: string; label: string }[];
   /**
    * `"muted"` (default) and `"muted-foreground"` pick the secondary text
    * colour class. `"touch"` uses `text-muted-foreground`, `max-sm:hit-target`
    * links and a safe-area bottom padding.
    */
   variant?: SiteFooterVariant;
+  /** Under the socials, for example a Sign-in button. Not rendered on the legacy path. */
+  actions?: ReactNode;
 };
 
+/** Opinionated footer: set `app` and the Project V brand, socials, legal links, Apps column and product-of line follow. */
+export type SiteFooterAppProps = SiteFooterCommonProps & {
+  /** Product app id. Sets the wordmark (size 16), the copyright name and the product-of line. */
+  app: ProductAppName;
+  /** Replaces the `AppWordmark`. */
+  brand?: ReactNode;
+  /** Default `PROJECT_V_SOCIALS`. `[]` hides them. */
+  socials?: readonly SiteFooterSocial[];
+  /** Default `PROJECT_V_LEGAL_LINKS`. */
+  legalLinks?: readonly { href: string; label: string }[];
+  /** Overrides the copyright name (default: `app`). */
+  name?: string;
+  /** Appends the standard Apps column unless `columns` has an "Apps" heading (default `true`). */
+  includeAppsColumn?: boolean;
+  /** Shows "{app} is a product of Project V." (default `true`). */
+  showProductOf?: boolean;
+};
+
+/** Legacy footer: you pass every part. Prefer `SiteFooterAppProps`. */
+export type SiteFooterLegacyProps = SiteFooterCommonProps & {
+  app?: undefined;
+  /**
+   * @deprecated Set `app` instead: the footer renders `AppWordmark`. Without `app` the brand sits in the Michroma wrapper.
+   */
+  brand: ReactNode;
+  /** @deprecated Set `app` for the Project V defaults (`PROJECT_V_SOCIALS`). Icon buttons under the tagline; always open in a new tab. */
+  socials: readonly SiteFooterSocial[];
+  /** @deprecated Set `app`: the copyright name is then the app id. Name in "Copyright © {year} {name}". */
+  name: string;
+  /** @deprecated Set `app` for `PROJECT_V_LEGAL_LINKS`. Bottom-right links; always open in a new tab. */
+  legalLinks: readonly { href: string; label: string }[];
+  includeAppsColumn?: undefined;
+  showProductOf?: undefined;
+};
+
+export type SiteFooterProps = SiteFooterAppProps | SiteFooterLegacyProps;
+
 /** Marketing site footer: brand, socials, link columns, then copyright and legal links under a separator. */
-export function SiteFooter({
-  brand,
-  tagline,
-  socials,
-  columns,
-  name,
-  year = new Date().getFullYear(),
-  legalLinks,
-  variant = "muted",
-}: SiteFooterProps) {
+export function SiteFooter(props: SiteFooterProps) {
+  const { tagline, year = new Date().getFullYear(), variant = "muted", actions } = props;
   const c = siteFooterClasses[variant];
+  const modern = props.app !== undefined;
+  const brandNode = modern ? (
+    <div className="mb-3 md:mb-4">{props.brand ?? <AppWordmark app={props.app} size={SITE_FOOTER_WORDMARK_SIZE} />}</div>
+  ) : (
+    <div className="text-lg font-michroma font-normal tracking-wider mb-3 md:mb-4">{props.brand}</div>
+  );
+  const socials = modern ? (props.socials ?? PROJECT_V_SOCIALS) : props.socials;
+  const legalLinks = modern ? (props.legalLinks ?? PROJECT_V_LEGAL_LINKS) : props.legalLinks;
+  const name = modern ? (props.name ?? props.app) : props.name;
+  const hasApps = props.columns.some((column) => column.heading.toLowerCase() === "apps");
+  const columns: readonly SiteFooterColumn[] = modern && (props.includeAppsColumn ?? true) && !hasApps ? [...props.columns, projectVAppsColumn()] : props.columns;
+  const showProductOf = modern && (props.showProductOf ?? true);
   return (
     <footer className={c.footer}>
       <div className="relative z-10">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-8 lg:gap-12">
             <div className="flex-1 lg:flex-none">
-              <div className="text-lg font-michroma font-normal tracking-wider mb-3 md:mb-4">{brand}</div>
+              {brandNode}
               <p className={c.tagline}>{tagline}</p>
               <div className="flex gap-3 md:gap-4">
                 {socials.map(({ href, icon: Icon, label }) => (
@@ -74,6 +128,7 @@ export function SiteFooter({
                   </a>
                 ))}
               </div>
+              {modern && actions ? <div className="mt-3 md:mt-4">{actions}</div> : null}
             </div>
 
             <div className="flex flex-col sm:flex-row gap-8 md:gap-12 lg:gap-16 xl:gap-20">
@@ -120,6 +175,15 @@ export function SiteFooter({
                 {` ${name}`}
               </p>
               <p className={c.rights}>All rights reserved.</p>
+              {showProductOf ? (
+                <p className={c.rights}>
+                  {props.app} is a product of{" "}
+                  <a href="https://projectv.uk" target="_blank" rel="noopener noreferrer" className="underline underline-offset-2">
+                    Project V
+                  </a>
+                  .
+                </p>
+              ) : null}
             </div>
 
             <div className="flex flex-col gap-1 text-center sm:text-right">