@drawnagency/primitives 0.1.30 → 0.1.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drawnagency/primitives",
-  "version": "0.1.30",
+  "version": "0.1.31",
   "type": "module",
   "exports": {
     "./package.json": "./package.json",

package/src/components/brandguide/Colors.tsx

@@ -81,12 +81,23 @@ function ColorsView({
   showLabel?: boolean;
 }) {
   const [expanded, setExpanded] = useState(!collapsing);
-  const [copiedValue, setCopiedValue] = useState<string | null>(null);
+  const [copiedIndex, setCopiedIndex] = useState<number | null>(null);
 
-  const handleCopy = (value: string) => {
-    navigator.clipboard.writeText(value);
-    setCopiedValue(value);
-    setTimeout(() => setCopiedValue(null), 1500);
+  const handleCopy = (value: string, colorIndex: number) => {
+    if (navigator.clipboard?.writeText) {
+      navigator.clipboard.writeText(value);
+    } else {
+      const ta = document.createElement("textarea");
+      ta.value = value;
+      ta.style.position = "fixed";
+      ta.style.opacity = "0";
+      document.body.appendChild(ta);
+      ta.select();
+      document.execCommand("copy");
+      document.body.removeChild(ta);
+    }
+    setCopiedIndex(colorIndex);
+    setTimeout(() => setCopiedIndex(null), 1500);
   };
 
   return (
@@ -114,17 +125,25 @@ function ColorsView({
           const contrast = getContrastClass(hex);
           return (
             <div key={i} className="overflow-hidden rounded-md border border-base-200">
-              <div className={cn("flex min-h-[80px] items-end p-3", contrast)} style={{ backgroundColor: hex || "#ccc" }}>
+              <div className={cn("relative flex min-h-[80px] items-end p-3", contrast)} style={{ backgroundColor: hex || "#ccc" }}>
                 {color.name && <span className="text-sm font-bold">{color.name}</span>}
+                {copiedIndex === i && (
+                  <span className={cn(
+                    "absolute top-2 right-2 rounded-full px-2.5 py-0.5 text-xs font-medium",
+                    getContrastClass(hex) === "text-black" ? "bg-black/15 text-black" : "bg-white/25 text-white",
+                  )}>
+                    Copied!
+                  </span>
+                )}
               </div>
               {expanded && (
                 <div className="space-y-1 bg-base-accent p-3 text-sm">
                   {color.spaces.map((space, j) =>
                     Object.entries(space).map(([key, value]) =>
                       value ? (
-                        <button key={`${j}-${key}`} onClick={() => handleCopy(value)} className="cursor-pointer flex w-full justify-between hover:text-primary">
+                        <button key={`${j}-${key}`} onClick={() => handleCopy(value, i)} className="cursor-pointer flex w-full justify-between hover:text-primary">
                           <span className="font-medium uppercase">{key}</span>
-                          <span>{copiedValue === value ? "Copied!" : value}</span>
+                          <span>{value}</span>
                         </button>
                       ) : null
                     )