@vvedantb/ui 0.34.0 → 0.36.0

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>
+  );
+}

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/ui/_menu-parts.tsx

@@ -25,7 +25,7 @@ export interface MenuConfig {
     /** `RadioItem` indicator. */
     radio?: React.ReactNode;
   };
-  /** Default for `Content` `collisionPadding`. */
+  /** Default for `Content` `collisionPadding` (built-in: `8`). */
   collisionPadding?: number | Partial<Record<"top" | "right" | "bottom" | "left", number>>;
 }
 

package/src/ui/button-group.tsx

@@ -16,7 +16,7 @@ export interface ButtonGroupConfig {
 }
 
 const buttonGroupBaseClasses =
-  "flex w-fit items-stretch focus-visible:*:z-10 focus-visible:*:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 [&>[data-slot=select-trigger]:last-of-type]:has-[select[aria-hidden=true]:last-child]:rounded-r-md has-[>[data-slot=button-group]]:gap-2";
+  "flex w-fit items-stretch focus-visible:*:z-10 focus-visible:*:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 [&>[data-slot=select-trigger]:last-of-type]:has-[select[aria-hidden=true]:last-child]:rounded-r-md has-[>[data-slot=button-group]]:gap-2 max-sm:[&>*]:after:content-none";
 
 const buttonGroupOrientationClasses = {
   horizontal:

package/src/ui/clear-input.tsx

@@ -49,10 +49,10 @@ export interface ClearInputProps extends Omit<
 }
 
 const inputClasses =
-  "flex h-10 w-full rounded-field border border-border bg-field-background px-3.5 py-2 text-base sm:text-sm transition-[border-color,box-shadow,background-color] duration-200 ease-smooth placeholder:text-field-placeholder disabled:cursor-not-allowed disabled:opacity-50";
+  "flex h-10 w-full max-sm:min-w-0 rounded-field border border-border bg-field-background px-3.5 py-2 text-base sm:text-sm transition-[border-color,box-shadow,background-color] duration-200 ease-smooth placeholder:text-field-placeholder disabled:cursor-not-allowed disabled:opacity-50";
 
 const buttonClasses =
-  "absolute right-2 top-1/2 z-4 inline-flex h-6 w-6 -translate-y-1/2 items-center justify-center rounded-md text-muted-foreground transition-[background-color,color,transform] duration-100 ease-out active:scale-[0.92] hover:bg-surface-tertiary/50 hover:text-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-focus-ring";
+  "absolute right-2 top-1/2 z-4 inline-flex h-6 w-6 -translate-y-1/2 items-center justify-center rounded-md text-muted-foreground transition-[background-color,color,transform] duration-100 ease-out active:scale-[0.92] hover:bg-surface-tertiary/50 hover:text-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-focus-ring max-sm:hit-target";
 
 const ClearInput = React.forwardRef<HTMLInputElement, ClearInputProps>(
   ({ animation, clearButton, classes, ...props }, ref) => {