@vvedantb/ui 0.35.0 → 0.37.0

package/src/icons/animated/animated-progress.tsx

@@ -0,0 +1,74 @@
+import { m, useSpring, useTransform } from "motion/react";
+import { useEffect, useId } from "react";
+
+export interface AnimatedProgressProps {
+  /** Progress from 0 to 100 (clamped). */
+  value: number;
+  /** Bar height in px. Default `4`. */
+  height?: number;
+  /** Class on the wrapping `div`. */
+  className?: string;
+  /** Run the moving gradient and shimmer. Default `true`. */
+  showGradient?: boolean;
+  /** Accessible name for the `progressbar`. */
+  label?: string;
+}
+
+/**
+ * Thin progress bar whose fill springs to `value`, with a moving gradient
+ * and shimmer (SVG `<animate>`). Fill: `--color-primary`; track:
+ * `--color-surface-secondary`. Renders `role="progressbar"`.
+ */
+export function AnimatedProgress({ value, height = 4, className, showGradient = true, label }: AnimatedProgressProps) {
+  const id = useId();
+  const gradientId = `${id}-gradient`;
+  const shimmerId = `${id}-shimmer`;
+  const clamped = Math.min(Math.max(value, 0), 100);
+  const springValue = useSpring(0, { stiffness: 100, damping: 30 });
+  const width = useTransform(springValue, (v) => `${v}%`);
+
+  useEffect(() => {
+    springValue.set(clamped);
+  }, [clamped, springValue]);
+
+  return (
+    <div
+      className={className}
+      role="progressbar"
+      aria-label={label}
+      aria-valuemin={0}
+      aria-valuemax={100}
+      aria-valuenow={Math.round(clamped)}
+      style={{ height, overflow: "hidden", borderRadius: height / 2 }}
+    >
+      <svg width="100%" height={height} className="block" aria-hidden="true">
+        <defs>
+          {/* Moving gradient */}
+          <linearGradient id={gradientId} x1="0%" y1="0%" x2="100%" y2="0%">
+            <stop offset="0%" stopColor="var(--color-primary)" />
+            <stop offset="50%" stopColor="color-mix(in oklch, var(--color-primary) 80%, transparent)" />
+            <stop offset="100%" stopColor="var(--color-primary)" />
+            {showGradient ? <animate attributeName="x1" values="-100%;100%" dur="2s" repeatCount="indefinite" /> : null}
+            {showGradient ? <animate attributeName="x2" values="0%;200%" dur="2s" repeatCount="indefinite" /> : null}
+          </linearGradient>
+          {/* Shimmer overlay */}
+          <linearGradient id={shimmerId} x1="0%" y1="0%" x2="100%" y2="0%">
+            <stop offset="0%" stopColor="transparent" />
+            <stop offset="50%" stopColor="rgba(255,255,255,0.3)" />
+            <stop offset="100%" stopColor="transparent" />
+            <animate attributeName="x1" values="-50%;150%" dur="1.5s" repeatCount="indefinite" />
+            <animate attributeName="x2" values="0%;200%" dur="1.5s" repeatCount="indefinite" />
+          </linearGradient>
+        </defs>
+        {/* Track */}
+        <rect x="0" y="0" width="100%" height={height} rx={height / 2} fill="var(--color-surface-secondary)" />
+        {/* Fill */}
+        <m.rect x="0" y="0" height={height} rx={height / 2} fill={`url(#${gradientId})`} style={{ width }} />
+        {/* Shimmer */}
+        {showGradient && clamped > 0 ? (
+          <m.rect x="0" y="0" height={height} rx={height / 2} fill={`url(#${shimmerId})`} style={{ width }} />
+        ) : null}
+      </svg>
+    </div>
+  );
+}

package/src/icons/animated/animated-status-dot.tsx

