@suphark/ui 0.27.0 → 0.28.0

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

@@ -1,6 +1,6 @@
 "use client";
 
-import { Button } from "@suphark/ui/components/ui/button";
+import { Button } from "@suphark/ui/components/shared/button/button";
 import { cn } from "@suphark/ui/lib/utils";
 import { Check, Loader2, Save, X } from "lucide-react";
 import { useEffect, useRef, useState } from "react";

package/src/components/shared/combobox.tsx

@@ -1,7 +1,7 @@
 "use client";
 
+import { Button } from "@suphark/ui/components/shared/button/button";
 import { SwitcherChevron } from "@suphark/ui/components/shared/switcher-chevron";
-import { Button } from "@suphark/ui/components/ui/button";
 import {
   Command,
   CommandEmpty,

package/src/components/shared/date/date-range-picker.tsx

@@ -1,7 +1,7 @@
 "use client";
 
+import { Button } from "@suphark/ui/components/shared/button/button";
 import { Badge } from "@suphark/ui/components/ui/badge";
-import { Button } from "@suphark/ui/components/ui/button";
 import { Calendar } from "@suphark/ui/components/ui/calendar";
 import { Popover, PopoverContent, PopoverTrigger } from "@suphark/ui/components/ui/popover";
 import { Separator } from "@suphark/ui/components/ui/separator";

package/src/components/shared/dropzone.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Button } from "@suphark/ui/components/ui/button";
+import { Button } from "@suphark/ui/components/shared/button/button";
 import { formatBytes } from "@suphark/ui/lib/formatters";
 import { cn } from "@suphark/ui/lib/utils";
 import { UploadCloud } from "lucide-react";

package/src/components/shared/env-snippet.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Button } from "@suphark/ui/components/ui/button";
+import { Button } from "@suphark/ui/components/shared/button/button";
 import { copyText, selectContents } from "@suphark/ui/lib/copy-text";
 import { CheckIcon, CopyIcon } from "lucide-react";
 import { useRef, useState } from "react";

package/src/components/shared/filter-bar.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Button } from "@suphark/ui/components/ui/button";
+import { Button } from "@suphark/ui/components/shared/button/button";
 import { NativeSelect, NativeSelectOption } from "@suphark/ui/components/ui/native-select";
 import { cn } from "@suphark/ui/lib/utils";
 import { XIcon } from "lucide-react";

package/src/components/shared/form/date-time-picker.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Button } from "@suphark/ui/components/ui/button";
+import { Button } from "@suphark/ui/components/shared/button/button";
 import { Calendar } from "@suphark/ui/components/ui/calendar";
 import { Popover, PopoverContent, PopoverTrigger } from "@suphark/ui/components/ui/popover";
 import { useMounted } from "@suphark/ui/hooks/use-mounted";

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

@@ -1,7 +1,7 @@
 "use client";
 
+import { Button } from "@suphark/ui/components/shared/button/button";
 import { SwitcherChevron } from "@suphark/ui/components/shared/switcher-chevron";
