@suphark/ui 0.6.1 → 0.8.0

package/src/components/shared/icon-picker.tsx

@@ -0,0 +1,192 @@
+"use client";
+
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+} from "@suphark/ui/components/ui/input-group";
+import { cn } from "@suphark/ui/lib/utils";
+import type { LucideIcon } from "lucide-react";
+import { Search, X } from "lucide-react";
+import { type CSSProperties, useDeferredValue, useId, useMemo, useState } from "react";
+import { SelectionButton } from "./selection-button";
+
+export interface IconPickerItem<T extends string = string> {
+  name: T;
+  icon: LucideIcon;
+  labelTh: string;
+  labelEn: string;
+  keywords?: readonly string[];
+}
+
+export interface IconPickerText {
+  searchPlaceholder: string;
+  searchLabel: string;
+  clear: string;
+  preview: string;
+  /** รับชื่อคำค้น */
+  empty: (query: string) => string;
+  showAll: string;
+}
+
+const TEXT: Record<"th" | "en", IconPickerText> = {
+  th: {
+    searchPlaceholder: "ค้นหาไอคอน (เช่น บ้าน, house, รถ)…",
+    searchLabel: "ค้นหาไอคอน",
+    clear: "ล้างการค้นหา",
+    preview: "ตัวอย่างไอคอนและสี",
+    empty: (q) => `ไม่พบไอคอนที่ตรงกับ “${q}”`,
+    showAll: "แสดงไอคอนทั้งหมด",
+  },
+  en: {
+    searchPlaceholder: "Search icons (e.g. house, car, coffee)…",
+    searchLabel: "Search icons",
+    clear: "Clear search",
+    preview: "Icon & color preview",
+    empty: (q) => `No icons found for “${q}”`,
+    showAll: "Show all icons",
+  },
+};
+
+export interface IconPickerProps<T extends string = string> {
+  value: T | null | undefined;
+  onChange: (name: T) => void;
+  /** ชุดไอคอนของแอป (แพ็กเกจไม่ bundle ชุดใด — ไม่ดึง lucide ทั้งก้อน) */
+  icons: ReadonlyArray<IconPickerItem<T>>;
+  /** ภาษาของ label/ข้อความ (ค่าเริ่มต้น th) */
+  language?: "th" | "en";
+  /** ทับข้อความบางส่วน */
+  text?: Partial<IconPickerText>;
+  /** สีของประเภทรายการ (dynamic จากผู้ใช้) — ไอคอนที่เลือกและ preview ใช้ inline style จากสีนี้ */
+  accentColor?: string;
+  /** ความสูงของกริด (ค่าเริ่มต้น h-36) */
+  heightClassName?: string;
+  /** คอลัมน์ของกริด (ค่าเริ่มต้น grid-cols-6 sm:grid-cols-8) */
+  columnsClassName?: string;
+  className?: string;
+}
+
+/**
+ * เลือกไอคอนจากชุดที่แอปส่งมา: ค้นหา (labelTh/labelEn/keywords/name, ผ่าน useDeferredValue) + กริด SelectionButton
+ * + preview ไอคอนที่เลือกพร้อมสี — ยกจาก DueBell ให้ Pi Done (metadata icon) ใช้ร่วม
+ */
+export function IconPicker<T extends string = string>({
+  value,
+  onChange,
+  icons,
+  language = "th",
+  text: textProp,
+  accentColor,
+  heightClassName = "h-36",
+  columnsClassName = "grid-cols-6 sm:grid-cols-8",
+  className,
+}: IconPickerProps<T>) {
+  const text: IconPickerText = { ...TEXT[language], ...textProp };
+  const [query, setQuery] = useState("");
+  const deferred = useDeferredValue(query);
+  const listId = useId();
+  const selected = icons.find((i) => i.name === value);
+  const labelOf = (i: IconPickerItem<T>) => (language === "en" ? i.labelEn : i.labelTh);
+
+  const filtered = useMemo(() => {
+    const q = deferred.trim().toLowerCase();
+    if (!q) return icons;
+    return icons.filter(
+      (i) =>
+        i.name.toLowerCase().includes(q) ||
+        i.labelTh.toLowerCase().includes(q) ||
+        i.labelEn.toLowerCase().includes(q) ||
+        (i.keywords ?? []).some((k) => k.toLowerCase().includes(q)),
+    );
+  }, [icons, deferred]);
+
+  const accentStyle: CSSProperties | undefined = accentColor
+    ? { backgroundColor: `${accentColor}18`, borderColor: `${accentColor}99`, color: accentColor }
+    : undefined;
+
+  return (
+    <div className={cn("flex flex-col gap-2", className)}>
+      {selected && (
+        <div className="flex items-center gap-3 rounded-xl border p-2.5">
+          <span
+            className="grid size-10 shrink-0 place-items-center rounded-xl border bg-primary/10 text-primary"
+            style={accentStyle}
+          >
+            <selected.icon className="size-5" aria-hidden="true" />
+          </span>
+          <div className="min-w-0">
+            <p className="font-semibold text-[0.625rem] text-muted-foreground/70 uppercase tracking-wider">
+              {text.preview}
+            </p>
+            <p className="truncate font-bold text-foreground text-xs">{labelOf(selected)}</p>
+          </div>
+        </div>
+      )}
+
+      <InputGroup className="h-9">
+        <InputGroupAddon>
+          <Search aria-hidden="true" />
+        </InputGroupAddon>
+        <InputGroupInput
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+          placeholder={text.searchPlaceholder}
+          aria-label={text.searchLabel}
+          aria-controls={listId}
+          autoComplete="off"
+          spellCheck={false}
+        />
+        {query && (
+          <InputGroupAddon align="inline-end">
+            <InputGroupButton onClick={() => setQuery("")} aria-label={text.clear}>
+              <X aria-hidden="true" />
+            </InputGroupButton>
+          </InputGroupAddon>
+        )}
+      </InputGroup>
+
+      <div
+        id={listId}
+        role="group"
+        aria-label={text.searchLabel}
+        className={cn(
+          "grid content-start gap-2 overflow-y-auto rounded-xl border bg-muted/40 p-2",
+          heightClassName,
+          columnsClassName,
+        )}
+      >
+        {filtered.length > 0 ? (
+          filtered.map((item) => {
+            const isSelected = value === item.name;
+            const title = `${labelOf(item)} (${item.name})`;
+            return (
+              <SelectionButton
+                key={item.name}
+                selected={isSelected}
+                onClick={() => onChange(item.name)}
+                className="aspect-square h-auto w-full p-0"
+                aria-label={title}
+                title={title}
+                style={isSelected ? accentStyle : undefined}
+              >
+                <item.icon className="size-4" aria-hidden="true" />
+              </SelectionButton>
+            );
+          })
+        ) : (
+          <div className="col-span-full flex min-h-24 flex-col items-center justify-center gap-1.5 py-4 text-center text-muted-foreground">
+            <p className="text-xs">{text.empty(deferred.trim())}</p>
+            <button
+              type="button"
+              onClick={() => setQuery("")}
+              className="text-primary text-xs underline-offset-4 hover:underline"
+            >
+              {text.showAll}
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,83 @@
+"use client";
+
+import { Progress as ProgressPrimitive } from "@base-ui/react/progress";
+import {
+  ProgressIndicator,
+  ProgressLabel,
+  ProgressTrack,
+  ProgressValue,
+} from "@suphark/ui/components/ui/progress";
+import { cn } from "@suphark/ui/lib/utils";
+import type { CSSProperties, ReactNode } from "react";
+
+export type ProgressTone = "default" | "success" | "warning" | "destructive";
+
+const TONE: Record<ProgressTone, string> = {
+  default: "bg-primary",
+  success: "bg-success",
+  warning: "bg-warning",
+  destructive: "bg-destructive",
+};
+
+/**
+ * แถบความคืบหน้าที่ตั้งสี/ความสูง/ป้ายได้จาก props — ใช้แทนการประกอบ `Progress` ของ shadcn เอง
+ * (`Progress` ต่อท้าย Track+Indicator ให้เสมอ ส่ง children เข้าไปจะได้ 2 แถบ) — ยกจาก DueBell
+ */
+export function ProgressBar({
+  value,
+  max = 100,
+  label,
+  showValue = false,
+  format,
+  tone = "default",
+  size = "sm",
+  trackClassName,
+  indicatorClassName,
+  indicatorStyle,
+  className,
+  ...props
+}: Omit<ProgressPrimitive.Root.Props, "value" | "max" | "children" | "format"> & {
+  value: number | null;
+  max?: number;
+  label?: ReactNode;
+  /** แสดงตัวเลข (ค่าเริ่มต้น "N%") */
+  showValue?: boolean;
+  /** ปรับข้อความตัวเลข เช่น (v) => `${v} / ${max}` */
+  format?: (value: number | null, max: number) => ReactNode;
+  tone?: ProgressTone;
+  /** sm = h-1 (ค่าเริ่มต้น), md = h-2, lg = h-3 */
+  size?: "sm" | "md" | "lg";
+  trackClassName?: string;
+  /** ใส่ class สีเอง (เช่นสี dynamic ของผู้ใช้ผ่าน indicatorStyle) */
+  indicatorClassName?: string;
+  indicatorStyle?: CSSProperties;
+}) {
+  return (
+    <ProgressPrimitive.Root
+      value={value}
+      max={max}
+      data-slot="progress"
+      className={cn("flex flex-wrap gap-2", className)}
+      {...props}
+    >
+      {(label || showValue) && (
+        <div className="flex w-full items-center gap-2">
+          {label && <ProgressLabel>{label}</ProgressLabel>}
+          {showValue &&
+            (format ? (
+              <span className="ml-auto text-muted-foreground text-sm tabular-nums">
+                {format(value, max)}
+              </span>
+            ) : (
+              <ProgressValue />
+            ))}
+        </div>
+      )}
+      <ProgressTrack
+        className={cn(size === "md" ? "h-2" : size === "lg" ? "h-3" : "h-1", trackClassName)}
+      >
+        <ProgressIndicator className={cn(TONE[tone], indicatorClassName)} style={indicatorStyle} />
+      </ProgressTrack>
+    </ProgressPrimitive.Root>
+  );
+}

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

@@ -0,0 +1,29 @@
+"use client";
+
+import { Button } from "@suphark/ui/components/ui/button";
+import { cn } from "@suphark/ui/lib/utils";
+import type { ComponentProps } from "react";
+
+/**
+ * ปุ่มตัวเลือกแบบกดเลือก/ไม่เลือก (toggle) — `aria-pressed` + สีเน้นเมื่อเลือก
+ * ใช้เป็นช่องในตาราง IconPicker, ตัวเลือกสี/ประเภท, chip filter (ยกจาก DueBell)
+ */
+export function SelectionButton({
+  selected,
+  className,
+  type = "button",
+  ...props
+}: Omit<ComponentProps<typeof Button>, "aria-pressed" | "variant"> & { selected: boolean }) {
+  return (
+    <Button
+      {...props}
+      type={type}
+      variant="outline"
+      aria-pressed={selected}
+      className={cn(
+        "transition-colors aria-pressed:border-primary aria-pressed:bg-primary/10 aria-pressed:text-primary",
+        className,
+      )}
+    />
+  );
+}

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>