@@ -0,0 +1,98 @@
+import { m } from "motion/react";
+import { useId } from "react";
+
+export type StatusDotPhase = "idle" | "listening" | "thinking" | "speaking" | "error";
+
+export interface AnimatedStatusDotProps {
+  phase: StatusDotPhase;
+  /** Dot diameter in px. The svg is `size * 3` square to leave room for the ripples. Default `10`. */
+  size?: number;
+  className?: string;
+}
+
+const PHASE_COLORS: Record<StatusDotPhase, string> = {
+  idle: "var(--color-muted-foreground)",
+  listening: "var(--color-danger)",
+  thinking: "var(--color-warning)",
+  speaking: "var(--color-success)",
+  error: "var(--color-danger)",
+};
+
+const RIPPLE_DELAYS = [0, 0.5, 1];
+
+/**
+ * Status dot for voice states: ripples while `listening`, a glow pulse while
+ * `listening` or `speaking`. Decorative (`aria-hidden`); show the phase as text too.
+ */
+export function AnimatedStatusDot({ phase, size = 10, className }: AnimatedStatusDotProps) {
+  const filterId = `${useId()}-glow`;
+  const color = PHASE_COLORS[phase];
+  const isListening = phase === "listening";
+  const isActive = isListening || phase === "speaking";
+
+  return (
+    <svg
+      width={size * 3}
+      height={size * 3}
+      viewBox="0 0 30 30"
+      className={className}
+      overflow="visible"
+      aria-hidden="true"
+      data-phase={phase}
+    >
+      <defs>
+        <filter id={filterId} x="-50%" y="-50%" width="200%" height="200%">
+          <feGaussianBlur stdDeviation="2" result="coloredBlur" />
+          <feMerge>
+            <feMergeNode in="coloredBlur" />
+            <feMergeNode in="SourceGraphic" />
+          </feMerge>
+        </filter>
+      </defs>
+
+      {/* Ripples while listening */}
+      {isListening
+        ? RIPPLE_DELAYS.map((delay) => (
+            <m.circle
+              key={delay}
+              cx="15"
+              cy="15"
+              r="5"
+              fill="none"
+              stroke={color}
+              strokeWidth="1"
+              initial={{ r: 5, opacity: 0.6 }}
+              animate={{ r: 14, opacity: 0 }}
+              transition={{ duration: 1.5, repeat: Infinity, ease: "easeOut", delay }}
+            />
+          ))
+        : null}
+
+      {/* Glow ring while active */}
+      {isActive ? (
+        <m.circle
+          cx="15"
+          cy="15"
+          r="7"
+          fill={color}
+          opacity={0.3}
+          initial={{ scale: 1 }}
+          animate={{ scale: [1, 1.2, 1], opacity: [0.3, 0.15, 0.3] }}
+          transition={{ duration: 2, repeat: Infinity, ease: "easeInOut" }}
+        />
+      ) : null}
+
+      {/* Dot */}
+      <m.circle
+        cx="15"
+        cy="15"
+        r="5"
+        fill={color}
+        filter={isActive ? `url(#${filterId})` : undefined}
+        initial={{ scale: 0.8, opacity: 0 }}
+        animate={{ scale: 1, opacity: 1 }}
+        transition={{ duration: 0.2 }}
+      />
+    </svg>
+  );
+}

package/src/icons/animated/index.ts

@@ -0,0 +1,22 @@
+// Motion-driven animated SVG icons. Entry: `@vvedantb/ui/icons/animated` (not re-exported from
+// the root or `/client`, so apps that do not use them do not load them). They need the optional
+// `motion` peer and animate through `m.*`, so wrap the app in `MotionProvider` (or its own
+// `LazyMotion`); without it they render their resting frame. No stylesheet is needed.
+export { AnimatedBellIcon } from "./animated-bell-icon";
+export type { AnimatedBellIconProps } from "./animated-bell-icon";
+export { AnimatedCounter } from "./animated-counter";
+export type { AnimatedCounterProps } from "./animated-counter";
+export { AnimatedKeyIcon } from "./animated-key-icon";
+export type { AnimatedKeyIconProps } from "./animated-key-icon";
+export { AnimatedNotificationIcon } from "./animated-notification-icon";
+export type { AnimatedNotificationIconProps, NotificationIconType } from "./animated-notification-icon";
+export { AnimatedProgress } from "./animated-progress";
+export type { AnimatedProgressProps } from "./animated-progress";
+export { AnimatedStatusDot } from "./animated-status-dot";
+export type { AnimatedStatusDotProps, StatusDotPhase } from "./animated-status-dot";
+export { MorphingMenuIcon } from "./morphing-menu-icon";
+export type { MorphingMenuIconProps } from "./morphing-menu-icon";
+export { MorphingMicIcon } from "./morphing-mic-icon";
+export type { MorphingMicIconProps } from "./morphing-mic-icon";
+export { PulsingRings } from "./pulsing-rings";
+export type { PulsingRingsProps } from "./pulsing-rings";

