@suphark/ui 0.25.1 → 0.26.0

package/CHANGELOG.md

@@ -2,6 +2,27 @@
 
 รูปแบบตาม [Keep a Changelog](https://keepachangelog.com/) · semver: patch = หน้าตา/บั๊ก, minor = component/prop ใหม่, major = เปลี่ยน/ลบ props
 
+## [0.26.0] — 2026-10-03
+
+ปิดงานค้างจากผลรีวิว + prop ที่ DueBell ขอ — เพิ่มอย่างเดียว
+
+### Added
+
+- `NumberInput`: `inputRef` (ref ของช่องที่พิมพ์ — focus เองได้) และ `autoFocus` (คำขอจาก DueBell)
+- `TimePicker`: `roundToStep` — ปัดนาทีที่พิมพ์ลงตาม `minuteStep` (เช่น step 60 + พิมพ์ 14:30 → 14:00); ค่าเริ่มต้นเก็บตามที่พิมพ์เหมือนเดิม (คำขอจาก DueBell)
+
+### Changed
+
+- **ช่องกรอกใช้ขนาดตัวอักษรตามบทบาท `text-body`** (16px มือถือ / 15px จอกว้าง) — `Input`, `Textarea`, `SelectTrigger`, `NativeSelect` (+ `NumberInput`, `TagsInput`): เดิม `text-base md:text-sm` = 14px บนจอกว้าง เล็กกว่าข้อความรอบข้าง 1px และ `text-body` ที่แอปใส่ให้ช่องได้ผลแค่มือถือ (pi-done ต้องเติม `md:text-body` เอง 19 จุด — ลบได้แล้ว); `SelectTrigger`/`NativeSelect` เดิม 14px แม้บนมือถือ (iOS ซูมเมื่อโฟกัส) — แก้ไฟล์ shadcn 4 ไฟล์เป็นข้อยกเว้น (เพิ่มในรายการคืนไฟล์หลัง `shadcn add --overwrite` ใน CLAUDE.md); `className` ของแอปยังแทนได้ (`cn` รู้จักคลาสตามบทบาท)
+- ปุ่ม `ActionButton`/`LinkButton` ที่มี tooltip ไม่สร้าง `TooltipProvider` ต่อปุ่มแล้ว (ตาราง 50 แถว = 100+ provider) — ใช้ `delay={0}` ที่ trigger แทน หน้าตา/จังหวะเหมือนเดิม
+- `DesignSystemShowcase`: แท็บอื่นนอกจาก "ภาพรวม" โหลดแบบ lazy เมื่อเปิดแท็บ (เดิม import ทุกแท็บ ~1 MB) — ลิงก์ข้ามแท็บไปหัวข้อรอแท็บโหลดเสร็จก่อนเลื่อน
+- ลบ dependency `cn` ที่ไม่ได้ใช้ (แอปไม่ต้องติดตั้งเพิ่ม)
+- docs: agent-rules — barrel ที่ client import ห้าม re-export schema ของ zod (ค่า) ให้ export แค่ type (DueBell −18% ต่อหน้า); `ChartConfig` ใช้เฉพาะค่าที่แอปกำหนดเอง (ค่าถูกเขียนลง `<style>` ตรง ๆ)
+- CI: `permissions: contents: read` (+ `pull-requests: read` ให้ gitleaks) — GITHUB_TOKEN อ่านได้อย่างเดียว; pin action ด้วย commit SHA (checkout v4.4.0, gitleaks-action v2.3.9, pnpm/action-setup v4.3.0, setup-node v4.4.0)
+- showcase: `/components/[slug]` โหลด demo แบบ `next/dynamic` ต่อ slug (`src/docs/demos.tsx` + `DemoView`) — เดิมทุกหน้าโหลด demo ทั้ง 129 ตัว (~409 kB gzip ต่อหน้า เช่น `/components/badge` พก recharts)
+- showcase: demo `code-block`/`secret-reveal` ใช้ค่า `example_…` แทน `sk_live_…` (ไม่ให้ secret scanner แจ้งเตือนผิด)
+- showcase: `@suphark/auth-client` ^0.1.7 → **^0.6.1** (แก้ open redirect ใน `safeNextPath` ของ handler `/auth/login|callback|logout` — ทดสอบ `/auth/logout?next=/%09/evil.com` แล้วไม่ออกนอกโดเมน); breaking ระหว่างทาง (ลบ Prisma adapter, เปลี่ยนชื่อ `ACCESS_DENIED`) ไม่กระทบ showcase
+
 ## [0.25.1] — 2026-10-02
 
 แก้ตามผลรีวิว codebase (bug / security / performance) — ไม่เปลี่ยน props

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@suphark/ui",
-  "version": "0.25.1",
+  "version": "0.26.0",
   "private": false,
   "type": "module",
   "description": "Design system กลางของ Suphark apps: shadcn/ui (base-nova, Base UI, Tailwind v4) + shared components + token/ฟอนต์ Noto Sans Thai Looped — ส่งเป็น source ให้แอป Next transpile เอง",
@@ -72,7 +72,6 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
-    "cn": "^0.3.0",
     "date-fns": "^4.4.0",
     "embla-carousel-react": "^8.6.0",
     "input-otp": "^1.5.0",

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

@@ -12,14 +12,38 @@ import {
   Zap,
 } from "lucide-react";
 import * as React from "react";
-import { ShowcaseDataDisplay } from "./sections/showcase-data-display";
-import { ShowcaseFeedback } from "./sections/showcase-feedback";
-import { ShowcaseForms } from "./sections/showcase-forms";
-import { ShowcaseFoundations } from "./sections/showcase-foundations";
-import { ShowcaseGuidelinesRecipes } from "./sections/showcase-guidelines-recipes";
-import { ShowcaseOverlaysNavigation } from "./sections/showcase-overlays-navigation";
 import { ShowcaseOverview } from "./sections/showcase-overview";
-import { ShowcasePrimitives } from "./sections/showcase-primitives";
+
+// แท็บอื่นนอกจากภาพรวมโหลดเมื่อเปิดแท็บนั้น — เดิม import ทุกแท็บ (ปฏิทิน, ตาราง, dnd-kit, cmdk …) ~1 MB ทั้งที่เห็นทีละแท็บ
+const ShowcaseDataDisplay = React.lazy(() =>
+  import("./sections/showcase-data-display").then((m) => ({ default: m.ShowcaseDataDisplay })),
+);
+const ShowcaseFeedback = React.lazy(() =>
+  import("./sections/showcase-feedback").then((m) => ({ default: m.ShowcaseFeedback })),
+);
+const ShowcaseForms = React.lazy(() =>
+  import("./sections/showcase-forms").then((m) => ({ default: m.ShowcaseForms })),
+);
+const ShowcaseFoundations = React.lazy(() =>
+  import("./sections/showcase-foundations").then((m) => ({ default: m.ShowcaseFoundations })),
+);
+const ShowcaseGuidelinesRecipes = React.lazy(() =>
+  import("./sections/showcase-guidelines-recipes").then((m) => ({
+    default: m.ShowcaseGuidelinesRecipes,
+  })),
+);
+const ShowcaseOverlaysNavigation = React.lazy(() =>
+  import("./sections/showcase-overlays-navigation").then((m) => ({
+    default: m.ShowcaseOverlaysNavigation,
+  })),
+);
+const ShowcasePrimitives = React.lazy(() =>
+  import("./sections/showcase-primitives").then((m) => ({ default: m.ShowcasePrimitives })),
+);
+
+function SectionLoading() {
+  return <div className="h-96 animate-pulse rounded-xl bg-muted/40" aria-busy="true" />;
+}
 
 export function DesignSystemShowcase({
   links,
@@ -32,10 +56,13 @@ export function DesignSystemShowcase({
 
   /** สลับแท็บแล้วเลื่อนไปหัวข้อ — เลื่อนใน effect หลังแท็บใหม่ render แล้ว (ตำแหน่งจึงถูก) ชดเชย header ที่ sticky */
   const [pendingAnchor, setPendingAnchor] = React.useState<string | null>(null);
+  const tries = React.useRef(0);
+  const [retry, setRetry] = React.useState(0);
   const jumpTo = React.useCallback((tab: string, anchor?: string) => {
     setActiveTab(tab);
     setPendingAnchor(anchor ?? "__top__");
   }, []);
+  // biome-ignore lint/correctness/useExhaustiveDependencies: retry ใช้เป็นตัวกระตุ้นให้ลองหาหัวข้อซ้ำระหว่างรอแท็บ lazy
   React.useEffect(() => {
     if (!pendingAnchor) return;
     // หน่วงเล็กน้อยให้ Tabs โฟกัส trigger ใหม่เสร็จก่อน (การโฟกัสเลื่อนหน้าไปที่แถบแท็บ) แล้วค่อยเลื่อนไปหัวข้อ
@@ -47,15 +74,22 @@ export function DesignSystemShowcase({
       }
       const el = document.getElementById(pendingAnchor);
       if (!el) {
+        // แท็บที่โหลดแบบ lazy อาจยัง render ไม่เสร็จ — ลองใหม่ได้ถึง ~2 วินาที
+        if (tries.current++ < 25) {
+          setRetry((r) => r + 1);
+          return;
+        }
+        tries.current = 0;
         setPendingAnchor(null);
         return;
       }
+      tries.current = 0;
       el.style.scrollMarginTop = "88px"; // ชดเชย header ที่ sticky
       el.scrollIntoView({ behavior: "smooth", block: "start" });
       setPendingAnchor(null);
     }, 80);
     return () => window.clearTimeout(timer);
-  }, [pendingAnchor]);
+  }, [pendingAnchor, retry]);
 
   const tabItems = [
     { value: "overview", label: "ภาพรวม", icon: LayoutGrid },
@@ -109,31 +143,45 @@ export function DesignSystemShowcase({
         </TabsContent>
 
         <TabsContent value="foundations" className="mt-0 outline-none">
-          <ShowcaseFoundations />
+          <React.Suspense fallback={<SectionLoading />}>
+            <ShowcaseFoundations />
+          </React.Suspense>
         </TabsContent>
 
         <TabsContent value="primitives" className="mt-0 outline-none">
-          <ShowcasePrimitives />
+          <React.Suspense fallback={<SectionLoading />}>
+            <ShowcasePrimitives />
+          </React.Suspense>
         </TabsContent>
 
         <TabsContent value="forms" className="mt-0 outline-none">
-          <ShowcaseForms />
+          <React.Suspense fallback={<SectionLoading />}>
+            <ShowcaseForms />
+          </React.Suspense>
         </TabsContent>
 
         <TabsContent value="data-display" className="mt-0 outline-none">
-          <ShowcaseDataDisplay />
+          <React.Suspense fallback={<SectionLoading />}>
+            <ShowcaseDataDisplay />
+          </React.Suspense>
         </TabsContent>
 
         <TabsContent value="overlays" className="mt-0 outline-none">
-          <ShowcaseOverlaysNavigation />
+          <React.Suspense fallback={<SectionLoading />}>
+            <ShowcaseOverlaysNavigation />
+          </React.Suspense>
         </TabsContent>
 
         <TabsContent value="feedback" className="mt-0 outline-none">
-          <ShowcaseFeedback />
+          <React.Suspense fallback={<SectionLoading />}>
+            <ShowcaseFeedback />
+          </React.Suspense>
         </TabsContent>
 
         <TabsContent value="guidelines-recipes" className="mt-0 outline-none">
-          <ShowcaseGuidelinesRecipes />
+          <React.Suspense fallback={<SectionLoading />}>
+            <ShowcaseGuidelinesRecipes />
+          </React.Suspense>
         </TabsContent>
       </Tabs>
     </div>

package/src/components/shared/button/base/action-button.tsx

@@ -1,12 +1,7 @@
 "use client";
 
 import { Button } from "@suphark/ui/components/ui/button";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@suphark/ui/components/ui/tooltip";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@suphark/ui/components/ui/tooltip";
 import {
   type CheckPermissionOptions,
   type CheckPermissionRequirement,
@@ -118,14 +113,12 @@ export function ActionButton({
   // 5. Wrap with Tooltip if provided or auto-generated
   if (finalTooltip) {
     return (
-      <TooltipProvider>
-        <Tooltip>
-          <TooltipTrigger render={buttonContent as React.ReactElement} />
-          <TooltipContent side={tooltipSide}>
-            {typeof finalTooltip === "string" ? <p>{finalTooltip}</p> : finalTooltip}
-          </TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger delay={0} render={buttonContent as React.ReactElement} />
+        <TooltipContent side={tooltipSide}>
+          {typeof finalTooltip === "string" ? <p>{finalTooltip}</p> : finalTooltip}
+        </TooltipContent>
+      </Tooltip>
     );
   }
 

package/src/components/shared/button/base/link-button.tsx

@@ -2,12 +2,7 @@
 
 // [FIX 1.1] นำเข้าเฉพาะ Button
 import { Button } from "@suphark/ui/components/ui/button";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@suphark/ui/components/ui/tooltip";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@suphark/ui/components/ui/tooltip";
 import {
   type CheckPermissionOptions,
   type CheckPermissionRequirement,
@@ -114,14 +109,10 @@ export function LinkButton({
   // 3. Wrap with Tooltip if provided
   if (tooltip) {
     return (
-      <TooltipProvider>
-        <Tooltip>
-          <TooltipTrigger render={buttonContent as React.ReactElement} />
-          <TooltipContent>
-            {typeof tooltip === "string" ? <p>{tooltip}</p> : tooltip}
-          </TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger delay={0} render={buttonContent as React.ReactElement} />
+        <TooltipContent>{typeof tooltip === "string" ? <p>{tooltip}</p> : tooltip}</TooltipContent>
+      </Tooltip>
     );
   }
 

package/src/components/shared/form/number-input.tsx

@@ -3,7 +3,7 @@
 import { NumberField } from "@base-ui/react/number-field";
 import { cn } from "@suphark/ui/lib/utils";
 import { MinusIcon, PlusIcon } from "lucide-react";
-import type { ReactNode } from "react";
+import type { ReactNode, Ref } from "react";
 import { useUiText } from "../ui-text";
 
 /**
@@ -17,7 +17,7 @@ function relaxHiddenStep(el: HTMLInputElement | null) {
 
 const SIZE = {
   sm: { group: "h-7", button: "w-7 [&_svg]:size-3.5", text: "text-sm" },
-  default: { group: "h-8", button: "w-8 [&_svg]:size-4", text: "text-base md:text-sm" },
+  default: { group: "h-8", button: "w-8 [&_svg]:size-4", text: "text-body" },
 } as const;
 
 /**
@@ -53,6 +53,8 @@ export function NumberInput({
   "aria-label": ariaLabel,
   "aria-describedby": ariaDescribedBy,
   "aria-invalid": ariaInvalid,
+  inputRef,
+  autoFocus,
 }: {
   value?: number | null;
   defaultValue?: number;
@@ -84,6 +86,9 @@ export function NumberInput({
   "aria-label"?: string;
   "aria-describedby"?: string;
   "aria-invalid"?: boolean | "true" | "false";
+  /** ref ของช่องที่ผู้ใช้พิมพ์ (เช่น focus() เอง) */
+  inputRef?: Ref<HTMLInputElement>;
+  autoFocus?: boolean;
 }) {
   const text = useUiText().number;
   const s = SIZE[size];
@@ -128,6 +133,8 @@ export function NumberInput({
         )}
         {prefix && <span className={cn(affix, !hideButtons && "pr-0")}>{prefix}</span>}
         <NumberField.Input
+          ref={inputRef}
+          autoFocus={autoFocus}
           placeholder={placeholder}
           aria-label={ariaLabel}
           aria-describedby={ariaDescribedBy}

package/src/components/shared/form/tags-input.tsx

@@ -184,7 +184,7 @@ export function TagsInput({
           onBlur={() => {
             if (draft.trim()) setDraft(add([draft]));
           }}
-          className="h-6 min-w-24 flex-1 bg-transparent px-1 text-base outline-none placeholder:text-muted-foreground md:text-sm"
+          className="h-6 min-w-24 flex-1 bg-transparent px-1 text-body outline-none placeholder:text-muted-foreground"
         />
       </div>
       {error && (

package/src/components/shared/form/time-picker.tsx

@@ -45,6 +45,13 @@ export function parseTimeInput(input: string): TimeValue | null {
   return `${pad(h)}:${pad(m)}`;
 }
 
+/** ปัดนาทีลงให้ลงตัวกับ step (step 1 = ไม่เปลี่ยน) */
+function roundTime(value: TimeValue | null, step: number): TimeValue | null {
+  if (!value || step <= 1) return value;
+  const [h, m] = value.split(":").map(Number);
+  return `${pad(h ?? 0)}:${pad(Math.floor((m ?? 0) / step) * step)}`;
+}
+
 export function splitTime(value: TimeValue | null | undefined): [number, number] | null {
   const parsed = value ? parseTimeInput(value) : null;
   if (!parsed) return null;
@@ -192,6 +199,7 @@ export function TimePicker({
   defaultValue = null,
   onValueChange,
   minuteStep = 5,
+  roundToStep = false,
   name,
   id,
   required,
@@ -206,6 +214,8 @@ export function TimePicker({
   defaultValue?: TimeValue | null;
   onValueChange?: (value: TimeValue | null) => void;
   minuteStep?: number;
+  /** ปัดนาทีที่พิมพ์ลงตาม minuteStep (เช่น step 60 + พิมพ์ 14:30 → 14:00) — ค่าเริ่มต้นเก็บตามที่พิมพ์ */
+  roundToStep?: boolean;
   name?: string;
   id?: string;
   required?: boolean;
@@ -238,7 +248,7 @@ export function TimePicker({
       setDraft(null);
       return;
     }
-    const parsed = parseTimeInput(draft);
+    const parsed = roundTime(parseTimeInput(draft), roundToStep ? minuteStep : 1);
     if (parsed) {
       setTime(parsed);
       setDraft(null);

package/src/components/ui/input.tsx

@@ -8,7 +8,7 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
       type={type}
       data-slot="input"
       className={cn(
-        "h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        "h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-body transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
         className,
       )}
       {...props}

package/src/components/ui/native-select.tsx

@@ -19,7 +19,7 @@ function NativeSelect({ className, size = "default", ...props }: NativeSelectPro
       <select
         data-slot="native-select"
         data-size={size}
-        className="h-8 w-full min-w-0 appearance-none rounded-lg border border-input bg-transparent py-1 pr-8 pl-2.5 text-sm transition-colors outline-none select-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40"
+        className="h-8 w-full min-w-0 appearance-none rounded-lg border border-input bg-transparent py-1 pr-8 pl-2.5 text-body transition-colors outline-none select-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40"
         {...props}
       />
       <ChevronDownIcon

package/src/components/ui/select.tsx

@@ -40,7 +40,7 @@ function SelectTrigger({
       data-slot="select-trigger"
       data-size={size}
       className={cn(
-        "flex w-fit items-center justify-between gap-1.5 rounded-lg border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "flex w-fit items-center justify-between gap-1.5 rounded-lg border border-input bg-transparent py-2 pr-2 pl-2.5 text-body whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className,
       )}
       {...props}

package/src/components/ui/textarea.tsx

@@ -6,7 +6,7 @@ function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
     <textarea
       data-slot="textarea"
       className={cn(
-        "flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        "flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-body transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
         className,
       )}
       {...props}