@suphark/ui 0.5.1 → 0.6.1

package/src/components/pwa/pull-to-refresh.tsx

@@ -46,8 +46,14 @@ export function PullToRefresh({
   const isPullingRef = useRef(false);
   const [pullDistance, setPullDistance] = useState(0);
   const [isRefreshing, setIsRefreshing] = useState(false);
+  // listener อ่านค่าล่าสุดผ่าน ref — ไม่ผูก state เป็น deps ของ effect (เดิมถอด/ใส่ listener ใหม่ทุก touchmove)
+  const pullDistanceRef = useRef(0);
+  const isRefreshingRef = useRef(false);
+  pullDistanceRef.current = pullDistance;
+  isRefreshingRef.current = isRefreshing;
 
   useEffect(() => {
+    const isRefreshing = () => isRefreshingRef.current;
     const isMobileViewport = () => window.innerWidth < MOBILE_BREAKPOINT;
     const getRoot = () => document.querySelector<HTMLElement>(rootSelector);
     const isRootAtTop = (root: HTMLElement) => root.scrollTop <= 0;
@@ -60,7 +66,7 @@ export function PullToRefresh({
 
     const handleTouchStart = (event: TouchEvent) => {
       const touch = event.touches[0];
-      if (!isMobileViewport() || isRefreshing || event.touches.length !== 1 || !touch) {
+      if (!isMobileViewport() || isRefreshing() || event.touches.length !== 1 || !touch) {
         resetPull();
         return;
       }
@@ -76,7 +82,7 @@ export function PullToRefresh({
     const handleTouchMove = (event: TouchEvent) => {
       const start = startRef.current;
       const touch = event.touches[0];
-      if (!start || isRefreshing || event.touches.length !== 1 || !touch) return;
+      if (!start || isRefreshing() || event.touches.length !== 1 || !touch) return;
 
       const root = getRoot();
       if (!root || !isRootAtTop(root)) {
@@ -99,9 +105,9 @@ export function PullToRefresh({
     };
 
     const handleTouchEnd = () => {
-      const shouldRefresh = pullDistance >= ACTIVATION_DISTANCE;
+      const shouldRefresh = pullDistanceRef.current >= ACTIVATION_DISTANCE;
       resetPull();
-      if (!shouldRefresh || isRefreshing) return;
+      if (!shouldRefresh || isRefreshing()) return;
       setIsRefreshing(true);
       router.refresh();
       window.setTimeout(() => setIsRefreshing(false), 700);
@@ -117,7 +123,7 @@ export function PullToRefresh({
       window.removeEventListener("touchend", handleTouchEnd);
       window.removeEventListener("touchcancel", resetPull);
     };
-  }, [isRefreshing, pullDistance, router, rootSelector]);
+  }, [router, rootSelector]);
 
   const isVisible = pullDistance > 0 || isRefreshing;
   const progress = Math.min(1, pullDistance / ACTIVATION_DISTANCE);

package/src/components/shared/action-form.tsx

@@ -0,0 +1,78 @@
+"use client";
+
+import { Button } from "@suphark/ui/components/ui/button";
+import { Card, CardContent } from "@suphark/ui/components/ui/card";
+import { cn } from "@suphark/ui/lib/utils";
+import { type ReactNode, startTransition, useActionState } from "react";
+import { type FormAction, FormMessage, type FormState } from "./form-message";
+import { useUiText } from "./ui-text";
+
+/**
+ * ฟอร์ม inline คู่กับ `FormDialog` (อันนั้นอยู่ในกล่องโต้ตอบ อันนี้อยู่บนหน้า): `useActionState` + `FormMessage` + ปุ่มส่ง
+ * ไม่ใช้ `action=` บน <form> — React 19 รีเซ็ตฟอร์ม uncontrolled หลัง action จบทุกครั้ง (แม้คืน error)
+ * ค่าที่พิมพ์จะหาย; เรียก action ใน transition เองแทน ฟอร์มจึงคงค่าไว้ให้แก้ต่อ (แบบเดียวกับ FormDialog)
+ * ไม่พึ่ง next (ไม่ refresh เอง — ให้ server action `revalidatePath` หรือส่ง `onSuccess`)
+ *
+ *   <ActionForm action={updateName} title="ชื่อองค์กร" submitLabel="บันทึก">
+ *     <LabeledField label="ชื่อ"><Input name="name" defaultValue={org.name} /></LabeledField>
+ *   </ActionForm>
+ */
+export function ActionForm({
+  action,
+  title,
+  submitLabel,
+  children,
+  compact = false,
+  className,
+  onSuccess,
+}: {
+  action: FormAction;
+  title?: ReactNode;
+  submitLabel?: ReactNode;
+  children: ReactNode;
+  /** ฟอร์มเล็กในแถวตาราง — ไม่มีกรอบ Card, ปุ่ม size sm, จัดแนวนอน wrap */
+  compact?: boolean;
+  className?: string;
+  /** เรียกเมื่อ action คืน `ok: true` (เช่น router.refresh, toast) */
+  onSuccess?: (state: Extract<FormState, { ok: true }>) => void;
+}) {
+  const text = useUiText();
+  const [state, formAction, pending] = useActionState<FormState, FormData>(async (prev, fd) => {
+    const next = await action(prev, fd);
+    if (next?.ok) onSuccess?.(next);
+    return next;
+  }, null);
+
+  const form = (
+    <form
+      onSubmit={(e) => {
+        e.preventDefault();
+        const fd = new FormData(e.currentTarget);
+        startTransition(() => formAction(fd));
+      }}
+      className={cn(
+        compact ? "flex flex-wrap items-end gap-2" : "flex flex-col gap-3",
+        compact && className,
+      )}
+    >
+      {title && !compact && <h2 className="font-semibold text-sm">{title}</h2>}
+      {children}
+      <FormMessage state={state} className={compact ? "basis-full" : undefined} />
+      <Button
+        type="submit"
+        size={compact ? "sm" : "default"}
+        disabled={pending}
+        className={compact ? undefined : "self-start"}
+      >
+        {submitLabel ?? text.save}
+      </Button>
+    </form>
+  );
+
+  if (compact) return form;
+  return (
+    <Card className={className}>
+      <CardContent>{form}</CardContent>
+    </Card>
+  );
+}

package/src/components/shared/button/floating-save-button.tsx

@@ -68,7 +68,7 @@ export function FloatingSaveButton({
         className={cn(
           "h-14 gap-3 rounded-full border-4 border-background px-8 text-base shadow-2xl transition-all duration-300",
           showSuccess
-            ? "scale-105 bg-emerald-500 text-white shadow-[0_0_20px_rgba(16,185,129,0.4)] hover:bg-emerald-500"
+            ? "scale-105 bg-success text-success-foreground shadow-2xl shadow-success/40 hover:bg-success"
             : "bg-primary text-primary-foreground hover:bg-primary/90",
           buttonClassName,
         )}

package/src/components/shared/form/form-field-color-select.tsx

@@ -55,7 +55,7 @@ export function FormFieldColorSelect<T extends FieldValues>({
       render={({ field }) => (
         <FormItem>
           <FormLabel>
-            {label} {props.required && <span className="text-red-500">*</span>}
+            {label} {props.required && <span className="text-destructive">*</span>}
           </FormLabel>
           <Select onValueChange={field.onChange} value={field.value} {...props}>
             <FormControl>

package/src/components/shared/form/form-field-combobox.tsx

@@ -43,8 +43,17 @@ interface FormFieldComboboxProps<T extends FieldValues> {
   onSelect?: (option: { label: string; value: string; [key: string]: any }) => void;
 }
 
-// Singleton client-side cache to persist combobox options across mounts/renders
-const comboboxCache = new Map<any, { label: string; value: string; subLabel?: string }[]>();
+type CacheEntry = { label: string; value: string; subLabel?: string }[];
+// cache ตัวเลือกข้าม mount: key เป็น string (`fetcherKey`) เก็บใน Map; key เป็นฟังก์ชัน (ไม่ส่ง fetcherKey)
+// เก็บใน WeakMap — inline arrow ที่ identity เปลี่ยนทุก render จะถูก GC ไม่โตค้างตลอดอายุแท็บ
+const stringCache = new Map<string, CacheEntry>();
+const fnCache = new WeakMap<object, CacheEntry>();
+const cacheGet = (key: string | object) =>
+  typeof key === "string" ? stringCache.get(key) : fnCache.get(key);
+const cacheSet = (key: string | object, data: CacheEntry) => {
+  if (typeof key === "string") stringCache.set(key, data);
+  else fnCache.set(key, data);
+};
 
 export function FormFieldCombobox<T extends FieldValues>({
   control,
@@ -61,7 +70,7 @@ export function FormFieldCombobox<T extends FieldValues>({
 }: FormFieldComboboxProps<T>) {
   const cacheKey = fetcherKey ?? fetcher;
   const [options, setOptions] = useState<{ label: string; value: string; subLabel?: string }[]>(
-    () => comboboxCache.get(cacheKey) || [],
+    () => cacheGet(cacheKey) || [],
   );
   const [isLoading, startTransition] = useTransition();
   const [open, setOpen] = React.useState(false);
@@ -73,14 +82,14 @@ export function FormFieldCombobox<T extends FieldValues>({
 
   useEffect(() => {
     // แสดงค่าจากแคชก่อนเพื่อลดการกระพริบ แล้วค่อยโหลดค่าล่าสุดทับ
-    const cached = comboboxCache.get(cacheKey);
+    const cached = cacheGet(cacheKey);
     if (cached) setOptions(cached);
 
     startTransition(async () => {
       try {
         const data = await fetcherRef.current();
         setOptions(data);
-        comboboxCache.set(cacheKey, data);
+        cacheSet(cacheKey, data);
       } catch (error) {
         console.error("Failed to fetch combobox options:", error);
       }
@@ -94,7 +103,7 @@ export function FormFieldCombobox<T extends FieldValues>({
       render={({ field }) => (
         <FormItem className={cn("flex flex-col gap-1.5", className)}>
           <FormLabel>
-            {label} {required && <span className="text-red-500">*</span>}
+            {label} {required && <span className="text-destructive">*</span>}
           </FormLabel>
           <FormControl>
             <Popover open={open} onOpenChange={setOpen}>

package/src/components/shared/form/form-field-date.tsx

@@ -36,7 +36,7 @@ export function FormFieldDate<T extends FieldValues>({
       render={({ field }) => (
         <FormItem className="flex flex-col">
           <FormLabel>
-            {label} {required && <span className="text-red-500">*</span>}
+            {label} {required && <span className="text-destructive">*</span>}
           </FormLabel>
           <FormControl>
             <DatePicker

package/src/components/shared/form/form-field-input.tsx

@@ -182,16 +182,16 @@ function UniqueCheckInput<T extends FieldValues>({
 
   return (
     <div>
-      <InputGroup className={cn(isDuplicate ? "border-red-500 ring-red-500" : "")}>
+      <InputGroup className={cn(isDuplicate ? "border-destructive ring-destructive" : "")}>
         <InputGroupInput
           {...field}
           {...props}
           value={value || ""}
-          className={cn(isDuplicate ? "text-red-600" : "")}
+          className={cn(isDuplicate ? "text-destructive" : "")}
         />
         {isDuplicate && (
           <InputGroupAddon>
-            <CircleAlert className="h-4 w-4 text-red-500" />
+            <CircleAlert className="h-4 w-4 text-destructive" />
           </InputGroupAddon>
         )}
         {enableCopy && (
@@ -200,12 +200,12 @@ function UniqueCheckInput<T extends FieldValues>({
             type="button"
             title="Copy to clipboard"
           >
-            {isCopied ? <Check className="h-4 w-4 text-green-500" /> : <Copy className="h-4 w-4" />}
+            {isCopied ? <Check className="h-4 w-4 text-success" /> : <Copy className="h-4 w-4" />}
           </InputGroupButton>
         )}
       </InputGroup>
       {isDuplicate && (
-        <p className="mt-1 font-medium text-[0.8rem] text-red-500">{uniqueErrorMessage}</p>
+        <p className="mt-1 font-medium text-[0.8rem] text-destructive">{uniqueErrorMessage}</p>
       )}
     </div>
   );
@@ -224,7 +224,7 @@ function CopyableInput(props: ComponentProps<typeof InputGroupInput>) {
         type="button"
         title="Copy to clipboard"
       >
-        {isCopied ? <Check className="h-4 w-4 text-green-500" /> : <Copy className="h-4 w-4" />}
+        {isCopied ? <Check className="h-4 w-4 text-success" /> : <Copy className="h-4 w-4" />}
       </InputGroupButton>
     </InputGroup>
   );

package/src/components/shared/form/form-field-radio-cards.tsx

@@ -17,49 +17,99 @@ type RadioCardOption = {
 
 interface FormFieldRadioCardsProps<T extends FieldValues = any> {
   control?: Control<T>;
-  name?: Path<T>;
+  /** กับ react-hook-form = ชื่อ field; ไม่มี `control` = `name` ของ RadioGroup (ส่งค่าใน FormData ของ server action) */
+  name?: Path<T> | string;
   value?: string;
+  /** ค่าเริ่มต้นเมื่อไม่มี control และไม่คุม value เอง (ฟอร์ม server action) */
+  defaultValue?: string;
   onValueChange?: (value: string) => void;
   label?: string;
   options: RadioCardOption[];
   disabled?: boolean;
   className?: string;
   size?: "sm" | "md" | "lg";
+  /**
+   * `grid` (ค่าเริ่มต้น) = การ์ดสี่เหลี่ยมไอคอนกลาง จุดเลือกมุมขวาบน;
+   * `row` = การ์ดแนวนอน: ปุ่มวิทยุจริงซ้าย, ไอคอน+ชื่อบรรทัดบน, คำอธิบายบรรทัดล่าง (แบบ Pi Auth เลือกประเภทแอป)
+   */
+  layout?: "grid" | "row";
+  /** ชื่อกลุ่มสำหรับ screen reader เมื่อไม่แสดง `label` (ส่งต่อไป RadioGroup) */
+  "aria-label"?: string;
 }
 
 export function FormFieldRadioCards<T extends FieldValues = any>({
   control,
   name,
   value: propValue,
+  defaultValue,
   onValueChange: propOnValueChange,
   label,
   options,
   disabled,
   className,
   size = "md",
+  layout = "grid",
+  "aria-label": ariaLabel,
 }: FormFieldRadioCardsProps<T>) {
   const baseId = useId();
 
-  const renderContent = (value: string, onChange: (val: string) => void) => (
+  const renderContent = (
+    value: string | undefined,
+    onChange: (val: string) => void,
+    groupName?: string,
+  ) => (
     <div className="space-y-3">
       {label && <Label className="block font-semibold text-base">{label}</Label>}
       <RadioGroup
+        name={groupName}
+        aria-label={label ? undefined : ariaLabel}
         onValueChange={(val) => {
-          if (val !== null) onChange(val);
+          if (val !== null) onChange(String(val));
         }}
         value={value}
+        // base-ui-ok: ค่าเริ่มต้นของฟอร์ม server action — ไม่ถูกเปลี่ยนหลัง mount
+        defaultValue={value === undefined ? defaultValue : undefined}
         disabled={disabled}
-        className={cn("grid grid-cols-1 gap-4 md:grid-cols-2", className)}
+        className={cn(
+          "grid grid-cols-1 gap-4",
+          layout === "grid" ? "md:grid-cols-2" : "gap-3 sm:grid-cols-2",
+          className,
+        )}
       >
         {options.map((option) => {
           const id = `${baseId}-${option.value}`;
+          if (layout === "row") {
+            return (
+              <Label
+                key={option.value}
+                htmlFor={id}
+                className={cn(
+                  "flex cursor-pointer items-start gap-3 rounded-lg border p-3 font-normal transition-colors hover:bg-muted/40 has-data-checked:border-primary has-data-checked:bg-primary/5",
+                  disabled && "cursor-not-allowed opacity-50",
+                )}
+              >
+                <RadioGroupItem value={option.value} id={id} className="mt-0.5" />
+                <span className="flex min-w-0 flex-col gap-0.5">
+                  <span className="flex items-center gap-1.5 font-medium text-sm">
+                    {option.icon && (
+                      <span className={cn("[&_svg]:size-4", option.colorClass)}>{option.icon}</span>
+                    )}
+                    {option.label}
+                  </span>
+                  {option.description && (
+                    <span className="text-muted-foreground text-xs">{option.description}</span>
+                  )}
+                </span>
+              </Label>
+            );
+          }
           return (
             <div key={option.value} className="relative">
               <RadioGroupItem value={option.value} id={id} className="peer sr-only" />
               <Label
                 htmlFor={id}
                 className={cn(
-                  "flex cursor-pointer flex-col items-center justify-center rounded-xl border-2 transition-all hover:border-primary hover:bg-accent peer-data-checked:border-primary peer-data-checked:bg-primary/5",
+                  "flex cursor-pointer flex-col items-center justify-center rounded-xl border-2 transition-all hover:border-primary hover:bg-accent peer-data-checked:border-primary peer-data-checked:bg-primary/5 peer-data-checked:[&>[data-dot]]:scale-110 peer-data-checked:[&>[data-dot]]:border-primary peer-data-checked:[&>[data-dot]]:bg-primary peer-data-checked:[&>[data-dot]>span]:opacity-100",
                   size === "sm" && "min-h-[70px] gap-1 p-2",
                   size === "md" && "min-h-[100px] gap-2 p-4",
                   size === "lg" && "min-h-[120px] gap-4 p-6",
@@ -77,29 +127,19 @@ export function FormFieldRadioCards<T extends FieldValues = any>({
                     {option.label}
                   </div>
                   {option.description && (
-                    <div
-                      className={cn(
-                        "font-normal text-muted-foreground leading-tight",
-                        size === "sm" ? "text-xs" : "text-xs",
-                      )}
-                    >
+                    <div className="font-normal text-muted-foreground text-xs leading-tight">
                       {option.description}
                     </div>
                   )}
                 </div>
 
-                <div
-                  className={cn(
-                    "absolute top-2 right-2 h-4 w-4 rounded-full border-2 border-muted transition-all",
-                    value === option.value && "scale-110 border-primary bg-primary",
-                  )}
+                {/* จุดเลือกมุมขวาบน — ตามสถานะจริงของปุ่มวิทยุ (peer) จึงถูกทั้ง controlled/uncontrolled */}
+                <span
+                  data-dot=""
+                  className="absolute top-2 right-2 flex h-4 w-4 items-center justify-center rounded-full border-2 border-muted transition-all"
                 >
-                  {value === option.value && (
-                    <div className="flex h-full w-full items-center justify-center">
-                      <div className="h-1.5 w-1.5 rounded-full bg-white" />
-                    </div>
-                  )}
-                </div>
+                  <span className="h-1.5 w-1.5 rounded-full bg-white opacity-0" />
+                </span>
               </Label>
             </div>
           );
@@ -112,7 +152,7 @@ export function FormFieldRadioCards<T extends FieldValues = any>({
     return (
       <FormField
         control={control}
-        name={name}
+        name={name as Path<T>}
         render={({ field }) => (
           <FormItem className="space-y-3">
             <FormControl>{renderContent(field.value, field.onChange)}</FormControl>
@@ -123,5 +163,6 @@ export function FormFieldRadioCards<T extends FieldValues = any>({
     );
   }
 
-  return renderContent(propValue || "", propOnValueChange || (() => {}));
+  // ไม่มี control: คุม value เอง (`value` + `onValueChange`) หรือปล่อย uncontrolled ด้วย `name` + `defaultValue` (server action)
+  return renderContent(propValue, propOnValueChange ?? (() => {}), name);
 }

package/src/components/shared/form/labeled-field.tsx

@@ -0,0 +1,61 @@
+import { Checkbox } from "@suphark/ui/components/ui/checkbox";
+import { Field, FieldDescription, FieldError, FieldLabel } from "@suphark/ui/components/ui/field";
+import { Label } from "@suphark/ui/components/ui/label";
+import { cn } from "@suphark/ui/lib/utils";
+import type { ComponentProps, ReactNode } from "react";
+
+/**
+ * ช่องฟอร์มสำหรับ server action ธรรมดา (ไม่ใช่ react-hook-form): label + control + hint หรือ error
+ * ประกอบจาก shadcn Field/FieldLabel/FieldDescription/FieldError — ยกจาก Pi Auth (ใช้ 42 ไฟล์ คง API เดิม)
+ * ใช้ได้จาก server component (ไม่มี state)
+ *
+ *   <LabeledField label="ชื่อแอป" hint="แสดงในหน้าเข้าสู่ระบบ" error={state?.errors?.name}>
+ *     <Input name="name" required />
+ *   </LabeledField>
+ */
+export function LabeledField({
+  label,
+  hint,
+  error,
+  children,
+  className,
+}: {
+  label: ReactNode;
+  /** ข้อความช่วยใต้ช่อง — ซ่อนเมื่อมี error */
+  hint?: ReactNode;
+  error?: ReactNode;
+  children: ReactNode;
+  className?: string;
+}) {
+  return (
+    <Field className={cn("gap-1.5", className)} data-invalid={error ? true : undefined}>
+      <FieldLabel className="w-full flex-col items-stretch gap-1.5 font-normal [&_[data-slot=native-select-wrapper]]:w-full">
+        <span className="font-medium text-sm">{label}</span>
+        {children}
+      </FieldLabel>
+      {error ? (
+        <FieldError className="text-xs">{error}</FieldError>
+      ) : (
+        hint && <FieldDescription className="text-xs">{hint}</FieldDescription>
+      )}
+    </Field>
+  );
+}
+
+/**
+ * Checkbox ของ shadcn + label บรรทัดเดียว — ใส่ `name` แล้วส่ง "on" ใน FormData ของ server action ได้
+ *
+ *   <CheckboxField name="allowSignup" defaultChecked label="เปิดให้สมัครเอง" />
+ */
+export function CheckboxField({
+  label,
+  className,
+  ...props
+}: ComponentProps<typeof Checkbox> & { label: ReactNode }) {
+  return (
+    <Label className={cn("flex items-center gap-2 font-normal", className)}>
+      <Checkbox {...props} />
+      <span className="text-sm">{label}</span>
+    </Label>
+  );
+}

package/src/components/shared/form-dialog.tsx

@@ -20,11 +20,9 @@ import {
   useEffect,
   useState,
 } from "react";
-import { FormMessage, type FormState } from "./form-message";
+import { type FormAction, FormMessage, type FormState } from "./form-message";
 import { useUiText } from "./ui-text";
 
-type FormAction = (prev: FormState, formData: FormData) => Promise<FormState>;
-
 /**
  * ฟอร์ม "สร้าง/แก้ไข" ในกล่องโต้ตอบ — เปิดจากปุ่ม (trigger) ปิดเองเมื่อสำเร็จ
  * ใช้แทนฟอร์มที่เคยวางค้างไว้บนหน้า เพื่อให้หน้า list สะอาดและมีการกระทำหลักอันเดียว

package/src/components/shared/form-message.tsx

@@ -5,6 +5,9 @@ import { useUiText } from "./ui-text";
 
 export type FormState = { ok: true; message?: string } | { ok: false; error: string } | null;
 
+/** server action สำหรับ FormDialog/ActionForm: (state ก่อนหน้า, FormData) → FormState */
+export type FormAction = (prev: FormState, formData: FormData) => Promise<FormState>;
+
 /** ข้อความผลของ server action ใต้ฟอร์ม */
 export function FormMessage({
   state,
@@ -18,11 +21,7 @@ export function FormMessage({
   return (
     <p
       role={state.ok ? "status" : "alert"}
-      className={cn(
-        "text-xs",
-        state.ok ? "text-emerald-700 dark:text-emerald-300" : "text-destructive",
-        className,
-      )}
+      className={cn("text-xs", state.ok ? "text-success" : "text-destructive", className)}
     >
       {state.ok ? (state.message ?? text.success) : state.error}
     </p>

package/src/components/shared/navigation/stepper.tsx

@@ -0,0 +1,96 @@
+import { StatusBadge, type Tone } from "@suphark/ui/components/shared/status-badge";
+import { cn } from "@suphark/ui/lib/utils";
+import { AlertTriangle, Check } from "lucide-react";
+import Link from "next/link";
+
+export type StepStatus = "done" | "todo" | "problem";
+
+export interface StepperStep {
+  key: string;
+  href: string;
+  label: string;
+  status: StepStatus;
+  /** ป้ายสถานะเล็กใต้ชื่อขั้น เช่น "ตั้งค่าแล้ว", "ยังไม่มี redirect URI" */
+  statusLabel?: string;
+}
+
+const TONE: Record<StepStatus, Tone> = { done: "success", todo: "neutral", problem: "warning" };
+
+/**
+ * แถบขั้นตอน wizard ที่ทุกขั้นกดเข้าได้ (ไม่บังคับลำดับ) — แนวนอนเลื่อนได้บนจอแคบ / แนวตั้งบน lg
+ * ไม่มี client state → ใช้จาก server component ได้ (อยู่ที่ `@suphark/ui/next` เพราะใช้ next/link)
+ *
+ *   <Stepper current="basics" ariaLabel="ขั้นตอนตั้งค่าแอป" steps={[
+ *     { key: "basics", href: `/apps/${id}`, label: "ข้อมูลพื้นฐาน", status: "done", statusLabel: "ครบ" },
+ *     { key: "oauth", href: `/apps/${id}/oauth`, label: "OAuth", status: "problem", statusLabel: "ไม่มี redirect URI" },
+ *   ]} />
+ */
+export function Stepper({
+  steps,
+  current,
+  ariaLabel = "ขั้นตอน",
+  className,
+}: {
+  steps: StepperStep[];
+  /** key ของขั้นที่กำลังอยู่ */
+  current: string;
+  ariaLabel?: string;
+  className?: string;
+}) {
+  return (
+    <nav aria-label={ariaLabel} className={className}>
+      <ol className="no-scrollbar flex gap-1 overflow-x-auto lg:flex-col lg:overflow-visible">
+        {steps.map((step, i) => {
+          const active = step.key === current;
+          return (
+            <li key={step.key} className="shrink-0 lg:shrink">
+              <Link
+                href={step.href}
+                aria-current={active ? "step" : undefined}
+                className={cn(
+                  "flex items-center gap-3 rounded-md px-3 py-2 text-sm no-underline outline-none transition-colors hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring/50",
+                  active && "bg-accent font-medium",
+                )}
+              >
+                <StepMark status={step.status} index={i + 1} />
+                <span className="flex min-w-0 flex-col gap-0.5">
+                  <span className="truncate">{step.label}</span>
+                  {step.statusLabel && (
+                    <StatusBadge
+                      tone={TONE[step.status]}
+                      className="w-fit px-1.5 py-0 font-normal text-[0.7rem] leading-4"
+                    >
+                      {step.statusLabel}
+                    </StatusBadge>
+                  )}
+                </span>
+              </Link>
+            </li>
+          );
+        })}
+      </ol>
+    </nav>
+  );
+}
+
+function StepMark({ status, index }: { status: StepStatus; index: number }) {
+  return (
+    <span
+      aria-hidden="true"
+      className={cn(
+        "flex size-6 shrink-0 items-center justify-center rounded-full border font-medium text-xs",
+        status === "done" && "border-success bg-success text-success-foreground",
+        status === "problem" && "border-warning text-warning",
+        status === "todo" && "border-border text-muted-foreground",
+      )}
+    >
+      {status === "done" ? (
+        <Check className="size-3.5" />
+      ) : status === "problem" ? (
+        <AlertTriangle className="size-3.5" />
+      ) : (
+        index
+      )}
+    </span>
+  );
+}

package/src/components/shared/notice.tsx

@@ -1,3 +1,4 @@
+/* ui-audit-ok-file: โทน info/success/warning/danger ใช้ palette 50/900 คู่ dark โดยตั้งใจ — รอตัดสินใจ token ระดับ tone (todo) */
 import { Alert, AlertDescription, AlertTitle } from "@suphark/ui/components/ui/alert";
 import { cn } from "@suphark/ui/lib/utils";
 import type { ComponentProps, ReactNode } from "react";