package/src/icons/animated/morphing-menu-icon.tsx

@@ -0,0 +1,71 @@
+import { m } from "motion/react";
+
+export interface MorphingMenuIconProps {
+  /** `true` draws the X (close), `false` the three bars (menu). */
+  isOpen: boolean;
+  /** Width and height in px. Default `20`. */
+  size?: number;
+  className?: string;
+}
+
+const LINE = {
+  stroke: "currentColor",
+  strokeWidth: 2,
+  strokeLinecap: "round" as const,
+  strokeLinejoin: "round" as const,
+};
+const MORPH = { duration: 0.25, ease: "easeInOut" } as const;
+
+/**
+ * Hamburger that morphs into an X: the outer bars cross and the middle bar
+ * fades out. Uses `currentColor`. Decorative (`aria-hidden`): label the button
+ * that holds it and set its `aria-expanded`.
+ */
+export function MorphingMenuIcon({ isOpen, size = 20, className }: MorphingMenuIconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      className={className}
+      aria-hidden="true"
+      data-state={isOpen ? "open" : "closed"}
+    >
+      {/* Top bar: becomes the "\" of the X */}
+      <m.line
+        x1="4"
+        y1="6"
+        x2="20"
+        y2="6"
+        {...LINE}
+        initial={false}
+        animate={{ x1: isOpen ? 5 : 4, y1: isOpen ? 5 : 6, x2: isOpen ? 19 : 20, y2: isOpen ? 19 : 6 }}
+        transition={MORPH}
+      />
+      {/* Middle bar: fades out */}
+      <m.line
+        x1="4"
+        y1="12"
+        x2="20"
+        y2="12"
+        {...LINE}
+        initial={false}
+        animate={{ opacity: isOpen ? 0 : 1, scaleX: isOpen ? 0 : 1 }}
+        transition={{ duration: 0.15, ease: "easeInOut" }}
+        style={{ transformOrigin: "center" }}
+      />
+      {/* Bottom bar: becomes the "/" of the X */}
+      <m.line
+        x1="4"
+        y1="18"
+        x2="20"
+        y2="18"
+        {...LINE}
+        initial={false}
+        animate={{ x1: isOpen ? 5 : 4, y1: isOpen ? 19 : 18, x2: isOpen ? 19 : 20, y2: isOpen ? 5 : 18 }}
+        transition={MORPH}
+      />
+    </svg>
+  );
+}

package/src/icons/animated/morphing-mic-icon.tsx

@@ -0,0 +1,52 @@
+import { m } from "motion/react";
+import { cn } from "../../utils/cn";
+
+export interface MorphingMicIconProps {
+  /** `true` shows the stop square, `false` the microphone. */
+  isListening: boolean;
+  /** Width and height in px. Default `32`. */
+  size?: number;
+  strokeWidth?: number;
+  className?: string;
+}
+
+const ICON_TRANSITION = { type: "spring", duration: 0.3, bounce: 0 } as const;
+const HIDDEN = { scale: 0.25, opacity: 0, filter: "blur(4px)" };
+const VISIBLE = { scale: 1, opacity: 1, filter: "blur(0px)" };
+
+/**
+ * Cross-fades a microphone and a stop square (scale, opacity and blur).
+ * Uses `currentColor`. Decorative (`aria-hidden`): label the button that holds it.
+ */
+export function MorphingMicIcon({ isListening, size = 32, strokeWidth = 2, className }: MorphingMicIconProps) {
+  const svgProps = {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth,
+    strokeLinecap: "round" as const,
+    strokeLinejoin: "round" as const,
+    className: "absolute inset-0",
+  };
+
+  return (
+    <span
+      className={cn("relative inline-flex shrink-0", className)}
+      style={{ width: size, height: size }}
+      aria-hidden="true"
+      data-state={isListening ? "listening" : "idle"}
+    >
+      <m.svg {...svgProps} data-slot="mic" initial={false} animate={isListening ? HIDDEN : VISIBLE} transition={ICON_TRANSITION}>
+        <rect x="9" y="1" width="6" height="12" rx="3" />
+        <path d="M19 10v2a7 7 0 0 1-14 0v-2" />
+        <path d="M12 19v4" />
+        <path d="M8 23h8" />
+      </m.svg>
+      <m.svg {...svgProps} data-slot="stop" initial={false} animate={isListening ? VISIBLE : HIDDEN} transition={ICON_TRANSITION}>
+        <rect x="6" y="6" width="12" height="12" rx="2" />
+      </m.svg>
+    </span>
+  );
+}

