@suphark/ui 0.1.0

package/src/components/shared/name-id-fields.tsx

@@ -0,0 +1,133 @@
+"use client";
+
+import { Field, FieldDescription, FieldLabel } from "@suphark/ui/components/ui/field";
+import { Input } from "@suphark/ui/components/ui/input";
+import { type ReactNode, useId, useState } from "react";
+
+/** รูปแบบตัวระบุที่ derive จากชื่อ: kebab (slug/code/key), camel (attribute key), upper (รหัสตำแหน่ง) */
+export type IdentifierStyle = "kebab" | "camel" | "upper";
+
+/**
+ * แปลงชื่อเป็นตัวระบุมาตรฐาน (เหมือน Clerk: พิมพ์ชื่อแล้ว slug ขึ้นให้เอง) — ตัดเครื่องหมายกำกับ, เก็บเฉพาะ a-z 0-9,
+ * แบ่งคำที่ช่องว่าง/เครื่องหมาย; ตัวอักษรที่ไม่ใช่ละติน (เช่นไทย) ตัดทิ้ง → อาจได้ค่าว่าง = ให้ผู้ใช้ตั้งเอง
+ */
+export function toIdentifier(name: string, style: IdentifierStyle, maxLength = 64): string {
+  const words = name
+    .normalize("NFKD")
+    .replace(/[\u0300-\u036f]/g, "")
+    .replace(/[^A-Za-z0-9]+/g, " ")
+    .trim()
+    .split(/\s+/)
+    .filter(Boolean)
+    .map((w) => w.toLowerCase());
+  if (words.length === 0) return "";
+  let out: string;
+  if (style === "camel")
+    out = words.map((w, i) => (i === 0 ? w : w[0]!.toUpperCase() + w.slice(1))).join("");
+  else if (style === "upper") out = words.join("_").toUpperCase();
+  else out = words.join("-");
+  // camel ต้องขึ้นต้นด้วยตัวอักษร; kebab/upper ห้ามขึ้นต้น/ลงท้ายด้วยเครื่องหมาย (ตัดความยาวแล้วอาจเหลือ "-" ท้าย)
+  out = out.slice(0, maxLength).replace(/[-_]+$/, "");
+  if (style === "camel" && /^[0-9]/.test(out)) out = `x${out}`;
+  return out;
+}
+
+/**
+ * คู่ช่อง "ชื่อ" + ตัวระบุ (slug/code/key) แบบ Clerk: พิมพ์ชื่อแล้วตัวระบุขึ้นให้อัตโนมัติ แก้เองได้
+ * เมื่อแก้เองแล้วจะไม่ถูกทับอีก (ลบจนว่าง = กลับไป auto); มีปุ่ม "ใช้ตามชื่อ" เพื่อกลับไปค่า derive
+ * ส่งค่าเป็น input ธรรมดาชื่อ `nameField`/`idField` — ใช้ในฟอร์ม server action ได้เลย
+ */
+export function NameIdFields({
+  nameField = "name",
+  idField,
+  style = "kebab",
+  nameLabel,
+  namePlaceholder,
+  idLabel,
+  idHint,
+  idPlaceholder,
+  idPattern,
+  idMaxLength = 64,
+  resetLabel,
+  autoFocus = true,
+  defaultName = "",
+  defaultId = "",
+}: {
+  nameField?: string;
+  idField: string;
+  style?: IdentifierStyle;
+  nameLabel: ReactNode;
+  namePlaceholder?: string;
+  idLabel: ReactNode;
+  idHint?: ReactNode;
+  idPlaceholder?: string;
+  /** regex สำหรับ native validation ของ browser (ตรงกับ zod ฝั่ง server) */
+  idPattern?: string;
+  idMaxLength?: number;
+  /** ข้อความปุ่มกลับไปใช้ค่าจากชื่อ (แสดงเมื่อแก้เอง) */
+  resetLabel: ReactNode;
+  autoFocus?: boolean;
+  defaultName?: string;
+  defaultId?: string;
+}) {
+  const [name, setName] = useState(defaultName);
+  const [id, setId] = useState(defaultId || toIdentifier(defaultName, style, idMaxLength));
+  const [manual, setManual] = useState(Boolean(defaultId));
+  const derived = toIdentifier(name, style, idMaxLength);
+  const nameId = useId();
+  const idId = useId();
+  return (
+    <>
+      <Field>
+        <FieldLabel htmlFor={nameId}>{nameLabel}</FieldLabel>
+        <Input
+          id={nameId}
+          name={nameField}
+          required
+          placeholder={namePlaceholder}
+          autoFocus={autoFocus}
+          value={name}
+          onChange={(e) => {
+            setName(e.target.value);
+            if (!manual) setId(toIdentifier(e.target.value, style, idMaxLength));
+          }}
+        />
+      </Field>
+      <Field>
+        <FieldLabel htmlFor={idId}>{idLabel}</FieldLabel>
+        <Input
+          id={idId}
+          name={idField}
+          required
+          placeholder={idPlaceholder}
+          pattern={idPattern}
+          maxLength={idMaxLength}
+          value={id}
+          className="font-mono"
+          onChange={(e) => {
+            setId(e.target.value);
+            // ลบจนว่าง = กลับไปโหมด auto (จะเติมให้ใหม่เมื่อแก้ชื่อครั้งถัดไป)
+            setManual(e.target.value !== "");
+          }}
+        />
+        {(idHint || (manual && derived && derived !== id)) && (
+          <FieldDescription className="flex flex-wrap items-center gap-x-2">
+            {idHint}
+            {manual && derived && derived !== id && (
+              <button
+                type="button"
+                className="underline underline-offset-4 hover:text-foreground"
+                onClick={() => {
+                  setManual(false);
+                  setId(derived);
+                }}
+              >
+                {resetLabel}
+              </button>
+            )}
+          </FieldDescription>
+        )}
+      </Field>
+    </>
+  );
+}

