feat(console-web): add variant-based UI primitives

Introduce cva-driven Button, form, card, table, and segmented controls. Use clsx and tailwind-merge through a shared cn helper so callers can override component defaults without relying on global semantic CSS. Control sizes define minimum heights while icon-only actions retain stable square dimensions.
2026-07-30 15:16:02 +08:00
parent 868da49a52
commit 23fa6137ff
11 changed files with 513 additions and 92 deletions
@@ -0,0 +1,82 @@
+import { splitProps, type JSX } from "solid-js";
+import { cn } from "../../lib/cn";
+
+export type TableProps = JSX.HTMLAttributes<HTMLTableElement> & {
+  containerClass?: string;
+};
+
+/** Responsive native table with a horizontal overflow boundary. */
+export function Table(props: TableProps) {
+  const [local, rest] = splitProps(props, ["class", "containerClass", "children"]);
+  return (
+    <div data-slot="table-container" class={cn("w-full overflow-x-auto", local.containerClass)}>
+      <table
+        {...rest}
+        data-slot="table"
+        class={cn("w-full min-w-[760px] border-collapse text-left text-sm", local.class)}
+      >
+        {local.children}
+      </table>
+    </div>
+  );
+}
+
+export function TableHeader(props: JSX.HTMLAttributes<HTMLTableSectionElement>) {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+  return (
+    <thead {...rest} data-slot="table-header" class={cn(local.class)}>
+      {local.children}
+    </thead>
+  );
+}
+
+export function TableBody(props: JSX.HTMLAttributes<HTMLTableSectionElement>) {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+  return (
+    <tbody {...rest} data-slot="table-body" class={cn(local.class)}>
+      {local.children}
+    </tbody>
+  );
+}
+
+export function TableRow(props: JSX.HTMLAttributes<HTMLTableRowElement>) {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+  return (
+    <tr
+      {...rest}
+      data-slot="table-row"
+      class={cn("transition-colors hover:bg-[#f8faf9] [&:last-child_td]:border-b-0", local.class)}
+    >
+      {local.children}
+    </tr>
+  );
+}
+
+export function TableHead(props: JSX.ThHTMLAttributes<HTMLTableCellElement>) {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+  return (
+    <th
+      {...rest}
+      data-slot="table-head"
+      class={cn(
+        "border-b border-line bg-canvas px-4 py-2.5 text-[11px] font-semibold uppercase text-muted",
+        local.class,
+      )}
+    >
+      {local.children}
+    </th>
+  );
+}
+
+export function TableCell(props: JSX.TdHTMLAttributes<HTMLTableCellElement>) {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+  return (
+    <td
+      {...rest}
+      data-slot="table-cell"
+      class={cn("border-b border-line px-4 py-3 align-middle", local.class)}
+    >
+      {local.children}
+    </td>
+  );
+}