From 6ec259a0e71174651bae95d4628138bf6fd68742 Mon Sep 17 00:00:00 2001
From: kj_sh604
Date: Sun, 15 Mar 2026 16:19:35 -0400
Subject: refactor: packages/

---
 .../excalidraw/components/ColorPicker/TopPicks.tsx | 65 ++++++++++++++++++++++
 1 file changed, 65 insertions(+)
 create mode 100644 packages/excalidraw/components/ColorPicker/TopPicks.tsx

(limited to 'packages/excalidraw/components/ColorPicker/TopPicks.tsx')

diff --git a/packages/excalidraw/components/ColorPicker/TopPicks.tsx b/packages/excalidraw/components/ColorPicker/TopPicks.tsx
new file mode 100644
index 0000000..5c69d1e
--- /dev/null
+++ b/packages/excalidraw/components/ColorPicker/TopPicks.tsx
@@ -0,0 +1,65 @@
+import clsx from "clsx";
+import type { ColorPickerType } from "./colorPickerUtils";
+import {
+  DEFAULT_CANVAS_BACKGROUND_PICKS,
+  DEFAULT_ELEMENT_BACKGROUND_PICKS,
+  DEFAULT_ELEMENT_STROKE_PICKS,
+} from "../../colors";
+
+interface TopPicksProps {
+  onChange: (color: string) => void;
+  type: ColorPickerType;
+  activeColor: string;
+  topPicks?: readonly string[];
+}
+
+export const TopPicks = ({
+  onChange,
+  type,
+  activeColor,
+  topPicks,
+}: TopPicksProps) => {
+  let colors;
+  if (type === "elementStroke") {
+    colors = DEFAULT_ELEMENT_STROKE_PICKS;
+  }
+
+  if (type === "elementBackground") {
+    colors = DEFAULT_ELEMENT_BACKGROUND_PICKS;
+  }
+
+  if (type === "canvasBackground") {
+    colors = DEFAULT_CANVAS_BACKGROUND_PICKS;
+  }
+
+  // this one can overwrite defaults
+  if (topPicks) {
+    colors = topPicks;
+  }
+
+  if (!colors) {
+    console.error("Invalid type for TopPicks");
+    return null;
+  }
+
+  return (
+    <div className="color-picker__top-picks">
+      {colors.map((color: string) => (
+        <button
+          className={clsx("color-picker__button", {
+            active: color === activeColor,
+            "is-transparent": color === "transparent" || !color,
+          })}
+          style={{ "--swatch-color": color }}
+          key={color}
+          type="button"
+          title={color}
+          onClick={() => onChange(color)}
+          data-testid={`color-top-pick-${color}`}
+        >
+          <div className="color-picker__button-outline" />
+        </button>
+      ))}
+    </div>
+  );
+};
-- 
cgit v1.2.3