@suphark/ui 0.1.0

package/src/components/shared/section-card.tsx

@@ -0,0 +1,44 @@
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@suphark/ui/components/ui/card";
+import { cn } from "@suphark/ui/lib/utils";
+import type { ReactNode } from "react";
+
+/**
+ * Card ที่มีหัว (title/description/actions) แบบสั้น ๆ สำหรับหน้า console —
+ * ประกอบจาก Card ของ shadcn (ไม่แก้ต้นฉบับ); ถ้าต้องการ layout อื่นใช้ Card* ตรง ๆ ได้
+ */
+export function SectionCard({
+  title,
+  description,
+  actions,
+  children,
+  className,
+  contentClassName,
+}: {
+  title?: ReactNode;
+  description?: ReactNode;
+  actions?: ReactNode;
+  children: ReactNode;
+  className?: string;
+  /** ตารางเต็มความกว้างใช้ "p-0" */
+  contentClassName?: string;
+}) {
+  return (
+    <Card className={cn("gap-4", className)}>
+      {(title || description || actions) && (
+        <CardHeader>
+          {title && <CardTitle>{title}</CardTitle>}
+          {description && <CardDescription>{description}</CardDescription>}
+          {actions && <CardAction>{actions}</CardAction>}
+        </CardHeader>
+      )}
+      <CardContent className={contentClassName}>{children}</CardContent>
+    </Card>
+  );
+}

package/src/components/shared/stat.tsx

@@ -0,0 +1,26 @@
+import { Card, CardContent } from "@suphark/ui/components/ui/card";
+import { cn } from "@suphark/ui/lib/utils";
+import type { ReactNode } from "react";
+
+/** ตัวเลขสรุปบนหน้าภาพรวม/สุขภาพระบบ */
+export function Stat({
+  label,
+  value,
+  hint,
+  className,
+}: {
+  label: ReactNode;
+  value: ReactNode;
+  hint?: ReactNode;
+  className?: string;
+}) {
+  return (
+    <Card className={cn("gap-1 py-4", className)}>
+      <CardContent className="flex flex-col gap-1">
+        <span className="text-xs font-medium text-muted-foreground">{label}</span>
+        <span className="text-2xl font-semibold tabular-nums tracking-tight">{value}</span>
+        {hint && <span className="text-xs text-muted-foreground">{hint}</span>}
+      </CardContent>
+    </Card>
+  );
+}

package/src/components/shared/status-badge.tsx

@@ -0,0 +1,47 @@
+import { Badge } from "@suphark/ui/components/ui/badge";
+import { cn } from "@suphark/ui/lib/utils";
+import type { ComponentProps } from "react";
+
+export type Tone = "neutral" | "success" | "warning" | "danger" | "info";
+
+const TONE: Record<Tone, string> = {
+  neutral: "border-transparent bg-muted text-muted-foreground",
+  success:
+    "border-emerald-200 bg-emerald-50 text-emerald-800 dark:border-emerald-900 dark:bg-emerald-950 dark:text-emerald-200",
+  warning:
+    "border-amber-200 bg-amber-50 text-amber-800 dark:border-amber-900 dark:bg-amber-950 dark:text-amber-200",
+  danger:
+    "border-red-200 bg-red-50 text-red-800 dark:border-red-900 dark:bg-red-950 dark:text-red-200",
+  info: "border-sky-200 bg-sky-50 text-sky-800 dark:border-sky-900 dark:bg-sky-950 dark:text-sky-200",
+};
+
+/** Badge ของ shadcn (variant outline) + สีตามความหมายของสถานะ */
+export function StatusBadge({
+  tone = "neutral",
+  className,
+  ...props
+}: Omit<ComponentProps<typeof Badge>, "variant"> & { tone?: Tone }) {
+  return <Badge variant="outline" className={cn(TONE[tone], className)} {...props} />;
+}
+
+/** สถานะที่ใช้บ่อยในระบบ → tone */
+export function statusTone(status: string): Tone {
+  switch (status) {
+    case "ACTIVE":
+    case "SUCCEEDED":
+    case "DISPATCHED":
+      return "success";
+    case "SUSPENDED":
+    case "PENDING":
+    case "INVITED":
+    case "FAILED":
+      return "warning";
+    case "LEFT":
+    case "DEAD":
+    case "DELETED":
+    case "ARCHIVED":
+      return "danger";
+    default:
+      return "neutral";
+  }
+}

