@open-mercato/ui 0.5.1-develop.2953.6647bb2c43 → 0.5.1-develop.2964.d5ac4a6ebb

package/dist/primitives/tooltip.js

@@ -2,24 +2,49 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { cva } from "class-variance-authority";
 import { cn } from "@open-mercato/shared/lib/utils";
 const TooltipProvider = TooltipPrimitive.Provider;
 const Tooltip = TooltipPrimitive.Root;
 const TooltipTrigger = TooltipPrimitive.Trigger;
-const TooltipContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+const tooltipContentVariants = cva(
+  "z-tooltip overflow-hidden rounded-sm max-w-xs break-words shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+  {
+    variants: {
+      variant: {
+        dark: "bg-foreground text-background",
+        light: "bg-popover text-popover-foreground border border-input"
+      },
+      size: {
+        sm: "px-1.5 py-0.5 text-xs leading-4",
+        default: "px-2 py-0.5 text-xs leading-4",
+        lg: "px-3 py-2 text-sm leading-5"
+      }
+    },
+    defaultVariants: {
+      variant: "dark",
+      size: "default"
+    }
+  }
+);
+const TooltipContent = React.forwardRef(({ className, sideOffset = 4, variant, size, arrow = true, children, ...props }, ref) => /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
   TooltipPrimitive.Content,
   {
     ref,
     sideOffset,
-    className: cn(
-      "z-tooltip overflow-hidden rounded-md bg-slate-900 px-3 py-1.5 text-xs text-slate-50 animate-in fade-in-0 zoom-in-95",
-      "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
-      "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
-      "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      "max-w-xs break-words",
-      className
-    ),
-    ...props
+    className: cn(tooltipContentVariants({ variant, size }), className),
+    ...props,
+    children: [
+      children,
+      arrow ? /* @__PURE__ */ jsx(
+        TooltipPrimitive.Arrow,
+        {
+          width: 10,
+          height: 5,
+          className: cn(variant === "light" ? "fill-popover stroke-input" : "fill-foreground")
+        }
+      ) : null
+    ]
   }
 ) }));
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
@@ -31,13 +56,16 @@ function SimpleTooltip({
   align = "center",
   open,
   onOpenChange,
-  disabled = false
+  disabled = false,
+  variant,
+  size,
+  arrow
 }) {
   const isDisabled = disabled || !content;
   if (isDisabled) {
     return /* @__PURE__ */ jsx(Fragment, { children });
   }
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(TooltipProvider, { delayDuration, children: /* @__PURE__ */ jsxs(
     Tooltip,
     {
       open,
@@ -45,16 +73,17 @@ function SimpleTooltip({
       delayDuration,
       children: [
         /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children }),
-        /* @__PURE__ */ jsx(TooltipContent, { side, align, children: content })
+        /* @__PURE__ */ jsx(TooltipContent, { side, align, variant, size, arrow, children: content })
       ]
     }
-  );
+  ) });
 }
 export {
   SimpleTooltip,
   Tooltip,
   TooltipContent,
   TooltipProvider,
-  TooltipTrigger
+  TooltipTrigger,
+  tooltipContentVariants
 };
 //# sourceMappingURL=tooltip.js.map

