From 278668b21c07063da8d7845c4293a9da7e665103 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment?= <git@drawbu.dev>
Date: Sun, 19 Jul 2026 11:01:07 +0200
Subject: [PATCH] style: setup cva

---
 app/package.json               |  1 +
 app/src/components/Button.tsx  | 16 +++++++---------
 app/src/components/DidChip.tsx | 25 +++++++++++++++++--------
 pnpm-lock.yaml                 | 23 +++++++++++++++++++++++
 4 files changed, 48 insertions(+), 17 deletions(-)

diff --git a/app/package.json b/app/package.json
index a66572f..2295d1d 100644
--- a/app/package.json
+++ b/app/package.json
@@ -23,6 +23,7 @@
     "@tailwindcss/vite": "^4.3.3",
     "@tanstack/solid-form": "^1.33.2",
     "@tanstack/solid-query": "^5.101.2",
+    "cva": "1.0.0-beta.4",
     "lucide-solid": "^1.25.0",
     "solid-devtools": "^0.34.3",
     "solid-js": "^1.9.14",
diff --git a/app/src/components/Button.tsx b/app/src/components/Button.tsx
index f6b2708..74038d5 100644
--- a/app/src/components/Button.tsx
+++ b/app/src/components/Button.tsx
@@ -1,5 +1,10 @@
 import { children, splitProps } from "solid-js";
 import type { JSX } from "solid-js";
+import { cva } from "cva";
+
+const button = cva({
+  base: "px-2 cursor-pointer active:scale-95 active:transition-all disabled:cursor-not-allowed disabled:opacity-50 disabled:active:scale-100 focus-ring",
+});
 
 type Props = {
   children: JSX.Element;
@@ -8,17 +13,10 @@ type Props = {
 export function Button(props: Props) {
   const safeChildren = children(() => props.children);
 
-  const [customProps, classProp, restProps] = splitProps(
-    props,
-    ["children"],
-    ["class"],
-  );
+  const [local, rest] = splitProps(props, ["children", "class"]);
 
   return (
-    <button
-      class={`px-2 cursor-pointer active:scale-95 active:transition-all disabled:cursor-not-allowed disabled:opacity-50 disabled:active:scale-100 focus-ring ${classProp.class}`}
-      {...restProps}
-    >
+    <button class={button({ class: local.class })} {...rest}>
       {safeChildren()}
     </button>
   );
diff --git a/app/src/components/DidChip.tsx b/app/src/components/DidChip.tsx
index eddfdb3..91d44ae 100644
--- a/app/src/components/DidChip.tsx
+++ b/app/src/components/DidChip.tsx
@@ -1,5 +1,6 @@
 import type { Did } from "@atcute/lexicons";
 import { createSignal } from "solid-js";
+import { cva } from "cva";
 
 type Props = {
   did: Did;
@@ -7,6 +8,20 @@ type Props = {
   class?: string;
 };
 
+const chip = cva({
+  base: "group flex items-center gap-1 font-mono text-xs text-zinc-500 hover:text-zinc-800 dark:hover:text-zinc-300 transition-colors",
+});
+
+const icon = cva({
+  base: "shrink-0 iconify transition-opacity",
+  variants: {
+    copied: {
+      true: "lucide--check opacity-100 text-green-600 dark:text-green-400",
+      false: "lucide--copy opacity-0 group-hover:opacity-100",
+    },
+  },
+});
+
 function shortDid(did: Did): string {
   if (did.length <= 20) return did;
   return did.slice(0, 10) + "…" + did.slice(-6);
@@ -26,18 +41,12 @@ export function DidChip(props: Props) {
       type="button"
       title={props.did}
       onClick={copy}
-      class={`group flex items-center gap-1 font-mono text-xs text-zinc-500 hover:text-zinc-800 dark:hover:text-zinc-300 transition-colors ${props.class ?? ""}`}
+      class={chip({ class: props.class })}
     >
       <span class="truncate">
         {props.full ? props.did : shortDid(props.did)}
       </span>
-      <span
-        class={`shrink-0 iconify transition-opacity ${
-          copied()
-            ? "lucide--check opacity-100 text-green-600 dark:text-green-400"
-            : "lucide--copy opacity-0 group-hover:opacity-100"
-        }`}
-      />
+      <span class={icon({ copied: copied() })} />
     </button>
   );
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d9c1dd6..cade79d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -255,6 +255,9 @@ importers:
       '@tanstack/solid-query':
         specifier: ^5.101.2
         version: 5.101.2(solid-js@1.9.14)
+      cva:
+        specifier: 1.0.0-beta.4
+        version: 1.0.0-beta.4(typescript@7.0.2)
       lucide-solid:
         specifier: ^1.25.0
         version: 1.25.0(solid-js@1.9.14)
@@ -1411,12 +1414,24 @@ packages:
   caniuse-lite@1.0.30001797:
     resolution: {integrity: sha512-l8xKG+gwAIExZGl9FrF7KUwuOmk6wbEPC9Xoy/RtnWv1XG0Q4LFlagaLpUv3Kiza3W/wm27zy0yWJEieYKAP6w==}
 
+  clsx@2.1.1:
+    resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
+    engines: {node: '>=6'}
+
   convert-source-map@2.0.0:
     resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
 
   csstype@3.2.3:
     resolution: {integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==}
 
+  cva@1.0.0-beta.4:
+    resolution: {integrity: sha512-F/JS9hScapq4DBVQXcK85l9U91M6ePeXoBMSp7vypzShoefUBxjQTo3g3935PUHgQd+IW77DjbPRIxugy4/GCQ==}
+    peerDependencies:
+      typescript: '>= 4.5.5'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
   debug@4.4.3:
     resolution: {integrity: sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==}
     engines: {node: '>=6.0'}
@@ -3351,10 +3366,18 @@ snapshots:
 
   caniuse-lite@1.0.30001797: {}
 
+  clsx@2.1.1: {}
+
   convert-source-map@2.0.0: {}
 
   csstype@3.2.3: {}
 
+  cva@1.0.0-beta.4(typescript@7.0.2):
+    dependencies:
+      clsx: 2.1.1
+    optionalDependencies:
+      typescript: 7.0.2
+
   debug@4.4.3:
     dependencies:
       ms: 2.1.3
-- 
2.51.2