package/src/components/shared/text/primary-secondary-text.tsx

@@ -0,0 +1,186 @@
+import { cn } from "@suphark/ui/lib/utils";
+import type * as React from "react";
+
+// แยก Props พื้นฐานที่ใช้ร่วมกันออกมา (Common props)
+interface PrimarySecondaryTextBaseProps {
+  /**
+   * The main, primary content to display.
+   */
+  primary: React.ReactNode;
+
+  /**
+   * The secondary, supporting content.
+   * If not provided, this element will not be rendered.
+   */
+  secondary?: React.ReactNode;
+
+  /**
+   * Optional CSS class(es) to apply to the root container div.
+   */
+  className?: string;
+
+  /**
+   * Optional CSS class(es) to apply to the primary (top/left) text span.
+   */
+  primaryClassName?: string;
+
+  /**
+   * Optional CSS class(es) to apply to the secondary (bottom/right) text span.
+   * Defaults to "text-xs text-muted-foreground".
+   */
+  secondaryClassName?: string;
+}
+
+// สร้าง Type ที่แตกต่างกันเพื่อใช้ทำ Discriminated Union
+// แบบที่ 1: แนวนอน (default)
+type VerticalProps = {
+  /**
+   * Specifies the display layout direction.
+   * @default 'vertical'
+   */
+  orientation?: "vertical";
+  /**
+   * Separator is not allowed for vertical orientation.
+   * Providing this prop when orientation is 'vertical' will cause a TypeScript error.
+   */
+  separator?: never; // สำคัญ! ห้ามใช้ 'separator' เมื่อ orientation เป็น 'vertical'
+};
+
+// แบบที่ 2: แนวนอน
+type HorizontalProps = {
+  orientation: "horizontal";
+  /**
+   * Specifies the separator style *only* when orientation is 'horizontal'.
+   * - 'pipe': Displays |
+   * - 'dash': Displays -
+   * - 'parentheses': Wraps the secondary text in ( ).
+   * If omitted, primary and secondary are separated by a space.
+   */
+  separator?: "pipe" | "parentheses" | "dash"; // [EDIT] กลับเป็น string union + เพิ่ม 'dash'
+};
+
+/**
+ * รวม Props ทั้งหมดเข้าด้วยกัน
+ * Combines base props with the orientation-specific props.
+ * This creates a discriminated union based on the 'orientation' prop.
+ */
+export type PrimarySecondaryTextProps = PrimarySecondaryTextBaseProps &
+  (VerticalProps | HorizontalProps) & {
+    /**
+     * Array of items to display. If provided, primary/secondary props are ignored (or used as fallback if logic dictates, but typically mutually exclusive in usage).
+     */
+    items?: {
+      primary: React.ReactNode;
+      secondary?: React.ReactNode;
+    }[];
+    /**
+     * Style of the list when items are provided.
+     * @default 'none'
+     */
+    listStyle?: "none" | "bullet";
+    /**
+     * Gap between items in the list (tailwind class).
+     * @default 'gap-1' for vertical, 'gap-2' for horizontal (if supported later) or standard vertical stack gap.
+     */
+    gap?: string;
+  };
+
+/**
+ * A reusable component to display two lines of text, stacked vertically (default)
+ * or horizontally. Ideal for showing primary info (like a name) with
+ * secondary info (like an ID or email) next to or below it.
+ *
+ * Supports rendering a list of items via the `items` prop.
+ */
+export function PrimarySecondaryText({
+  primary,
+  secondary,
+  className,
+  primaryClassName,
+  secondaryClassName,
+  orientation = "vertical",
+  separator,
+  items,
+  listStyle = "none",
+  gap,
+}: PrimarySecondaryTextProps) {
+  const isHorizontal = orientation === "horizontal";
+  const defaultSecondaryStyles = "text-xs text-muted-foreground";
+
+  // Helper to render a single item
+  const renderItem = (p: React.ReactNode, s: React.ReactNode, idx?: number) => {
+    let separatorElement: React.ReactNode = null;
+    if (isHorizontal && s) {
+      if (separator === "pipe") {
+        separatorElement = (
+          <span
+            className={cn("mx-1.5", defaultSecondaryStyles, secondaryClassName)}
+            aria-hidden="true"
+          >
+            |
+          </span>
+        );
+      } else if (separator === "dash") {
+        separatorElement = (
+          <span
+            className={cn("mx-1.5", defaultSecondaryStyles, secondaryClassName)}
+            aria-hidden="true"
+          >
+            -
+          </span>
+        );
+      } else if (!separator && separator !== "parentheses") {
+        separatorElement = <span className="ml-1.5"></span>;
+      }
+    }
+
+    const content = (
+      <div className={cn("flex", isHorizontal ? "flex-row items-baseline" : "flex-col")}>
+        <span className={cn(primaryClassName)}>{p}</span>
+        {s && (
+          <>
+            {separatorElement}
+            <span
+              className={cn(
+                defaultSecondaryStyles,
+                isHorizontal && separator === "parentheses" && "ml-0.5",
+                secondaryClassName,
+              )}
+            >
+              {isHorizontal && separator === "parentheses" ? <>({s})</> : s}
+            </span>
+          </>
+        )}
+      </div>
+    );
+
+    if (listStyle === "bullet") {
+      return (
+        <div key={idx} className="flex items-start gap-2">
+          <span className="mt-1.5 text-[0.6rem] text-muted-foreground leading-none">•</span>
+          {content}
+        </div>
+      );
+    }
+
+    return <div key={idx}>{content}</div>;
+  };
+
+  // Render List
+  if (items && items.length > 0) {
+    return (
+      <div
+        className={cn(
+          "flex flex-col",
+          gap ?? (listStyle === "bullet" ? "gap-1" : "gap-2"), // Default gaps
+          className,
+        )}
+      >
+        {items.map((item, idx) => renderItem(item.primary, item.secondary, idx))}
+      </div>
+    );
+  }
+
+  // Render Single (Legacy/Direct mode)
+  return <div className={cn("flex flex-col", className)}>{renderItem(primary, secondary)}</div>;
+}

