@vvedantb/ui 0.34.0 → 0.36.0

package/src/icons/animated/animated-notification-icon.tsx

@@ -0,0 +1,202 @@
+import { m } from "motion/react";
+
+export type NotificationIconType = "success" | "warning" | "error" | "info";
+
+export interface AnimatedNotificationIconProps {
+  type: NotificationIconType;
+  /** Width and height in px. Default `20`. */
+  size?: number;
+  /** Stroke colour. Default: the type's token (`--color-success`, `--color-warning`, `--color-danger`, `--color-primary` for `info`). */
+  color?: string;
+  /** Class on the wrapping `span`. */
+  className?: string;
+}
+
+const TYPE_COLORS: Record<NotificationIconType, string> = {
+  success: "var(--color-success)",
+  warning: "var(--color-warning)",
+  error: "var(--color-danger)",
+  info: "var(--color-primary)",
+};
+
+interface PartProps {
+  size: number;
+  color: string;
+}
+
+function SuccessIcon({ size, color }: PartProps) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" aria-hidden="true">
+      {/* Circle */}
+      <m.circle
+        cx="12"
+        cy="12"
+        r="10"
+        stroke={color}
+        strokeWidth="1.5"
+        fill="none"
+        initial={{ pathLength: 0, opacity: 0 }}
+        animate={{ pathLength: 1, opacity: 1 }}
+        transition={{ duration: 0.4, ease: "easeOut" }}
+      />
+      {/* Checkmark draws itself */}
+      <m.path
+        d="M8 12l2.5 2.5L16 9"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        fill="none"
+        initial={{ pathLength: 0 }}
+        animate={{ pathLength: 1 }}
+        transition={{ duration: 0.3, delay: 0.3, ease: "easeOut" }}
+      />
+    </svg>
+  );
+}
+
+function WarningIcon({ size, color }: PartProps) {
+  return (
+    <m.svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      aria-hidden="true"
+      initial={{ rotate: 0 }}
+      animate={{ rotate: [0, -5, 5, -3, 3, 0] }}
+      transition={{ duration: 0.5, delay: 0.2 }}
+    >
+      {/* Triangle */}
+      <m.path
+        d="M12 2L2 20h20L12 2z"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        fill="none"
+        initial={{ pathLength: 0, opacity: 0 }}
+        animate={{ pathLength: 1, opacity: 1 }}
+        transition={{ duration: 0.4, ease: "easeOut" }}
+      />
+      {/* Exclamation line */}
+      <m.path
+        d="M12 9v4"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        initial={{ pathLength: 0 }}
+        animate={{ pathLength: 1 }}
+        transition={{ duration: 0.2, delay: 0.3 }}
+      />
+      {/* Exclamation dot */}
+      <m.circle
+        cx="12"
+        cy="17"
+        r="1"
+        fill={color}
+        initial={{ scale: 0 }}
+        animate={{ scale: 1 }}
+        transition={{ duration: 0.15, delay: 0.45, type: "spring" }}
+      />
+    </m.svg>
+  );
+}
+
+function ErrorIcon({ size, color }: PartProps) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" aria-hidden="true">
+      {/* Circle */}
+      <m.circle
+        cx="12"
+        cy="12"
+        r="10"
+        stroke={color}
+        strokeWidth="1.5"
+        fill="none"
+        initial={{ scale: 0.8, opacity: 0 }}
+        animate={{ scale: 1, opacity: 1 }}
+        transition={{ duration: 0.3, ease: "easeOut" }}
+      />
+      {/* X, first stroke */}
+      <m.path
+        d="M15 9l-6 6"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        initial={{ pathLength: 0 }}
+        animate={{ pathLength: 1 }}
+        transition={{ duration: 0.2, delay: 0.2 }}
+      />
+      {/* X, second stroke */}
+      <m.path
+        d="M9 9l6 6"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        initial={{ pathLength: 0 }}
+        animate={{ pathLength: 1 }}
+        transition={{ duration: 0.2, delay: 0.3 }}
+      />
+    </svg>
+  );
+}
+
+function InfoIcon({ size, color }: PartProps) {
+  return (
+    <m.svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      aria-hidden="true"
+      initial={{ y: 2, opacity: 0 }}
+      animate={{ y: 0, opacity: 1 }}
+      transition={{ duration: 0.3, ease: "easeOut" }}
+    >
+      {/* Circle */}
+      <circle cx="12" cy="12" r="10" stroke={color} strokeWidth="1.5" fill="none" />
+      {/* Dot */}
+      <m.circle
+        cx="12"
+        cy="8"
+        r="1"
+        fill={color}
+        initial={{ scale: 0 }}
+        animate={{ scale: 1 }}
+        transition={{ duration: 0.2, delay: 0.2, type: "spring" }}
+      />
+      {/* Line */}
+      <m.path
+        d="M12 12v4"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        initial={{ pathLength: 0 }}
+        animate={{ pathLength: 1 }}
+        transition={{ duration: 0.2, delay: 0.3 }}
+      />
+    </m.svg>
+  );
+}
+
+const PARTS: Record<NotificationIconType, (props: PartProps) => React.JSX.Element> = {
+  success: SuccessIcon,
+  warning: WarningIcon,
+  error: ErrorIcon,
+  info: InfoIcon,
+};
+
+/**
+ * Notification status icon that animates on mount: the check draws itself,
+ * the warning shakes, the error pops in and the info icon rises. Decorative
+ * (`aria-hidden`); put the message text beside it.
+ */
+export function AnimatedNotificationIcon({ type, size = 20, color, className }: AnimatedNotificationIconProps) {
+  const Part = PARTS[type];
+  return (
+    <span className={className} data-type={type}>
+      <Part size={size} color={color ?? TYPE_COLORS[type]} />
+    </span>
+  );
+}

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

@@ -330,6 +330,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>
+  );
+}