package/src/components/shared/navigation/page-breadcrumb.tsx

@@ -0,0 +1,100 @@
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@suphark/ui/components/ui/breadcrumb";
+import { cn } from "@suphark/ui/lib/utils";
+import Link from "next/link";
+import * as React from "react";
+
+/**
+ * Represents a single item in the breadcrumb trail.
+ */
+export type PageBreadcrumbItem = {
+  /**
+   * The text to display for the breadcrumb item.
+   */
+  label: string;
+  /**
+   * The URL to link to. If not provided, this item will be rendered
+   * as the current, non-clickable page (`<BreadcrumbPage>`).
+   */
+  href?: string;
+  /**
+   * An optional icon element to display before the label.
+   */
+  icon?: React.ReactNode;
+};
+
+/**
+ * Props for the PageBreadcrumb component.
+ */
+type PageBreadcrumbProps = {
+  /**
+   * An array of breadcrumb items to display.
+   */
+  items: PageBreadcrumbItem[];
+  /**
+   * Optional CSS class(es) to apply to the root <Breadcrumb> component.
+   */
+  className?: string;
+};
+
+/**
+ * A shared component that renders a breadcrumb trail based on a list of items.
+ * It automatically handles rendering items as links or as the current page.
+ *
+ * @example
+ * const items = [
+ * { label: "Home", href: "/" },
+ * { label: "Projects", href: "/projects" },
+ * { label: "My Project", icon: <Briefcase /> },
+ * ];
+ * <PageBreadcrumb items={items} />
+ */
+export function PageBreadcrumb({ items, className }: PageBreadcrumbProps) {
+  return (
+    <Breadcrumb className={cn("print:hidden", className)}>
+      <BreadcrumbList>
+        {items.map((item, index) => (
+          // biome-ignore lint/suspicious/noArrayIndexKey: ลำดับ breadcrumb คงที่ ไม่ reorder — label อาจซ้ำจึงใช้ตำแหน่งร่วม
+          <React.Fragment key={`${item.label}-${index}`}>
+            <BreadcrumbItem>
+              {item.href ? (
+                // Item is a clickable link
+                <BreadcrumbLink
+                  render={
+                    <Link
+                      href={item.href}
+                      // Add flex display for icon alignment
+                      className="flex items-center gap-1.5"
+                    />
+                  }
+                >
+                  {item.icon}
+                  {item.label}
+                </BreadcrumbLink>
+              ) : (
+                // Item is the current, non-clickable page
+                <BreadcrumbPage
+                  // Add flex display for icon alignment
+                  className="flex items-center gap-1.5"
+                >
+                  {item.icon}
+                  {item.label}
+                </BreadcrumbPage>
+              )}
+            </BreadcrumbItem>
+            {/* Add a separator if it's not the last item */}
+            {index < items.length - 1 && <BreadcrumbSeparator />}
+          </React.Fragment>
+        ))}
+      </BreadcrumbList>
+    </Breadcrumb>
+  );
+}
+
+// export default PageBreadcrumb;

package/src/components/shared/notice.tsx