package/src/icons/animated/pulsing-rings.tsx

@@ -0,0 +1,50 @@
+import { m } from "motion/react";
+import { cn } from "../../utils/cn";
+
+export interface PulsingRingsProps {
+  /** Size of the element the rings surround (for example the record button), in px. The svg is `size * 1.6`. */
+  size: number;
+  /** Number of rings. Default `3`. */
+  ringCount?: number;
+  /** Ring colour. Default `var(--color-danger)`. */
+  color?: string;
+  /** Render the rings. Default `true`; `false` renders nothing. */
+  active?: boolean;
+  className?: string;
+}
+
+/**
+ * Concentric rings that expand and fade with staggered timing, for a
+ * recording state. Absolutely centred: put it in a `relative` parent beside
+ * the button. Decorative and `pointer-events-none`.
+ */
+export function PulsingRings({ size, ringCount = 3, color = "var(--color-danger)", active = true, className }: PulsingRingsProps) {
+  if (!active) return null;
+  const baseDelay = 1.2 / ringCount;
+
+  return (
+    <svg
+      width={size * 1.6}
+      height={size * 1.6}
+      viewBox="0 0 100 100"
+      className={cn("pointer-events-none absolute", className)}
+      style={{ left: "50%", top: "50%", transform: "translate(-50%, -50%)" }}
+      aria-hidden="true"
+    >
+      {Array.from({ length: ringCount }, (_, i) => (
+        <m.circle
+          key={i}
+          cx="50"
+          cy="50"
+          r="30"
+          fill="none"
+          stroke={color}
+          strokeWidth="2"
+          initial={{ r: 30, opacity: 0.6 }}
+          animate={{ r: 48, opacity: 0 }}
+          transition={{ duration: 1.2, repeat: Infinity, ease: "easeOut", delay: i * baseDelay }}
+        />
+      ))}
+    </svg>
+  );
+}

package/src/index.ts

@@ -50,6 +50,7 @@ export * from "./ui/avatar";
 export * from "./ui/badge";
 export * from "./ui/border-beam";
 export * from "./ui/breadcrumb";
+export * from "./ui/page-title";
 export * from "./ui/button";
 export * from "./ui/button-group";
 export * from "./ui/card";
