@suphark/ui 0.27.0 → 0.27.1

package/CHANGELOG.md

@@ -2,6 +2,21 @@
 
 รูปแบบตาม [Keep a Changelog](https://keepachangelog.com/) · semver: patch = หน้าตา/บั๊ก, minor = component/prop ใหม่, major = เปลี่ยน/ลบ props
 
+## [0.27.1] — 2026-10-05
+
+### Added
+
+- `Button`: ถ้า `aria-label` ไปอยู่บน element ใน `render=` (เช่น `render={<Link aria-label="…"/>}`) ก็ใช้เป็น tooltip ได้ (เดิมต้องอยู่บน `Button` เท่านั้น — รายงานจาก Pi Auth)
+- เทสต์ชุดใหม่ `button-tooltip-triggers`: ยืนยันว่าปุ่มไอคอนที่ส่งเป็น `render=`/`trigger` ของ `DropdownMenuTrigger` / `PopoverTrigger` / `FormDialog` / `RowActions` ยังได้ tooltip จริง (เช็กจาก popup ที่ขึ้น ไม่ใช่ `data-slot` — `data-slot` ของปุ่มจะกลายเป็นของ trigger ชั้นนอกเสมอ ใช้ชี้วัดไม่ได้)
+
+### Fixed
+
+- **ตัวห่อปุ่มของแพ็กเกจเองหล่น tooltip** (รายงานจาก Pi Auth): `LinkButton`/`ActionButton`/`CopyButton`/`DeleteManyButton`/`FloatingSaveButton`/`SelectionButton`, `DataTable*`, `UserMenu`, `OrganizationSwitcher`, `FilterBar`, `Combobox`, `Dropzone`, `StepForm`, `ActionForm`, `ErrorState`, `EnvSnippet`, `DateRangePicker`, `DateTimePicker`, `FormField*`, `LanguageSwitch`, `PwaInstallCard` และตัวอย่างใน `design-system` — ทั้งหมด import `Button` จากไฟล์ shadcn ดิบ (ไม่มี tooltip) ตอนนี้ย้ายมาใช้ตัวที่ห่อ tooltip แล้ว 33 ไฟล์ (ปุ่มไอคอนอย่าง `<LinkButton aria-label="…"><KeyIcon/></LinkButton>` จึงได้ tooltip ด้วย)
+- `ActionButton` / `LinkButton`: มี `tooltip` ของตัวเองอยู่แล้ว → ส่ง `tooltip={false}` ให้ `Button` ชั้นใน กันขึ้นสองชั้น (props `tooltip`/`tooltipSide` ของ `ActionButton` ยังเป็นแบบเดิมทุกประการ)
+- `DataTableRowActions`: ปุ่ม "…" ใช้ `aria-label` จาก `UiText.actions` แทน `sr-only` อังกฤษ "Open menu"
+- **กฎใหม่กันพลาดซ้ำ**: `pnpm check:button` (อยู่ใน `verify` และ CI) ห้ามไฟล์ในแพ็กเกจ import `Button` จาก `components/ui/button` ยกเว้นไฟล์ shadcn เองกับตัวห่อ
+- **`AppShell` ปุ่มย่อ/ขยายเมนู**: ปุ่มในหัวเรื่อง (`SidebarTrigger`) ได้ tooltip เหมือนปุ่มไอคอนอื่น และแถบลาก (`SidebarRail`) เลิกใช้ `title` ของ shadcn ที่ทำ tooltip ของเบราว์เซอร์ซ้อนขึ้นมา — ทั้งคู่ใช้ป้ายภาษาไทยจาก `UiText.toggleSidebar` (คีย์ใหม่, ค่าเริ่มต้น "ย่อ/ขยายเมนู" / EN "Toggle sidebar") แทน "Toggle Sidebar" ที่ฝังอยู่ในไฟล์ shadcn (รายงานจาก Pi Files หลัง bump ^0.27.0 — แก้ที่ `app-shell.tsx` ไม่แตะ `components/ui/sidebar.tsx`)
+
 ## [0.27.0] — 2026-10-05
 
 ### Added

package/README.md

@@ -178,7 +178,8 @@ export default async function Layout({ children }) {
 - ไม่มี `aria-label` แต่ใช้รูปแบบ shadcn `<span className="sr-only">ข้อความ</span>` ข้างไอคอน ก็ใช้ข้อความนั้นเป็น tooltip ให้เหมือนกัน
 - ปุ่มที่ `disabled` ไม่ขึ้น tooltip (ปุ่มที่ปิดอยู่ไม่รับ pointer ตามสไตล์ของ shadcn) — ถ้าต้องอธิบายว่าทำไมกดไม่ได้ ให้ห่อ `SimpleTooltip` ที่ `<span>` ครอบปุ่มแทน
 - มี `title="…"` อยู่เดิมให้เอาออก ไม่งั้นจะได้ tooltip ซ้อนกับของเบราว์เซอร์
-- `<button>` ดิบ (ไม่ผ่าน `Button`) ไม่ได้ของนี้ — อีกเหตุผลที่ห้ามเขียนปุ่มเอง
+- `<button>` ดิบ (ไม่ผ่าน `Button`) ไม่ได้ของนี้ — อีกเหตุผลที่ห้ามเขียนปุ่มเอง · และต้อง import `Button` **จาก `@suphark/ui`** เท่านั้น: `@suphark/ui/components/ui/button` คือไฟล์ shadcn ดิบที่ไม่มี tooltip
+- ตรวจว่าปุ่มมี tooltip ไหม **อย่าดูจาก `data-slot`** — ปุ่มที่เป็น `render=`/`trigger` ของ Dialog/Popover/DropdownMenu จะได้ `data-slot` ของ trigger ชั้นนอก (`dialog-trigger` ฯลฯ) ทั้งที่มี tooltip อยู่ ให้เอาเมาส์ไปวางจริง หรือเช็ก `[data-slot=tooltip-content]` หลัง hover
 - ปุ่มไอคอนของแพ็กเกจเอง (`RowActions`, `ActionMenu`, `SimpleDialog` ปุ่มปิด, `DataTable` แบ่งหน้า, `ThemeToggle`, `Notice`, `UploadList`, `TimePicker`, `MonthStepper`, `SecretReveal`, `CommandPalette` …) ได้ tooltip ไปพร้อมกันตั้งแต่ 0.27.0
 
 ### ยืนยันก่อนทำ — ห้ามใช้ `window.confirm`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@suphark/ui",
-  "version": "0.27.0",
+  "version": "0.27.1",
   "private": false,
   "type": "module",
   "description": "Design system กลางของ Suphark apps: shadcn/ui (base-nova, Base UI, Tailwind v4) + shared components + token/ฟอนต์ Noto Sans Thai Looped — ส่งเป็น source ให้แอป Next transpile เอง",

package/src/components/app-shell/app-shell.tsx

@@ -1,6 +1,8 @@
 "use client";
 
+import { SimpleTooltip } from "@suphark/ui/components/shared/simple-tooltip";
 import { SkipLink } from "@suphark/ui/components/shared/skip-link";
+import { useUiText } from "@suphark/ui/components/shared/ui-text";
 import {
   InputGroup,
   InputGroupAddon,
@@ -156,6 +158,8 @@ function SidebarShell({
   mobileTabs,
   children,
 }: AppShellProps) {
+  const text = useUiText();
+  const toggleSidebarLabel = text.toggleSidebar ?? "ย่อ/ขยายเมนู";
   const style = brandColor
     ? ({
         "--brand": brandColor,
@@ -203,7 +207,9 @@ function SidebarShell({
               )}
             >
               <div className="flex h-12 min-w-0 flex-1 items-center gap-2 md:h-full">
-                <SidebarTrigger className="-ml-1" />
+                <SimpleTooltip content={toggleSidebarLabel}>
+                  <SidebarTrigger className="-ml-1" aria-label={toggleSidebarLabel} />
+                </SimpleTooltip>
                 {breadcrumbs && (
                   <>
                     <Separator orientation="vertical" className="mr-2 hidden h-4 md:block" />
@@ -379,6 +385,8 @@ function ShellSidebar({
   | "collapsible"
 >) {
   const { state, isMobile } = useSidebar();
+  const text = useUiText();
+  const railLabel = text.toggleSidebar ?? "ย่อ/ขยายเมนู";
   const [query, setQuery] = useState("");
   const collapsed = state === "collapsed" && !isMobile;
   useEffect(() => {
@@ -436,7 +444,8 @@ function ShellSidebar({
         )}
       </SidebarContent>
       {sidebarFooter && <SidebarFooter>{sidebarFooter}</SidebarFooter>}
-      {collapsible !== "none" && <SidebarRail />}
+      {/* title ของ shadcn เป็นอังกฤษและทำ tooltip ของเบราว์เซอร์ซ้อนกับของเรา → ปิดด้วย title={undefined} */}
+      {collapsible !== "none" && <SidebarRail aria-label={railLabel} title={undefined} />}
     </Sidebar>
   );
 }

package/src/components/app-shell/organization-switcher.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 { useUiText } from "@suphark/ui/components/shared/ui-text";
-import { Button } from "@suphark/ui/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,

package/src/components/app-shell/user-menu.tsx

@@ -1,9 +1,9 @@
 "use client";
 
+import { Button } from "@suphark/ui/components/shared/button/button";
 import { Initials } from "@suphark/ui/components/shared/initials";
 import { SwitcherChevron } from "@suphark/ui/components/shared/switcher-chevron";
 import { useUiText } from "@suphark/ui/components/shared/ui-text";
-import { Button } from "@suphark/ui/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,

package/src/components/data-table/data-table-column-header.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 {
   DropdownMenu,
   DropdownMenuContent,

package/src/components/data-table/data-table-faceted-filter.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 {
   Command,
   CommandEmpty,

package/src/components/data-table/data-table-row-actions.tsx

@@ -1,6 +1,8 @@
 "use client";
 
+import { Button } from "@suphark/ui/components/shared/button/button";
 import { DeleteButton } from "@suphark/ui/components/shared/button/delete-button";
+import { useUiText } from "@suphark/ui/components/shared/ui-text";
 import {
   AlertDialog,
   AlertDialogCancel,
@@ -10,7 +12,6 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
 } from "@suphark/ui/components/ui/alert-dialog";
-import { Button } from "@suphark/ui/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -74,6 +75,7 @@ export function DataTableRowActions<TData>({
   nameKey = "name" as keyof TData,
   idKey = "id" as keyof TData,
 }: DataTableRowActionsProps<TData>) {
+  const text = useUiText();
   const item = row.original;
   const itemRecord = item as Record<string, unknown>;
   const itemName = String(
@@ -105,10 +107,15 @@ export function DataTableRowActions<TData>({
     <div className="flex justify-end">
       <DropdownMenu>
         <DropdownMenuTrigger
-          render={<Button variant="ghost" className="flex h-8 w-8 p-0 data-popup-open:bg-muted" />}
+          render={
+            <Button
+              variant="ghost"
+              aria-label={text.actions}
+              className="flex h-8 w-8 p-0 data-popup-open:bg-muted"
+            />
+          }
         >
           <Ellipsis className="h-4 w-4" />
-          <span className="sr-only">Open menu</span>
         </DropdownMenuTrigger>
         <DropdownMenuContent align="end" className="w-[160px]">
           {children}

package/src/components/data-table/data-table-view-option.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 {
   DropdownMenu,
   DropdownMenuCheckboxItem,

package/src/components/design-system/sections/hero-specimen.tsx

@@ -1,8 +1,8 @@
 "use client";
 
+import { Button } from "@suphark/ui/components/shared/button/button";
 import { Initials } from "@suphark/ui/components/shared/initials";
 import { StatusBadge } from "@suphark/ui/components/shared/status-badge";
-import { Button } from "@suphark/ui/components/ui/button";
 import { Checkbox } from "@suphark/ui/components/ui/checkbox";
 import {
   InputGroup,

package/src/components/design-system/sections/showcase-data-display.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { Button } from "@suphark/ui/components/shared/button/button";
 import { FormattedNumber } from "@suphark/ui/components/shared/number/formatted-number";
 import { PrimarySecondaryText } from "@suphark/ui/components/shared/text/primary-secondary-text";
 import {
@@ -13,7 +14,6 @@ import {
   AttachmentTitle,
 } from "@suphark/ui/components/ui/attachment";
 import { Badge } from "@suphark/ui/components/ui/badge";
-import { Button } from "@suphark/ui/components/ui/button";
 import {
   Card,
   CardContent,

package/src/components/design-system/sections/showcase-feedback.tsx

@@ -1,8 +1,8 @@
 "use client";
 
+import { Button } from "@suphark/ui/components/shared/button/button";
 import { Alert, AlertDescription, AlertTitle } from "@suphark/ui/components/ui/alert";
 import { Badge } from "@suphark/ui/components/ui/badge";
-import { Button } from "@suphark/ui/components/ui/button";
 import {
   Card,
   CardContent,

package/src/components/design-system/sections/showcase-forms.tsx

@@ -1,9 +1,9 @@
 "use client";
 
+import { Button } from "@suphark/ui/components/shared/button/button";
 import { Combobox } from "@suphark/ui/components/shared/combobox";
 import { MultiSelectCombobox } from "@suphark/ui/components/shared/multi-select-combobox";
 import { Badge } from "@suphark/ui/components/ui/badge";
-import { Button } from "@suphark/ui/components/ui/button";
 import {
   Card,
   CardContent,

package/src/components/design-system/sections/showcase-guidelines-recipes.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 {
   Card,
   CardContent,

package/src/components/design-system/sections/showcase-overlays-navigation.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { Button } from "@suphark/ui/components/shared/button/button";
 import {
   AlertDialog,
   AlertDialogAction,
@@ -20,7 +21,6 @@ import {
   BreadcrumbPage,
   BreadcrumbSeparator,
 } from "@suphark/ui/components/ui/breadcrumb";
-import { Button } from "@suphark/ui/components/ui/button";
 import {
   Card,
   CardContent,

package/src/components/design-system/sections/showcase-overview.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 {
   Card,
   CardContent,

package/src/components/design-system/sections/showcase-primitives.tsx

@@ -8,6 +8,7 @@ import {
   PrintButton,
   SaveButton,
 } from "@suphark/ui/components/shared/button";
+import { Button } from "@suphark/ui/components/shared/button/button";
 import {
   Accordion,
   AccordionContent,
@@ -16,7 +17,6 @@ import {
 } from "@suphark/ui/components/ui/accordion";
 import { Avatar, AvatarFallback, AvatarImage } from "@suphark/ui/components/ui/avatar";
 import { Badge } from "@suphark/ui/components/ui/badge";
-import { Button } from "@suphark/ui/components/ui/button";
 import { ButtonGroup, ButtonGroupSeparator } from "@suphark/ui/components/ui/button-group";
 import {
   Card,

package/src/components/pwa/pwa-install-card.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, Download, MonitorSmartphone, Share, Smartphone } from "lucide-react";
 import { useEffect, useState } from "react";

package/src/components/shared/action-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 { Card, CardContent } from "@suphark/ui/components/ui/card";
 import { cn } from "@suphark/ui/lib/utils";
 import { type ComponentProps, type ReactNode, startTransition, useActionState } from "react";

package/src/components/shared/button/base/action-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 { Tooltip, TooltipContent, TooltipTrigger } from "@suphark/ui/components/ui/tooltip";
 import {
   type CheckPermissionOptions,
@@ -11,8 +11,11 @@ import { cn } from "@suphark/ui/lib/utils";
 import { Loader2 } from "lucide-react";
 import * as React from "react";
 
-// ดึง Type Props มาจาก Component โดยตรง
-type ButtonProps = React.ComponentProps<typeof Button>;
+// ดึง Type Props มาจาก Component โดยตรง — tooltip ของตัวนี้คุมเอง (ReactNode + side ของ Base UI)
+type ButtonProps = Omit<
+  React.ComponentProps<typeof Button>,
+  "tooltip" | "tooltipSide" | "tooltipDelay"
+>;
 
 type TooltipContentProps = React.ComponentProps<typeof TooltipContent>;
 
@@ -100,6 +103,8 @@ export function ActionButton({
   const buttonContent = (
     <Button
       className={cn(responsive && "max-sm:px-2", className)}
+      // มี tooltip ของตัวเองแล้ว ไม่ให้ Button สร้างซ้อนอีกชั้น (ไม่มี = ปล่อยให้ Button ใช้ aria-label เอง)
+      tooltip={finalTooltip ? false : undefined}
       disabled={isLoading || disabled} // Disable if loading or explicitly disabled
       onClick={onClick}
       variant={variant}

package/src/components/shared/button/base/link-button.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 // [FIX 1.1] นำเข้าเฉพาะ Button
-import { Button } from "@suphark/ui/components/ui/button";
+import { Button } from "@suphark/ui/components/shared/button/button";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@suphark/ui/components/ui/tooltip";
 import {
   type CheckPermissionOptions,
@@ -97,6 +97,8 @@ export function LinkButton({
   const buttonContent = (
     <Button
       className={className}
+      // มี tooltip ของตัวเองแล้ว ไม่ให้ Button สร้างซ้อนอีกชั้น (ไม่มี = ปล่อยให้ Button ใช้ aria-label เอง)
+      tooltip={tooltip ? false : undefined}
       disabled={isPending || disabled} // Disable if pending or explicitly disabled
       onClick={handleClick}
       {...props}

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

@@ -36,6 +36,13 @@ export function ButtonTooltipSuppress({ children }: { children: ReactNode }) {
   return <NoAutoTooltip.Provider value={true}>{children}</NoAutoTooltip.Provider>;
 }
 
+/** `aria-label` ที่เผลอไปอยู่บน element ใน `render=` (เช่น `render={<Link aria-label="…"/>}`) */
+function renderLabel(render: unknown): string | null {
+  if (!isValidElement(render)) return null;
+  const label = (render.props as { "aria-label"?: unknown })["aria-label"];
+  return typeof label === "string" && label.trim() !== "" ? label : null;
+}
+
 /** ข้อความใน `<span className="sr-only">` (รูปแบบของ shadcn ที่ใช้แทน aria-label) */
 function srOnlyText(children: ReactNode): string | null {
   let found: string | null = null;
@@ -89,7 +96,7 @@ export function Button({ tooltip, tooltipSide = "top", tooltipDelay, ...props }:
   const label =
     typeof props["aria-label"] === "string" && props["aria-label"].trim() !== ""
       ? props["aria-label"]
-      : srOnlyText(props.children);
+      : (renderLabel(props.render) ?? srOnlyText(props.children));
   const explicit = tooltip !== undefined && tooltip !== null && tooltip !== "";
   const auto =
     !suppressed &&

package/src/components/shared/button/copy-button.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 { useCopyToClipboard } from "@suphark/ui/hooks/use-copy-to-clipboard";
 import { cn } from "@suphark/ui/lib/utils";
 import { Check, Copy } from "lucide-react";

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/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-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/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";

package/src/components/shared/ui-text.tsx

@@ -43,6 +43,8 @@ export interface UiText {
   switcher?: Partial<{ choose: string; organization: string }>;
   /** UserMenu: aria-label ปุ่มเปิดเมนู (optional — "เมนูผู้ใช้") */
   userMenu?: string;
+  /** AppShell: ปุ่มย่อ/ขยายเมนูข้าง (optional — "ย่อ/ขยายเมนู") */
+  toggleSidebar?: string;
   /** UserMenu: ปุ่มออกจากระบบ (optional — "ออกจากระบบ") */
   signOut?: string;
   /** ThemeMenuItems: หัวกลุ่ม + ตัวเลือก (optional) */
@@ -148,6 +150,7 @@ export const UI_TEXT_TH: UiText = {
   },
   switcher: { choose: "เลือกองค์กร", organization: "องค์กร" },
   userMenu: "เมนูผู้ใช้",
+  toggleSidebar: "ย่อ/ขยายเมนู",
   signOut: "ออกจากระบบ",
   theme: { label: "ธีม", light: "สว่าง", dark: "มืด", system: "ตามระบบ" },
   sectionNav: { tabs: "แท็บย่อย" },
@@ -245,6 +248,7 @@ export const UI_TEXT_EN: UiText = {
   },
   switcher: { choose: "Choose organization", organization: "Organization" },
   userMenu: "User menu",
+  toggleSidebar: "Toggle sidebar",
   signOut: "Sign out",
   theme: { label: "Theme", light: "Light", dark: "Dark", system: "System" },
   sectionNav: { tabs: "Section tabs" },