package/dist/primitives/tooltip.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/primitives/tooltip.tsx"],
-  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport * as TooltipPrimitive from '@radix-ui/react-tooltip'\nimport { cn } from '@open-mercato/shared/lib/utils'\n\nexport const TooltipProvider = TooltipPrimitive.Provider\n\nexport const Tooltip = TooltipPrimitive.Root\n\nexport const TooltipTrigger = TooltipPrimitive.Trigger\n\nexport const TooltipContent = React.forwardRef<\n  React.ElementRef<typeof TooltipPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>\n>(({ className, sideOffset = 4, ...props }, ref) => (\n  <TooltipPrimitive.Portal>\n    <TooltipPrimitive.Content\n      ref={ref}\n      sideOffset={sideOffset}\n      className={cn(\n        'z-tooltip overflow-hidden rounded-md bg-slate-900 px-3 py-1.5 text-xs text-slate-50 animate-in fade-in-0 zoom-in-95',\n        'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',\n        'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2',\n        'data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n        'max-w-xs break-words',\n        className\n      )}\n      {...props}\n    />\n  </TooltipPrimitive.Portal>\n))\nTooltipContent.displayName = TooltipPrimitive.Content.displayName\n\nexport type TooltipProps = {\n  content: React.ReactNode\n  children: React.ReactNode\n  delayDuration?: number\n  side?: 'top' | 'right' | 'bottom' | 'left'\n  align?: 'start' | 'center' | 'end'\n  open?: boolean\n  onOpenChange?: (open: boolean) => void\n  disabled?: boolean\n}\n\n/**\n * Simple tooltip wrapper component for common use cases.\n *\n * @example\n * <SimpleTooltip content=\"Full text here\">\n *   <span>Truncated...</span>\n * </SimpleTooltip>\n */\nexport function SimpleTooltip({\n  content,\n  children,\n  delayDuration = 300,\n  side = 'top',\n  align = 'center',\n  open,\n  onOpenChange,\n  disabled = false,\n}: TooltipProps) {\n  // If disabled or no content, just render children without tooltip\n  const isDisabled = disabled || !content\n\n  if (isDisabled) {\n    return <>{children}</>\n  }\n\n  return (\n    <Tooltip\n      open={open}\n      onOpenChange={onOpenChange}\n      delayDuration={delayDuration}\n    >\n      <TooltipTrigger asChild>\n        {children}\n      </TooltipTrigger>\n      <TooltipContent side={side} align={align}>\n        {content}\n      </TooltipContent>\n    </Tooltip>\n  )\n}\n"],
-  "mappings": ";AAiBI,SAkDO,UAlDP,KAsDA,YAtDA;AAfJ,YAAY,WAAW;AACvB,YAAY,sBAAsB;AAClC,SAAS,UAAU;AAEZ,MAAM,kBAAkB,iBAAiB;AAEzC,MAAM,UAAU,iBAAiB;AAEjC,MAAM,iBAAiB,iBAAiB;AAExC,MAAM,iBAAiB,MAAM,WAGlC,CAAC,EAAE,WAAW,aAAa,GAAG,GAAG,MAAM,GAAG,QAC1C,oBAAC,iBAAiB,QAAjB,EACC;AAAA,EAAC,iBAAiB;AAAA,EAAjB;AAAA,IACC;AAAA,IACA;AAAA,IACA,WAAW;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACC,GAAG;AAAA;AACN,GACF,CACD;AACD,eAAe,cAAc,iBAAiB,QAAQ;AAqB/C,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA,gBAAgB;AAAA,EAChB,OAAO;AAAA,EACP,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA,WAAW;AACb,GAAiB;AAEf,QAAM,aAAa,YAAY,CAAC;AAEhC,MAAI,YAAY;AACd,WAAO,gCAAG,UAAS;AAAA,EACrB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA,4BAAC,kBAAe,SAAO,MACpB,UACH;AAAA,QACA,oBAAC,kBAAe,MAAY,OACzB,mBACH;AAAA;AAAA;AAAA,EACF;AAEJ;",
+  "sourcesContent": ["\"use client\"\n\nimport * as React from 'react'\nimport * as TooltipPrimitive from '@radix-ui/react-tooltip'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '@open-mercato/shared/lib/utils'\n\nexport const TooltipProvider = TooltipPrimitive.Provider\n\nexport const Tooltip = TooltipPrimitive.Root\n\nexport const TooltipTrigger = TooltipPrimitive.Trigger\n\nconst tooltipContentVariants = cva(\n  'z-tooltip overflow-hidden rounded-sm max-w-xs break-words shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n  {\n    variants: {\n      variant: {\n        dark: 'bg-foreground text-background',\n        light: 'bg-popover text-popover-foreground border border-input',\n      },\n      size: {\n        sm: 'px-1.5 py-0.5 text-xs leading-4',\n        default: 'px-2 py-0.5 text-xs leading-4',\n        lg: 'px-3 py-2 text-sm leading-5',\n      },\n    },\n    defaultVariants: {\n      variant: 'dark',\n      size: 'default',\n    },\n  }\n)\n\nexport type TooltipContentProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> &\n  VariantProps<typeof tooltipContentVariants> & {\n    /** Show a small arrow pointing at the trigger. */\n    arrow?: boolean\n  }\n\nexport const TooltipContent = React.forwardRef<\n  React.ElementRef<typeof TooltipPrimitive.Content>,\n  TooltipContentProps\n>(({ className, sideOffset = 4, variant, size, arrow = true, children, ...props }, ref) => (\n  <TooltipPrimitive.Portal>\n    <TooltipPrimitive.Content\n      ref={ref}\n      sideOffset={sideOffset}\n      className={cn(tooltipContentVariants({ variant, size }), className)}\n      {...props}\n    >\n      {children}\n      {arrow ? (\n        <TooltipPrimitive.Arrow\n          width={10}\n          height={5}\n          className={cn(variant === 'light' ? 'fill-popover stroke-input' : 'fill-foreground')}\n        />\n      ) : null}\n    </TooltipPrimitive.Content>\n  </TooltipPrimitive.Portal>\n))\nTooltipContent.displayName = TooltipPrimitive.Content.displayName\n\nexport type TooltipProps = {\n  content: React.ReactNode\n  children: React.ReactNode\n  delayDuration?: number\n  side?: 'top' | 'right' | 'bottom' | 'left'\n  align?: 'start' | 'center' | 'end'\n  open?: boolean\n  onOpenChange?: (open: boolean) => void\n  disabled?: boolean\n  variant?: 'dark' | 'light'\n  size?: 'sm' | 'default' | 'lg'\n  arrow?: boolean\n}\n\n/**\n * Simple tooltip wrapper component for common use cases.\n *\n * @example\n * <SimpleTooltip content=\"Full text here\">\n *   <span>Truncated...</span>\n * </SimpleTooltip>\n *\n * @example with arrow + light variant\n * <SimpleTooltip content=\"Help text\" variant=\"light\" arrow>\n *   <InfoIcon />\n * </SimpleTooltip>\n */\nexport function SimpleTooltip({\n  content,\n  children,\n  delayDuration = 300,\n  side = 'top',\n  align = 'center',\n  open,\n  onOpenChange,\n  disabled = false,\n  variant,\n  size,\n  arrow,\n}: TooltipProps) {\n  const isDisabled = disabled || !content\n\n  if (isDisabled) {\n    return <>{children}</>\n  }\n\n  return (\n    <TooltipProvider delayDuration={delayDuration}>\n      <Tooltip\n        open={open}\n        onOpenChange={onOpenChange}\n        delayDuration={delayDuration}\n      >\n        <TooltipTrigger asChild>\n          {children}\n        </TooltipTrigger>\n        <TooltipContent side={side} align={align} variant={variant} size={size} arrow={arrow}>\n          {content}\n        </TooltipContent>\n      </Tooltip>\n    </TooltipProvider>\n  )\n}\n\nexport { tooltipContentVariants }\n"],
+  "mappings": ";AA6CI,SA8DO,UAtDH,KARJ;AA3CJ,YAAY,WAAW;AACvB,YAAY,sBAAsB;AAClC,SAAS,WAA8B;AACvC,SAAS,UAAU;AAEZ,MAAM,kBAAkB,iBAAiB;AAEzC,MAAM,UAAU,iBAAiB;AAEjC,MAAM,iBAAiB,iBAAiB;AAE/C,MAAM,yBAAyB;AAAA,EAC7B;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,MAAM;AAAA,QACN,OAAO;AAAA,MACT;AAAA,MACA,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,SAAS;AAAA,QACT,IAAI;AAAA,MACN;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,IACR;AAAA,EACF;AACF;AAQO,MAAM,iBAAiB,MAAM,WAGlC,CAAC,EAAE,WAAW,aAAa,GAAG,SAAS,MAAM,QAAQ,MAAM,UAAU,GAAG,MAAM,GAAG,QACjF,oBAAC,iBAAiB,QAAjB,EACC;AAAA,EAAC,iBAAiB;AAAA,EAAjB;AAAA,IACC;AAAA,IACA;AAAA,IACA,WAAW,GAAG,uBAAuB,EAAE,SAAS,KAAK,CAAC,GAAG,SAAS;AAAA,IACjE,GAAG;AAAA,IAEH;AAAA;AAAA,MACA,QACC;AAAA,QAAC,iBAAiB;AAAA,QAAjB;AAAA,UACC,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,WAAW,GAAG,YAAY,UAAU,8BAA8B,iBAAiB;AAAA;AAAA,MACrF,IACE;AAAA;AAAA;AACN,GACF,CACD;AACD,eAAe,cAAc,iBAAiB,QAAQ;AA6B/C,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA,gBAAgB;AAAA,EAChB,OAAO;AAAA,EACP,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AACF,GAAiB;AACf,QAAM,aAAa,YAAY,CAAC;AAEhC,MAAI,YAAY;AACd,WAAO,gCAAG,UAAS;AAAA,EACrB;AAEA,SACE,oBAAC,mBAAgB,eACf;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA,4BAAC,kBAAe,SAAO,MACpB,UACH;AAAA,QACA,oBAAC,kBAAe,MAAY,OAAc,SAAkB,MAAY,OACrE,mBACH;AAAA;AAAA;AAAA,EACF,GACF;AAEJ;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@open-mercato/ui",
-  "version": "0.5.1-develop.2953.6647bb2c43",
+  "version": "0.5.1-develop.2964.d5ac4a6ebb",
   "type": "module",
   "main": "./dist/index.js",
   "scripts": {
@@ -124,6 +124,8 @@
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@radix-ui/react-popover": "^1.1.6",
+    "@radix-ui/react-radio-group": "^1.2.3",
+    "@radix-ui/react-select": "^2.1.6",
     "@radix-ui/react-tooltip": "^1.2.8",
     "@tanstack/react-virtual": "^3.13.23",
     "date-fns": "^4.1.0",
@@ -132,12 +134,12 @@
     "recharts": "^3.8.1"
   },
   "peerDependencies": {
-    "@open-mercato/shared": "0.5.1-develop.2953.6647bb2c43",
+    "@open-mercato/shared": "0.5.1-develop.2964.d5ac4a6ebb",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"
   },
   "devDependencies": {
-    "@open-mercato/shared": "0.5.1-develop.2953.6647bb2c43",
+    "@open-mercato/shared": "0.5.1-develop.2964.d5ac4a6ebb",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.1",

package/src/backend/CrudForm.tsx

@@ -18,6 +18,15 @@ import { SortableContext, verticalListSortingStrategy, useSortable, arrayMove }
 import { CSS } from '@dnd-kit/utilities'
 import { DataLoader } from '../primitives/DataLoader'
 import { Checkbox } from '../primitives/checkbox'
+import { Input } from '../primitives/input'
+import { Textarea } from '../primitives/textarea'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../primitives/select'
 import { flash } from './FlashMessages'
 import dynamic from 'next/dynamic'
 import { FormHeader } from './forms/FormHeader'
@@ -96,6 +105,10 @@ import { sanitizeHtmlRichText, sanitizeRichTextHref, sanitizeRichTextPasteConten
 
 // Stable empty options array to avoid creating a new [] every render
 const EMPTY_OPTIONS: CrudFieldOption[] = []
+// Sentinel for the optional-Select clear affordance. Radix Select forbids
+// empty-string item values, so we use a stable non-empty token that maps to
+// `undefined` in the change handler.
+const SELECT_CLEAR_SENTINEL = '__crudform_select_clear__'
 const FOCUSABLE_SELECTOR =
   '[data-crud-focus-target], input:not([type="hidden"]):not([disabled]), textarea:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])'
 const CRUDFORM_EXTENDED_EVENTS_ENABLED = parseBooleanWithDefault(
@@ -203,6 +216,12 @@ export type CrudBuiltinField = CrudFieldBase & {
   suggestions?: string[]
   // for combobox fields; allow custom values or restrict to suggestions only
   allowCustomValues?: boolean
+  // for text/textarea fields; HTML maxLength + (textarea only) char counter when showCount=true
+  maxLength?: number
+  // for textarea fields; show character counter (requires maxLength)
+  showCount?: boolean
+  // for textarea fields; min height in rows
+  rows?: number
   // for datetime/time fields
   minuteStep?: number
   minDate?: Date
@@ -1918,6 +1937,18 @@ export function CrudForm<TValues extends Record<string, unknown>>({
 
     const form = document.getElementById(formId)
     if (!form) return
+
+    // Don't steal focus if the user is already typing inside the form. The auto-focus
+    // is meant for "submit failed, jump to first invalid field" — not for "user is
+    // editing one error field and our focus jumps to a different remaining error
+    // each keystroke as the errors object shrinks". Keystrokes would otherwise land
+    // in the wrong input.
+    const active = document.activeElement
+    if (active instanceof HTMLElement && form.contains(active)) {
+      lastErrorFieldRef.current = fieldId
+      return
+    }
+
     const container = form.querySelector<HTMLElement>(`[data-crud-field-id="${fieldId}"]`)
     const target =
       container?.querySelector<HTMLElement>(FOCUSABLE_SELECTOR) ??
@@ -2681,22 +2712,25 @@ export function CrudForm<TValues extends Record<string, unknown>>({
               <label className="text-xs uppercase tracking-wide text-muted-foreground">
                 {fieldsetSelectorLabel}
               </label>
-              <select
-                className="h-9 rounded border pl-3 pr-8 text-sm"
-                value={entityLayout.activeFieldset ?? ''}
-                onChange={(event) =>
+              <Select
+                value={entityLayout.activeFieldset || undefined}
+                onValueChange={(value) =>
                   handleFieldsetSelectionChange(
                     entityLayout.entityId,
-                    event.target.value || null,
+                    value || null,
                   )}
               >
-                <option value="">{defaultFieldsetLabel}</option>
-                {entityLayout.availableFieldsets.map((fs) => (
-                  <option key={fs.code} value={fs.code}>
-                    {fs.label}
-                  </option>
-                ))}
-              </select>
+                <SelectTrigger className="w-auto min-w-[10rem]">
+                  <SelectValue placeholder={defaultFieldsetLabel} />
+                </SelectTrigger>
+                <SelectContent>
+                  {entityLayout.availableFieldsets.map((fs) => (
+                    <SelectItem key={fs.code} value={fs.code}>
+                      {fs.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
               <IconButton
                 variant="outline"
                 className="text-muted-foreground hover:text-foreground"
@@ -3250,9 +3284,8 @@ function RelationSelect({
 
   return (
     <div className="space-y-1">
-      <input
+      <Input
         ref={inputRef}
-        className="w-full h-9 rounded border px-2 text-sm"
         placeholder={placeholder || t('ui.forms.listbox.searchPlaceholder', 'Search...')}
         value={query}
         onChange={(e) => setQuery(e.target.value)}
@@ -3350,9 +3383,8 @@ function TextInput({
 
   return (
     <>
-      <input
+      <Input
         type={inputType}
-        className="w-full h-9 rounded border px-2 text-sm"
         placeholder={placeholder}
         value={local}
         onChange={handleChange}
@@ -3431,9 +3463,8 @@ function NumberInput({
   }, [commitIfChanged])
   
   return (
-    <input
+    <Input
       type="number"
-      className="w-full h-9 rounded border px-2 text-sm"
       placeholder={placeholder}
       value={local}
       onChange={handleChange}
@@ -3452,11 +3483,19 @@ function TextAreaInput({
   onChange,
   placeholder,
   autoFocus,
+  maxLength,
+  showCount,
+  rows,
+  disabled,
 }: {
   value: string
   onChange: (v: string) => void
   placeholder?: string
   autoFocus?: boolean
+  maxLength?: number
+  showCount?: boolean
+  rows?: number
+  disabled?: boolean
 }) {
   const [local, setLocal] = React.useState<string>(value)
   const isFocusedRef = React.useRef(false)
@@ -3482,14 +3521,17 @@ function TextAreaInput({
   }, [commitIfChanged])
 
   return (
-    <textarea
-      className="w-full rounded border px-2 py-2 min-h-[80px] sm:min-h-[120px] text-sm"
+    <Textarea
       placeholder={placeholder}
       value={local}
       onChange={handleChange}
       onFocus={handleFocus}
       onBlur={handleBlur}
       autoFocus={autoFocus}
+      maxLength={maxLength}
+      showCount={showCount}
+      rows={rows}
+      disabled={disabled}
       data-crud-focus-target=""
     />
   )
@@ -3791,8 +3833,9 @@ const ListboxMultiSelect = React.memo(function ListboxMultiSelect({
   )
   return (
     <div className="w-full">
-      <input
-        className="mb-2 w-full h-8 rounded border px-2 text-sm"
+      <Input
+        className="mb-2"
+        size="sm"
         placeholder={searchPlaceholder}
         value={query}
         onChange={(e) => setQuery(e.target.value)}
@@ -3914,9 +3957,8 @@ const FieldControl = React.memo(function FieldControlImpl({
         />
       )}
       {field.type === 'date' && (
-        <input
+        <Input
           type="date"
-          className="w-full h-9 rounded border px-2 text-sm"
           value={typeof value === 'string' ? value : ''}
           onChange={(e) => setValue(field.id, e.target.value || undefined)}
           autoFocus={autoFocusField}
@@ -3925,9 +3967,8 @@ const FieldControl = React.memo(function FieldControlImpl({
         />
       )}
       {field.type === 'datetime-local' && (
-        <input
+        <Input
           type="datetime-local"
-          className="w-full h-9 rounded border px-2 text-sm"
           value={typeof value === 'string' ? value : ''}
           onChange={(e) => setValue(field.id, e.target.value || undefined)}
           autoFocus={autoFocusField}
@@ -3979,6 +4020,10 @@ const FieldControl = React.memo(function FieldControlImpl({
           placeholder={placeholder}
           onChange={(next) => fieldSetValue(next)}
           autoFocus={autoFocusField}
+          maxLength={builtin?.maxLength}
+          showCount={builtin?.showCount}
+          rows={builtin?.rows}
+          disabled={disabled}
         />
       )}
       {field.type === 'richtext' && builtin?.editor === 'simple' && (
@@ -4042,8 +4087,13 @@ const FieldControl = React.memo(function FieldControlImpl({
         </label>
       )}
       {field.type === 'select' && !builtin?.multiple && (
-        <select
-          className="w-full h-9 rounded border pl-3 pr-8 text-sm"
+        <Select
+          // Radix Select MUST be either always-controlled or always-uncontrolled.
+          // Passing `value={undefined}` on first render and a string later trips
+          // React's "uncontrolled → controlled" warning and breaks Radix's
+          // internal state (dropdown flashes / selections no-op). Use empty
+          // string for "no selection" instead — Radix treats it the same as
+          // undefined for matching SelectItems but keeps the prop type stable.
           value={
             Array.isArray(value)
               ? String(value[0] ?? '')
@@ -4051,17 +4101,34 @@ const FieldControl = React.memo(function FieldControlImpl({
                 ? ''
                 : String(value)
           }
-          onChange={(e) => setValue(field.id, e.target.value || undefined)}
-          data-crud-focus-target=""
+          onValueChange={(next) => {
+            // Sentinel maps back to undefined so optional selects can be cleared.
+            if (!next || next === SELECT_CLEAR_SENTINEL) {
+              setValue(field.id, undefined)
+              return
+            }
+            setValue(field.id, next)
+          }}
           disabled={disabled}
         >
-          <option value="">{t('ui.forms.select.emptyOption', '—')}</option>
-          {options.map((opt) => (
-            <option key={opt.value} value={opt.value}>
-              {opt.label}
-            </option>
-          ))}
-        </select>
+          <SelectTrigger data-crud-focus-target="">
+            <SelectValue placeholder={t('ui.forms.select.emptyOption', '—')} />
+          </SelectTrigger>
+          <SelectContent>
+            {!field.required && value != null && value !== '' && (
+              <SelectItem value={SELECT_CLEAR_SENTINEL}>
+                {t('ui.forms.select.clearOption', '— Clear —')}
+              </SelectItem>
+            )}
+            {options
+              .filter((opt) => opt.value !== '')
+              .map((opt) => (
+                <SelectItem key={opt.value} value={opt.value}>
+                  {opt.label}
+                </SelectItem>
+              ))}
+          </SelectContent>
+        </Select>
       )}
       {field.type === 'select' && builtin?.multiple && builtin.listbox === true && (
         <ListboxMultiSelect

package/src/backend/DataTable.tsx

@@ -7,6 +7,13 @@ import { RefreshCw, Loader2, SlidersHorizontal, MoreHorizontal, Circle, Filter,
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../primitives/table'
 import { Button } from '../primitives/button'
 import { Checkbox } from '../primitives/checkbox'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../primitives/select'
 import { Spinner } from '../primitives/spinner'
 import { TooltipProvider } from '../primitives/tooltip'
 import { TruncatedCell } from './TruncatedCell'
@@ -1760,19 +1767,26 @@ export function DataTable<T>({
       : []
     const pageSizeSelect = pageSizeOptions.length > 0 && pagination.onPageSizeChange ? (
       <span className="inline-flex items-center gap-1.5">
-        <select
-          className="rounded border bg-background pl-2 pr-7 py-0.5 text-sm min-w-[3.5rem]"
-          value={pagination.pageSize}
-          onChange={(event) => {
-            pagination.onPageSizeChange!(Number(event.target.value))
+        <Select
+          value={String(pagination.pageSize)}
+          onValueChange={(value) => {
+            pagination.onPageSizeChange!(Number(value))
             scrollTableIntoView()
           }}
-          aria-label={t('ui.dataTable.pagination.rowsPerPage', 'Rows per page')}
         >
-          {pageSizeOptions.map((size) => (
-            <option key={size} value={size}>{size}</option>
-          ))}
-        </select>
+          <SelectTrigger
+            size="sm"
+            className="min-w-[4rem]"
+            aria-label={t('ui.dataTable.pagination.rowsPerPage', 'Rows per page')}
+          >
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {pageSizeOptions.map((size) => (
+              <SelectItem key={size} value={String(size)}>{size}</SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
         <span className="text-muted-foreground">{t('ui.dataTable.pagination.perPage', 'per page')}</span>
       </span>
     ) : null
@@ -2105,17 +2119,21 @@ export function DataTable<T>({
             <div className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
               {t('ui.dataTable.fieldset.label', 'Fieldset')}
             </div>
-            <select
-              className="w-full rounded border bg-background px-2 py-2 text-sm"
-              value={activeCustomFieldFilterFieldset ?? ''}
-              onChange={(event) => handleCustomFieldFilterFieldsetChange(event.target.value)}
+            <Select
+              value={activeCustomFieldFilterFieldset || undefined}
+              onValueChange={(value) => handleCustomFieldFilterFieldsetChange(value)}
             >
-              {(cfFilterFieldsetsByEntity[resolvedEntityIds[0]] ?? []).map((fieldset) => (
-                <option key={fieldset.code} value={fieldset.code}>
-                  {fieldset.label}
-                </option>
-              ))}
-            </select>
+              <SelectTrigger>
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {(cfFilterFieldsetsByEntity[resolvedEntityIds[0]] ?? []).map((fieldset) => (
+                  <SelectItem key={fieldset.code} value={fieldset.code}>
+                    {fieldset.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
           </div>
         )
         : null

package/src/backend/FilterOverlay.tsx

@@ -2,6 +2,13 @@
 import * as React from 'react'
 import { Button } from '../primitives/button'
 import { Checkbox } from '../primitives/checkbox'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../primitives/select'
 import { ComboboxInput } from './inputs/ComboboxInput'
 import { TagsInput, type TagsInputOption } from './inputs/TagsInput'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
@@ -266,16 +273,21 @@ export function FilterOverlay({
                           })}
                         </div>
                       ) : (
-                        <select
-                          className="w-full h-11 rounded border px-2 text-sm"
-                          value={values[f.id] ?? ''}
-                          onChange={(e) => setValue(f.id, e.target.value || undefined)}
+                        <Select
+                          value={values[f.id] || undefined}
+                          onValueChange={(next) => setValue(f.id, next || undefined)}
                         >
-                          <option value="">{t('ui.forms.select.emptyOption', '—')}</option>
-                          {(f.options || dynamicOptions[f.id] || []).map((opt) => (
-                            <option key={opt.value} value={opt.value}>{opt.label}</option>
-                          ))}
-                        </select>
+                          <SelectTrigger size="lg">
+                            <SelectValue placeholder={t('ui.forms.select.emptyOption', '—')} />
+                          </SelectTrigger>
+                          <SelectContent>
+                            {(f.options || dynamicOptions[f.id] || [])
+                              .filter((opt) => opt.value !== '')
+                              .map((opt) => (
+                                <SelectItem key={opt.value} value={opt.value}>{opt.label}</SelectItem>
+                              ))}
+                          </SelectContent>
+                        </Select>
                       )}
                     </div>
                   )}
@@ -354,20 +366,22 @@ export function FilterOverlay({
                   })()}
                   {f.type === 'checkbox' && (
                     <div>
-                      <select
-                        className="w-full h-11 rounded border px-2 text-sm"
-                        value={values[f.id] === true ? 'true' : values[f.id] === false ? 'false' : ''}
-                        onChange={(e) => {
-                          const v = e.target.value
-                          if (v === '') setValue(f.id, undefined)
-                          else if (v === 'true') setValue(f.id, true)
-                          else if (v === 'false') setValue(f.id, false)
+                      <Select
+                        value={values[f.id] === true ? 'true' : values[f.id] === false ? 'false' : undefined}
+                        onValueChange={(next) => {
+                          if (!next) setValue(f.id, undefined)
+                          else if (next === 'true') setValue(f.id, true)
+                          else if (next === 'false') setValue(f.id, false)
                         }}
                       >
-                        <option value="">{t('ui.forms.select.emptyOption', '—')}</option>
-                        <option value="true">{t('common.yes', 'Yes')}</option>
-                        <option value="false">{t('common.no', 'No')}</option>
-                      </select>
+                        <SelectTrigger size="lg">
+                          <SelectValue placeholder={t('ui.forms.select.emptyOption', '—')} />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="true">{t('common.yes', 'Yes')}</SelectItem>
+                          <SelectItem value="false">{t('common.no', 'No')}</SelectItem>
+                        </SelectContent>
+                      </Select>
                     </div>
                   )}
                 </div>