package/src/components/shared/theme/index.ts

@@ -0,0 +1,4 @@
+export { ThemeMenuItems } from "./theme-menu-items";
+export { type Theme, ThemeProvider, useTheme } from "./theme-provider";
+export { ThemeSwitch } from "./theme-switch";
+export { ThemeToggle } from "./theme-toggle";

package/src/components/shared/theme/theme-menu-items.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import {
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+} from "@suphark/ui/components/ui/dropdown-menu";
+import { MonitorIcon, MoonIcon, SunIcon } from "lucide-react";
+import { useTheme } from "next-themes";
+import type { ReactNode } from "react";
+import type { Theme } from "./theme-provider";
+
+const OPTIONS: Array<{ value: Theme; label: string; icon: ReactNode }> = [
+  { value: "light", label: "สว่าง", icon: <SunIcon /> },
+  { value: "dark", label: "มืด", icon: <MoonIcon /> },
+  { value: "system", label: "ตามระบบ", icon: <MonitorIcon /> },
+];
+
+/** กลุ่มตัวเลือกธีมสำหรับใส่ใน DropdownMenu (เช่นเมนูผู้ใช้) — ยกจาก Pi Auth มาบน next-themes */
+export function ThemeMenuItems({
+  label = "ธีม",
+  labels,
+}: {
+  label?: ReactNode;
+  /** ข้อความแต่ละตัวเลือก (ค่าเริ่มต้นภาษาไทย) */
+  labels?: Partial<Record<Theme, ReactNode>>;
+}) {
+  const { theme = "system", setTheme } = useTheme();
+  return (
+    <DropdownMenuGroup>
+      <DropdownMenuLabel className="text-muted-foreground">{label}</DropdownMenuLabel>
+      <DropdownMenuRadioGroup value={theme} onValueChange={(v) => setTheme(v as Theme)}>
+        {OPTIONS.map((o) => (
+          <DropdownMenuRadioItem key={o.value} value={o.value}>
+            {o.icon}
+            {labels?.[o.value] ?? o.label}
+          </DropdownMenuRadioItem>
+        ))}
+      </DropdownMenuRadioGroup>
+    </DropdownMenuGroup>
+  );
+}

