@suphark/ui 0.6.1 → 0.7.0

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

@@ -4,7 +4,13 @@ import { Button } from "@suphark/ui/components/ui/button";
 import { Card, CardContent } from "@suphark/ui/components/ui/card";
 import { cn } from "@suphark/ui/lib/utils";
 import { type ReactNode, startTransition, useActionState } from "react";
-import { type FormAction, FormMessage, type FormState } from "./form-message";
+import {
+  type FormAction,
+  FormMessage,
+  type FormRenderContext,
+  type FormState,
+  formRenderContext,
+} from "./form-message";
 import { useUiText } from "./ui-text";
 
 /**
@@ -16,6 +22,8 @@ import { useUiText } from "./ui-text";
  *   <ActionForm action={updateName} title="ชื่อองค์กร" submitLabel="บันทึก">
  *     <LabeledField label="ชื่อ"><Input name="name" defaultValue={org.name} /></LabeledField>
  *   </ActionForm>
+ *   // error รายช่อง: action คืน { ok: false, error: "…", errors: { email: "รูปแบบไม่ถูกต้อง" } }
+ *   <ActionForm action={save}>{({ fieldError }) => <LabeledField label="อีเมล" error={fieldError("email")}>…</LabeledField>}</ActionForm>
  */
 export function ActionForm({
   action,
@@ -29,7 +37,8 @@ export function ActionForm({
   action: FormAction;
   title?: ReactNode;
   submitLabel?: ReactNode;
-  children: ReactNode;
+  /** เนื้อฟอร์ม — เป็นฟังก์ชันได้เพื่อรับ `{ state, pending, errors, fieldError }` (error รายช่องจาก `FormState.errors`) */
+  children: ReactNode | ((ctx: FormRenderContext) => ReactNode);
   /** ฟอร์มเล็กในแถวตาราง — ไม่มีกรอบ Card, ปุ่ม size sm, จัดแนวนอน wrap */
   compact?: boolean;
   className?: string;
@@ -56,7 +65,7 @@ export function ActionForm({
       )}
     >
       {title && !compact && <h2 className="font-semibold text-sm">{title}</h2>}
-      {children}
+      {typeof children === "function" ? children(formRenderContext(state, pending)) : children}
       <FormMessage state={state} className={compact ? "basis-full" : undefined} />
       <Button
         type="submit"

package/src/components/shared/calendar-month-grid.tsx

@@ -0,0 +1,182 @@
+"use client";
+
+import { useMounted } from "@suphark/ui/hooks/use-mounted";
+import { cn } from "@suphark/ui/lib/utils";
+import { Check } from "lucide-react";
+import { type ReactNode, useMemo } from "react";
+
+/** บริบทของช่องวันที่ให้ `renderDay`/`dayLabel` */
+export interface CalendarDayContext<T> {
+  day: number;
+  date: Date;
+  items: T[];
+  isToday: boolean;
+  isSelected: boolean;
+  isWeekend: boolean;
+}
+
+export interface CalendarDayState {
+  /** ทุกรายการของวันนั้นเสร็จแล้ว → `data-complete` + ✓ (เมื่อไม่มี renderDay) */
+  complete?: boolean;
+  hasItems?: boolean;
+}
+
+export interface CalendarMonthGridProps<T> {
+  /** เดือนที่แสดง `"YYYY-MM"` */
+  month: string;
+  /** วันที่ที่เลือก (1–31) */
+  selectedDay?: number | null;
+  onSelectDay?: (day: number, date: Date) => void;
+  /** รายการต่อวัน (key = วันที่ 1–31) */
+  itemsByDay?: Record<number, T[]>;
+  /** เนื้อหาใต้เลขวัน (จุดสถานะ ฯลฯ) — ไม่ส่ง หรือคืน null/undefined = ✓ ของแพ็กเกจเมื่อ complete */
+  renderDay?: (ctx: CalendarDayContext<T>) => ReactNode;
+  /** สถานะของช่องจากรายการ → data-attribute ให้ CSS ของแอปแต่งได้ */
+  dayState?: (items: T[], ctx: Omit<CalendarDayContext<T>, "items">) => CalendarDayState;
+  /** วันเริ่มสัปดาห์: 0 = อาทิตย์ (ค่าเริ่มต้น, ไทย), 1 = จันทร์ */
+  weekStartsOn?: 0 | 1;
+  /** ชื่อวัน 7 ตัวเริ่มที่อาทิตย์เสมอ (ค่าเริ่มต้นไทย) */
+  weekdayLabels?: readonly string[];
+  /** "วันนี้" — ไม่ส่ง = อ่านจาก browser หลัง mount (server ไม่รู้โซนเวลาผู้ใช้) */
+  today?: Date;
+  /** aria-label ของปุ่มวัน (ค่าเริ่มต้น "วันที่ N มี M รายการ") */
+  dayLabel?: (ctx: CalendarDayContext<T>) => string;
+  /** คำอธิบายสัญลักษณ์ใต้ตาราง */
+  legend?: ReactNode;
+  className?: string;
+  /** class เพิ่มของปุ่มวัน */
+  dayClassName?: string | ((ctx: CalendarDayContext<T>) => string | undefined);
+}
+
+export const WEEKDAYS_TH = ["อา", "จ", "อ", "พ", "พฤ", "ศ", "ส"] as const;
+export const WEEKDAYS_EN = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"] as const;
+
+function parseMonth(month: string): { year: number; monthIndex: number } {
+  const [y, m] = month.split("-");
+  const year = Number(y);
+  const monthIndex = Number(m) - 1;
+  if (!Number.isFinite(year) || !Number.isFinite(monthIndex) || monthIndex < 0 || monthIndex > 11) {
+    throw new Error(`CalendarMonthGrid: month ต้องเป็น "YYYY-MM" ได้ "${month}"`);
+  }
+  return { year, monthIndex };
+}
+
+/**
+ * ตารางเดือน (ปฏิทินเลือกวัน) ที่แอปคุมเนื้อหาต่อวันเอง — ยกจาก DueBell/Pi Done ให้ใช้ร่วม
+ * ปุ่มวันมี `aria-pressed` + data-attribute แบบ boolean (มี/ไม่มี ไม่มีค่า "true"): `data-selected`, `data-today`,
+ * `data-has-items`, `data-complete`, `data-weekend` → CSS ของแอปใช้ `[data-selected]` / Tailwind `data-selected:`
+ * SSR ได้: "วันนี้" อ่านจาก browser หลัง mount (หรือส่ง `today`)
+ */
+export function CalendarMonthGrid<T = unknown>({
+  month,
+  selectedDay = null,
+  onSelectDay,
+  itemsByDay = {},
+  renderDay,
+  dayState,
+  weekStartsOn = 0,
+  weekdayLabels = WEEKDAYS_TH,
+  today: todayProp,
+  dayLabel,
+  legend,
+  className,
+  dayClassName,
+}: CalendarMonthGridProps<T>) {
+  const mounted = useMounted();
+  const { year, monthIndex } = parseMonth(month);
+  // today: prop > browser หลัง mount > ไม่มี (server) — ไม่ใช้ new Date() ตอน render บน server
+  const today = todayProp ?? (mounted ? new Date() : null);
+  const isThisMonth = !!today && today.getFullYear() === year && today.getMonth() === monthIndex;
+
+  const { headers, blanks, days } = useMemo(() => {
+    const firstWeekday = new Date(year, monthIndex, 1).getDay(); // 0 = อาทิตย์
+    const daysInMonth = new Date(year, monthIndex + 1, 0).getDate();
+    const offset = (firstWeekday - weekStartsOn + 7) % 7;
+    const headers = Array.from({ length: 7 }, (_, i) => {
+      const weekday = (i + weekStartsOn) % 7;
+      return { weekday, label: weekdayLabels[weekday] ?? "" };
+    });
+    return {
+      headers,
+      blanks: Array.from({ length: offset }, (_, i) => i),
+      days: Array.from({ length: daysInMonth }, (_, i) => i + 1),
+    };
+  }, [year, monthIndex, weekStartsOn, weekdayLabels]);
+
+  return (
+    <div className={cn("rounded-xl border bg-card p-3 sm:p-4", className)}>
+      <div className="mb-2 grid grid-cols-7 gap-1 text-center">
+        {headers.map((h) => (
+          <span
+            key={h.weekday}
+            className={cn(
+              "font-semibold text-xs",
+              h.weekday === 0
+                ? "text-destructive"
+                : h.weekday === 6
+                  ? "text-primary"
+                  : "text-muted-foreground",
+            )}
+          >
+            {h.label}
+          </span>
+        ))}
+      </div>
+      <div className="grid grid-cols-7 gap-1.5" role="grid" aria-label={month}>
+        {blanks.map((b) => (
+          <div key={`blank-${b}`} className="aspect-square" aria-hidden="true" />
+        ))}
+        {days.map((day) => {
+          const date = new Date(year, monthIndex, day);
+          const items = itemsByDay[day] ?? [];
+          const weekday = date.getDay();
+          const base = {
+            day,
+            date,
+            isToday: isThisMonth && today?.getDate() === day,
+            isSelected: selectedDay === day,
+            isWeekend: weekday === 0 || weekday === 6,
+          };
+          const ctx: CalendarDayContext<T> = { ...base, items };
+          const state = dayState?.(items, base) ?? {};
+          const hasItems = state.hasItems ?? items.length > 0;
+          const complete = state.complete ?? false;
+          const extra = typeof dayClassName === "function" ? dayClassName(ctx) : dayClassName;
+          return (
+            <button
+              key={day}
+              type="button"
+              onClick={() => onSelectDay?.(day, date)}
+              aria-pressed={ctx.isSelected}
+              aria-label={dayLabel ? dayLabel(ctx) : `วันที่ ${day} มี ${items.length} รายการ`}
+              data-selected={ctx.isSelected || undefined}
+              data-today={ctx.isToday || undefined}
+              data-has-items={hasItems || undefined}
+              data-complete={complete || undefined}
+              data-weekend={ctx.isWeekend || undefined}
+              className={cn(
+                "relative flex aspect-square select-none flex-col items-center justify-between rounded-xl border p-1.5 font-semibold text-xs outline-none transition-[border-color,box-shadow,background-color]",
+                "hover:border-primary/50 focus-visible:ring-2 focus-visible:ring-ring/50",
+                "data-today:border-primary data-today:text-primary",
+                "data-selected:border-primary data-selected:bg-primary/10 data-selected:shadow-[0_0_0_1px_var(--primary)]",
+                "data-complete:border-success/40 data-complete:bg-success/10 data-complete:text-success",
+                extra,
+              )}
+            >
+              <span>{day}</span>
+              <span className="flex h-2 items-center justify-center gap-1">
+                {renderDay?.(ctx) ??
+                  (complete && (
+                    <span className="flex size-3.5 items-center justify-center rounded-full bg-success text-success-foreground">
+                      <Check className="size-2.5" strokeWidth={3} aria-hidden="true" />
+                    </span>
+                  ))}
+              </span>
+            </button>
+          );
+        })}
+      </div>
+      {legend && <div className="mt-3 text-muted-foreground text-xs">{legend}</div>}
+    </div>
+  );
+}

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

@@ -19,6 +19,7 @@ export function LabeledField({
   error,
   children,
   className,
+  htmlFor,
 }: {
   label: ReactNode;
   /** ข้อความช่วยใต้ช่อง — ซ่อนเมื่อมี error */
@@ -26,7 +27,27 @@ export function LabeledField({
   error?: ReactNode;
   children: ReactNode;
   className?: string;
+  /**
+   * id ของ control — ส่งมาแล้ว label จะไม่ครอบ control (ใช้ `htmlFor` แทน) เพื่อให้ accessible name ชัดใน tooling
+   * ที่ไม่คำนวณ label แบบ nested; ไม่ส่ง = label ครอบ control (ถูกต้องตาม HTML คลิก label แล้ว focus ได้)
+   */
+  htmlFor?: string;
 }) {
+  if (htmlFor) {
+    return (
+      <Field className={cn("gap-1.5", className)} data-invalid={error ? true : undefined}>
+        <FieldLabel htmlFor={htmlFor} className="font-medium text-sm">
+          {label}
+        </FieldLabel>
+        {children}
+        {error ? (
+          <FieldError className="text-xs">{error}</FieldError>
+        ) : (
+          hint && <FieldDescription className="text-xs">{hint}</FieldDescription>
+        )}
+      </Field>
+    );
+  }
   return (
     <Field className={cn("gap-1.5", className)} data-invalid={error ? true : undefined}>
       <FieldLabel className="w-full flex-col items-stretch gap-1.5 font-normal [&_[data-slot=native-select-wrapper]]:w-full">

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

@@ -20,7 +20,13 @@ import {
   useEffect,
   useState,
 } from "react";
-import { type FormAction, FormMessage, type FormState } from "./form-message";
+import {
+  type FormAction,
+  FormMessage,
+  type FormRenderContext,
+  type FormState,
+  formRenderContext,
+} from "./form-message";
 import { useUiText } from "./ui-text";
 
 /**
@@ -45,7 +51,8 @@ export function FormDialog({
   description?: ReactNode;
   action: FormAction;
   submitLabel?: string;
-  children: ReactNode;
+  /** เนื้อฟอร์ม — เป็นฟังก์ชันได้เพื่อรับ `{ state, pending, errors, fieldError }` */
+  children: ReactNode | ((ctx: FormRenderContext) => ReactNode);
   /** ควบคุมจากภายนอก (เช่นเปิดจาก RowActions) */
   open?: boolean;
   onOpenChange?: (open: boolean) => void;
@@ -95,7 +102,9 @@ export function FormDialog({
             {description && <DialogDescription>{description}</DialogDescription>}
           </DialogHeader>
           <div className="-mx-1 flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto px-1">
-            {children}
+            {typeof children === "function"
+              ? children(formRenderContext(state, pending))
+              : children}
           </div>
           <FormMessage state={state} />
           <DialogFooter>

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

@@ -3,7 +3,31 @@
 import { cn } from "@suphark/ui/lib/utils";
 import { useUiText } from "./ui-text";
 
-export type FormState = { ok: true; message?: string } | { ok: false; error: string } | null;
+export type FormState =
+  | { ok: true; message?: string }
+  | {
+      ok: false;
+      /** ข้อความรวม (แสดงใน FormMessage) */
+      error: string;
+      /** error รายช่อง (key = ชื่อ input) — ส่งให้ LabeledField ผ่าน render-prop ของ ActionForm/FormDialog */
+      errors?: Record<string, string | undefined>;
+    }
+  | null;
+
+/** ค่าที่ ActionForm/FormDialog ส่งให้ children แบบฟังก์ชัน */
+export interface FormRenderContext {
+  state: FormState;
+  pending: boolean;
+  /** error รายช่องจาก state ล่าสุด (ว่างเมื่อสำเร็จ/ยังไม่ส่ง) */
+  errors: Record<string, string | undefined>;
+  /** helper: `error={fieldError("email")}` */
+  fieldError: (name: string) => string | undefined;
+}
+
+export function formRenderContext(state: FormState, pending: boolean): FormRenderContext {
+  const errors = state && !state.ok ? (state.errors ?? {}) : {};
+  return { state, pending, errors, fieldError: (name) => errors[name] };
+}
 
 /** server action สำหรับ FormDialog/ActionForm: (state ก่อนหน้า, FormData) → FormState */
 export type FormAction = (prev: FormState, formData: FormData) => Promise<FormState>;

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,
+      )}
+    />
+  );
+}