@suphark/ui 0.6.1 → 0.7.0

package/src/components/shared/theme/theme-menu-items.tsx

@@ -9,32 +9,49 @@ import {
 import { MonitorIcon, MoonIcon, SunIcon } from "lucide-react";
 import { useTheme } from "next-themes";
 import type { ReactNode } from "react";
+import { useUiText } from "../ui-text";
 import type { Theme } from "./theme-provider";
 
-const OPTIONS: Array<{ value: Theme; label: string; icon: ReactNode }> = [
-  { value: "light", label: "สว่าง", icon: <SunIcon /> },
-  { value: "dark", label: "มืด", icon: <MoonIcon /> },
-  { value: "system", label: "ตามระบบ", icon: <MonitorIcon /> },
-];
+const ICONS: Record<Theme, ReactNode> = {
+  light: <SunIcon />,
+  dark: <MoonIcon />,
+  system: <MonitorIcon />,
+};
+const ORDER: Theme[] = ["light", "dark", "system"];
 
-/** กลุ่มตัวเลือกธีมสำหรับใส่ใน DropdownMenu (เช่นเมนูผู้ใช้) — ยกจาก Pi Auth มาบน next-themes */
+/**
+ * กลุ่มตัวเลือกธีมสำหรับใส่ใน DropdownMenu (เช่นเมนูผู้ใช้) — ยกจาก Pi Auth มาบน next-themes
+ * ข้อความค่าเริ่มต้นจาก `UiText.theme`; `onThemeChange` ให้แอปบันทึกธีมเป็น preference ของบัญชี (ซิงก์ข้ามเครื่อง)
+ */
 export function ThemeMenuItems({
-  label = "ธีม",
+  label,
   labels,
+  onThemeChange,
 }: {
   label?: ReactNode;
-  /** ข้อความแต่ละตัวเลือก (ค่าเริ่มต้นภาษาไทย) */
+  /** ข้อความแต่ละตัวเลือก (ค่าเริ่มต้นจาก UiText.theme / ไทย) */
   labels?: Partial<Record<Theme, ReactNode>>;
+  /** เรียกหลัง setTheme — เช่น server action บันทึก preference */
+  onThemeChange?: (theme: Theme) => void | Promise<void>;
 }) {
   const { theme = "system", setTheme } = useTheme();
+  const text = useUiText().theme;
   return (
     <DropdownMenuGroup>
-      <DropdownMenuLabel className="text-muted-foreground">{label}</DropdownMenuLabel>
-      <DropdownMenuRadioGroup value={theme} onValueChange={(v) => setTheme(v as Theme)}>
-        {OPTIONS.map((o) => (
-          <DropdownMenuRadioItem key={o.value} value={o.value}>
-            {o.icon}
-            {labels?.[o.value] ?? o.label}
+      <DropdownMenuLabel className="text-muted-foreground">
+        {label ?? text?.label ?? "ธีม"}
+      </DropdownMenuLabel>
+      <DropdownMenuRadioGroup
+        value={theme}
+        onValueChange={(v) => {
+          setTheme(v as Theme);
+          void onThemeChange?.(v as Theme);
+        }}
+      >
+        {ORDER.map((value) => (
+          <DropdownMenuRadioItem key={value} value={value}>
+            {ICONS[value]}
+            {labels?.[value] ?? text?.[value] ?? value}
           </DropdownMenuRadioItem>
         ))}
       </DropdownMenuRadioGroup>

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

@@ -30,6 +30,23 @@ export interface UiText {
   chooseTitle?: string;
   /** DialogsProvider: หัวกล่อง checklist (optional — ค่าเริ่มต้น "เลือกรายการ") */
   checklistTitle?: string;
+  /** CommandPalette (optional — ค่าเริ่มต้นไทยในตัว) */
+  palette?: Partial<{
+    placeholder: string;
+    title: string;
+    description: string;
+    empty: string;
+    searching: string;
+    pages: string;
+  }>;
+  /** OrganizationSwitcher (optional) */
+  switcher?: Partial<{ choose: string; organization: string }>;
+  /** UserMenu: aria-label ปุ่มเปิดเมนู (optional — "เมนูผู้ใช้") */
+  userMenu?: string;
+  /** UserMenu: ปุ่มออกจากระบบ (optional — "ออกจากระบบ") */
+  signOut?: string;
+  /** ThemeMenuItems: หัวกลุ่ม + ตัวเลือก (optional) */
+  theme?: Partial<{ label: string; light: string; dark: string; system: string }>;
 }
 
 export const UI_TEXT_TH: UiText = {
@@ -50,6 +67,18 @@ export const UI_TEXT_TH: UiText = {
   promptTitle: "กรอกข้อมูล",
   chooseTitle: "เลือกการทำรายการ",
   checklistTitle: "เลือกรายการ",
+  palette: {
+    placeholder: "ค้นหาหรือสั่งงาน…",
+    title: "ค้นหา",
+    description: "พิมพ์เพื่อค้นหาหน้าและข้อมูล",
+    empty: "ไม่พบผลลัพธ์",
+    searching: "กำลังค้นหา…",
+    pages: "หน้า",
+  },
+  switcher: { choose: "เลือกองค์กร", organization: "องค์กร" },
+  userMenu: "เมนูผู้ใช้",
+  signOut: "ออกจากระบบ",
+  theme: { label: "ธีม", light: "สว่าง", dark: "มืด", system: "ตามระบบ" },
 };
 
 export const UI_TEXT_EN: UiText = {
@@ -70,6 +99,18 @@ export const UI_TEXT_EN: UiText = {
   promptTitle: "Input required",
   chooseTitle: "Choose an action",
   checklistTitle: "Choose options",
+  palette: {
+    placeholder: "Search or jump to…",
+    title: "Search",
+    description: "Type to search pages and records",
+    empty: "No results",
+    searching: "Searching…",
+    pages: "Pages",
+  },
+  switcher: { choose: "Choose organization", organization: "Organization" },
+  userMenu: "User menu",
+  signOut: "Sign out",
+  theme: { label: "Theme", light: "Light", dark: "Dark", system: "System" },
 };
 
 const UiTextContext = createContext<UiText>(UI_TEXT_TH);

package/src/index.ts

@@ -15,6 +15,14 @@ export type { DateRange } from "react-day-picker";
 export { toast } from "sonner";
 export { ActionForm } from "./components/shared/action-form";
 export * from "./components/shared/button";
+export {
+  type CalendarDayContext,
+  type CalendarDayState,
+  CalendarMonthGrid,
+  type CalendarMonthGridProps,
+  WEEKDAYS_EN,
+  WEEKDAYS_TH,
+} from "./components/shared/calendar-month-grid";
 export { ClientRedirect } from "./components/shared/client-redirect";
 export { Combobox } from "./components/shared/combobox";
 export {
@@ -60,7 +68,18 @@ export {
   type SimpleSelectOptions,
   type SimpleSelectProps,
 } from "./components/shared/form/simple-select";
-export { type FormAction, FormMessage, type FormState } from "./components/shared/form-message";
+export {
+  type FormAction,
+  FormMessage,
+  type FormRenderContext,
+  type FormState,
+} from "./components/shared/form-message";
+export {
+  IconPicker,
+  type IconPickerItem,
+  type IconPickerProps,
+  type IconPickerText,
+} from "./components/shared/icon-picker";
 export { Initials, initialsOf } from "./components/shared/initials";
 export { ErrorState, type RouteError } from "./components/shared/layout/error-state";
 export {
@@ -77,8 +96,10 @@ export { Notice, type NoticeTone } from "./components/shared/notice";
 export { type DecimalLike, FormattedNumber } from "./components/shared/number/formatted-number";
 export { PageHeader } from "./components/shared/page-header";
 export { PageSkeleton } from "./components/shared/page-skeleton";
+export { ProgressBar, type ProgressTone } from "./components/shared/progress-bar";
 export { SecretReveal } from "./components/shared/secret-reveal";
 export { SectionCard } from "./components/shared/section-card";
+export { SelectionButton } from "./components/shared/selection-button";
 export { Stat } from "./components/shared/stat";
 export { StatusBadge, statusTone, type Tone } from "./components/shared/status-badge";
 export { SwitcherChevron } from "./components/shared/switcher-chevron";