@suphark/ui 0.1.0

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

@@ -0,0 +1,273 @@
+"use client";
+
+import { Alert, AlertDescription, AlertTitle } from "@suphark/ui/components/ui/alert";
+import { Badge } from "@suphark/ui/components/ui/badge";
+import { Button } from "@suphark/ui/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@suphark/ui/components/ui/card";
+import { Field, FieldError, FieldGroup, FieldLabel } from "@suphark/ui/components/ui/field";
+import { Input } from "@suphark/ui/components/ui/input";
+import { Progress } from "@suphark/ui/components/ui/progress";
+import {
+  AlertCircle,
+  Bell,
+  CheckCircle2,
+  Copy,
+  Info,
+  Loader2,
+  Send,
+  Trash2,
+  XCircle,
+} from "lucide-react";
+import * as React from "react";
+import { toast } from "sonner";
+
+export function ShowcaseFeedback() {
+  const [exportProgress, setExportProgress] = React.useState<number | null>(null);
+
+  const triggerExportSimulation = () => {
+    setExportProgress(10);
+    const interval = setInterval(() => {
+      setExportProgress((prev) => {
+        if (prev === null || prev >= 100) {
+          clearInterval(interval);
+          setTimeout(() => {
+            setExportProgress(null);
+            toast.success("ส่งออกเอกสารสำเร็จ (Export Complete)", {
+              description: "ไฟล์ BOQ_Package_2026.xlsx พร้อมดาวน์โหลดแล้ว",
+            });
+          }, 400);
+          return 100;
+        }
+        return prev + 30;
+      });
+    }, 300);
+  };
+
+  return (
+    <div className="flex flex-col gap-8">
+      {/* Section Header */}
+      <div className="flex flex-col gap-1">
+        <div className="flex items-center gap-2">
+          <Badge variant="outline">Feedback & Alerts</Badge>
+          <span className="text-xs text-muted-foreground">
+            Alerts, Sonner Toasts, Field Validation & Progress States
+          </span>
+        </div>
+        <h2 className="text-xl font-bold tracking-tight text-foreground">
+          ระบบการแจ้งเตือนและการตอบสนองต่อผู้ใช้ (Feedback System)
+        </h2>
+        <p className="text-sm text-muted-foreground">
+          การเลือกช่องทางแจ้งเตือนที่เหมาะสมตามระดับความสำคัญ: Inline Alert, Transient Sonner Toast,
+          FieldError, และ Progress
+        </p>
+      </div>
+
+      {/* Feedback Channel Guidance Matrix */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base">Feedback Channel Decision Matrix</CardTitle>
+          <CardDescription className="text-xs">
+            เกณฑ์การเลือกประเภท Feedback ตามบริบทของงานในแอป Suphark
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
+          <div className="flex flex-col gap-1.5 rounded-lg border bg-card p-3">
+            <Badge variant="outline" className="w-fit">
+              1. Alert (Inline)
+            </Badge>
+            <h4 className="text-xs font-semibold pt-1">ข้อความในบริบทของหน้า</h4>
+            <p className="text-xs text-muted-foreground">
+              สำหรับคำเตือน, ข้อกำหนด หรือข้อผิดพลาดระดับทั้งหน้าหรือ Card ที่ต้องให้อ่านก่อนดำเนินการต่อ
+            </p>
+          </div>
+
+          <div className="flex flex-col gap-1.5 rounded-lg border bg-card p-3">
+            <Badge variant="outline" className="w-fit">
+              2. Sonner (Toast)
+            </Badge>
+            <h4 className="text-xs font-semibold pt-1">ผลลัพธ์ Action ชั่วคราว</h4>
+            <p className="text-xs text-muted-foreground">
+              สำหรับแจ้งผลการกระทำสำเร็จสั้น ๆ เช่น "บันทึกแล้ว", "คัดลอกแล้ว", "ส่งอีเมลแล้ว"
+            </p>
+          </div>
+
+          <div className="flex flex-col gap-1.5 rounded-lg border bg-card p-3">
+            <Badge variant="outline" className="w-fit">
+              3. FieldError
+            </Badge>
+            <h4 className="text-xs font-semibold pt-1">ข้อผิดพลาดของช่องกรอก</h4>
+            <p className="text-xs text-muted-foreground">
+              สำหรับ Validation ที่ผูกกับ input แต่ละช่องโดยตรง เพื่อชี้จุดที่ต้องแก้ไขให้ชัดเจน
+            </p>
+          </div>
+
+          <div className="flex flex-col gap-1.5 rounded-lg border bg-card p-3">
+            <Badge variant="outline" className="w-fit">
+              4. Progress / Spinner
+            </Badge>
+            <h4 className="text-xs font-semibold pt-1">กระบวนการที่กำลังทำงาน</h4>
+            <p className="text-xs text-muted-foreground">
+              สำหรับการประมวลผลที่มีระยะเวลา เช่น การนำเข้าไฟล์ขนาดใหญ่ หรือการส่งออกรายงาน
+            </p>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Inline Alerts */}
+      <section className="flex flex-col gap-4">
+        <h3 className="text-base font-semibold">1. Inline Alerts (Alert Primitive)</h3>
+        <div className="grid gap-4 md:grid-cols-2">
+          {/* Default Info Alert */}
+          <Alert>
+            <Info className="size-4" />
+            <AlertTitle>การเปิดซองราคาตามกำหนดเวลา</AlertTitle>
+            <AlertDescription>
+              ระบบจะทำการเปิดซองราคาพร้อมกันอัตโนมัติในวันที่ 25 ส.ค. 2569 เวลา 14:00 น.
+              โดยต้องมีกรรมการเข้าร่วมอย่างน้อย 3 ท่าน
+            </AlertDescription>
+          </Alert>
+
+          {/* Destructive Alert */}
+          <Alert variant="destructive">
+            <AlertCircle className="size-4" />
+            <AlertTitle>เอกสารหลักประกันหมดอายุ</AlertTitle>
+            <AlertDescription>
+              หนังสือค้ำประกันของบริษัท ABC Construction หมดอายุแล้ว กรุณาติดต่อขอเอกสารฉบับใหม่ก่อนดำเนินการทำสัญญา
+            </AlertDescription>
+          </Alert>
+        </div>
+      </section>
+
+      {/* Interactive Sonner Toasts */}
+      <Card>
+        <CardHeader>
+          <div className="flex items-center justify-between">
+            <div>
+              <CardTitle className="text-base flex items-center gap-2">
+                <Bell className="size-4 text-primary" /> 2. Interactive Sonner Toasts
+              </CardTitle>
+              <CardDescription className="text-xs">ทดสอบยิง Toast ในสถานการณ์ต่าง ๆ</CardDescription>
+            </div>
+            <Badge variant="secondary">sonner</Badge>
+          </div>
+        </CardHeader>
+        <CardContent>
+          <div className="flex flex-wrap items-center gap-3">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() =>
+                toast.success("บันทึกการประเมินราคาสำเร็จ", {
+                  description: "ข้อมูลถูกบันทึกและส่งแจ้งเตือนไปยังฝ่ายบัญชีแล้ว",
+                })
+              }
+            >
+              <CheckCircle2 className="size-3.5 text-success" /> Success Toast
+            </Button>
+
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() =>
+                toast.error("ไม่สามารถเชื่อมต่อฐานข้อมูลราคา", {
+                  description: "โปรดตรวจสอบการเชื่อมต่ออินเทอร์เน็ตแล้วลองใหม่อีกครั้ง",
+                })
+              }
+            >
+              <XCircle className="size-3.5 text-destructive" /> Error Toast
+            </Button>
+
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() =>
+                toast.info("คัดลอกเลขที่สัญญาเรียบร้อย", {
+                  description: "CTR-2026-00481 ถูกคัดลอกไปยังคลิปบอร์ด",
+                })
+              }
+            >
+              <Copy className="size-3.5 text-primary" /> Info / Copy Toast
+            </Button>
+
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() =>
+                toast("ลบรายการวัสดุชั่วคราว", {
+                  description: "คุณสามารถกู้คืนรายการนี้ได้ภายใน 10 วินาที",
+                  action: {
+                    label: "เลิกทำ (Undo)",
+                    onClick: () => toast.success("กู้คืนรายการเรียบร้อย"),
+                  },
+                })
+              }
+            >
+              <Trash2 className="size-3.5 text-muted-foreground" /> Toast พร้อมปุ่ม Undo
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Active Task Progress & Field Error */}
+      <div className="grid gap-6 lg:grid-cols-2">
+        {/* Active Task Progress Simulation */}
+        <Card>
+          <CardHeader className="pb-3">
+            <CardTitle className="text-base">3. Active Task Progress</CardTitle>
+            <CardDescription className="text-xs">
+              การแสดงผลขณะระบบกำลังทำงานแบบ Asynchronous
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="flex flex-col gap-4">
+            {exportProgress !== null ? (
+              <div className="flex flex-col gap-2 rounded-md border p-3 bg-muted/20">
+                <div className="flex items-center justify-between text-xs">
+                  <span className="flex items-center gap-2 font-medium">
+                    <Loader2 className="size-3.5 animate-spin text-primary" />
+                    กำลังประมวลผลตารางเปรียบเทียบ BOQ...
+                  </span>
+                  <span className="font-mono text-muted-foreground">{exportProgress}%</span>
+                </div>
+                <Progress value={exportProgress} />
+              </div>
+            ) : (
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={triggerExportSimulation}
+                className="w-fit gap-2"
+              >
+                <Send className="size-3.5" /> ทดสอบจำลองการประมวลผล Asynchronous
+              </Button>
+            )}
+          </CardContent>
+        </Card>
+
+        {/* Input Validation State */}
+        <Card>
+          <CardHeader className="pb-3">
+            <CardTitle className="text-base">4. FieldError & Direct Validation</CardTitle>
+            <CardDescription className="text-xs">
+              การระบุข้อความช่วยเหลือและข้อผิดพลาดที่ตำแหน่ง Input
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FieldGroup>
+              <Field data-invalid>
+                <FieldLabel htmlFor="fb-vat-input">เลขประจำตัวผู้เสียภาษี (Tax ID)</FieldLabel>
+                <Input id="fb-vat-input" defaultValue="12345" aria-invalid />
+                <FieldError>เลขประจำตัวผู้เสียภาษีต้องเป็นตัวเลข 13 หลัก</FieldError>
+              </Field>
+            </FieldGroup>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,373 @@
+"use client";
+
+import { Combobox } from "@suphark/ui/components/shared/combobox";
+import { MultiSelectCombobox } from "@suphark/ui/components/shared/multi-select-combobox";
+import { Badge } from "@suphark/ui/components/ui/badge";
+import { Button } from "@suphark/ui/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@suphark/ui/components/ui/card";
+import { DatePicker } from "@suphark/ui/components/ui/date-picker";
+import {
+  Field,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+  FieldLegend,
+  FieldSet,
+} from "@suphark/ui/components/ui/field";
+import { Input } from "@suphark/ui/components/ui/input";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+  InputGroupText,
+  InputGroupTextarea,
+} from "@suphark/ui/components/ui/input-group";
+import { InputOTP, InputOTPGroup, InputOTPSlot } from "@suphark/ui/components/ui/input-otp";
+import { Label } from "@suphark/ui/components/ui/label";
+import { RadioGroup, RadioGroupItem } from "@suphark/ui/components/ui/radio-group";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from "@suphark/ui/components/ui/select";
+import { Separator } from "@suphark/ui/components/ui/separator";
+import { Slider } from "@suphark/ui/components/ui/slider";
+import { Switch } from "@suphark/ui/components/ui/switch";
+import { ToggleGroup, ToggleGroupItem } from "@suphark/ui/components/ui/toggle-group";
+import { Building2, DollarSign, FileText, Search } from "lucide-react";
+import * as React from "react";
+
+export function ShowcaseForms() {
+  const [hasErrors, setHasErrors] = React.useState(true);
+  const [selectedCombobox, setSelectedCombobox] = React.useState("th-cement");
+  const [selectedMulti, setSelectedMulti] = React.useState<string[]>(["concrete", "steel"]);
+  const [toggleVal, setToggleVal] = React.useState("grid");
+  const [sliderVal, setSliderVal] = React.useState([45]);
+  const [selectedDate, setSelectedDate] = React.useState<Date | null>(new Date());
+  const [otpVal, setOtpVal] = React.useState("2568");
+
+  const vendorOptions = [
+    { label: "Alpha Cement Co., Ltd.", value: "th-scg" },
+    { label: "Thai Concrete Industries", value: "th-cement" },
+    { label: "Boonthavorn Ceramic", value: "th-boonthavorn" },
+    { label: "Dynasty Ceramic PLC", value: "th-dynasty" },
+    { label: "TOA Paint Thailand", value: "th-toa" },
+  ];
+
+  const materialTags = [
+    { label: "งานคอนกรีตโครงสร้าง (Concrete)", value: "concrete" },
+    { label: "งานเหล็กรูปพรรณ (Structural Steel)", value: "steel" },
+    { label: "งานระบบไฟฟ้า (Electrical)", value: "electrical" },
+    { label: "งานสุขาภิบาล (Sanitary & Plumbing)", value: "plumbing" },
+    { label: "งานกระจกและอลูมิเนียม (Facade)", value: "facade" },
+  ];
+
+  return (
+    <div className="flex flex-col gap-8">
+      {/* Section Header */}
+      <div className="flex flex-col gap-1">
+        <div className="flex items-center gap-2">
+          <Badge variant="outline">Form System</Badge>
+          <span className="text-xs text-muted-foreground">
+            FieldGroup, Field, InputGroup, Combobox & Validation States
+          </span>
+        </div>
+        <h2 className="text-xl font-bold tracking-tight text-foreground">
+          ระบบฟอร์มและการจัดการข้อมูลนำเข้า (Forms & Inputs)
+        </h2>
+        <p className="text-sm text-muted-foreground">
+          มาตรฐานฟอร์มแบบ Unified <code>FieldGroup</code> + <code>Field</code>{" "}
+          พร้อมระบบตรวจสอบข้อผิดพลาดและ Accessibility
+        </p>
+      </div>
+
+      {/* Interactive Form Controls Showcase */}
+      <div className="grid gap-6 xl:grid-cols-[1.1fr_0.9fr]">
+        {/* Left Column: Standard Field-Based Form */}
+        <Card>
+          <CardHeader>
+            <div className="flex items-center justify-between">
+              <div>
+                <CardTitle className="text-base">Field-Based Form Structure</CardTitle>
+                <CardDescription className="text-xs">
+                  ใช้ <code>FieldGroup</code> และ <code>Field</code> เพื่อคุม Label, Description และ
+                  Error
+                </CardDescription>
+              </div>
+              <Button
+                variant={hasErrors ? "destructive" : "outline"}
+                size="xs"
+                onClick={() => setHasErrors(!hasErrors)}
+              >
+                {hasErrors ? "ซ่อน Validation Error" : "แสดง Validation Error"}
+              </Button>
+            </div>
+          </CardHeader>
+          <CardContent>
+            <FieldGroup>
+              {/* Field with simple input */}
+              <Field>
+                <FieldLabel htmlFor="procurement-title">ชื่อแพ็กเกจจัดซื้อ (Package Title)</FieldLabel>
+                <Input
+                  id="procurement-title"
+                  placeholder="เช่น งานจัดซื้อโครงสร้างเหล็กอาคาร 1"
+                  defaultValue="งานจัดซื้อโครงสร้างเหล็กและหลังคาอาคารหลัก"
+                />
+                <FieldDescription>ใช้ชื่อที่เป็นทางการและระบุอาคารให้ชัดเจน</FieldDescription>
+              </Field>
+
+              {/* Field with InputGroup (Search / Action) */}
+              <Field>
+                <FieldLabel htmlFor="vendor-tax-search">
+                  ค้นหาผู้เสนอราคา / เลขประจำตัวผู้เสียภาษี
+                </FieldLabel>
+                <InputGroup>
+                  <InputGroupAddon>
+                    <Building2 className="size-4 text-muted-foreground" />
+                  </InputGroupAddon>
+                  <InputGroupInput
+                    id="vendor-tax-search"
+                    placeholder="พิมพ์ชื่อบริษัท หรือ Tax ID 13 หลัก..."
+                  />
+                  <InputGroupAddon align="inline-end">
+                    <InputGroupButton aria-label="ค้นหา">
+                      <Search />
+                    </InputGroupButton>
+                  </InputGroupAddon>
+                </InputGroup>
+                <FieldDescription>ระบบจะดึงประวัติการรับงานและคะแนนประเมินย้อนหลัง</FieldDescription>
+              </Field>
+
+              {/* Field with Select & SelectGroup */}
+              <Field>
+                <FieldLabel htmlFor="procurement-method">วิธีการจัดหา (Procurement Method)</FieldLabel>
+                <Select defaultValue="bidding">
+                  <SelectTrigger id="procurement-method">
+                    <SelectValue placeholder="เลือกวิธีการจัดหา" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectGroup>
+                      <SelectLabel>การจัดหาแบบแข่งขัน</SelectLabel>
+                      <SelectItem value="bidding">ประกวดราคาทั่วไป (Open Bidding)</SelectItem>
+                      <SelectItem value="selective">คัดเลือกเฉพาะราย (Selective Bidding)</SelectItem>
+                    </SelectGroup>
+                    <SelectGroup>
+                      <SelectLabel>การจัดหาแบบพิเศษ</SelectLabel>
+                      <SelectItem value="direct">เจรจาตรง (Direct Negotiation)</SelectItem>
+                      <SelectItem value="framework">สัญญาจะซื้อจะขาย (Framework Agreement)</SelectItem>
+                    </SelectGroup>
+                  </SelectContent>
+                </Select>
+              </Field>
+
+              {/* Field with Validation Error State */}
+              <Field data-invalid={hasErrors ? true : undefined}>
+                <FieldLabel htmlFor="tender-budget">
+                  งบประมาณกลางที่ได้รับอนุมัติ (Approved Budget)
+                </FieldLabel>
+                <InputGroup>
+                  <InputGroupAddon>
+                    <DollarSign className="size-4 text-muted-foreground" />
+                  </InputGroupAddon>
+                  <InputGroupInput
+                    id="tender-budget"
+                    aria-invalid={hasErrors ? true : undefined}
+                    placeholder="0.00"
+                    defaultValue="0.00"
+                  />
+                </InputGroup>
+                {hasErrors ? (
+                  <FieldError>งบประมาณกลางต้องมากกว่า 0 บาท และตรงตามมติคณะกรรมการ</FieldError>
+                ) : (
+                  <FieldDescription>ระบุจำนวนเงินสุทธิรวมภาษีมูลค่าเพิ่ม 7%</FieldDescription>
+                )}
+              </Field>
+
+              {/* Field with Textarea in InputGroup */}
+              <Field>
+                <FieldLabel htmlFor="tender-scope">
+                  ขอบเขตงานและเงื่อนไขเทคนิค (Scope of Work)
+                </FieldLabel>
+                <InputGroup>
+                  <InputGroupAddon align="block-start">
+                    <InputGroupText>
+                      <FileText className="size-4" />
+                      Scope
+                    </InputGroupText>
+                  </InputGroupAddon>
+                  <InputGroupTextarea
+                    id="tender-scope"
+                    rows={3}
+                    placeholder="ระบุข้อกำหนดเฉพาะ เช่น มาตรฐาน มอก., ASTM หรือเงื่อนไขการทดสอบวัสดุ"
+                  />
+                </InputGroup>
+              </Field>
+            </FieldGroup>
+          </CardContent>
+        </Card>
+
+        {/* Right Column: Advanced & Grouped Controls */}
+        <div className="flex flex-col gap-6">
+          {/* Combobox & MultiSelect */}
+          <Card>
+            <CardHeader className="pb-3">
+              <CardTitle className="text-base">Combobox & Multi-Select</CardTitle>
+              <CardDescription className="text-xs">
+                การเลือกข้อมูลจากรายการขนาดใหญ่และการแท็กหลายรายการ
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="flex flex-col gap-4">
+              <Field>
+                <FieldLabel>ผู้ขายที่ได้รับเชิญหลัก (Primary Vendor)</FieldLabel>
+                <Combobox
+                  options={vendorOptions}
+                  value={selectedCombobox}
+                  onSelect={setSelectedCombobox}
+                  placeholder="เลือกผู้ขาย..."
+                  searchPlaceholder="ค้นหารายชื่อผู้ขาย..."
+                />
+              </Field>
+
+              <Field>
+                <FieldLabel>หมวดหมู่วัสดุที่เกี่ยวข้อง (Material Categories)</FieldLabel>
+                <MultiSelectCombobox
+                  options={materialTags}
+                  value={selectedMulti}
+                  onChange={setSelectedMulti}
+                  placeholder="เลือกหมวดหมู่วัสดุ..."
+                />
+              </Field>
+            </CardContent>
+          </Card>
+
+          {/* Grouped FieldSet with Switches & Radios */}
+          <Card>
+            <CardHeader className="pb-3">
+              <CardTitle className="text-base">FieldSet & Grouped Controls</CardTitle>
+              <CardDescription className="text-xs">
+                ใช้ <code>FieldSet</code> และ <code>FieldLegend</code> รวมสวิตช์และเรดิโอที่เกี่ยวข้องกัน
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="flex flex-col gap-6">
+              <FieldSet>
+                <FieldLegend>การควบคุมกระบวนการอนุมัติ (Approval Workflow)</FieldLegend>
+                <Field orientation="horizontal">
+                  <Switch id="sw-multilevel" defaultChecked />
+                  <FieldLabel htmlFor="sw-multilevel">
+                    อนุมัติแบบลำดับชั้น (Multi-level Approval)
+                  </FieldLabel>
+                </Field>
+                <Field orientation="horizontal">
+                  <Switch id="sw-budget-lock" defaultChecked />
+                  <FieldLabel htmlFor="sw-budget-lock">ล็อกงบประมาณทันทีเมื่อเปิดซองราคา</FieldLabel>
+                </Field>
+                <Field orientation="horizontal">
+                  <Switch id="sw-vendor-notify" />
+                  <FieldLabel htmlFor="sw-vendor-notify">ส่งอีเมลแจ้งเตือนผู้ขายอัตโนมัติ</FieldLabel>
+                </Field>
+              </FieldSet>
+
+              <Separator />
+
+              <FieldSet>
+                <FieldLegend>เกณฑ์การตัดสิน (Evaluation Method)</FieldLegend>
+                <RadioGroup defaultValue="price-tech" className="flex flex-col gap-2">
+                  <div className="flex items-center space-x-2">
+                    <RadioGroupItem value="price-tech" id="r-price-tech" />
+                    <Label htmlFor="r-price-tech" className="text-xs font-normal">
+                      คะแนนรวมราคาและเทคนิค (Quality-Cost Based)
+                    </Label>
+                  </div>
+                  <div className="flex items-center space-x-2">
+                    <RadioGroupItem value="lowest-price" id="r-lowest" />
+                    <Label htmlFor="r-lowest" className="text-xs font-normal">
+                      ราคาต่ำสุดที่ผ่านคุณสมบัติ (Lowest Responsive Bid)
+                    </Label>
+                  </div>
+                </RadioGroup>
+              </FieldSet>
+            </CardContent>
+          </Card>
+
+          {/* Specialized Controls (Date, OTP, Slider, ToggleGroup) */}
+          <Card>
+            <CardHeader className="pb-3">
+              <CardTitle className="text-base">Specialized Input Primitives</CardTitle>
+              <CardDescription className="text-xs">
+                Date Pickers, OTP, Sliders, และ ToggleGroup
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="flex flex-col gap-5">
+              {/* DatePicker */}
+              <Field>
+                <FieldLabel>วันกำหนดส่งเอกสาร (Tender Deadline)</FieldLabel>
+                <DatePicker
+                  value={selectedDate}
+                  onChange={setSelectedDate}
+                  placeholder="เลือกวันที่กำหนดส่ง..."
+                />
+              </Field>
+
+              {/* ToggleGroup */}
+              <Field>
+                <FieldLabel>รูปแบบมุมมองตาราง (View Layout)</FieldLabel>
+                <ToggleGroup
+                  value={[toggleVal]}
+                  onValueChange={(val) => {
+                    if (val[0]) setToggleVal(val[0]);
+                  }}
+                  variant="outline"
+                >
+                  <ToggleGroupItem value="grid">Grid View</ToggleGroupItem>
+                  <ToggleGroupItem value="compact">Compact Table</ToggleGroupItem>
+                  <ToggleGroupItem value="kanban">Kanban Board</ToggleGroupItem>
+                </ToggleGroup>
+              </Field>
+
+              {/* Slider */}
+              <Field>
+                <div className="flex items-center justify-between">
+                  <FieldLabel>สัดส่วนคะแนนด้านราคา (Price Weight): {sliderVal[0]}%</FieldLabel>
+                  <span className="text-xs text-muted-foreground">
+                    เทคนิค: {100 - (sliderVal[0] ?? 0)}%
+                  </span>
+                </div>
+                <Slider
+                  value={sliderVal}
+                  onValueChange={(val) => setSliderVal(Array.isArray(val) ? [...val] : [val])}
+                  max={100}
+                  step={5}
+                />
+              </Field>
+
+              {/* InputOTP */}
+              <Field>
+                <FieldLabel>รหัสยืนยันเปิดซองราคา (4-Digit Opening PIN)</FieldLabel>
+                <InputOTP maxLength={4} value={otpVal} onChange={setOtpVal}>
+                  <InputOTPGroup>
+                    <InputOTPSlot index={0} />
+                    <InputOTPSlot index={1} />
+                    <InputOTPSlot index={2} />
+                    <InputOTPSlot index={3} />
+                  </InputOTPGroup>
+                </InputOTP>
+              </Field>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </div>
+  );
+}