From 19974daa67b034062e991cff6611477741c0a09d Mon Sep 17 00:00:00 2001
From: Adam <2363879+adamdotdevin@users.noreply.github.com>
Date: Thu, 30 Oct 2025 10:16:45 -0500
Subject: wip: desktop work

---
 packages/ui/src/components/card.css | 29 +++++++++++++++++++++++++++++
 packages/ui/src/components/card.tsx | 22 ++++++++++++++++++++++
 packages/ui/src/components/icon.tsx |  1 +
 packages/ui/src/components/index.ts |  1 +
 packages/ui/src/styles/index.css    |  1 +
 5 files changed, 54 insertions(+)
 create mode 100644 packages/ui/src/components/card.css
 create mode 100644 packages/ui/src/components/card.tsx

(limited to 'packages/ui/src')

diff --git a/packages/ui/src/components/card.css b/packages/ui/src/components/card.css
new file mode 100644
index 000000000..a9b7c8784
--- /dev/null
+++ b/packages/ui/src/components/card.css
@@ -0,0 +1,29 @@
+[data-component="card"] {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--surface-inset-base);
+  border: 1px solid var(--border-weaker-base);
+  transition: background-color 0.15s ease;
+  border-radius: 8px;
+  padding: 6px 12px;
+  overflow: clip;
+
+  &[data-variant="error"] {
+    background-color: var(--surface-critical-weak);
+    border: 1px solid var(--border-critical-base);
+    color: rgba(218, 51, 25, 0.6);
+
+    /* text-12-regular */
+    font-family: var(--font-family-sans);
+    font-size: var(--font-size-small);
+    font-style: normal;
+    font-weight: var(--font-weight-regular);
+    line-height: var(--line-height-large); /* 166.667% */
+    letter-spacing: var(--letter-spacing-normal);
+
+    &[data-component="icon"] {
+      color: var(--icon-critical-active);
+    }
+  }
+}
diff --git a/packages/ui/src/components/card.tsx b/packages/ui/src/components/card.tsx
new file mode 100644
index 000000000..3fb225ab2
--- /dev/null
+++ b/packages/ui/src/components/card.tsx
@@ -0,0 +1,22 @@
+import { type ComponentProps, splitProps } from "solid-js"
+
+export interface CardProps extends ComponentProps<"div"> {
+  variant?: "normal" | "error" | "warning" | "success" | "info"
+}
+
+export function Card(props: CardProps) {
+  const [split, rest] = splitProps(props, ["variant", "class", "classList"])
+  return (
+    <div
+      {...rest}
+      data-component="card"
+      data-variant={split.variant || "normal"}
+      classList={{
+        ...(split.classList ?? {}),
+        [split.class ?? ""]: !!split.class,
+      }}
+    >
+      {props.children}
+    </div>
+  )
+}
diff --git a/packages/ui/src/components/icon.tsx b/packages/ui/src/components/icon.tsx
index 5736146e5..a2e127290 100644
--- a/packages/ui/src/components/icon.tsx
+++ b/packages/ui/src/components/icon.tsx
@@ -149,6 +149,7 @@ const newIcons = {
   console: `<path d="M3.75 5.4165L8.33333 9.99984L3.75 14.5832M10.4167 14.5832H16.25" stroke="currentColor" stroke-linecap="square"/>`,
   "code-lines": `<path d="M2.08325 3.75H11.2499M14.5833 3.75H17.9166M2.08325 10L7.08325 10M10.4166 10L17.9166 10M2.08325 16.25L8.74992 16.25M12.0833 16.25L17.9166 16.25" stroke="currentColor" stroke-linecap="square" stroke-linejoin="round"/>`,
   "square-arrow-top-right": `<path d="M7.91675 2.9165H2.91675V17.0832H17.0834V12.0832M12.0834 2.9165H17.0834V7.9165M9.58342 10.4165L16.6667 3.33317" stroke="currentColor" stroke-linecap="square"/>`,
+  "circle-ban-sign": `<path d="M15.3675 4.63087L4.55742 15.441M17.9163 9.9987C17.9163 14.371 14.3719 17.9154 9.99967 17.9154C7.81355 17.9154 5.83438 17.0293 4.40175 15.5966C2.96911 14.164 2.08301 12.1848 2.08301 9.9987C2.08301 5.62644 5.62742 2.08203 9.99967 2.08203C12.1858 2.08203 14.165 2.96813 15.5976 4.40077C17.0302 5.8334 17.9163 7.81257 17.9163 9.9987Z" stroke="currentColor" stroke-linecap="round"/>`,
 }
 
 export interface IconProps extends ComponentProps<"svg"> {
diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts
index 63be24d58..29e8cfe3b 100644
--- a/packages/ui/src/components/index.ts
+++ b/packages/ui/src/components/index.ts
@@ -1,5 +1,6 @@
 export * from "./accordion"
 export * from "./button"
+export * from "./card"
 export * from "./checkbox"
 export * from "./collapsible"
 export * from "./dialog"
diff --git a/packages/ui/src/styles/index.css b/packages/ui/src/styles/index.css
index 9742caa0a..4fe13055a 100644
--- a/packages/ui/src/styles/index.css
+++ b/packages/ui/src/styles/index.css
@@ -7,6 +7,7 @@
 
 @import "../components/accordion.css" layer(components);
 @import "../components/button.css" layer(components);
+@import "../components/card.css" layer(components);
 @import "../components/checkbox.css" layer(components);
 @import "../components/diff.css" layer(components);
 @import "../components/diff-changes.css" layer(components);
-- 
cgit v1.2.3