@@ -285,6 +286,8 @@ export {
 } from "./marketing/landing";
 export type {
   LandingFeature,
+  LandingFooterAppProps,
+  LandingFooterLegacyProps,
   LandingFooterProps,
   LandingLatticeProps,
   LandingLink,
@@ -311,8 +314,15 @@ export {
   landingShellClass,
 } from "./marketing/marketing-classes";
 export type { PricingModalTone, SiteFooterVariant } from "./marketing/marketing-classes";
-export { SiteFooter } from "./marketing/SiteFooter";
-export type { SiteFooterLink, SiteFooterProps, SiteFooterSocial } from "./marketing/SiteFooter";
+export { PROJECT_V_LEGAL_LINKS, PROJECT_V_SOCIALS, SITE_FOOTER_WORDMARK_SIZE, SiteFooter } from "./marketing/SiteFooter";
+export type {
+  SiteFooterAppProps,
+  SiteFooterColumn,
+  SiteFooterLegacyProps,
+  SiteFooterLink,
+  SiteFooterProps,
+  SiteFooterSocial,
+} from "./marketing/SiteFooter";
 export { PricingModal, V_PRO_APP_BENEFITS } from "./marketing/PricingModal";
 export type {
   PricingModalLegacyProps,
@@ -330,6 +340,9 @@ export * from "../app/src/index";
 // Family app marks (Icon* components, deprecated AppMark and raw SVG strings for favicons).
 export * from "./brand";
 
+// Third-party brand logos (`GitHubIcon`, `SlackIcon`, `ClaudeIcon`, ...). Also `@vvedantb/ui/logos`.
+export * from "./logos";
+
 // Native tokens (JS values that match tokens.css).
 export { tokens } from "../tokens/src/native";
 export type { Tokens } from "../tokens/src/native";

package/src/logos/chrome-icon.tsx

@@ -0,0 +1,29 @@
+import { LogoSvg, type LogoProps } from "./logo-svg";
+
+/** Google Chrome mark (svgl `chrome.svg`). */
+export function ChromeIcon(props: LogoProps) {
+  return (
+    <LogoSvg viewBox="0 0 190.5 190.5" preserveAspectRatio="xMidYMid" {...props}>
+      <path
+        fill="#fff"
+        d="M95.252 142.873c26.304 0 47.627-21.324 47.627-47.628s-21.323-47.628-47.627-47.628-47.627 21.324-47.627 47.628 21.323 47.628 47.627 47.628z"
+      />
+      <path
+        fill="#229342"
+        d="m54.005 119.07-41.24-71.43a95.227 95.227 0 0 0-.003 95.25 95.234 95.234 0 0 0 82.496 47.61l41.24-71.43v-.011a47.613 47.613 0 0 1-17.428 17.443 47.62 47.62 0 0 1-47.632.007 47.62 47.62 0 0 1-17.433-17.437z"
+      />
+      <path
+        fill="#fbc116"
+        d="m136.495 119.067-41.239 71.43a95.229 95.229 0 0 0 82.489-47.622A95.24 95.24 0 0 0 190.5 95.248a95.237 95.237 0 0 0-12.772-47.623H95.249l-.01.007a47.62 47.62 0 0 1 23.819 6.372 47.618 47.618 0 0 1 17.439 17.431 47.62 47.62 0 0 1-.001 47.633z"
+      />
+      <path
+        fill="#1a73e8"
+        d="M95.252 132.961c20.824 0 37.705-16.881 37.705-37.706S116.076 57.55 95.252 57.55 57.547 74.431 57.547 95.255s16.881 37.706 37.705 37.706z"
+      />
+      <path
+        fill="#e33b2e"
+        d="M95.252 47.628h82.479A95.237 95.237 0 0 0 142.87 12.76 95.23 95.23 0 0 0 95.245 0a95.222 95.222 0 0 0-47.623 12.767 95.23 95.23 0 0 0-34.856 34.872l41.24 71.43.011.006a47.62 47.62 0 0 1-.015-47.633 47.61 47.61 0 0 1 41.252-23.815z"
+      />
+    </LogoSvg>
+  );
+}

package/src/logos/claude-icon.tsx

@@ -0,0 +1,13 @@
+import { LogoSvg, type LogoProps } from "./logo-svg";
+
+/** Anthropic Claude mark. Monochrome: uses `currentColor`. */
+export function ClaudeIcon(props: LogoProps) {
+  return (
+    <LogoSvg viewBox="0 0 24 24" {...props}>
+      <path
+        fill="currentColor"
+        d="m4.7144 15.9555 4.7174-2.6471.079-.2307-.079-.1275h-.2307l-.7893-.0486-2.6956-.0729-2.3375-.0971-2.2646-.1214-.5707-.1215-.5343-.7042.0546-.3522.4797-.3218.686.0608 1.5179.1032 2.2767.1578 1.6514.0972 2.4468.255h.3886l.0546-.1579-.1336-.0971-.1032-.0972L6.973 9.8356l-2.55-1.6879-1.3356-.9714-.7225-.4918-.3643-.4614-.1578-1.0078.6557-.7225.8803.0607.2246.0607.8925.686 1.9064 1.4754 2.4893 1.8336.3643.3035.1457-.1032.0182-.0728-.164-.2733-1.3539-2.4467-1.445-2.4893-.6435-1.032-.17-.6194c-.0607-.255-.1032-.4674-.1032-.7285L6.287.1335 6.6997 0l.9957.1336.419.3642.6192 1.4147 1.0018 2.2282 1.5543 3.0296.4553.8985.2429.8318.091.255h.1579v-.1457l.1275-1.706.2368-2.0947.2307-2.6957.0789-.7589.3764-.9107.7468-.4918.5828.2793.4797.686-.0668.4433-.2853 1.8517-.5586 2.9021-.3643 1.9429h.2125l.2429-.2429.9835-1.3053 1.6514-2.0643.7286-.8196.85-.9046.5464-.4311h1.0321l.759 1.1293-.34 1.1657-1.0625 1.3478-.8804 1.1414-1.2628 1.7-.7893 1.36.0729.1093.1882-.0183 2.8535-.607 1.5421-.2794 1.8396-.3157.8318.3886.091.3946-.3278.8075-1.967.4857-2.3072.4614-3.4364.8136-.0425.0304.0486.0607 1.5482.1457.6618.0364h1.621l3.0175.2247.7892.522.4736.6376-.079.4857-1.2142.6193-1.6393-.3886-3.825-.9107-1.3113-.3279h-.1822v.1093l1.0929 1.0686 2.0035 1.8092 2.5075 2.3314.1275.5768-.3218.4554-.34-.0486-2.2039-1.6575-.85-.7468-1.9246-1.621h-.1275v.17l.4432.6496 2.3436 3.5214.1214 1.0807-.17.3521-.6071.2125-.6679-.1214-1.3721-1.9246L14.38 17.959l-1.1414-1.9428-.1397.079-.674 7.2552-.3156.3703-.7286.2793-.6071-.4614-.3218-.7468.3218-1.4753.3886-1.9246.3157-1.53.2853-1.9004.17-.6314-.0121-.0425-.1397.0182-1.4328 1.9672-2.1796 2.9446-1.7243 1.8456-.4128.164-.7164-.3704.0667-.6618.4008-.5889 2.386-3.0357 1.4389-1.882.929-1.0868-.0062-.1579h-.0546l-6.3385 4.1164-1.1293.1457-.4857-.4554.0608-.7467.2307-.2429 1.9064-1.3114Z"
+      />
+    </LogoSvg>
+  );
+}

package/src/logos/convex-icon.tsx

@@ -0,0 +1,21 @@
+import { LogoSvg, type LogoProps } from "./logo-svg";
+
+/** Convex mark (svgl `convex.svg`). */
+export function ConvexIcon(props: LogoProps) {
+  return (
+    <LogoSvg viewBox="28 28 128 132" fill="none" {...props}>
+      <path
+        fill="#F3B01C"
+        d="M108.092 130.021c18.166-2.018 35.293-11.698 44.723-27.854-4.466 39.961-48.162 65.218-83.83 49.711-3.286-1.425-6.115-3.796-8.056-6.844-8.016-12.586-10.65-28.601-6.865-43.135 10.817 18.668 32.81 30.111 54.028 28.122Z"
+      />
+      <path
+        fill="#8D2676"
+        d="M53.401 90.174c-7.364 17.017-7.682 36.94 1.345 53.336-31.77-23.902-31.423-75.052-.388-98.715 2.87-2.187 6.282-3.485 9.86-3.683 14.713-.776 29.662 4.91 40.146 15.507-21.3.212-42.046 13.857-50.963 33.555Z"
+      />
+      <path
+        fill="#EE342F"
+        d="M114.637 61.855C103.89 46.87 87.069 36.668 68.639 36.358c35.625-16.17 79.446 10.047 84.217 48.807.444 3.598-.139 7.267-1.734 10.512-6.656 13.518-18.998 24.002-33.42 27.882 10.567-19.599 9.263-43.544-3.065-61.704Z"
+      />
+    </LogoSvg>
+  );
+}

package/src/logos/cursor-icon.tsx

@@ -0,0 +1,10 @@
+import { LogoSvg, type LogoProps } from "./logo-svg";
+
+/** Cursor mark (svgl `cursor_light.svg`). Monochrome: uses `currentColor`. */
+export function CursorIcon(props: LogoProps) {
+  return (
+    <LogoSvg viewBox="0 0 466.73 532.09" fill="currentColor" {...props}>
+      <path d="M457.43,125.94L244.42,2.96c-6.84-3.95-15.28-3.95-22.12,0L9.3,125.94c-5.75,3.32-9.3,9.46-9.3,16.11v247.99c0,6.65,3.55,12.79,9.3,16.11l213.01,122.98c6.84,3.95,15.28,3.95,22.12,0l213.01-122.98c5.75-3.32,9.3-9.46,9.3-16.11v-247.99c0-6.65-3.55-12.79-9.3-16.11h-.01ZM444.05,151.99l-205.63,356.16c-1.39,2.4-5.06,1.42-5.06-1.36v-233.21c0-4.66-2.49-8.97-6.53-11.31L24.87,145.67c-2.4-1.39-1.42-5.06,1.36-5.06h411.26c5.84,0,9.49,6.33,6.57,11.39h-.01Z" />
+    </LogoSvg>
+  );
+}

package/src/logos/dropbox-icon.tsx

@@ -0,0 +1,14 @@
+import { LogoSvg, type LogoProps } from "./logo-svg";
+
+/** Dropbox mark. */
+export function DropboxIcon(props: LogoProps) {
+  return (
+    <LogoSvg viewBox="0 0 24 24" {...props}>
+      <path d="M6 2L0 6L6 10L12 6L6 2Z" fill="#0061FF" />
+      <path d="M18 2L12 6L18 10L24 6L18 2Z" fill="#0061FF" />
+      <path d="M0 14L6 18L12 14L6 10L0 14Z" fill="#0061FF" />
+      <path d="M18 10L12 14L18 18L24 14L18 10Z" fill="#0061FF" />
+      <path d="M6 19.5L12 15.5L18 19.5L12 23.5L6 19.5Z" fill="#0061FF" />
+    </LogoSvg>
+  );
+}

package/src/logos/figma-icon.tsx

@@ -0,0 +1,26 @@
+import { LogoSvg, type LogoProps } from "./logo-svg";
+
+/** Figma mark, in a square viewBox. */
+export function FigmaIcon(props: LogoProps) {
+  return (
+    <LogoSvg viewBox="-9.5 0 57 57" {...props}>
+      <path
+        d="M19 28.5a9.5 9.5 0 1 1 19 0 9.5 9.5 0 0 1-19 0z"
+        fill="#1abcfe"
+      />
+      <path
+        d="M0 47.5A9.5 9.5 0 0 1 9.5 38H19v9.5a9.5 9.5 0 1 1-19 0z"
+        fill="#0acf83"
+      />
+      <path d="M19 0v19h9.5a9.5 9.5 0 1 0 0-19H19z" fill="#ff7262" />
+      <path
+        d="M0 9.5A9.5 9.5 0 0 0 9.5 19H19V0H9.5A9.5 9.5 0 0 0 0 9.5z"
+        fill="#f24e1e"
+      />
+      <path
+        d="M0 28.5A9.5 9.5 0 0 0 9.5 38H19V19H9.5A9.5 9.5 0 0 0 0 28.5z"
+        fill="#a259ff"
+      />
+    </LogoSvg>
+  );
+}

package/src/logos/github-icon.tsx

@@ -0,0 +1,10 @@
+import { LogoSvg, type LogoProps } from "./logo-svg";
+
+/** GitHub mark. Monochrome: uses `currentColor` so it follows light and dark themes. */
+export function GitHubIcon(props: LogoProps) {
+  return (
+    <LogoSvg viewBox="0 0 24 24" fill="currentColor" {...props}>
+      <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
+    </LogoSvg>
+  );
+}

package/src/logos/gmail-icon.tsx

@@ -0,0 +1,34 @@
+import { LogoSvg, type LogoProps } from "./logo-svg";
+
+/** Gmail mark (svgl `gmail.svg`). */
+export function GmailIcon(props: LogoProps) {
+  return (
+    <LogoSvg viewBox="0 49.4 512 399.42" {...props}>
+      <g fill="none" fillRule="evenodd">
+        <g fillRule="nonzero">
+          <path
+            fill="#4285f4"
+            d="M34.91 448.818h81.454V251L0 163.727V413.91c0 19.287 15.622 34.91 34.91 34.91z"
+          />
+          <path
+            fill="#34a853"
+            d="M395.636 448.818h81.455c19.287 0 34.909-15.622 34.909-34.909V163.727L395.636 251z"
+          />
+          <path
+            fill="#fbbc04"
+            d="M395.636 99.727V251L512 163.727v-46.545c0-43.142-49.25-67.782-83.782-41.891z"
+          />
+        </g>
+        <path
+          fill="#ea4335"
+          d="M116.364 251V99.727L256 204.455 395.636 99.727V251L256 355.727z"
+        />
+        <path
+          fill="#c5221f"
+          fillRule="nonzero"
+          d="M0 117.182v46.545L116.364 251V99.727L83.782 75.291C49.25 49.4 0 74.04 0 117.18z"
+        />
+      </g>
+    </LogoSvg>
+  );
+}

package/src/logos/google-drive-icon.tsx

@@ -0,0 +1,33 @@
+import { LogoSvg, type LogoProps } from "./logo-svg";
+
+/** Google Drive mark. */
+export function GoogleDriveIcon(props: LogoProps) {
+  return (
+    <LogoSvg viewBox="0 0 87.3 78" {...props}>
+      <path
+        d="m6.6 66.85 3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3l13.75-23.8h-27.5c0 1.55.4 3.1 1.2 4.5z"
+        fill="#0066da"
+      />
+      <path
+        d="m43.65 25-13.75-23.8c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44a9.06 9.06 0 0 0 -1.2 4.5h27.5z"
+        fill="#00ac47"
+      />
+      <path
+        d="m73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75 7.65-13.25c.8-1.4 1.2-2.95 1.2-4.5h-27.502l5.852 11.5z"
+        fill="#ea4335"
+      />
+      <path
+        d="m43.65 25 13.75-23.8c-1.35-.8-2.9-1.2-4.5-1.2h-18.5c-1.6 0-3.15.45-4.5 1.2z"
+        fill="#00832d"
+      />
+      <path
+        d="m59.8 53h-32.3l-13.75 23.8c1.35.8 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z"
+        fill="#2684fc"
+      />
+      <path
+        d="m73.4 26.5-12.7-22c-.8-1.4-1.95-2.5-3.3-3.3l-13.75 23.8 16.15 28h27.45c0-1.55-.4-3.1-1.2-4.5z"
+        fill="#ffba00"
+      />
+    </LogoSvg>
+  );
+}

package/src/logos/index.ts

@@ -0,0 +1,19 @@
+// Third-party brand logos (full-colour unless noted). Family app marks live in `../brand`.
+// Each logo takes `LogoProps`: `size` (default 24), `title` (labelled `role="img"`; otherwise
+// `aria-hidden`) and any other SVG prop. Paths are the vendors' own; do not recolour them.
+export type { LogoProps } from "./logo-svg";
+export { ChromeIcon } from "./chrome-icon";
+export { ClaudeIcon } from "./claude-icon";
+export { ConvexIcon } from "./convex-icon";
+export { CursorIcon } from "./cursor-icon";
+export { DropboxIcon } from "./dropbox-icon";
+export { FigmaIcon } from "./figma-icon";
+export { GitHubIcon } from "./github-icon";
+export { GmailIcon } from "./gmail-icon";
+export { GoogleDriveIcon } from "./google-drive-icon";
+export { LinearIcon } from "./linear-icon";
+export { NotionIcon } from "./notion-icon";
+export { OneDriveIcon } from "./onedrive-icon";
+export { SharePointIcon } from "./sharepoint-icon";
+export { SlackIcon } from "./slack-icon";
+export { VercelIcon } from "./vercel-icon";

package/src/logos/linear-icon.tsx

@@ -0,0 +1,13 @@
+import { LogoSvg, type LogoProps } from "./logo-svg";
+
+/** Linear mark (the current four-band logo, 100x100 viewBox). */
+export function LinearIcon(props: LogoProps) {
+  return (
+    <LogoSvg viewBox="0 0 100 100" fill="none" {...props}>
+      <path
+        fill="#5E6AD2"
+        d="M1.225 61.523c-.222-.949.908-1.546 1.597-.857l36.512 36.512c.69.69.092 1.82-.857 1.597-18.425-4.323-32.93-18.827-37.252-37.252ZM.002 46.889a.99.99 0 0 0 .29.76L52.35 99.71c.201.2.478.307.76.29 2.37-.149 4.695-.46 6.963-.927.765-.157 1.03-1.096.478-1.648L2.576 39.448c-.552-.551-1.491-.286-1.648.479a50.067 50.067 0 0 0-.926 6.962ZM4.21 29.705a.988.988 0 0 0 .208 1.1l64.776 64.776c.289.29.726.375 1.1.208a49.908 49.908 0 0 0 5.185-2.684.981.981 0 0 0 .183-1.54L8.436 24.336a.981.981 0 0 0-1.541.183 49.896 49.896 0 0 0-2.684 5.185Zm8.448-11.631a.986.986 0 0 1-.045-1.354C21.78 6.46 35.111 0 49.952 0 77.592 0 100 22.407 100 50.048c0 14.84-6.46 28.172-16.72 37.338a.986.986 0 0 1-1.354-.045L12.659 18.074Z"
+      />
+    </LogoSvg>
+  );
+}