package/src/components/shared/theme/theme-provider.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+import type * as React from "react";
+
+export type Theme = "light" | "dark" | "system";
+
+/**
+ * ครอบ root layout ครั้งเดียว (ใส่ `suppressHydrationWarning` ที่ <html>)
+ * ค่าเริ่มต้น: สลับด้วย class `.dark` (ตรง @custom-variant ใน styles.css), ตามระบบ, ไม่กระพริบตอนโหลด
+ *
+ * ```tsx
+ * <html lang="th" suppressHydrationWarning>
+ *   <body><ThemeProvider>{children}<Toaster /></ThemeProvider></body>
+ * </html>
+ * ```
+ */
+export function ThemeProvider({
+  children,
+  attribute = "class",
+  defaultTheme = "system",
+  enableSystem = true,
+  disableTransitionOnChange = true,
+  ...props
+}: React.ComponentProps<typeof NextThemesProvider>) {
+  return (
+    <NextThemesProvider
+      attribute={attribute}
+      defaultTheme={defaultTheme}
+      enableSystem={enableSystem}
+      disableTransitionOnChange={disableTransitionOnChange}
+      {...props}
+    >
+      {children}
+    </NextThemesProvider>
+  );
+}
+
+export { useTheme } from "next-themes";

package/src/components/shared/theme/theme-switch.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { Button } from "@suphark/ui/components/ui/button";
+import { MoonIcon, SunIcon } from "lucide-react";
+import { useTheme } from "next-themes";
+import { useEffect, useState } from "react";
+
+/**
+ * ปุ่มเดี่ยวสลับ สว่าง ↔ มืด (หน้าที่ไม่มีเมนูผู้ใช้ เช่น login) — ยกจาก Pi Auth มาบน next-themes
+ * ต้องการเมนู 3 ตัวเลือก (light/dark/system) ใช้ `ThemeToggle` แทน
+ */
+export function ThemeSwitch({
+  className,
+  labels = { toLight: "สลับเป็นโหมดสว่าง", toDark: "สลับเป็นโหมดมืด" },
+}: {
+  className?: string;
+  labels?: { toLight: string; toDark: string };
+}) {
+  const { resolvedTheme, setTheme } = useTheme();
+  // อ่านค่าหลัง mount เท่านั้น — ถ้าอ่านตอน render แรก ไอคอนจะไม่ตรงกับ server (hydration mismatch)
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+  const dark = mounted && resolvedTheme === "dark";
+  return (
+    <Button
+      type="button"
+      variant="ghost"
+      size="icon-sm"
+      className={className}
+      aria-label={dark ? labels.toLight : labels.toDark}
+      onClick={() => setTheme(dark ? "light" : "dark")}
+    >
+      {dark ? <SunIcon /> : <MoonIcon />}
+    </Button>
+  );
+}

package/src/components/shared/theme/theme-toggle.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import { Button } from "@suphark/ui/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@suphark/ui/components/ui/dropdown-menu";
+import { Laptop, Moon, Sun } from "lucide-react";
+import { useTheme } from "next-themes";
+import * as React from "react";
+
+type ThemeValue = "light" | "dark" | "system";
+
+interface ThemeToggleProps {
+  persistedTheme?: string | null;
+  onThemeChange?: (theme: ThemeValue) => Promise<void> | void;
+}
+
+export function ThemeToggle({ persistedTheme, onThemeChange }: ThemeToggleProps) {
+  const { setTheme, theme } = useTheme();
+
+  React.useEffect(() => {
+    if (persistedTheme && persistedTheme !== theme) {
+      setTheme(persistedTheme);
+    }
+  }, [persistedTheme, theme, setTheme]);
+
+  const handleThemeChange = async (newTheme: ThemeValue) => {
+    setTheme(newTheme);
+    await onThemeChange?.(newTheme);
+  };
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        render={
+          <Button
+            variant="ghost"
+            size="icon"
+            className="relative h-9 w-9 rounded-md hover:bg-accent hover:text-accent-foreground"
+            title="Change theme"
+          />
+        }
+      >
+        <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+        <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+        <span className="sr-only">Change theme</span>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-36">
+        <DropdownMenuItem
+          onClick={() => handleThemeChange("light")}
+          className="flex cursor-pointer items-center gap-2"
+        >
+          <Sun className="h-4 w-4 text-amber-500" />
+          <span>Light</span>
+        </DropdownMenuItem>
+        <DropdownMenuItem
+          onClick={() => handleThemeChange("dark")}
+          className="flex cursor-pointer items-center gap-2"
+        >
+          <Moon className="h-4 w-4 text-blue-500" />
+          <span>Dark</span>
+        </DropdownMenuItem>
+        <DropdownMenuItem
+          onClick={() => handleThemeChange("system")}
+          className="flex cursor-pointer items-center gap-2"
+        >
+          <Laptop className="h-4 w-4 text-slate-500" />
+          <span>System</span>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}