@vvedantb/ui 0.16.4 → 0.17.0

package/README.md

@@ -198,7 +198,7 @@ import { SessionsHoverCard } from "@vvedantb/ui";
 ## Panels, search and confirm
 
 ```tsx
-import { ConfirmDialog, SlideOverPanel, ToolbarSearchInput } from "@vvedantb/ui";
+import { ConfirmDialog, SearchInput, SlideOverPanel } from "@vvedantb/ui";
 
 <div className="relative">
   <SlideOverPanel open={open} onClose={() => setOpen(false)} header={<h2>Details</h2>}>
@@ -206,7 +206,9 @@ import { ConfirmDialog, SlideOverPanel, ToolbarSearchInput } from "@vvedantb/ui"
   </SlideOverPanel>
 </div>
 
-<ToolbarSearchInput value={query} onChange={setQuery} />
+<SearchInput value={query} onChange={setQuery} label="Search files" shortcut="/" />
+
+<SearchInput variant="toolbar" value={query} onChange={setQuery} />
 
 <ConfirmDialog size="sm" open={open} onOpenChange={setOpen} title="Delete item?" variant="destructive" onConfirm={remove} />
 
@@ -214,7 +216,9 @@ import { ConfirmDialog, SlideOverPanel, ToolbarSearchInput } from "@vvedantb/ui"
 ```
 
 - `SlideOverPanel`: a right-side panel, absolutely positioned inside its nearest positioned parent. It is not a portal or dialog. It slides in with a spring and is hidden below `md`. Only the close button closes it (no Escape, no outside click). `width` is `"w-96"` (default) or `"w-80"`. `closeLabel` defaults to `"Close panel"`. `className` merges last.