@@ -0,0 +1,35 @@
+import { Alert, AlertDescription, AlertTitle } from "@suphark/ui/components/ui/alert";
+import { cn } from "@suphark/ui/lib/utils";
+import type { ComponentProps, ReactNode } from "react";
+import type { Tone } from "./status-badge";
+
+export type NoticeTone = Exclude<Tone, "neutral">;
+
+const TONE: Record<NoticeTone, string> = {
+  info: "border-sky-200 bg-sky-50 text-sky-900 dark:border-sky-900 dark:bg-sky-950 dark:text-sky-100",
+  success:
+    "border-emerald-200 bg-emerald-50 text-emerald-900 dark:border-emerald-900 dark:bg-emerald-950 dark:text-emerald-100",
+  warning:
+    "border-amber-300 bg-amber-50 text-amber-900 dark:border-amber-900 dark:bg-amber-950 dark:text-amber-100",
+  danger:
+    "border-red-200 bg-red-50 text-red-900 dark:border-red-900 dark:bg-red-950 dark:text-red-100",
+};
+
+/** Alert ของ shadcn + สีตามความหมาย (info/success/warning/danger) */
+export function Notice({
+  tone = "info",
+  title,
+  children,
+  className,
+  ...props
+}: Omit<ComponentProps<typeof Alert>, "variant" | "title"> & {
+  tone?: NoticeTone;
+  title?: ReactNode;
+}) {
+  return (
+    <Alert className={cn(TONE[tone], className)} {...props}>
+      {title && <AlertTitle>{title}</AlertTitle>}
+      <AlertDescription className="text-inherit">{children}</AlertDescription>
+    </Alert>
+  );
+}

package/src/components/shared/number/formatted-number.tsx

@@ -0,0 +1,133 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+
+/** ค่าทศนิยมแบบ object (เช่น Prisma.Decimal, decimal.js) — ขอแค่ toString() ให้ตัวเลข */
+export interface DecimalLike {
+  toString(): string;
+}
+
+/**
+ * Props for the FormattedNumber component.
+ */
+interface FormattedNumberProps {
+  /**
+   * The value to format. Can be a Decimal-like object (Prisma.Decimal / decimal.js), number, string, null, or undefined.
+   */
+  value: DecimalLike | number | string | null | undefined;
+
+  /**
+   * Optional Intl.NumberFormat options to customize the output.
+   * Defaults to { style: 'decimal', minimumFractionDigits: 2, maximumFractionDigits: 2 }.
+   */
+  options?: Intl.NumberFormatOptions;
+
+  /**
+   * The locale to use for formatting. Defaults to 'th-TH'.
+   */
+  locale?: string;
+
+  /**
+   * Placeholder text to display while mounting or if the value is invalid/null/undefined.
+   * Defaults to "-".
+   */
+  placeholder?: string;
+
+  /**
+   * Optional CSS class name(s) to apply to the span element.
+   */
+  className?: string;
+}
+
+/**
+ * A client-side component to safely format and display numeric or Decimal values,
+ * preventing hydration mismatches and handling null/undefined states.
+ * * @example
+ * // Default formatting (2 decimal places)
+ * <FormattedNumber value={prismaDecimalValue} />
+ * * @example
+ * // No decimals
+ * <FormattedNumber value={12345} options={{ minimumFractionDigits: 0, maximumFractionDigits: 0 }} />
+ * * @example
+ * // Currency format
+ * <FormattedNumber
+ * value={12345.67}
+ * options={{ style: 'currency', currency: 'THB' }}
+ * locale="th-TH"
+ * />
+ */
+export function FormattedNumber({
+  value,
+  options: userOptions,
+  locale = "th-TH",
+  placeholder = "-",
+  className,
+}: FormattedNumberProps) {
+  const [formattedValue, setFormattedValue] = useState<string>(placeholder);
+  const [isMounted, setIsMounted] = useState(false);
+
+  useEffect(() => {
+    // Set mounted to true only on the client-side
+    setIsMounted(true);
+  }, []);
+
+  // Memoize default options
+  const defaultOptions: Intl.NumberFormatOptions = useMemo(
+    () => ({
+      style: "decimal",
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2,
+    }),
+    [],
+  );
+
+  useEffect(() => {
+    // Only run formatting logic on the client *after* mounting
+    if (!isMounted) {
+      return;
+    }
+
+    let numericValue: number;
+
+    // 1. Check for null/undefined/empty string explicitly to show placeholder
+    if (value === null || value === undefined || value === "") {
+      setFormattedValue(placeholder);
+      return;
+    }
+
+    // 2. Convert value to number
+    try {
+      // Handle Prisma Decimal object (or any object with toFixed/toString)
+      if (typeof value === "object" && value !== null && "toString" in value) {
+        numericValue = Number(value.toString());
+      } else {
+        // Handle number, string
+        numericValue = Number(value);
+      }
+    } catch (_e) {
+      // Handle potential errors during conversion
+      numericValue = NaN;
+    }
+
+    // 3. Check if conversion resulted in a valid number
+    if (Number.isNaN(numericValue)) {
+      setFormattedValue(placeholder);
+      return;
+    }
+
+    // 4. Format the valid number
+    try {
+      // Merge user options with defaults (user options take precedence)
+      const finalOptions = { ...defaultOptions, ...userOptions };
+
+      const formatter = new Intl.NumberFormat(locale, finalOptions);
+      setFormattedValue(formatter.format(numericValue));
+    } catch (error) {
+      console.error("Error formatting number:", error);
+      setFormattedValue(placeholder); // Fallback on formatting error
+    }
+  }, [isMounted, value, userOptions, locale, placeholder, defaultOptions]);
+
+  // Render placeholder during SSR/hydration, formatted value on client post-mount
+  return <span className={className}>{formattedValue}</span>;
+}

