@djangocfg/ui-core 2.1.556 → 2.1.558

package/src/components/select/combobox-async.tsx

@@ -11,6 +11,8 @@ import {
   Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList
 } from '../navigation/command';
 import { Popover, PopoverContent, PopoverTrigger } from '../overlay/popover';
+import { SELECT_TRIGGER_CLASS } from './trigger';
+import { useHighlight } from '../../hooks';
 
 export interface ComboboxAsyncOption {
   value: string
@@ -107,7 +109,7 @@ export function ComboboxAsync({
 }: ComboboxAsyncProps) {
   const t = useAppT()
   const [open, setOpen] = React.useState(false)
-  const scrollRef = React.useRef<HTMLDivElement>(null)
+  const highlight = useHighlight(open, value)
 
   const resolvedPlaceholder = placeholder ?? t('ui.select.placeholder')
   const resolvedSearchPlaceholder = searchPlaceholder ?? t('ui.select.search')
@@ -125,19 +127,6 @@ export function ComboboxAsync({
     )
   }, [options, seedOptions, value])
 
-  React.useEffect(() => {
-    if (scrollRef.current && open) {
-      const el = scrollRef.current
-      el.style.cssText = `
-        max-height: 300px !important;
-        overflow-y: auto !important;
-        overflow-x: hidden !important;
-        -webkit-overflow-scrolling: touch !important;
-        overscroll-behavior: contain !important;
-      `
-    }
-  }, [open])
-
   const handleSelect = React.useCallback(
     (currentValue: string) => {
       // Click again on the selected row → clear.
@@ -171,7 +160,7 @@ export function ComboboxAsync({
           role="combobox"
           aria-expanded={open}
           className={cn(
-            "w-full justify-between",
+            SELECT_TRIGGER_CLASS,
             !selectedOption && "text-muted-foreground",
             className
           )}
@@ -200,21 +189,26 @@ export function ComboboxAsync({
         </Button>
       </PopoverTrigger>
       <PopoverContent className="w-[var(--radix-popover-trigger-width)] p-0" align="start">
-        <Command shouldFilter={false} className="flex flex-col">
+        {/* Controlled so the highlight starts on the current selection rather
+            than the first row. `onValueChange` is mandatory with a controlled
+            `value`: cmdk then stores nothing itself and delegates every move to
+            it, so without it the arrow keys would not move the highlight. */}
+        <Command
+          shouldFilter={false}
+          value={highlight.value}
+          onValueChange={highlight.setValue}
+          className="flex flex-col"
+        >
           <CommandInput
             placeholder={resolvedSearchPlaceholder}
             className="shrink-0"
             value={searchValue}
             onValueChange={onSearchChange}
           />
-          <div
-            ref={scrollRef}
-            tabIndex={-1}
-            className="overflow-y-auto overflow-x-hidden"
-            style={{ maxHeight: '300px' }}
-            onWheel={(e) => e.stopPropagation()}
-          >
-            <CommandList className="!max-h-none !overflow-visible" style={{ pointerEvents: 'auto' }}>
+          {/* CommandList is the scroller (it caps itself to the popover's
+              available height) — do not wrap it in a scrolling div: that hands
+              the scrolling to a container cmdk cannot see. */}
+          <CommandList ref={highlight.listRef}>
               {isLoading && options.length === 0 ? (
                 <div className="flex items-center gap-2 px-3 py-6 text-sm text-muted-foreground">
                   <Loader2 className="h-4 w-4 animate-spin" />
@@ -223,7 +217,7 @@ export function ComboboxAsync({
               ) : options.length === 0 ? (
                 <CommandEmpty>{resolvedEmptyText}</CommandEmpty>
               ) : (
-                <CommandGroup className="!overflow-visible" style={{ pointerEvents: 'auto' }}>
+                <CommandGroup>
                   {options.map((option) => (
                     <CommandItem
                       key={option.value}
@@ -233,12 +227,6 @@ export function ComboboxAsync({
                       }}
                       disabled={option.disabled}
                     >
-                      <Check
-                        className={cn(
-                          "mr-2 h-4 w-4 shrink-0",
-                          value === option.value ? "opacity-100" : "opacity-0"
-                        )}
-                      />
                       {option.icon && <option.icon className="mr-2 h-4 w-4 shrink-0" />}
                       {renderOption ? (
                         renderOption(option)
@@ -259,12 +247,18 @@ export function ComboboxAsync({
                           )}
                         </div>
                       )}
+                    
+                      {/* Trailing and only when selected: an always-rendered
+                          `opacity-0` mark indents every row to hold space one
+                          row at most ever uses. Absent it, the label gets the
+                          full width; present, `shrink-0` stops the label's
+                          truncation exactly at the mark. */}
+                      {value === option.value && <Check className="ml-2 h-4 w-4 shrink-0" />}
                     </CommandItem>
                   ))}
                 </CommandGroup>
               )}
             </CommandList>
-          </div>
         </Command>
       </PopoverContent>
     </Popover>

package/src/components/select/combobox.tsx

@@ -4,7 +4,7 @@ import { Check, ChevronsUpDown } from 'lucide-react';
 import * as React from 'react';
 
 import { useAppT } from '@djangocfg/i18n';
-import { useStoredValue, type StorageType, type UseStoredValueOptions } from '../../hooks';
+import { useStoredValue, type StorageType, type UseStoredValueOptions, useHighlight } from '../../hooks';
 import { cn } from '../../lib/utils';
 import { Badge } from '../data/badge';
 import { Button } from '../forms/button';
@@ -12,6 +12,7 @@ import {
   Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList
 } from '../navigation/command';
 import { Popover, PopoverContent, PopoverTrigger } from '../overlay/popover';
+import { SELECT_TRIGGER_CLASS } from './trigger';
 
 export interface ComboboxOption {
   value: string
@@ -109,7 +110,6 @@ export function Combobox({
   const t = useAppT()
   const [open, setOpen] = React.useState(false)
   const [search, setSearch] = React.useState("")
-  const scrollRef = React.useRef<HTMLDivElement>(null)
 
   const storageOptions: UseStoredValueOptions | undefined =
     storageKey ? { storage: storageType ?? 'local', ttl: storageTtl } : undefined;
@@ -129,6 +129,8 @@ export function Combobox({
   // The effective selected value: prefer controlled, fall back to internal
   const value = controlledValue !== undefined ? controlledValue : internalValue;
 
+  const highlight = useHighlight(open, value)
+
   // autoSelectFromOptions: when options become available, validate stored value.
   // Runs whenever options change (async loads, filters, etc.)
   // Only acts when: storageKey is set, autoSelectFromOptions=true, options non-empty.
@@ -177,22 +179,6 @@ export function Combobox({
   const resolvedSearchPlaceholder = searchPlaceholder ?? t('ui.select.search')
   const resolvedEmptyText = emptyText ?? t('ui.select.noResults')
 
-  React.useEffect(() => {
-    if (scrollRef.current && open) {
-      const el = scrollRef.current
-      // No min-height here — list should hug its content when there
-      // are only a few options, otherwise an empty strip appears below
-      // the last item (reproducible with 2–3 options).
-      el.style.cssText = `
-        max-height: 300px !important;
-        overflow-y: auto !important;
-        overflow-x: hidden !important;
-        -webkit-overflow-scrolling: touch !important;
-        overscroll-behavior: contain !important;
-      `
-    }
-  }, [open])
-
   const selectedOption = React.useMemo(
     () => options.find((option) => option.value === value),
     [options, value]
@@ -270,7 +256,7 @@ export function Combobox({
             role="combobox"
             aria-expanded={open}
             className={cn(
-              "w-full justify-between",
+              SELECT_TRIGGER_CLASS,
               !value && "text-muted-foreground",
               className
             )}
@@ -290,29 +276,33 @@ export function Combobox({
         style={contentStyle}
         align="start"
       >
-        <Command shouldFilter={false} className="flex flex-col">
+        {/* The highlight is controlled so it STARTS on the current selection —
+            cmdk otherwise highlights the first item, and its open-time
+            `scrollIntoView` then parks an 80-entry list at the top with the
+            selected row far below the fold.
+            `onValueChange` is mandatory here, not decorative: for a controlled
+            `value` cmdk delegates every move to it and stores nothing itself,
+            so without it the arrow keys would not move the highlight at all. */}
+        <Command
+          shouldFilter={false}
+          value={highlight.value}
+          onValueChange={highlight.setValue}
+          className="flex flex-col"
+        >
           <CommandInput
             placeholder={resolvedSearchPlaceholder}
             className="shrink-0"
             value={search}
             onValueChange={setSearch}
           />
-          <div
-            ref={scrollRef}
-            tabIndex={-1}
-            className="overflow-y-auto overflow-x-hidden"
-            style={{
-              maxHeight: '300px',
-            }}
-            onWheel={(e) => {
-              e.stopPropagation()
-            }}
-          >
-            <CommandList className="!max-h-none !overflow-visible" style={{ pointerEvents: 'auto' }}>
+          {/* CommandList is the scroller — see its own note. It caps itself to
+              the popover's available height, so no wrapper is needed here and
+              none may be added: one would take the scrolling away from cmdk. */}
+          <CommandList ref={highlight.listRef}>
               {filteredOptions.length === 0 ? (
                 <CommandEmpty>{resolvedEmptyText}</CommandEmpty>
               ) : (
-                <CommandGroup className="!overflow-visible" style={{ pointerEvents: 'auto' }}>
+                <CommandGroup>
                   {filteredOptions.map((option) => (
                   <CommandItem
                     key={option.value}
@@ -324,19 +314,16 @@ export function Combobox({
                     }}
                     disabled={option.disabled}
                   >
-                    <Check
-                      className={cn(
-                        "mr-2 h-4 w-4 shrink-0",
-                        value === option.value ? "opacity-100" : "opacity-0"
-                      )}
-                    />
                     {option.icon && <option.icon className="mr-2 h-4 w-4 shrink-0" />}
                     {renderOption ? (
                       renderOption(option)
                     ) : (
                       <div className="flex flex-col flex-1 min-w-0">
                         <div className="flex items-center gap-2 truncate">
-                          <span className="truncate">{option.label}</span>
+                          {/* `title` rather than wrapping: a row is a label to
+                              scan, and a two-line one breaks both the vertical
+                              rhythm and the constant step of the arrow keys. */}
+                          <span className="truncate" title={option.label}>{option.label}</span>
                           {option.badge && (
                             <Badge variant="outline" className="text-xs shrink-0">
                               {option.badge}
@@ -350,12 +337,20 @@ export function Combobox({
                         )}
                       </div>
                     )}
+                    {/* Trailing, and rendered ONLY when selected — an
+                        always-present `opacity-0` placeholder indents every row
+                        by 24px to reserve space for a mark at most one of them
+                        ever shows. Absent, the label gets the full width;
+                        present, `shrink-0` makes the label's truncation stop
+                        exactly at the mark. */}
+                    {value === option.value && (
+                      <Check className="ml-2 h-4 w-4 shrink-0" />
+                    )}
                   </CommandItem>
                   ))}
                 </CommandGroup>
               )}
             </CommandList>
-          </div>
         </Command>
       </PopoverContent>
     </Popover>

package/src/components/select/country-select.tsx

@@ -15,6 +15,8 @@ import { Input } from '../forms/input';
 import { Popover, PopoverContent, PopoverTrigger } from '../overlay/popover';
 import { ScrollArea } from '../layout/scroll-area';
 import { Flag } from '../specialized/flag';
+import { SELECT_TRIGGER_MULTI_CLASS } from './trigger';
+import { useHighlight } from '../../hooks';
 
 export interface CountryOption {
   code: TCountryCode;
@@ -132,6 +134,7 @@ export function CountrySelect({
   moreItemsLabel = (count: number) => `+${count} more`,
 }: CountrySelectProps) {
   const [open, setOpen] = React.useState(false)
+  const highlight = useHighlight(open, value[0])
   const [search, setSearch] = React.useState("")
 
   // Resolve defaults
@@ -343,7 +346,7 @@ export function CountrySelect({
           role="combobox"
           aria-expanded={open}
           className={cn(
-            "w-full justify-between min-h-10 h-auto py-2",
+            SELECT_TRIGGER_MULTI_CLASS,
             className
           )}
           disabled={disabled}
@@ -355,14 +358,22 @@ export function CountrySelect({
         </Button>
       </PopoverTrigger>
       <PopoverContent className="w-[var(--radix-popover-trigger-width)] p-0" align="start">
-        <Command shouldFilter={false} className="flex flex-col">
+        {/* Controlled highlight. `onValueChange` is mandatory alongside it:
+            with a controlled `value` cmdk stores nothing itself and delegates
+            every move, so without it the arrow keys would not move the row. */}
+        <Command
+          shouldFilter={false}
+          value={highlight.value}
+          onValueChange={highlight.setValue}
+          className="flex flex-col"
+        >
           <CommandInput
             placeholder={resolvedSearchPlaceholder}
             className="shrink-0"
             value={search}
             onValueChange={setSearch}
           />
-          <CommandList className="max-h-[300px]">
+          <CommandList ref={highlight.listRef} className="max-h-[300px]">
             {filteredCountries.length === 0 ? (
               <CommandEmpty>{resolvedEmptyText}</CommandEmpty>
             ) : (
@@ -375,12 +386,6 @@ export function CountrySelect({
                       value={country.code}
                       onSelect={() => handleSelect(country.code)}
                     >
-                      <Check
-                        className={cn(
-                          "mr-2 h-4 w-4 shrink-0",
-                          isSelected ? "opacity-100" : "opacity-0"
-                        )}
-                      />
                       <Flag countryCode={country.code} rounded className="mr-2 h-4 w-6 shrink-0" />
                       <div className="flex flex-col flex-1 min-w-0">
                         <span className="truncate">{country.name}</span>
@@ -390,6 +395,13 @@ export function CountrySelect({
                           </span>
                         )}
                       </div>
+                    
+                      {/* Trailing and only when selected: an always-rendered
+                          `opacity-0` mark indents every row to hold space one
+                          row at most ever uses. Absent it, the label gets the
+                          full width; present, `shrink-0` stops the label's
+                          truncation exactly at the mark. */}
+                      {isSelected && <Check className="ml-2 h-4 w-4 shrink-0" />}
                     </CommandItem>
                   )
                 })}

package/src/components/select/language-select.tsx

@@ -16,6 +16,8 @@ import {
 import { Input } from '../forms/input';
 import { Popover, PopoverContent, PopoverTrigger } from '../overlay/popover';
 import { ScrollArea } from '../layout/scroll-area';
+import { SELECT_TRIGGER_CLASS } from './trigger';
+import { useHighlight } from '../../hooks';
 
 export interface LanguageOption {
   code: TLanguageCode;
@@ -146,6 +148,7 @@ export function LanguageSelect({
   moreItemsLabel = (count: number) => `+${count} more`,
 }: LanguageSelectProps) {
   const [open, setOpen] = React.useState(false)
+  const highlight = useHighlight(open, value[0])
   const [search, setSearch] = React.useState("")
 
   // Resolve defaults
@@ -377,7 +380,7 @@ export function LanguageSelect({
           role="combobox"
           aria-expanded={open}
           className={cn(
-            "w-full justify-between",
+            SELECT_TRIGGER_CLASS,
             // Single-select: a fixed-height pill (the Button size sets height).
             // Multiple: allow growth so wrapped badges aren't clipped — keep the
             // auto-height min behaviour, scaled to the chosen size.
@@ -401,7 +404,15 @@ export function LanguageSelect({
         className="w-auto min-w-[var(--radix-popover-trigger-width)] p-0 [--lang-min:11rem] [min-width:max(var(--radix-popover-trigger-width),var(--lang-min))]"
         align="start"
       >
-        <Command shouldFilter={false} className="flex flex-col">
+        {/* Controlled highlight. `onValueChange` is mandatory alongside it:
+            with a controlled `value` cmdk stores nothing itself and delegates
+            every move, so without it the arrow keys would not move the row. */}
+        <Command
+          shouldFilter={false}
+          value={highlight.value}
+          onValueChange={highlight.setValue}
+          className="flex flex-col"
+        >
           {showSearch && (
             <CommandInput
               placeholder={resolvedSearchPlaceholder}
@@ -410,7 +421,7 @@ export function LanguageSelect({
               onValueChange={setSearch}
             />
           )}
-          <CommandList className="max-h-[300px] overflow-y-auto">
+          <CommandList ref={highlight.listRef} className="max-h-[300px] overflow-y-auto">
             {filteredLanguages.length === 0 ? (
               <CommandEmpty>{resolvedEmptyText}</CommandEmpty>
             ) : (
@@ -423,12 +434,6 @@ export function LanguageSelect({
                       value={language.code}
                       onSelect={() => handleSelect(language.code)}
                     >
-                      <Check
-                        className={cn(
-                          "mr-2 h-4 w-4 shrink-0",
-                          isSelected ? "opacity-100" : "opacity-0"
-                        )}
-                      />
                       {showFlag && (
                         <LanguageFlag code={language.code} className="mr-2 h-3.5 w-5" rounded />
                       )}
@@ -445,6 +450,13 @@ export function LanguageSelect({
                           {language.code}
                         </span>
                       )}
+                    
+                      {/* Trailing and only when selected: an always-rendered
+                          `opacity-0` mark indents every row to hold space one
+                          row at most ever uses. Absent it, the label gets the
+                          full width; present, `shrink-0` stops the label's
+                          truncation exactly at the mark. */}
+                      {isSelected && <Check className="ml-2 h-4 w-4 shrink-0" />}
                     </CommandItem>
                   )
                 })}

package/src/components/select/multi-select-pro-async.tsx

@@ -24,6 +24,7 @@ import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, Command
 import { Popover, PopoverContent, PopoverTrigger } from '../overlay/popover';
 import { Separator } from '../layout/separator';
 import { cn } from '../../lib';
+import { SELECT_TRIGGER_MULTI_CLASS } from './trigger';
 
 // ==================== TYPES ====================
 
@@ -105,11 +106,11 @@ export interface MultiSelectProAsyncProps {
 // ==================== VARIANTS ====================
 
 const multiSelectVariants = cva(
-  "w-full justify-between min-h-10 h-auto py-2",
+  SELECT_TRIGGER_MULTI_CLASS,
   {
     variants: {
       variant: {
-        default: "border-input bg-background hover:bg-accent/50",
+        default: "border-border bg-background hover:bg-accent/50",
         secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
         destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
         inverted: "bg-primary text-primary-foreground hover:bg-primary/90",

package/src/components/select/multi-select-pro.tsx

@@ -11,6 +11,7 @@ import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, Command
 import { Popover, PopoverContent, PopoverTrigger } from '../overlay/popover';
 import { Separator } from '../layout/separator';
 import { cn } from '../../lib';
+import { SELECT_TRIGGER_MULTI_CLASS } from './trigger';
 
 // ==================== TYPES ====================
 
@@ -57,11 +58,11 @@ export interface MultiSelectProRef {
 // ==================== VARIANTS ====================
 
 const multiSelectVariants = cva(
-  "w-full justify-between min-h-10 h-auto py-2",
+  SELECT_TRIGGER_MULTI_CLASS,
   {
     variants: {
       variant: {
-        default: "border-input bg-background hover:bg-accent/50",
+        default: "border-border bg-background hover:bg-accent/50",
         secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
         destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
         inverted: "bg-primary text-primary-foreground hover:bg-primary/90",

package/src/components/select/multi-select.tsx

@@ -12,6 +12,7 @@ import {
     Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList
 } from '../navigation/command';
 import { Popover, PopoverContent, PopoverTrigger } from '../overlay/popover';
+import { SELECT_TRIGGER_MULTI_CLASS } from './trigger';
 
 export interface MultiSelectOption {
   value: string
@@ -78,7 +79,6 @@ export function MultiSelect({
   const t = useAppT()
   const [open, setOpen] = React.useState(false)
   const [search, setSearch] = React.useState("")
-  const scrollRef = React.useRef<HTMLDivElement>(null)
 
   const storageOptions: UseStoredValueOptions | undefined =
     storageKey ? { storage: storageType ?? 'local', ttl: storageTtl } : undefined;
@@ -137,19 +137,6 @@ export function MultiSelect({
     autoSelectApplied.current = false;
   }, [storageKey]);
 
-  React.useEffect(() => {
-    if (scrollRef.current && open) {
-      const el = scrollRef.current
-      el.style.cssText = `
-        max-height: 300px !important;
-        overflow-y: scroll !important;
-        overflow-x: hidden !important;
-        -webkit-overflow-scrolling: touch !important;
-        overscroll-behavior: contain !important;
-      `
-    }
-  }, [open])
-
   const selectedOptions = React.useMemo(
     () => options.filter((option) => value.includes(option.value)),
     [options, value]
@@ -235,7 +222,7 @@ export function MultiSelect({
           role="combobox"
           aria-expanded={open}
           className={cn(
-            "w-full justify-between min-h-10 h-auto py-2",
+            SELECT_TRIGGER_MULTI_CLASS,
             className
           )}
           disabled={disabled}
@@ -254,23 +241,16 @@ export function MultiSelect({
             value={search}
             onValueChange={setSearch}
           />
-          <div
-            ref={scrollRef}
-            tabIndex={-1}
-            className="overflow-y-scroll overflow-x-hidden"
-            style={{
-              maxHeight: '300px',
-              minHeight: '100px',
-            }}
-            onWheel={(e) => {
-              e.stopPropagation()
-            }}
-          >
-            <CommandList className="!max-h-none !overflow-visible" style={{ pointerEvents: 'auto' }}>
+          {/* CommandList is the scroller (it caps itself to the popover's
+              available height) — never wrap it in a scrolling div, which hands
+              the scrolling to a container cmdk cannot see.
+              The min-height keeps the panel from collapsing to a sliver while a
+              narrow search still matches one row. */}
+          <CommandList className="min-h-[100px]">
               {filteredOptions.length === 0 ? (
                 <CommandEmpty>{resolvedEmptyText}</CommandEmpty>
               ) : (
-                <CommandGroup className="!overflow-visible" style={{ pointerEvents: 'auto' }}>
+                <CommandGroup>
                   {filteredOptions.map((option) => {
                     const isSelected = value.includes(option.value)
                     return (
@@ -304,7 +284,6 @@ export function MultiSelect({
                 </CommandGroup>
               )}
             </CommandList>
-          </div>
         </Command>
       </PopoverContent>
     </Popover>

package/src/components/select/select.tsx

@@ -66,7 +66,7 @@ const SelectTrigger = React.forwardRef<
     className={cn(
       "flex items-center justify-between whitespace-nowrap text-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none disabled:cursor-not-allowed disabled:opacity-50",
       variant === "default" &&
-        "h-10 w-full rounded-[var(--radius)] border border-input bg-transparent px-3 py-2 shadow-sm focus:ring-1 focus:ring-ring",
+        "h-10 w-full rounded-[var(--radius)] border border-border bg-transparent px-3 py-2 shadow-sm focus:ring-1 focus:ring-ring",
       variant === "ghost" &&
         "rounded-md px-2 py-0.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground data-[state=open]:bg-muted data-[state=open]:text-foreground",
       className

package/src/components/select/trigger.ts

@@ -0,0 +1,23 @@
+/**
+ * The shared class list for a select-like trigger.
+ *
+ * Every picker in this folder renders its closed state as a `Button` — that is
+ * what gives it the focus ring, the border and the disabled handling for free.
+ * But a button is an ACTION, and `Button` styles it accordingly with
+ * `font-semibold`; a picker's closed state is a FIELD showing a value, and a
+ * value has no business being heavier than the label above it. Left alone the
+ * trigger rendered "Volkswagen" bolder than its own "Make" label, and the
+ * placeholder came out bold too.
+ *
+ * `font-normal` restores the weight `Input` uses — the control it actually
+ * belongs next to in a form. It sits here rather than in seven component files
+ * so the next picker inherits the decision instead of re-deciding it.
+ */
+export const SELECT_TRIGGER_CLASS = "w-full justify-between font-normal";
+
+/**
+ * The same, for pickers whose trigger grows with its content (chips, tags,
+ * multiple rows) instead of keeping a fixed control height.
+ */
+export const SELECT_TRIGGER_MULTI_CLASS =
+  "w-full justify-between font-normal min-h-10 h-auto py-2";

package/src/hooks/dom/index.ts

@@ -16,3 +16,4 @@ export { useResizeObserver } from './useResizeObserver';
 export type { Size } from './useResizeObserver';
 export { useFormReset } from './useFormReset';
 export type { UseFormResetParams } from './useFormReset';
+export { useHighlight } from './useHighlight';