-- `ToolbarSearchInput`: a compact `h-8` search field for toolbars, with a search icon and a clear button. The clear button stays mounted and is hidden while the value is blank. Clearing calls `onChange("")` and does not move focus. Defaults: `placeholder="Search..."`, `label="Search"` (the `aria-label`), `clearLabel="Clear search"`. The ref goes to the `<input>`.
+- `SearchInput`: the search field. A `ClearInput` with a search icon on the left and the clear button on the right (shown while there is text; clearing calls `onChange("")`). `label` (default `"Search"`) is the `aria-label` and, without `placeholder`, the placeholder. `clearLabel` defaults to `"Clear search"`. `shortcut` (such as `"/"` or `"⌘K"`) shows a `Kbd` hint on the right while the value is empty. `size`: `"sm"` (`h-8`, default) or `"md"` (`h-10`). `variant`: `"default"` or `"toolbar"` (transparent until hover or focus, `rounded-field`, full width on mobile and `sm:w-44 md:w-52`). Other input props pass through; `enterKeyHint="search"`. `className` goes to the `<input>`, `wrapperClassName` to the wrapper, the ref to the `<input>`.
+- `ToolbarSearchInput` (deprecated in 0.17.0): a wrapper over `<SearchInput variant="toolbar">` with `placeholder="Search..."`. `className` goes to the wrapper, `inputClassName` to the `<input>`.
+- Field focus: every field (`Input`, `Textarea`, `Select` and `RadixSelect` triggers, `ClearInput`, `SearchInput`, `InputGroup`, date and time picker triggers) uses `fieldFocusClass`: the border turns `focus-border` and a 1px `ring-focus-ring` shows. Wrappers use `fieldFocusWithinClass` (`has-focus-visible:`). Both are exported for app fields.
 - `ConfirmDialog` `size`: `"default"` keeps the alert dialog. `"sm"` renders a compact, dismissible dialog (outside click, Escape and the close button close it) with small Cancel and confirm buttons. Cancel calls `onCancel` and then `onOpenChange(false)`. Confirm calls `onConfirm` only, so the caller closes it. `"md"` (0.5.2) is dismissible like `"sm"`, with the title in a header (`pb-4`), the description in its own section (`py-6`) and a footer (`pt-4`) with default-size buttons. It has the same Cancel and confirm behaviour as `"sm"`.
 - Legacy (still supported): the `ConfirmDialog` `size`, `variant`, `cancelLabel` and `confirmLabel` props. For anything they do not cover, compose the parts (see [Composable parts](#composable-parts-060-options-061)).
 
@@ -981,7 +985,7 @@ const store: ArtifactStateStore = {
 - `ArtifactRender`: the body by format. Markdown renders with Streamdown, code with `CodeBlock` (`language`), and HTML, SVG and JSON in an `ArtifactFrame`.
 - `ArtifactCard`: a grid tile (type icon, title, description, compact updated time) or a `layout="list"` row. With `getHref` it is an `<a>`; a plain left click then calls `onOpen` instead of following the link, and modified clicks stay native. The actions menu (dots button and right-click) lists Open (`onOpen`), Open in new tab (`getHref`), Rename (`onRename`), Copy and Download (`getBody`, since list rows carry no body) and Delete (`onDelete`). Each shows only when its callback is set; with none, there is no menu.
 - `ArtifactList`: `ArtifactCard`s in a grid (one to three columns) or a list, with the card callbacks passed through. With no artifacts it shows an `EmptyState` (`emptyTitle`, `emptyDescription`, `emptyActions`).
-- `ArtifactListToolbar`: controlled `ToolbarSearchInput` (`query`, `onQueryChange`), a type filter menu (`type`, `onTypeChange`, `types`; `undefined` is "All types") and a grid or list toggle (`layout`, `onLayoutChange`). The filter and the toggle show only with their callbacks. `children` go at the end.
+- `ArtifactListToolbar`: controlled `SearchInput variant="toolbar"` (`query`, `onQueryChange`), a type filter menu (`type`, `onTypeChange`, `types`; `undefined` is "All types") and a grid or list toggle (`layout`, `onLayoutChange`). The filter and the toggle show only with their callbacks. `children` go at the end.
 - `ArtifactViewer`: the ai-elements `Artifact` container with a header (`headerStart`, type icon, title) and actions: versions menu (`versions`), Rename, Copy, Download (the format's extension and MIME type from `ARTIFACT_FORMAT_FILES`), Open in new tab (`href`), your `actions`, and Delete. Below it, `ArtifactRender` of `artifact.body`. Pass the body of the version on screen.
 - `ArtifactVersionsMenu`: a "vN" button listing `versions` newest first, with the current one marked. With `onViewVersion`, picking a version shows it, and "Restore vN" (`onRestoreVersion`) appears while an older version is on screen. Without it, picking an older version restores it.
 - Rename and delete use `ConfirmDialog` (`ArtifactRenameDialog`, `ArtifactDeleteDialog`, and `useArtifactEditDialogs` for custom surfaces). Rename sends the trimmed title, and does nothing when it is unchanged. Alt-click on Delete skips the dialog, as with `useRequestConfirm`. The delete dialog says "This cannot be undone."; pass `deleteDescription` to `ArtifactViewer`, `ArtifactCard` or `ArtifactList` to change it (0.13.1), for example when your delete can be undone. A callback that rejects keeps its dialog open and shows an error toast; copy and load failures toast too, so mount `SonnerToaster`.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vvedantb/ui",
-  "version": "0.16.4",
+  "version": "0.17.0",
   "license": "MIT",
   "description": "Shared React 19 UI for web apps: one JavaScript entry (primitives, shell pieces, app helpers including the Convex and Clerk provider, VITE env parsing and ensure-user, artifact viewers over the @vvedantb/server artifacts core, native tokens), design-token CSS, shared Tailwind v4 CSS and a Tailwind preset.",
   "type": "module",
@@ -164,7 +164,7 @@
     "vitest": "^3.2.0",
     "zod": "^4.0.0",
     "zod3": "npm:zod@^3.25.76",
-    "@vvedantb/server": "0.6.1"
+    "@vvedantb/server": "0.7.1"
   },
   "peerDependenciesMeta": {
     "@clerk/clerk-react": {

package/src/artifacts/artifact-list-toolbar.tsx

@@ -10,7 +10,7 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "../ui/dropdown-menu";
-import { ToolbarSearchInput } from "../ui/toolbar-search-input";
+import { SearchInput } from "../ui/search-input";
 import { cn } from "../utils/cn";
 import type { ArtifactLayout } from "./artifact-card";
 import { ARTIFACT_TYPE_LABELS, ArtifactTypeIcon } from "./artifact-type-icon";
@@ -52,7 +52,8 @@ export function ArtifactListToolbar({
 }: ArtifactListToolbarProps) {
   return (
     <div className={cn("flex flex-wrap items-center gap-2", className)}>
-      <ToolbarSearchInput
+      <SearchInput
+        variant="toolbar"
         value={query}
         onChange={onQueryChange}
         placeholder={searchPlaceholder}

package/src/composer/Composer.tsx

@@ -229,7 +229,7 @@ function ComposerShell({
       data-stop-mode={stopMode}
       className={cn(
         "group/composer relative flex w-full min-w-0 flex-col rounded-[1.25rem] border border-border bg-field-background text-sm transition-[border-color,box-shadow] duration-200 ease-smooth",
-        "has-[[data-composer-input]:focus-visible]:border-focus-border has-[[data-composer-input]:focus-visible]:ring-2 has-[[data-composer-input]:focus-visible]:ring-focus-ring",
+        "has-[[data-composer-input]:focus-visible]:border-focus-border has-[[data-composer-input]:focus-visible]:ring-1 has-[[data-composer-input]:focus-visible]:ring-focus-ring",
         disabled && "opacity-60",
         className,
       )}

package/src/index.ts

@@ -2,6 +2,7 @@
 // stylesheet in the app. This package does not ship a second token set.
 export { cn } from "./utils/cn";
 export { floatingSurfaceClass } from "./ui/_menu-classes";
+export { fieldFocusClass, fieldFocusWithinClass } from "./ui/_field-classes";
 export * from "./ui/surface-classes";
 export * from "./motion/presets";
 export * from "./motion/panel-transition";

package/src/ui/_field-classes.ts

@@ -0,0 +1,7 @@
+// light field focus: border colour plus a 1px ring
+export const fieldFocusClass =
+  "focus-visible:outline-hidden focus-visible:border-focus-border focus-visible:ring-1 focus-visible:ring-focus-ring";
+
+// the same on a wrapper whose control has focus
+export const fieldFocusWithinClass =
+  "has-focus-visible:outline-hidden has-focus-visible:border-focus-border has-focus-visible:ring-1 has-focus-visible:ring-focus-ring";

package/src/ui/_picker-classes.ts

@@ -1,6 +1,8 @@
+import { fieldFocusClass } from "./_field-classes";
+
 // input-styled trigger shared by TimePicker and the date pickers
 export const pickerTriggerClass =
-  "inline-flex h-8 items-center justify-between gap-2 rounded-field border border-border bg-field-background px-2.5 text-xs font-medium tabular-nums transition-[border-color,box-shadow,background-color] duration-200 ease-smooth hover:bg-field-background/90 focus-visible:border-focus-border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring disabled:cursor-not-allowed disabled:opacity-50";
+  `inline-flex h-8 items-center justify-between gap-2 rounded-field border border-border bg-field-background px-2.5 text-xs font-medium tabular-nums transition-[border-color,box-shadow,background-color] duration-200 ease-smooth hover:bg-field-background/90 disabled:cursor-not-allowed disabled:opacity-50 ${fieldFocusClass}`;
 
 // selected item in a picker popover (TimePicker columns, calendar days, months)
 export const pickerSelectedClass = "bg-primary text-primary-foreground";

package/src/ui/calendar.tsx

@@ -95,7 +95,7 @@ function Calendar({
           defaultClassNames.dropdowns,
         ),
         dropdown_root: cn(
-          "relative rounded-field border border-border has-focus:border-focus-border has-focus:ring-2 has-focus:ring-focus-ring",
+          "relative rounded-field border border-border has-focus:border-focus-border has-focus:ring-1 has-focus:ring-focus-ring",
           defaultClassNames.dropdown_root,
         ),
         dropdown: cn(

package/src/ui/clear-input.alt.tsx

@@ -2,6 +2,7 @@
 import * as React from "react";
 import { IconX } from "@tabler/icons-react";
 import { cn } from "../utils/cn";
+import { fieldFocusClass } from "./_field-classes";
 export interface ClearInputProps
   extends Omit<React.ComponentProps<"input">, "value" | "onChange"> {
   value: string;
@@ -47,7 +48,8 @@ const ClearInput = React.forwardRef<HTMLInputElement, ClearInputProps>(
           }}
           placeholder={placeholder}
           className={cn(
-            "flex h-10 w-full rounded-field border border-border bg-field-background px-3.5 py-2 text-sm transition-[border-color,background-color] duration-200 ease-smooth placeholder:text-field-placeholder focus-visible:border-focus-border focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-focus-ring disabled:cursor-not-allowed disabled:opacity-50",
+            "flex h-10 w-full rounded-field border border-border bg-field-background px-3.5 py-2 text-sm transition-[border-color,background-color] duration-200 ease-smooth placeholder:text-field-placeholder disabled:cursor-not-allowed disabled:opacity-50",
+            fieldFocusClass,
             "pr-9",
             className,
           )}

package/src/ui/clear-input.tsx

@@ -3,6 +3,7 @@
 import * as React from "react";
 import { IconX } from "@tabler/icons-react";
 import { cn } from "../utils/cn";
+import { fieldFocusClass } from "./_field-classes";
 import { runClearInputDissolve } from "./clearInputDissolve";
 
 export interface ClearInputProps extends Omit<
@@ -125,7 +126,8 @@ const ClearInput = React.forwardRef<HTMLInputElement, ClearInputProps>(
           }}
           placeholder={placeholder}
           className={cn(
-            "flex h-10 w-full rounded-field border border-border bg-field-background px-3.5 py-2 text-base sm:text-sm transition-[border-color,box-shadow,background-color] duration-200 ease-smooth placeholder:text-field-placeholder focus-visible:border-focus-border focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-focus-ring disabled:cursor-not-allowed disabled:opacity-50",
+            "flex h-10 w-full rounded-field border border-border bg-field-background px-3.5 py-2 text-base sm:text-sm transition-[border-color,box-shadow,background-color] duration-200 ease-smooth placeholder:text-field-placeholder disabled:cursor-not-allowed disabled:opacity-50",
+            fieldFocusClass,
             fieldClassName,
           )}
           {...props}

package/src/ui/input-group.alt.tsx

@@ -3,6 +3,7 @@
 import * as React from "react";
 import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "../utils/cn";
+import { fieldFocusWithinClass } from "./_field-classes";
 import { Button, type ButtonProps } from "./button";
 import { Input } from "./input";
 import { Textarea } from "./textarea";
@@ -19,7 +20,7 @@ const InputGroup = React.forwardRef<
       "has-[textarea]:h-auto",
       "has-data-[slot=input-group-control]:h-auto",
       "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col",
-      "has-focus-visible:border-focus-border has-focus-visible:outline-hidden has-focus-visible:ring-2 has-focus-visible:ring-focus-ring",
+      fieldFocusWithinClass,
       error &&
         "border-danger-border has-focus-visible:border-danger has-focus-visible:ring-danger-ring",
       className,

package/src/ui/input-group.tsx

@@ -20,7 +20,7 @@ function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
         "[&>input]:has-[>[data-align=inline-end]]:pr-2",
         "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col [&>input]:has-[>[data-align=block-start]]:pb-3",
         "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col [&>input]:has-[>[data-align=block-end]]:pt-3",
-        "has-[[data-slot=input-group-control]:focus-visible]:border-focus-border has-[[data-slot=input-group-control]:focus-visible]:ring-2 has-[[data-slot=input-group-control]:focus-visible]:ring-focus-ring",
+        "has-[[data-slot=input-group-control]:focus-visible]:border-focus-border has-[[data-slot=input-group-control]:focus-visible]:ring-1 has-[[data-slot=input-group-control]:focus-visible]:ring-focus-ring",
         "has-[[data-slot][aria-invalid=true]]:border-danger-border has-[[data-slot][aria-invalid=true]]:ring-danger-ring",
         className,
       )}

package/src/ui/input.tsx

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { cn } from "../utils/cn";
+import { fieldFocusClass } from "./_field-classes";
 
 const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
   ({ className, type, ...props }, ref) => {
@@ -7,7 +8,8 @@ const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
       <input
         type={type}
         className={cn(
-          "flex h-10 w-full max-sm:min-w-0 rounded-field border border-border bg-field-background px-3.5 py-2 text-base sm:text-sm transition-[border-color,box-shadow,background-color] duration-200 ease-smooth file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-field-placeholder focus-visible:border-focus-border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring disabled:cursor-not-allowed disabled:opacity-50",
+          "flex h-10 w-full max-sm:min-w-0 rounded-field border border-border bg-field-background px-3.5 py-2 text-base sm:text-sm transition-[border-color,box-shadow,background-color] duration-200 ease-smooth file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-field-placeholder disabled:cursor-not-allowed disabled:opacity-50",
+          fieldFocusClass,
           className,
         )}
         ref={ref}

package/src/ui/radix-select.tsx

@@ -3,6 +3,7 @@ import { IconCheck, IconChevronDown, IconChevronUp } from "@tabler/icons-react";
 import { Select as SelectPrimitive } from "radix-ui";
 
 import { cn } from "../utils/cn";
+import { fieldFocusClass } from "./_field-classes";
 import {
   floatingSurfaceAnimateClass,
   floatingSurfaceClass,
@@ -40,7 +41,8 @@ function SelectTrigger({
       data-slot="select-trigger"
       data-size={size}
       className={cn(
-        "flex w-fit items-center justify-between gap-2 rounded-field border border-border bg-field-background px-3.5 py-2 text-sm whitespace-nowrap ring-offset-background transition-[border-color,box-shadow,background-color,transform] duration-200 ease-smooth active:duration-100 active:ease-out active:scale-[0.98] placeholder:text-field-placeholder focus-visible:border-focus-border focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-focus-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-danger data-placeholder:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground data-[size=default]:h-10 data-[size=sm]:h-8 data-[slot=select-value]:*:line-clamp-1 data-[slot=select-value]:*:flex data-[slot=select-value]:*:items-center data-[slot=select-value]:*:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "flex w-fit items-center justify-between gap-2 rounded-field border border-border bg-field-background px-3.5 py-2 text-sm whitespace-nowrap ring-offset-background transition-[border-color,box-shadow,background-color,transform] duration-200 ease-smooth active:duration-100 active:ease-out active:scale-[0.98] placeholder:text-field-placeholder disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-danger data-placeholder:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground data-[size=default]:h-10 data-[size=sm]:h-8 data-[slot=select-value]:*:line-clamp-1 data-[slot=select-value]:*:flex data-[slot=select-value]:*:items-center data-[slot=select-value]:*:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        fieldFocusClass,
         className,
       )}
       {...props}

package/src/ui/search-input.tsx

@@ -4,20 +4,75 @@ import * as React from "react";
 import { IconSearch } from "@tabler/icons-react";
 import { cn } from "../utils/cn";
 import { ClearInput, type ClearInputProps } from "./clear-input";
+import { Kbd } from "./kbd";
 
-export type SearchInputProps = Omit<ClearInputProps, "leading">;
+const sizeClasses = {
+  sm: { input: "h-8 pl-8 text-sm", icon: "left-2" },
+  md: { input: "h-10 pl-9", icon: "left-3" },
+};
+
+const variantClasses = {
+  default: { wrapper: "", input: "" },
+  toolbar: {
+    wrapper: "min-w-0 flex-1 sm:flex-none",
+    input: "min-w-0 bg-transparent shadow-none hover:bg-default focus-visible:bg-default sm:w-44 md:w-52",
+  },
+};
+
+export interface SearchInputProps extends Omit<ClearInputProps, "leading" | "size"> {
+  /** `aria-label`, and the placeholder when `placeholder` is not set. Default `"Search"`. */
+  label?: string;
+  /** Key hint shown on the right while the value is empty, such as `"/"` or `"⌘K"`. */
+  shortcut?: string;
+  /** `sm` is `h-8`, `md` is `h-10`. Default `"sm"`. */
+  size?: keyof typeof sizeClasses;
+  /** `toolbar`: transparent until hover or focus, fixed width from `sm`. Default `"default"`. */
+  variant?: keyof typeof variantClasses;
+}
 
 const SearchInput = React.forwardRef<HTMLInputElement, SearchInputProps>(
-  ({ className, ...props }, ref) => {
+  (
+    {
+      label = "Search",
+      placeholder,
+      clearLabel = "Clear search",
+      shortcut,
+      size = "sm",
+      variant = "default",
+      className,
+      wrapperClassName,
+      ...props
+    },
+    ref,
+  ) => {
+    const showShortcut = Boolean(shortcut) && props.value.length === 0;
     return (
       <ClearInput
         ref={ref}
-        className={cn("h-8 pl-8 text-sm", className)}
+        aria-label={label}
+        placeholder={placeholder ?? label}
+        clearLabel={clearLabel}
+        enterKeyHint="search"
+        wrapperClassName={cn(variantClasses[variant].wrapper, wrapperClassName)}
+        className={cn(
+          sizeClasses[size].input,
+          variantClasses[variant].input,
+          showShortcut && "pr-12",
+          className,
+        )}
         leading={
-          <IconSearch
-            size={16}
-            className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 shrink-0 text-muted-foreground"
-          />
+          <>
+            <IconSearch
+              size={16}
+              className={cn(
+                "pointer-events-none absolute top-1/2 -translate-y-1/2 shrink-0 text-muted-foreground",
+                sizeClasses[size].icon,
+              )}
+            />
+            {showShortcut ? (
+              <Kbd className="absolute right-2 top-1/2 -translate-y-1/2">{shortcut}</Kbd>
+            ) : null}
+          </>
         }
         {...props}
       />

package/src/ui/select.tsx

@@ -2,6 +2,7 @@ import * as React from "react";
 import * as SelectPrimitive from "@radix-ui/react-select";
 import { IconCheck, IconChevronDown, IconChevronUp } from "@tabler/icons-react";
 import { cn } from "../utils/cn";
+import { fieldFocusClass } from "./_field-classes";
 import {
   floatingSurfaceAnimateClass,
   floatingSurfaceClass,
@@ -18,7 +19,8 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex h-10 w-full max-sm:min-w-0 items-center justify-between whitespace-nowrap rounded-field border border-border bg-field-background px-3.5 py-2 text-base sm:text-sm ring-offset-background placeholder:text-field-placeholder transition-[border-color,box-shadow,background-color] duration-200 ease-smooth focus-visible:border-focus-border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      "flex h-10 w-full max-sm:min-w-0 items-center justify-between whitespace-nowrap rounded-field border border-border bg-field-background px-3.5 py-2 text-base sm:text-sm ring-offset-background placeholder:text-field-placeholder transition-[border-color,box-shadow,background-color] duration-200 ease-smooth disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      fieldFocusClass,
       className,
     )}
     {...props}

package/src/ui/textarea.tsx

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { cn } from "../utils/cn";
+import { fieldFocusClass } from "./_field-classes";
 
 const Textarea = React.forwardRef<
   HTMLTextAreaElement,
@@ -8,7 +9,8 @@ const Textarea = React.forwardRef<
   return (
     <textarea
       className={cn(
-        "flex min-h-20 w-full max-sm:min-w-0 rounded-field border border-border bg-field-background px-3.5 py-2.5 text-base sm:text-sm placeholder:text-field-placeholder focus-visible:border-focus-border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring disabled:cursor-not-allowed disabled:opacity-50",
+        "flex min-h-20 w-full max-sm:min-w-0 rounded-field border border-border bg-field-background px-3.5 py-2.5 text-base sm:text-sm placeholder:text-field-placeholder disabled:cursor-not-allowed disabled:opacity-50",
+        fieldFocusClass,
         className,
       )}
       ref={ref}

package/src/ui/toolbar-search-input.tsx

@@ -1,8 +1,5 @@
 import * as React from "react";
-import { IconSearch, IconX } from "@tabler/icons-react";
-import { cn } from "../utils/cn";
-import { Button } from "./button";
-import { Input } from "./input";
+import { SearchInput } from "./search-input";
 
 export interface ToolbarSearchInputProps {
   value: string;
@@ -17,64 +14,21 @@ export interface ToolbarSearchInputProps {
   inputClassName?: string;
 }
 
-/**
- * Stable rounded search field for toolbars: no enter or clear animations, no
- * layout jump. The clear button stays mounted and is hidden while the value is
- * blank. Clearing does not move focus. The ref points at the `<input>`.
- */
+/** @deprecated Use `<SearchInput variant="toolbar">`. */
 export const ToolbarSearchInput = React.forwardRef<HTMLInputElement, ToolbarSearchInputProps>(
   function ToolbarSearchInput(
-    {
-      value,
-      onChange,
-      placeholder = "Search...",
-      label = "Search",
-      clearLabel = "Clear search",
-      className,
-      inputClassName,
-    },
+    { placeholder = "Search...", className, inputClassName, ...props },
     ref,
   ) {
-    const active = value.trim().length > 0;
-
     return (
-      <div className={cn("relative min-w-0 flex-1 sm:flex-none", className)}>
-        <IconSearch
-          size={14}
-          className="pointer-events-none absolute left-2.5 top-1/2 z-[1] -translate-y-1/2 text-muted-foreground"
-        />
-        <Input
-          ref={ref}
-          type="text"
-          value={value}
-          onChange={(event) => onChange(event.target.value)}
-          placeholder={placeholder}
-          aria-label={label}
-          enterKeyHint="search"
-          className={cn(
-            // match outline toolbar buttons beside it
-            "h-8 w-full min-w-0 rounded-lg border border-border bg-transparent pl-8 pr-8 text-sm shadow-none sm:w-44 md:w-52",
-            "placeholder:text-muted-foreground/70 hover:bg-default",
-            "focus-visible:border-border focus-visible:bg-default focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
-            inputClassName,
-          )}
-        />
-        <Button
-          type="button"
-          variant="ghost"
-          size="icon-sm"
-          aria-label={clearLabel}
-          tabIndex={active ? 0 : -1}
-          aria-hidden={!active}
-          className={cn(
-            "absolute right-0.5 top-1/2 z-[1] h-7 w-7 -translate-y-1/2 text-muted-foreground hover:text-foreground",
-            !active && "pointer-events-none opacity-0",
-          )}
-          onClick={() => onChange("")}
-        >
-          <IconX size={14} stroke={1.75} />
-        </Button>
-      </div>
+      <SearchInput
+        ref={ref}
+        variant="toolbar"
+        placeholder={placeholder}
+        wrapperClassName={className}
+        className={inputClassName}
+        {...props}
+      />
     );
   },
 );