-import { Button } from "@suphark/ui/components/ui/button";
 import {
   Command,
   CommandEmpty,

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

@@ -1,8 +1,8 @@
 "use client";
 
+import { Button } from "@suphark/ui/components/shared/button/button";
 import { MultiSelectCombobox } from "@suphark/ui/components/shared/multi-select-combobox";
 import { SwitcherChevron } from "@suphark/ui/components/shared/switcher-chevron";
-import { Button } from "@suphark/ui/components/ui/button";
 import {
   Command,
   CommandEmpty,

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

@@ -1,7 +1,7 @@
 "use client";
 
+import { Button } from "@suphark/ui/components/shared/button/button";
 import { SecretReveal } from "@suphark/ui/components/shared/secret-reveal";
-import { Button } from "@suphark/ui/components/ui/button";
 import {
   Dialog,
   DialogContent,

package/src/components/shared/inline-edit.tsx

@@ -0,0 +1,175 @@
+"use client";
+
+import { Button } from "@suphark/ui/components/shared/button/button";
+import { useUiText } from "@suphark/ui/components/shared/ui-text";
+import { Input } from "@suphark/ui/components/ui/input";
+import { errorMessage, isNavigationError } from "@suphark/ui/lib/action-result";
+import { cn } from "@suphark/ui/lib/utils";
+import { CheckIcon, Loader2Icon, PencilIcon, XIcon } from "lucide-react";
+import { type ReactNode, useRef, useState } from "react";
+import { toast } from "sonner";
+
+export interface InlineEditProps {
+  value: string;
+  /** บันทึกค่าใหม่ — throw หรือคืน `{ ok: false, error }` = ล้มเหลว (คงโหมดแก้ไขไว้ให้ลองใหม่) */
+  onSave: (value: string) => void | Promise<unknown>;
+  /** ป้ายสำหรับ screen reader ของปุ่มแก้ไข/ช่องกรอก เช่น "ชื่อโปรเจกต์" */
+  label: string;
+  placeholder?: string;
+  /** แสดงแทนค่าว่าง (ค่าเริ่มต้น "—") */
+  emptyLabel?: ReactNode;
+  /** ตรวจก่อนบันทึก — คืนข้อความ = ไม่ผ่าน */
+  validate?: (value: string) => string | null | undefined;
+  /** ค่าเดิมกับค่าใหม่เท่ากัน = ปิดโหมดแก้ไขโดยไม่เรียก `onSave` (ค่าเริ่มต้น true) */
+  skipWhenUnchanged?: boolean;
+  disabled?: boolean;
+  /** sm = ใช้ในแถวตาราง */
+  size?: "sm" | "default";
+  className?: string;
+}
+
+/**
+ * แก้ค่าในที่ — คลิกข้อความ (หรือปุ่มดินสอ) → ช่องกรอก → Enter/✓ บันทึก, Esc/✕ ยกเลิก
+ * ใช้กับค่าสั้น ๆ ที่ไม่คุ้มเปิด dialog (ชื่อโปรเจกต์, ชื่อเล่นของคีย์, หมายเหตุหนึ่งบรรทัด)
+ * ล้มเหลว = ขึ้น toast และคงโหมดแก้ไขไว้ให้ลองใหม่ · ค่ายาว/หลายช่องใช้ `FormDialog`
+ *
+ *   <InlineEdit label="ชื่อโปรเจกต์" value={p.name} onSave={(name) => renameProject(p.id, name)} />
+ */
+export function InlineEdit({
+  value,
+  onSave,
+  label,
+  placeholder,
+  emptyLabel = "—",
+  validate,
+  skipWhenUnchanged = true,
+  disabled = false,
+  size = "default",
+  className,
+}: InlineEditProps) {
+  const text = useUiText();
+  const [editing, setEditing] = useState(false);
+  const [draft, setDraft] = useState(value);
+  const [pending, setPending] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+  // เลือกข้อความทั้งหมดครั้งแรกที่เข้าโหมดแก้ไข — พิมพ์ทับได้ทันที (โฟกัสรอบหลังไม่เลือกซ้ำ)
+  const selectedOnOpen = useRef(false);
+
+  function start() {
+    setDraft(value);
+    selectedOnOpen.current = false;
+    setEditing(true);
+  }
+
+  async function commit() {
+    const next = draft.trim();
+    if (skipWhenUnchanged && next === value.trim()) {
+      setEditing(false);
+      return;
+    }
+    const invalid = validate?.(next);
+    if (invalid) {
+      toast.error(invalid);
+      inputRef.current?.focus();
+      return;
+    }
+    setPending(true);
+    try {
+      const result = await onSave(next);
+      // server action ที่คืน { ok: false, error } ถือว่าล้มเหลวเหมือน throw
+      if (result && typeof result === "object" && "ok" in result && result.ok === false) {
+        const message = "error" in result ? String(result.error) : undefined;
+        toast.error(message || (text.actionFailed ?? "ดำเนินการไม่สำเร็จ"));
+        return;
+      }
+      setEditing(false);
+    } catch (err) {
+      // action ที่ redirect() = สำเร็จ (Next นำทางให้แล้ว)
+      if (isNavigationError(err)) {
+        setEditing(false);
+        return;
+      }
+      toast.error(errorMessage(err, text.actionFailed ?? "ดำเนินการไม่สำเร็จ"));
+    } finally {
+      setPending(false);
+    }
+  }
+
+  const compact = size === "sm";
+
+  if (!editing) {
+    return (
+      <span
+        data-slot="inline-edit"
+        className={cn("group/inline inline-flex min-w-0 items-center gap-1", className)}
+      >
+        <span
+          className={cn("truncate", compact ? "text-sm" : "", !value && "text-muted-foreground")}
+        >
+          {value || emptyLabel}
+        </span>
+        <Button
+          variant="ghost"
+          size={compact ? "icon-xs" : "icon-sm"}
+          aria-label={`${text.edit ?? "แก้ไข"}: ${label}`}
+          disabled={disabled}
+          onClick={start}
+          className="opacity-0 transition-opacity focus-visible:opacity-100 group-hover/inline:opacity-100"
+        >
+          <PencilIcon />
+        </Button>
+      </span>
+    );
+  }
+
+  return (
+    <span
+      data-slot="inline-edit"
+      className={cn("inline-flex min-w-0 items-center gap-1", className)}
+    >
+      <Input
+        ref={inputRef}
+        // biome-ignore lint/a11y/noAutofocus: เพิ่งกดปุ่มแก้ไข — โฟกัสต่อเนื่องคือสิ่งที่ผู้ใช้คาดหวัง
+        autoFocus
+        aria-label={label}
+        value={draft}
+        placeholder={placeholder}
+        disabled={pending}
+        className={cn("min-w-0", compact && "h-7")}
+        onFocus={(e) => {
+          if (selectedOnOpen.current) return;
+          selectedOnOpen.current = true;
+          e.currentTarget.select();
+        }}
+        onChange={(e) => setDraft(e.target.value)}
+        onKeyDown={(e) => {
+          if (e.key === "Enter") {
+            e.preventDefault();
+            void commit();
+          } else if (e.key === "Escape") {
+            e.preventDefault();
+            setEditing(false);
+          }
+        }}
+      />
+      <Button
+        variant="ghost"
+        size={compact ? "icon-xs" : "icon-sm"}
+        aria-label={text.save}
+        disabled={pending}
+        onClick={() => void commit()}
+      >
+        {pending ? <Loader2Icon className="animate-spin" /> : <CheckIcon />}
+      </Button>
+      <Button
+        variant="ghost"
+        size={compact ? "icon-xs" : "icon-sm"}
+        aria-label={text.cancel}
+        disabled={pending}
+        onClick={() => setEditing(false)}
+      >
+        <XIcon />
+      </Button>
+    </span>
+  );
+}

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

@@ -1,7 +1,7 @@
 "use client";
 
+import { Button } from "@suphark/ui/components/shared/button/button";
 import { useUiText } from "@suphark/ui/components/shared/ui-text";
-import { Button } from "@suphark/ui/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,

package/src/components/shared/layout/error-state.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import { Button, buttonVariants } from "@suphark/ui/components/ui/button";
+import { Button } from "@suphark/ui/components/shared/button/button";
+import { buttonVariants } from "@suphark/ui/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@suphark/ui/components/ui/card";
 import { cn } from "@suphark/ui/lib/utils";
 import { AlertTriangle, Home, LogIn, RotateCcw } from "lucide-react";

package/src/components/shared/multi-select-combobox.tsx

@@ -1,8 +1,8 @@
 "use client";
 
+import { Button } from "@suphark/ui/components/shared/button/button";
 import { SwitcherChevron } from "@suphark/ui/components/shared/switcher-chevron";
 import { Badge } from "@suphark/ui/components/ui/badge";
-import { Button } from "@suphark/ui/components/ui/button";
 import {
   Command,
   CommandEmpty,

package/src/components/shared/selection-bar.tsx

@@ -0,0 +1,94 @@
+"use client";
+
+import { Button } from "@suphark/ui/components/shared/button/button";
+import { useUiText } from "@suphark/ui/components/shared/ui-text";
+import { cn } from "@suphark/ui/lib/utils";
+import { XIcon } from "lucide-react";
+import type { ReactNode } from "react";
+
+export interface SelectionAction {
+  label: string;
+  onClick: () => void;
+  icon?: ReactNode;
+  destructive?: boolean;
+  disabled?: boolean;
+}
+
+export interface SelectionBarProps {
+  /** จำนวนที่เลือก — 0 = ไม่แสดงอะไรเลย */
+  count: number;
+  /** ล้างการเลือก (เช่น `table.resetRowSelection`) */
+  onClear: () => void;
+  /** ปุ่มคำสั่งหมู่ — ใส่เป็น array หรือจะส่ง `children` เป็น element เองก็ได้ */
+  actions?: ReadonlyArray<SelectionAction>;
+  children?: ReactNode;
+  /** ข้อความนับ ใช้ `{count}` เช่น "เลือก {count} รายการ" (ไม่ส่ง = `UiText.selection.selected`) */
+  label?: string;
+  /** floating = แถบลอยกลางล่างจอ (ค่าเริ่มต้น) · inline = แถบในหน้า เหนือตาราง */
+  variant?: "floating" | "inline";
+  className?: string;
+}
+
+/**
+ * แถบคำสั่งหมู่ที่โผล่เมื่อเลือกหลายแถว — "เลือก N รายการ" + ปุ่มคำสั่ง + ปุ่มล้าง
+ * ใช้คู่ `DataTable` (`table.getFilteredSelectedRowModel().rows`) หรือ `SimpleTable` ที่แอปคุม state เอง
+ * คำสั่งที่ย้อนกลับไม่ได้ให้ส่ง element ของ `ConfirmActionButton`/`DeleteManyButton` ผ่าน `children`
+ *
+ *   <SelectionBar count={selected.length} onClear={() => table.resetRowSelection()}
+ *     actions={[{ label: "ส่งออก", onClick: exportRows }, { label: "ลบ", destructive: true, onClick: removeRows }]} />
+ */
+export function SelectionBar({
+  count,
+  onClear,
+  actions,
+  children,
+  label,
+  variant = "floating",
+  className,
+}: SelectionBarProps) {
+  const text = useUiText();
+  if (count <= 0) return null;
+
+  const template = label ?? text.selection?.selected ?? "เลือก {count} รายการ";
+  const message = template.replace("{count}", String(count));
+
+  return (
+    <div
+      data-slot="selection-bar"
+      // อ่านออกเสียงจำนวนที่เลือกให้ screen reader โดยไม่ขัดจังหวะ
+      aria-live="polite"
+      className={cn(
+        "flex items-center gap-2 rounded-xl border bg-card px-3 py-2 shadow-lg",
+        variant === "floating" &&
+          "-translate-x-1/2 fixed bottom-[calc(1rem+env(safe-area-inset-bottom))] left-1/2 z-40 max-w-[calc(100vw-2rem)]",
+        className,
+      )}
+    >
+      <span className="shrink-0 font-medium text-sm tabular-nums">{message}</span>
+      <div className="flex min-w-0 flex-wrap items-center gap-1.5">
+        {actions?.map((action) => (
+          <Button
+            key={action.label}
+            size="sm"
+            variant={action.destructive ? "destructive" : "outline"}
+            disabled={action.disabled}
+            onClick={action.onClick}
+          >
+            {action.icon}
+            {action.label}
+          </Button>
+        ))}
+        {children}
+      </div>
+      <Button
+        variant="ghost"
+        size="icon-sm"
+        aria-label={text.selection?.clear ?? "ล้างการเลือก"}
+        onClick={onClear}
+        className="ml-auto shrink-0"
+      >
+        <XIcon />
+      </Button>
+    </div>
+  );
+}

package/src/components/shared/selection-button.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Button } from "@suphark/ui/components/ui/button";
+import { Button } from "@suphark/ui/components/shared/button/button";
 import { cn } from "@suphark/ui/lib/utils";
 import type { ComponentProps } from "react";
 

package/src/components/shared/simple-table.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { Checkbox } from "@suphark/ui/components/ui/checkbox";
 import {
   Table,
   TableBody,
@@ -38,6 +39,10 @@ export function SimpleTable<T>({
   getRowKey,
   empty = "ไม่มีข้อมูล",
   onRowClick,
+  selected,
+  onSelectedChange,
+  selectLabel = "เลือกแถว",
+  selectAllLabel = "เลือกทั้งหมด",
   caption,
   className,
 }: {
@@ -45,6 +50,13 @@ export function SimpleTable<T>({
   rows: ReadonlyArray<T>;
   getRowKey: (row: T, index: number) => string | number;
   empty?: ReactNode;
+  /** คีย์ของแถวที่เลือก — ส่งคู่กับ `onSelectedChange` เพื่อเปิดช่องติ๊กหน้าแถว (ใช้คู่ `SelectionBar`) */
+  selected?: ReadonlyArray<string | number>;
+  onSelectedChange?: (selected: Array<string | number>) => void;
+  /** aria-label ของช่องติ๊กแต่ละแถว (ค่าเริ่มต้น "เลือกแถว") */
+  selectLabel?: string;
+  /** aria-label ของช่องติ๊กบนหัวตาราง (ค่าเริ่มต้น "เลือกทั้งหมด") */
+  selectAllLabel?: string;
   /** คลิกทั้งแถว (เช่นเปิดรายละเอียด) — ปุ่มในแถวควร stopPropagation เอง */
   onRowClick?: (row: T) => void;
   /** คำอธิบายตารางสำหรับ screen reader (sr-only) */
@@ -53,12 +65,37 @@ export function SimpleTable<T>({
 }) {
   const alignClass = (a?: "left" | "center" | "right") =>
     a === "right" ? "text-right tabular-nums" : a === "center" ? "text-center" : undefined;
+
+  const selectable = Boolean(onSelectedChange);
+  const selectedKeys = new Set(selected ?? []);
+  const allKeys = rows.map((row, i) => getRowKey(row, i));
+  const allSelected = allKeys.length > 0 && allKeys.every((k) => selectedKeys.has(k));
+  const someSelected = !allSelected && allKeys.some((k) => selectedKeys.has(k));
+
+  function toggleRow(key: string | number, checked: boolean) {
+    const next = new Set(selectedKeys);
+    if (checked) next.add(key);
+    else next.delete(key);
+    onSelectedChange?.([...next]);
+  }
   return (
     <div className={cn("overflow-hidden rounded-xl border bg-card", className)}>
       <Table>
         {caption && <caption className="sr-only">{caption}</caption>}
         <TableHeader>
           <TableRow>
+            {selectable && (
+              <TableHead className="w-10">
+                <Checkbox
+                  aria-label={selectAllLabel}
+                  checked={allSelected}
+                  indeterminate={someSelected}
+                  // ครึ่งหนึ่ง: ซ่อนเครื่องหมายถูก แสดงขีดแทน (ไฟล์ shadcn ไม่มีไอคอนขีด)
+                  className="data-indeterminate:border-primary data-indeterminate:bg-primary data-indeterminate:text-primary-foreground data-indeterminate:before:absolute data-indeterminate:before:h-0.5 data-indeterminate:before:w-2 data-indeterminate:before:rounded-full data-indeterminate:before:bg-current [&[data-indeterminate]_svg]:hidden"
+                  onCheckedChange={(checked) => onSelectedChange?.(checked ? allKeys : [])}
+                />
+              </TableHead>
+            )}
             {columns.map((c) => (
               <TableHead key={c.key} className={cn(alignClass(c.align), c.className)}>
                 {c.header}
@@ -68,14 +105,26 @@ export function SimpleTable<T>({
         </TableHeader>
         <TableBody>
           {rows.length === 0 ? (
-            <EmptyRow colSpan={columns.length}>{empty}</EmptyRow>
+            <EmptyRow colSpan={columns.length + (selectable ? 1 : 0)}>{empty}</EmptyRow>
           ) : (
             rows.map((row, i) => (
               <TableRow
                 key={getRowKey(row, i)}
                 onClick={onRowClick ? () => onRowClick(row) : undefined}
-                className={cn(onRowClick && "cursor-pointer")}
+                data-selected={selectedKeys.has(getRowKey(row, i)) || undefined}
+                className={cn(onRowClick && "cursor-pointer", "data-selected:bg-muted/50")}
               >
+                {selectable && (
+                  <TableCell className="w-10">
+                    <Checkbox
+                      aria-label={selectLabel}
+                      checked={selectedKeys.has(getRowKey(row, i))}
+                      onCheckedChange={(checked) => toggleRow(getRowKey(row, i), checked === true)}
+                      // คลิกช่องติ๊กไม่ให้ไปโดน onRowClick ของทั้งแถว
+                      onClick={(event) => event.stopPropagation()}
+                    />
+                  </TableCell>
+                )}
                 {columns.map((c) => (
                   <TableCell key={c.key} className={cn(alignClass(c.align), c.className)}>
                     {c.cell

package/src/components/shared/simple-tabs.tsx

@@ -8,7 +8,7 @@ import {
 } from "@suphark/ui/components/ui/accordion";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@suphark/ui/components/ui/tabs";
 import { cn } from "@suphark/ui/lib/utils";
-import type { ReactNode } from "react";
+import { type ReactNode, useCallback, useEffect, useRef, useState } from "react";
 
 export interface SimpleTabItem {
   value: string;
@@ -49,6 +49,26 @@ export function SimpleTabs({
   className?: string;
   listClassName?: string;
 }) {
+  const listRef = useRef<HTMLDivElement>(null);
+  const [edges, setEdges] = useState({ start: false, end: false });
+
+  const updateEdges = useCallback(() => {
+    const el = listRef.current;
+    if (!el) return;
+    const max = el.scrollWidth - el.clientWidth;
+    // 4px กันเศษจากการปัดทศนิยม
+    setEdges({ start: el.scrollLeft > 4, end: el.scrollLeft < max - 4 });
+  }, []);
+
+  useEffect(() => {
+    updateEdges();
+    const el = listRef.current;
+    if (!el || typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(updateEdges);
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [updateEdges]);
+
   return (
     <Tabs
       value={value}
@@ -57,18 +77,39 @@ export function SimpleTabs({
       onValueChange={(v) => onValueChange?.(String(v))}
       className={className}
     >
-      <TabsList
-        variant={variant}
-        className={cn(fullWidth && "w-full", "max-w-full overflow-x-auto", listClassName)}
-      >
-        {items.map((item) => (
-          <TabsTrigger key={item.value} value={item.value} disabled={item.disabled}>
-            {item.icon}
-            {item.label}
-            {item.badge}
-          </TabsTrigger>
-        ))}
-      </TabsList>
+      {/* แท็บเยอะเกินความกว้าง = เลื่อนแนวนอนได้ + เงาบอกว่ายังมีต่อ (ซ่อนแถบเลื่อน) */}
+      <div className="relative">
+        <TabsList
+          ref={listRef}
+          onScroll={updateEdges}
+          variant={variant}
+          className={cn(
+            fullWidth && "w-full",
+            "no-scrollbar max-w-full overflow-x-auto scroll-smooth",
+            listClassName,
+          )}
+        >
+          {items.map((item) => (
+            <TabsTrigger key={item.value} value={item.value} disabled={item.disabled}>
+              {item.icon}
+              {item.label}
+              {item.badge}
+            </TabsTrigger>
+          ))}
+        </TabsList>
+        {edges.start && (
+          <span
+            aria-hidden="true"
+            className="pointer-events-none absolute inset-y-0 left-0 w-6 rounded-l-lg bg-gradient-to-r from-background to-transparent"
+          />
+        )}
+        {edges.end && (
+          <span
+            aria-hidden="true"
+            className="pointer-events-none absolute inset-y-0 right-0 w-6 rounded-r-lg bg-gradient-to-l from-background to-transparent"
+          />
+        )}
+      </div>
       {items.map((item) => (
         <TabsContent key={item.value} value={item.value}>
           {item.content}

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

@@ -1,6 +1,6 @@
 "use client";
 
-import { Button } from "@suphark/ui/components/ui/button";
+import { Button } from "@suphark/ui/components/shared/button/button";
 import { Spinner } from "@suphark/ui/components/ui/spinner";
 import { errorMessage, failedResult, isNavigationError } from "@suphark/ui/lib/action-result";
 import { cn } from "@suphark/ui/lib/utils";