@suphark/ui 0.4.0 → 0.4.1

package/CHANGELOG.md

@@ -2,6 +2,21 @@
 
 รูปแบบตาม [Keep a Changelog](https://keepachangelog.com/) · semver: patch = หน้าตา/บั๊ก, minor = component/prop ใหม่, major = เปลี่ยน/ลบ props
 
+## [0.4.1] — 2026-09-19
+
+### Added
+
+- **`SwitcherChevron`** (barrel) — ลูกศร ⇅ มาตรฐานท้าย trigger แบบ switcher/select: `ChevronsUpDown` ขนาด `size-3` (12px) `shrink-0 text-muted-foreground opacity-70` aria-hidden (เล็กบางแบบ Clerk) รับ `className` ทับได้ — ใช้ตัวเดียวทั้งแพ็กเกจ/แอป (`OrganizationSwitcher` ใน @suphark/auth-ui จะย้ายมาใช้ด้วย)
+
+### Fixed
+
+- `HeaderCrumb`: ลูกศรใหญ่ 24px ในแอปปลายทาง (Pi Auth) — เดิมใช้ `size-3.5!` ซึ่ง Tailwind ของแอปที่ scan ผ่าน `@source` ไม่ generate class แบบ `!` → svg ไม่มีขนาดจึงตกไป 24px ของ lucide; เปลี่ยนเป็น `SwitcherChevron` (ไม่ใช้ `!`)
+
+### Changed
+
+- ลูกศรของ `UserMenu`, `Combobox`, `MultiSelectCombobox`, `FormFieldCombobox`, `FormFieldSelect` เปลี่ยนมาใช้ `SwitcherChevron` (เดิม h-4 w-4 opacity-50 ปนกันหลายขนาด) — ทุกจุดได้ 12px จางเท่ากัน; ไอคอน sort ใน `DataTableColumnHeader` ไม่ใช่ switcher คงเดิม; `components/ui/searchable-select.tsx` เป็นไฟล์ shadcn ไม่แตะ
+- นโยบาย: หลีกเลี่ยง `!` บน utility ในแพ็กเกจถ้าไม่จำเป็น (เหลือเฉพาะ `group-data-[collapsible=icon]:p-0!` ใน `AppBrand` ซึ่ง `sidebar.tsx` ของ shadcn generate class เดียวกันอยู่แล้ว)
+
 ## [0.4.0] — 2026-09-19
 
 ### Added

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@suphark/ui",
-  "version": "0.4.0",
+  "version": "0.4.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/header-crumb.tsx

@@ -1,7 +1,7 @@
 "use client";
 
+import { SwitcherChevron } from "@suphark/ui/components/shared/switcher-chevron";
 import { cn } from "@suphark/ui/lib/utils";
-import { ChevronsUpDown } from "lucide-react";
 import { type ComponentProps, Fragment, type ReactNode } from "react";
 
 /**
@@ -50,7 +50,7 @@ export function HeaderCrumb({
         </span>
       )}
       {children}
-      {chevron && <ChevronsUpDown className="size-3.5! text-muted-foreground" aria-hidden="true" />}
+      {chevron && <SwitcherChevron />}
     </button>
   );
 }

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

@@ -1,6 +1,7 @@
 "use client";
 
 import { Initials } from "@suphark/ui/components/shared/initials";
+import { SwitcherChevron } from "@suphark/ui/components/shared/switcher-chevron";
 import { Button } from "@suphark/ui/components/ui/button";
 import {
   DropdownMenu,
@@ -12,7 +13,7 @@ import {
   DropdownMenuTrigger,
 } from "@suphark/ui/components/ui/dropdown-menu";
 import { cn } from "@suphark/ui/lib/utils";
-import { ChevronsUpDown, LogOut } from "lucide-react";
+import { LogOut } from "lucide-react";
 import { type ReactNode, useTransition } from "react";
 
 export interface UserMenuUser {
@@ -82,10 +83,8 @@ export function UserMenu({
             <span className="truncate text-muted-foreground text-xs">{description}</span>
           )}
         </span>
-        <ChevronsUpDown
-          aria-hidden="true"
+        <SwitcherChevron
           className={cn(
-            "text-muted-foreground",
             variant === "sidebar" ? "group-data-[collapsible=icon]:hidden" : "hidden xl:block",
           )}
         />

package/src/components/shared/combobox.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { SwitcherChevron } from "@suphark/ui/components/shared/switcher-chevron";
 import { Button } from "@suphark/ui/components/ui/button";
 import {
   Command,
@@ -11,7 +12,7 @@ import {
 } from "@suphark/ui/components/ui/command";
 import { Popover, PopoverContent, PopoverTrigger } from "@suphark/ui/components/ui/popover";
 import { cn } from "@suphark/ui/lib/utils";
-import { Check, ChevronsUpDown } from "lucide-react";
+import { Check } from "lucide-react";
 import * as React from "react";
 
 interface ComboboxProps {
@@ -75,12 +76,8 @@ export function Combobox({
         >
           {value ? options.find((option) => option.value === value)?.label : placeholder}
         </span>
-        <ChevronsUpDown
-          className={cn(
-            "ml-2 h-4 w-4 shrink-0 opacity-50 print:hidden",
-            wrapText && "self-start",
-            disabled && "hidden",
-          )}
+        <SwitcherChevron
+          className={cn("ml-2 print:hidden", wrapText && "self-start", disabled && "hidden")}
         />
       </PopoverTrigger>
       <PopoverContent className="w-[--anchor-width] p-0">

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

@@ -1,5 +1,6 @@
 "use client";
 
+import { SwitcherChevron } from "@suphark/ui/components/shared/switcher-chevron";
 import { Button } from "@suphark/ui/components/ui/button";
 import {
   Command,
@@ -18,7 +19,7 @@ import {
 } from "@suphark/ui/components/ui/form";
 import { Popover, PopoverContent, PopoverTrigger } from "@suphark/ui/components/ui/popover";
 import { cn } from "@suphark/ui/lib/utils";
-import { Check, ChevronsUpDown } from "lucide-react";
+import { Check } from "lucide-react";
 import * as React from "react";
 import { useEffect, useState, useTransition } from "react";
 import type { FieldValues, Path } from "react-hook-form";
@@ -119,7 +120,7 @@ export function FormFieldCombobox<T extends FieldValues>({
                       ? "Loading..."
                       : placeholder}
                 </span>
-                <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                <SwitcherChevron className="ml-2" />
               </PopoverTrigger>
               <PopoverContent className="w-[--anchor-width] p-0">
                 <Command>

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

@@ -1,6 +1,7 @@
 "use client";
 
 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,
@@ -26,7 +27,7 @@ import {
   SelectValue,
 } from "@suphark/ui/components/ui/select";
 import { cn } from "@suphark/ui/lib/utils";
-import { Check, ChevronsUpDown } from "lucide-react";
+import { Check } from "lucide-react";
 import * as React from "react";
 import type { ControllerRenderProps, FieldValues, Path, PathValue } from "react-hook-form";
 
@@ -126,7 +127,7 @@ function ComboboxContent<T extends FieldValues>({
           disabled={disabled}
         >
           <span className="truncate">{selectedLabel}</span>
-          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+          <SwitcherChevron className="ml-2" />
         </Button>
       </PopoverTrigger>
       <PopoverContent className="w-[--anchor-width] p-0">

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

@@ -1,5 +1,6 @@
 "use client";
 
+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 {
@@ -13,7 +14,7 @@ import {
 } from "@suphark/ui/components/ui/command";
 import { Popover, PopoverContent, PopoverTrigger } from "@suphark/ui/components/ui/popover";
 import { cn } from "@suphark/ui/lib/utils";
-import { Check, ChevronsUpDown, Plus, X } from "lucide-react";
+import { Check, Plus, X } from "lucide-react";
 import * as React from "react";
 
 export interface MultiSelectOption {
@@ -259,9 +260,7 @@ export function MultiSelectCombobox({
               <X className="size-3.5" />
             </span>
           )}
-          <ChevronsUpDown
-            className={cn("size-4 shrink-0 opacity-50 print:hidden", disabled && "hidden")}
-          />
+          <SwitcherChevron className={cn("print:hidden", disabled && "hidden")} />
         </div>
       </PopoverTrigger>
       <PopoverContent className="w-[--anchor-width] min-w-[220px] p-0" align="start">

package/src/components/shared/switcher-chevron.tsx

@@ -0,0 +1,19 @@
+import { cn } from "@suphark/ui/lib/utils";
+import { ChevronsUpDown } from "lucide-react";
+import type { ComponentProps } from "react";
+
+/**
+ * ลูกศร ⇅ มาตรฐานท้าย trigger แบบ switcher/select (HeaderCrumb, UserMenu, Combobox, OrganizationSwitcher …)
+ * เล็กบางแบบ Clerk: 12px จาง — ใช้ตัวเดียวทั้งแพ็กเกจเพื่อให้ขนาดเท่ากันทุกจุด
+ * ไม่ใช้ `!` บน utility (แอปที่ scan ผ่าน @source อาจไม่ generate class นั้น); ปุ่มที่มี
+ * `[&_svg:not([class*='size-'])]:size-4` จะไม่ทับเพราะ class มี `size-3` อยู่แล้ว
+ */
+export function SwitcherChevron({ className, ...props }: ComponentProps<typeof ChevronsUpDown>) {
+  return (
+    <ChevronsUpDown
+      aria-hidden="true"
+      className={cn("size-3 shrink-0 text-muted-foreground opacity-70", className)}
+      {...props}
+    />
+  );
+}

package/src/index.ts

@@ -63,6 +63,7 @@ export { SecretReveal } from "./components/shared/secret-reveal";
 export { SectionCard } from "./components/shared/section-card";
 export { Stat } from "./components/shared/stat";
 export { StatusBadge, statusTone, type Tone } from "./components/shared/status-badge";
+export { SwitcherChevron } from "./components/shared/switcher-chevron";
 export {
   PrimarySecondaryText,
   type PrimarySecondaryTextProps,