package/src/components/shared/page-header.tsx

@@ -0,0 +1,25 @@
+import { cn } from "@suphark/ui/lib/utils";
+import type { ReactNode } from "react";
+
+/** หัวหน้าเพจของ console: ชื่อ + คำอธิบาย + ปุ่มด้านขวา */
+export function PageHeader({
+  title,
+  description,
+  actions,
+  className,
+}: {
+  title: ReactNode;
+  description?: ReactNode;
+  actions?: ReactNode;
+  className?: string;
+}) {
+  return (
+    <div className={cn("flex flex-wrap items-end justify-between gap-3", className)}>
+      <div className="min-w-0">
+        <h1 className="text-xl font-semibold tracking-tight">{title}</h1>
+        {description && <p className="mt-1 text-sm text-muted-foreground">{description}</p>}
+      </div>
+      {actions && <div className="flex items-center gap-2">{actions}</div>}
+    </div>
+  );
+}

package/src/components/shared/page-skeleton.tsx

@@ -0,0 +1,18 @@
+import { Skeleton } from "@suphark/ui/components/ui/skeleton";
+
+export function PageSkeleton() {
+  return (
+    <div className="animate-pulse space-y-6">
+      <div className="space-y-2">
+        <Skeleton className="h-10 w-1/3" />
+        <Skeleton className="h-4 w-1/2" />
+      </div>
+
+      <div className="grid gap-6">
+        <Skeleton className="h-[200px] w-full rounded-xl" />
+        <Skeleton className="h-[200px] w-full rounded-xl" />
+        <Skeleton className="h-[200px] w-full rounded-xl" />
+      </div>
+    </div>
+  );
+}

package/src/components/shared/row-actions.tsx

