@suphark/ui 0.3.2 → 0.3.3

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

@@ -101,11 +101,11 @@ export function ShowcasePrimitives() {
       <div className="flex flex-col gap-1">
         <div className="flex items-center gap-2">
           <Badge variant="outline">Core Primitives</Badge>
-          <span className="text-xs text-muted-foreground">
+          <span className="text-muted-foreground text-sm">
             Buttons, Badges, Cards, Avatars & Structure
           </span>
         </div>
-        <h2 className="text-xl font-bold tracking-tight text-foreground">
+        <h2 className="font-bold text-2xl text-foreground tracking-tight">
           คอมโพเนนต์พื้นฐานและการแสดงผลโครงสร้าง
         </h2>
         <p className="text-sm text-muted-foreground">
@@ -114,14 +114,12 @@ export function ShowcasePrimitives() {
       </div>
 
       {/* Button Matrix */}
-      <Card>
+      <Card id="primitives-button">
         <CardHeader>
           <div className="flex items-center justify-between">
             <div>
-              <CardTitle className="text-base">Button Hierarchy & Variants</CardTitle>
-              <CardDescription className="text-xs">
-                ลำดับความสำคัญของปุ่มและขนาดตามความเหมาะสมของหน้าจอ
-              </CardDescription>
+              <CardTitle className="text-lg">Button Hierarchy & Variants</CardTitle>
+              <CardDescription>ลำดับความสำคัญของปุ่มและขนาดตามความเหมาะสมของหน้าจอ</CardDescription>
             </div>
             <Badge variant="secondary">shadcn/ui Button</Badge>
           </div>
@@ -248,12 +246,12 @@ export function ShowcasePrimitives() {
       </Card>
 
       {/* Shared Button Wrappers */}
-      <Card>
+      <Card id="primitives-shared-buttons">
         <CardHeader>
           <div className="flex items-center justify-between">
             <div>
-              <CardTitle className="text-base">Shared Action Button Wrappers</CardTitle>
-              <CardDescription className="text-xs">
+              <CardTitle className="text-lg">Shared Action Button Wrappers</CardTitle>
+              <CardDescription>
                 คอมโพเนนต์ปุ่มมาตรฐานพร้อมสไตล์และไอคอนจาก <code>src/components/shared/button/*</code>
               </CardDescription>
             </div>
@@ -274,12 +272,10 @@ export function ShowcasePrimitives() {
       </Card>
 
       {/* Badges & Status Indicators */}
-      <Card>
+      <Card id="primitives-badge">
         <CardHeader>
-          <CardTitle className="text-base">Badge & Status Indicators</CardTitle>
-          <CardDescription className="text-xs">
-            ป้ายสถานะสำหรับ workflow การจัดซื้อและกระบวนการอนุมัติ
-          </CardDescription>
+          <CardTitle className="text-lg">Badge & Status Indicators</CardTitle>
+          <CardDescription>ป้ายสถานะสำหรับ workflow การจัดซื้อและกระบวนการอนุมัติ</CardDescription>
         </CardHeader>
         <CardContent className="flex flex-col gap-4">
           <div className="flex flex-wrap items-center gap-2">
@@ -310,7 +306,7 @@ export function ShowcasePrimitives() {
       </Card>
 
       {/* Full Card Composition & Avatar */}
-      <div className="grid gap-6 lg:grid-cols-2">
+      <div id="primitives-card" className="grid gap-6 lg:grid-cols-2">
         {/* Full Card Composition */}
         <Card>
           <CardHeader>
@@ -319,7 +315,7 @@ export function ShowcasePrimitives() {
               <span className="text-xs text-muted-foreground">Updated today</span>
             </div>
             <CardTitle className="text-lg">Package Evaluation Summary</CardTitle>
-            <CardDescription className="text-xs">
+            <CardDescription>
               โครงสร้าง Card แบบเต็มรูปแบบ (CardHeader / Title / Description / Content / Footer)
             </CardDescription>
           </CardHeader>
@@ -398,12 +394,12 @@ export function ShowcasePrimitives() {
       </div>
 
       {/* Accordion & Collapsible */}
-      <div className="grid gap-6 lg:grid-cols-2">
+      <div id="primitives-accordion" className="grid gap-6 lg:grid-cols-2">
         {/* Accordion */}
         <Card>
           <CardHeader className="pb-2">
-            <CardTitle className="text-base">Accordion Primitive</CardTitle>
-            <CardDescription className="text-xs">สำหรับคำถามที่พบบ่อยหรือเงื่อนไขสัญญา</CardDescription>
+            <CardTitle className="text-lg">Accordion Primitive</CardTitle>
+            <CardDescription>สำหรับคำถามที่พบบ่อยหรือเงื่อนไขสัญญา</CardDescription>
           </CardHeader>
           <CardContent>
             <Accordion className="w-full">
@@ -430,8 +426,8 @@ export function ShowcasePrimitives() {
         {/* Collapsible */}
         <Card>
           <CardHeader className="pb-2">
-            <CardTitle className="text-base">Collapsible Primitive</CardTitle>
-            <CardDescription className="text-xs">สำหรับกล่องฟิลเตอร์ขั้นสูงหรือข้อมูลทางเลือก</CardDescription>
+            <CardTitle className="text-lg">Collapsible Primitive</CardTitle>
+            <CardDescription>สำหรับกล่องฟิลเตอร์ขั้นสูงหรือข้อมูลทางเลือก</CardDescription>
           </CardHeader>
           <CardContent>
             <Collapsible

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

@@ -10,6 +10,7 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@suphark/ui/components/ui/dialog";
+import { cn } from "@suphark/ui/lib/utils";
 import { useRouter } from "next/navigation";
 import {
   type ReactElement,
@@ -76,7 +77,10 @@ export function FormDialog({
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       {trigger && <DialogTrigger render={trigger} />}
-      <DialogContent className={contentClassName ?? "sm:max-w-md"}>
+      {/* จำกัดความสูงไว้ในจอ: header/footer ตรึง เฉพาะเนื้อฟอร์มเลื่อน (ฟอร์มยาวไม่ล้นในหน้าต่างเตี้ย) */}
+      <DialogContent
+        className={cn("flex max-h-[calc(100dvh-2rem)] flex-col", contentClassName ?? "sm:max-w-md")}
+      >
         <form
           // ไม่ใช้ `action=` — React 19 รีเซ็ตฟอร์ม uncontrolled หลัง action จบทุกครั้ง (แม้คืน error)
           // ทำให้ค่าที่พิมพ์หาย; เรียก action ใน transition เองแทน ฟอร์มจึงคงค่าไว้ให้แก้ต่อได้
@@ -86,13 +90,15 @@ export function FormDialog({
             setSubmitted((n) => n + 1);
             startTransition(() => formAction(fd));
           }}
-          className="flex flex-col gap-4"
+          className="flex min-h-0 flex-1 flex-col gap-4"
         >
           <DialogHeader>
             <DialogTitle>{title}</DialogTitle>
             {description && <DialogDescription>{description}</DialogDescription>}
           </DialogHeader>
-          <div className="flex flex-col gap-3">{children}</div>
+          <div className="-mx-1 flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto px-1">
+            {children}
+          </div>
           <FormMessage state={state} />
           <DialogFooter>
             <Button type="button" variant="ghost" onClick={() => setOpen(false)}>

package/src/index.ts

@@ -9,6 +9,8 @@
  * `chart` (recharts) ไม่อยู่ใน barrel: import ตรง `@suphark/ui/components/ui/chart` เมื่อแอปติดตั้ง recharts เอง
  */
 
+// ชนิดช่วงวันที่ของ react-day-picker — แอปไม่ต้องติดตั้ง react-day-picker เอง
+export type { DateRange } from "react-day-picker";
 // sonner: `toast()` คู่กับ <Toaster /> — แอปไม่ต้องติดตั้ง sonner เอง
 export { toast } from "sonner";
 export * from "./components/shared/button";

package/src/styles.css

@@ -9,6 +9,10 @@
  *
  * ฟอนต์: Noto Sans Thai Looped (@fontsource) โหลดที่นี่ — แอปที่ต้องการฟอนต์อื่น override --font-sans ใน @theme ของตัวเอง
  * ส่วน print/A4 และสไตล์เฉพาะ feature ของ supplychain ไม่ได้ยกมา (อยู่ที่แอปนั้น)
+ *
+ * Override contract (ดู docs/agent-rules.md):
+ *   แอปแก้ได้: --brand / --brand-foreground (บน wrapper), --font-sans / --font-mono, --radius
+ *   ห้ามแก้: semantic token (--primary --background --muted --destructive …), --sidebar-*, --chart-*, วิธีสลับธีม
  */
 @import "tw-animate-css";
 @import "@fontsource/noto-sans-thai-looped/400.css";