@@ -0,0 +1,93 @@
+"use client";
+
+import { Button } from "@suphark/ui/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@suphark/ui/components/ui/dropdown-menu";
+import { MoreHorizontalIcon } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { useState, useTransition } from "react";
+import { useUiText } from "./ui-text";
+
+export type RowAction =
+  | {
+      type?: "item";
+      label: string;
+      href?: string;
+      onSelect?: () => void;
+      destructive?: boolean;
+      confirm?: string;
+      action?: (formData: FormData) => Promise<unknown>;
+      data?: Record<string, string>;
+      disabled?: boolean;
+    }
+  | { type: "separator" };
+
+/**
+ * เมนู "…" ท้ายแถว — รวมการกระทำรองไว้ที่เดียวแทนปุ่ม/ฟอร์มหลายอันในแถว
+ * รายการเรียก server action ได้โดยตรง (`action` + `data`) หรือไปหน้าอื่น (`href`) หรือเปิด dialog (`onSelect`)
+ * `confirm` = ถามยืนยันก่อน (ใช้กับสิ่งที่ย้อนกลับไม่ได้)
+ */
+export function RowActions({ items, label }: { items: RowAction[]; label?: string }) {
+  const router = useRouter();
+  const text = useUiText();
+  const [pending, start] = useTransition();
+  const [open, setOpen] = useState(false);
+  return (
+    <DropdownMenu open={open} onOpenChange={setOpen}>
+      <DropdownMenuTrigger
+        render={
+          <Button
+            variant="ghost"
+            size="icon-sm"
+            aria-label={label ?? text.actions}
+            disabled={pending}
+          />
+        }
+      >
+        <MoreHorizontalIcon />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="min-w-52">
+        {items.map((it, i) =>
+          it.type === "separator" ? (
+            // biome-ignore lint/suspicious/noArrayIndexKey: separator ไม่มี identity
+            <DropdownMenuSeparator key={`sep-${i}`} />
+          ) : (
+            <DropdownMenuItem
+              key={it.label}
+              variant={it.destructive ? "destructive" : "default"}
+              disabled={it.disabled}
+              onClick={() => {
+                setOpen(false);
+                if (it.confirm && !window.confirm(it.confirm)) return;
+                if (it.href) {
+                  router.push(it.href);
+                  return;
+                }
+                if (it.onSelect) {
+                  it.onSelect();
+                  return;
+                }
+                if (it.action) {
+                  const fd = new FormData();
+                  for (const [k, v] of Object.entries(it.data ?? {})) fd.set(k, v);
+                  const run = it.action;
+                  start(async () => {
+                    await run(fd);
+                    router.refresh();
+                  });
+                }
+              }}
+            >
+              {it.label}
+            </DropdownMenuItem>
+          ),
+        )}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/src/components/shared/row-menu.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import { type ReactNode, useState } from "react";
+import { FormDialog } from "./form-dialog";
+import type { FormState } from "./form-message";
+import { type RowAction, RowActions } from "./row-actions";
+
+export type RowMenuItem = RowAction | { label: string; dialog: string; disabled?: boolean };
+
+export interface RowMenuDialog {
+  title: ReactNode;
+  description?: ReactNode;
+  action: (prev: FormState, formData: FormData) => Promise<FormState>;
+  submitLabel?: string;
+  children: ReactNode;
+}
+
+/**
+ * เมนู "…" ที่บางรายการเปิด dialog ฟอร์ม — ใช้จาก server component ได้
+ * (รายการอ้าง dialog ด้วย key; children ของ dialog เป็น JSX ที่ render จาก server ได้)
+ */
+export function RowMenu({
+  items,
+  dialogs = {},
+  label,
+}: {
+  items: RowMenuItem[];
+  dialogs?: Record<string, RowMenuDialog>;
+  label?: string;
+}) {
+  const [open, setOpen] = useState<string | null>(null);
+  const actions: RowAction[] = items.map((it) =>
+    "dialog" in it
+      ? { label: it.label, disabled: it.disabled, onSelect: () => setOpen(it.dialog) }
+      : it,
+  );
+  return (
+    <>
+      <RowActions items={actions} label={label} />
+      {Object.entries(dialogs).map(([key, d]) => (
+        <FormDialog
+          key={key}
+          open={open === key}
+          onOpenChange={(o) => setOpen(o ? key : null)}
+          title={d.title}
+          description={d.description}
+          action={d.action}
+          submitLabel={d.submitLabel}
+        >
+          {d.children}
+        </FormDialog>
+      ))}
+    </>
+  );
+}

package/src/components/shared/secret-reveal.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import { Button } from "@suphark/ui/components/ui/button";
+import { CheckIcon, CopyIcon } from "lucide-react";
+import { useState } from "react";
+import { Notice } from "./notice";
+import { useUiText } from "./ui-text";
+
+/** แสดงค่าลับที่เห็นได้ครั้งเดียว (client secret, webhook secret, SCIM token) พร้อมปุ่มคัดลอก */
+export function SecretReveal({
+  values,
+  title,
+}: {
+  values: Record<string, string>;
+  title?: string;
+}) {
+  const text = useUiText();
+  const [copied, setCopied] = useState<string | null>(null);
+  async function copy(key: string, value: string) {
+    try {
+      await navigator.clipboard.writeText(value);
+      setCopied(key);
+      setTimeout(() => setCopied((c) => (c === key ? null : c)), 1500);
+    } catch {
+      // clipboard ไม่ได้ (http/permission) — ผู้ใช้ยังคัดลอกจากข้อความได้
+    }
+  }
+  return (
+    <Notice tone="warning" title={title ?? text.showOnce}>
+      <dl className="flex flex-col gap-2">
+        {Object.entries(values).map(([k, v]) => (
+          <div key={k} className="flex flex-col gap-1">
+            <dt className="font-mono text-[0.7rem] text-muted-foreground">{k}</dt>
+            <dd className="flex items-center gap-2">
+              <code className="min-w-0 flex-1 break-all rounded-md bg-background/70 px-2 py-1 font-mono text-xs">
+                {v}
+              </code>
+              <Button
+                type="button"
+                variant="outline"
+                size="icon-sm"
+                aria-label={`${text.copy} ${k}`}
+                onClick={() => copy(k, v)}
+              >
+                {copied === k ? <CheckIcon /> : <CopyIcon />}
+              </Button>
+            </dd>
+          </div>
+        ))}
+      </dl>
+    </Notice>
+  );
+}