@djangocfg/ui-core 2.1.602 → 2.1.603

package/README.md

@@ -51,7 +51,7 @@ import { UiProviders, Button, Card } from '@djangocfg/ui-core';
 | Group | Examples |
 |---|---|
 | `components/data/` | Avatar · AvatarGroup · Badge · BadgeOverflow · Card · Table · BalancedText · Skeleton · Stat · Status · Progress · CircularProgress · Carousel · Calendar · Toggle · ToggleGroup · RelativeTimeCard (`timeZone` prop) · Chart (subpath `/chart`) |
-| `components/forms/` | Button · DownloadButton · ButtonGroup · Input · InputGroup · InputAffix · InputOTP · OTPInput · PhoneInput · MaskInput · SegmentedInput · TagsInput · Textarea · Switch · Checkbox · CheckboxGroup · RadioGroup · Slider · Form · Field · Editable · SettingRow / SettingsBlock · DateField · TimeField · DateTimeField · MoneyField · FilterButton · FilterMenu · PopoverActionButton · TimePicker (legacy) |
+| `components/forms/` | Button · CONTROL_SIZE · DownloadButton · ButtonGroup · Input · InputGroup · InputAffix · InputOTP · OTPInput · PhoneInput · MaskInput · SegmentedInput · TagsInput · Textarea · Switch · Checkbox · CheckboxGroup · RadioGroup · Slider · Form · Field · Editable · SettingRow / SettingsBlock · DateField · TimeField · DateTimeField · MoneyField · FilterButton · FilterMenu · PopoverActionButton · TimePicker (legacy) |
 | `components/select/` | Select · Combobox · ComboboxAsync · MultiSelect · MultiSelectPro · CountrySelect · LanguageSelect · TimezoneSelect |
 | `components/feedback/` | Alert · Toast (sonner) · Banner · Empty · Preloader · Spinner |
 | `components/overlay/` | Dialog · AlertDialog · Drawer · Sheet · ResponsiveSheet · SidePanel · Popover · Tooltip · HoverCard |
@@ -61,6 +61,29 @@ import { UiProviders, Button, Card } from '@djangocfg/ui-core';
 | `components/specialized/` | CopyButton · CopyField · Kbd · Flag · ImageWithFallback · Item · TokenIcon · Portal · Presence · Primitive · VisuallyHidden |
 | `components/boundary/` | Boundary (error boundary, mounted by `UiProviders`) |
 
+### Control sizes
+
+`Button` and every field-like control read one height ladder,
+`CONTROL_SIZE` (`forms/control-size.ts`), so a row of them lines up at every
+size. Never write `h-9` / `h-10` on a control: read the map, or pass the size.
+
+| Size | Height | Button `size` | `Input` / `InputGroup` / `DateField` `inputSize` | `SelectTrigger` `size` |
+|---|---|---|---|---|
+| `xs` | 28px (`h-7`) | yes | yes | yes |
+| `sm` | 32px (`h-8`) | yes | yes | yes |
+| `default` | 36px (`h-9`) | yes | yes | yes |
+| `lg` | 44px (`h-11`) | yes | yes | yes |
+| `huge` | 56px (`h-14`) | yes | no | no |
+
+`Button` also has `icon` (36px square). Triggers built on `Button`
+(`Combobox`, `LanguageSelect`, `DatePicker`) take their height from the Button
+size; the multi-select triggers use `minHeight` so chips can wrap but never
+sit under the fixed control. Not on the ladder, on purpose: `FilterButton`
+(its `FilterBar` sets the height), OTP / segmented cells (square code cells),
+and `Textarea` (multi-line).
+`control-size.test.tsx` fails if `Button`, `Input` or `SelectTrigger` stop
+agreeing; the Storybook story `Controls / Alignment` draws the guide lines.
+
 ### MenuBuilder
 
 Declarative menus: pass `MenuItem[]` and a trigger, it renders through the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-core",
-  "version": "2.1.602",
+  "version": "2.1.603",
   "description": "Pure React UI component library without Next.js dependencies - for Electron, Vite, CRA apps",
   "keywords": [
     "ui-components",
@@ -120,19 +120,21 @@
     "dist",
     "src",
     "!src/**/*.stories.tsx",
+    "!src/**/*.test.{ts,tsx}",
     "!src/components/_gallery.tsx",
     "README.md",
     "LICENSE"
   ],
   "scripts": {
     "lint": "eslint .",
+    "test": "vitest run",
     "check": "tsc --noEmit && node scripts/check-preset-contrast.mjs && node scripts/check-docs.mjs",
     "check:contrast": "node scripts/check-preset-contrast.mjs",
     "check:docs": "node scripts/check-docs.mjs"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^2.1.602",
-    "@djangocfg/i18n": "^2.1.602",
+    "@djangocfg/api": "^2.1.603",
+    "@djangocfg/i18n": "^2.1.603",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
     "moment": "^2.30.1",
@@ -208,10 +210,10 @@
     "vaul": "1.1.2"
   },
   "devDependencies": {
-    "@djangocfg/api": "^2.1.602",
-    "@djangocfg/eslint-config": "^2.1.602",
-    "@djangocfg/i18n": "^2.1.602",
-    "@djangocfg/typescript-config": "^2.1.602",
+    "@djangocfg/api": "^2.1.603",
+    "@djangocfg/eslint-config": "^2.1.603",
+    "@djangocfg/i18n": "^2.1.603",
+    "@djangocfg/typescript-config": "^2.1.603",
     "@storybook/react-vite": "^10.5.0",
     "@types/node": "^24.13.3",
     "@types/react": "19.2.15",
@@ -219,7 +221,8 @@
     "lucide-react": "^0.545.0",
     "next": "^16.2.10",
     "storybook": "^10.5.0",
-    "typescript": "^5.9.3"
+    "typescript": "^5.9.3",
+    "vitest": "^4.1.10"
   },
   "publishConfig": {
     "access": "public"

package/src/components/data/toggle/index.tsx

@@ -6,6 +6,7 @@ import * as React from 'react';
 import * as TogglePrimitive from '@radix-ui/react-toggle';
 
 import { cn } from '../../../lib/utils';
+import { CONTROL_SIZE } from '../../forms/control-size';
 
 const toggleVariants = cva(
   "inline-flex items-center justify-center gap-2 rounded-[var(--radius)] text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
@@ -17,9 +18,9 @@ const toggleVariants = cva(
           "border border-border bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground",
       },
       size: {
-        default: "h-9 px-2 min-w-9",
-        sm: "h-8 px-1.5 min-w-8",
-        lg: "h-10 px-2.5 min-w-10",
+        default: cn(CONTROL_SIZE.default.height, "px-2 min-w-9"),
+        sm: cn(CONTROL_SIZE.sm.height, "px-1.5 min-w-8"),
+        lg: cn(CONTROL_SIZE.lg.height, "px-2.5 min-w-11"),
       },
     },
     defaultVariants: {

package/src/components/forms/button/index.tsx

@@ -8,6 +8,7 @@ import { Slot } from '@radix-ui/react-slot';
 
 import { cn } from '../../../lib/utils';
 import { Link } from '../../navigation/link';
+import { buttonSizeClass, CONTROL_SIZE } from '../control-size';
 
 const buttonVariants = cva(
   "inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-[var(--radius)] text-sm font-semibold transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
@@ -30,13 +31,16 @@ const buttonVariants = cva(
         ghost: "hover:bg-accent hover:text-accent-foreground",
         link: "text-primary underline-offset-4 hover:underline",
       },
+      // Height comes from the shared control ladder, so a Button at any size
+      // lines up with the Input / Select trigger of the same size. Only the
+      // corner radius is decided here.
       size: {
-        default: "h-9 px-4 py-2",
-        sm: "h-8 rounded-[var(--radius)] px-3 text-sm",
-        xs: "h-7 rounded-[var(--radius-sm)] px-2 py-1 text-xs",
-        lg: "h-11 rounded-[var(--radius)] px-8",
-        huge: "h-14 rounded-[var(--radius)] px-10 text-lg",
-        icon: "h-9 w-9",
+        default: buttonSizeClass('default'),
+        sm: cn(buttonSizeClass('sm'), "rounded-[var(--radius)]"),
+        xs: cn(buttonSizeClass('xs'), "rounded-[var(--radius-sm)]"),
+        lg: cn(buttonSizeClass('lg'), "rounded-[var(--radius)]"),
+        huge: cn(buttonSizeClass('huge'), "rounded-[var(--radius)]"),
+        icon: cn(CONTROL_SIZE.default.height, "w-9"),
       },
       // Most variants ship a baked-in `shadow`/`shadow-sm` for a lifted look.
       // `elevated={false}` flattens that (e.g. controls grouped inside a card —

package/src/components/forms/control-size.ts

@@ -0,0 +1,67 @@
+import { cn } from '../../lib/utils';
+
+/**
+ * The one height ladder every field-like control and `Button` reads.
+ *
+ * A row of `<Input/> <Select/> <Button/>` only lines up if each of them gets
+ * its height for the same size name from the same place. Two ladders drifting
+ * apart is invisible per component and obvious the moment they share a row, so
+ * a control never spells `h-9` / `h-10` itself — it reads this map.
+ *
+ * Tailwind reads complete class tokens only, so every entry is a literal
+ * string; never build one by interpolation.
+ *
+ * - `height` / `minHeight`: the shared token. `minHeight` is for triggers that
+ *   grow with their content (chips, tags) and must still never be shorter than
+ *   the fixed control of the same size.
+ * - `button`: horizontal padding and type size of a `Button` at this size.
+ * - `field`: horizontal and vertical padding and type size of a text field.
+ *   `default` keeps `text-base md:text-sm` so a phone does not zoom on focus.
+ *
+ * `huge` exists for `Button` only; no field has one.
+ */
+export const CONTROL_SIZE = {
+  xs: {
+    height: 'h-7',
+    minHeight: 'min-h-7',
+    button: 'px-2 py-1 text-xs',
+    field: 'px-2 py-0.5 text-xs',
+  },
+  sm: {
+    height: 'h-8',
+    minHeight: 'min-h-8',
+    button: 'px-3 text-sm',
+    field: 'px-2.5 py-1 text-sm',
+  },
+  default: {
+    height: 'h-9',
+    minHeight: 'min-h-9',
+    button: 'px-4 py-2',
+    field: 'px-3 py-1 text-base md:text-sm',
+  },
+  lg: {
+    height: 'h-11',
+    minHeight: 'min-h-11',
+    button: 'px-8',
+    field: 'px-4 py-2 text-base',
+  },
+  huge: {
+    height: 'h-14',
+    minHeight: 'min-h-14',
+    button: 'px-10 text-lg',
+  },
+} as const;
+
+/** Every size name on the ladder. */
+export type ControlSize = keyof typeof CONTROL_SIZE;
+
+/** The sizes a text field offers — the ladder without `huge`. */
+export type FieldControlSize = Exclude<ControlSize, 'huge'>;
+
+/** Height, padding and type size of a fixed-height field at `size`. */
+export const fieldSizeClass = (size: FieldControlSize = 'default'): string =>
+  cn(CONTROL_SIZE[size].height, CONTROL_SIZE[size].field);
+
+/** Height, padding and type size of a `Button` at `size`. */
+export const buttonSizeClass = (size: ControlSize = 'default'): string =>
+  cn(CONTROL_SIZE[size].height, CONTROL_SIZE[size].button);

package/src/components/forms/datetime-field/date-field.tsx

@@ -15,6 +15,7 @@ import { useIsTouch } from '../../../hooks/media';
 import { Popover, PopoverContent, PopoverTrigger } from '../../overlay/popover';
 import { Calendar } from '../../data/calendar/calendar';
 import { formatDateString, parseDateString } from './date-time-utils';
+import type { FieldControlSize } from '../control-size';
 import { NativeFieldShell, NATIVE_FIELD_INPUT_CLASS } from './native-field-shell';
 import { IconTrigger, PopoverChevron } from './popover-chevron';
 
@@ -49,6 +50,8 @@ export interface DateFieldProps {
    */
   id?: string;
 
+  /** Height from the shared control ladder — same names as `Input`'s `inputSize`. */
+  inputSize?: FieldControlSize;
   className?: string;
   align?: 'start' | 'center' | 'end';
   'aria-label'?: string;
@@ -67,6 +70,7 @@ export const DateField = React.forwardRef<HTMLInputElement, DateFieldProps>(
       showPopover,
       name,
       id,
+      inputSize,
       className,
       align = 'start',
       'aria-label': ariaLabel,
@@ -112,6 +116,7 @@ export const DateField = React.forwardRef<HTMLInputElement, DateFieldProps>(
           iconOpensPopover={withPopover}
           invalid={invalid}
           disabled={disabled}
+          inputSize={inputSize}
           className={className}
           popoverTrigger={
             withPopover ? (

package/src/components/forms/datetime-field/date-time-field.tsx

@@ -14,6 +14,7 @@ import { CalendarClock, Clock } from 'lucide-react';
 import * as React from 'react';
 
 import { cn } from '../../../lib/utils';
+import { CONTROL_SIZE, type FieldControlSize } from '../control-size';
 import { useIsTouch } from '../../../hooks/media';
 import { Popover, PopoverContent, PopoverTrigger } from '../../overlay/popover';
 import { Calendar } from '../../data/calendar/calendar';
@@ -58,6 +59,8 @@ export interface DateTimeFieldProps {
    */
   id?: string;
 
+  /** Height from the shared control ladder — same names as `Input`'s `inputSize`. */
+  inputSize?: FieldControlSize;
   className?: string;
   align?: 'start' | 'center' | 'end';
   'aria-label'?: string;
@@ -76,6 +79,7 @@ export const DateTimeField = React.forwardRef<HTMLInputElement, DateTimeFieldPro
       showPopover,
       name,
       id,
+      inputSize,
       className,
       align = 'start',
       'aria-label': ariaLabel,
@@ -120,6 +124,7 @@ export const DateTimeField = React.forwardRef<HTMLInputElement, DateTimeFieldPro
           iconOpensPopover={withPopover}
           invalid={invalid}
           disabled={disabled}
+          inputSize={inputSize}
           className={className}
           popoverTrigger={
             withPopover ? (
@@ -179,7 +184,7 @@ export const DateTimeField = React.forwardRef<HTMLInputElement, DateTimeFieldPro
             />
             {/* Time row: a full, comfortable field — not a cramped chip. The
               * label + clock icon sit left; the native time input fills the
-              * rest at the same height as the main field (h-10) so it's an easy
+              * rest at the default control height so it's an easy
               * tap/click target and reads as a real input. */}
             <div className="flex items-center gap-2 border-t p-3">
               <Clock className="size-4 shrink-0 text-muted-foreground" aria-hidden />
@@ -195,7 +200,8 @@ export const DateTimeField = React.forwardRef<HTMLInputElement, DateTimeFieldPro
                 className={cn(
                   // `--center` variant centers the native segments (see
                   // datetime-field.css); it sets its own display/justify.
-                  'native-datetime-input native-datetime-input--center ml-auto h-10 rounded-[var(--radius)]',
+                  'native-datetime-input native-datetime-input--center ml-auto rounded-[var(--radius)]',
+                  CONTROL_SIZE.default.height,
                   'border border-border bg-input px-4 text-base tabular-nums text-foreground shadow-sm md:text-sm',
                   'focus-visible:border-ring focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring',
                   'disabled:cursor-not-allowed disabled:opacity-50',

package/src/components/forms/datetime-field/native-field-shell.tsx

@@ -22,6 +22,7 @@
 import * as React from 'react';
 
 import { cn } from '../../../lib/utils';
+import { CONTROL_SIZE, type FieldControlSize } from '../control-size';
 
 export interface NativeFieldShellProps {
   /** Leading icon (lucide element). */
@@ -38,6 +39,8 @@ export interface NativeFieldShellProps {
    *  driven by the surrounding `Field` / `Form` layer. */
   invalid?: boolean;
   disabled?: boolean;
+  /** Height from the shared control ladder — same names as `Input`'s `inputSize`. */
+  inputSize?: FieldControlSize;
   className?: string;
   /** The native `<input>` element, already typed and wired by the field. */
   children: React.ReactNode;
@@ -71,7 +74,7 @@ export const NATIVE_FIELD_INPUT_CLASS = cn(
  * sharp Vercel/Linear look rather than a blurry halo.
  */
 export const NativeFieldShell = React.forwardRef<HTMLDivElement, NativeFieldShellProps>(
-  ({ icon, iconOpensPopover, invalid, disabled, className, children, popoverTrigger }, ref) => {
+  ({ icon, iconOpensPopover, invalid, disabled, inputSize = 'default', className, children, popoverTrigger }, ref) => {
     return (
       <div
         ref={ref}
@@ -79,7 +82,8 @@ export const NativeFieldShell = React.forwardRef<HTMLDivElement, NativeFieldShel
         data-disabled={disabled ? '' : undefined}
         aria-invalid={invalid || undefined}
         className={cn(
-          'flex h-10 w-full items-center gap-2 rounded-[var(--radius)] border bg-input px-3 shadow-sm',
+          CONTROL_SIZE[inputSize].height,
+          'flex w-full items-center gap-2 rounded-[var(--radius)] border bg-input px-3 shadow-sm',
           'transition-[color,background-color,border-color,box-shadow]',
           'border-border',
           // Crisp focus edge on the whole shell (border + 1px ring = ~2px clean

package/src/components/forms/datetime-field/time-field.tsx

@@ -14,6 +14,7 @@
 import { Clock } from 'lucide-react';
 import * as React from 'react';
 
+import type { FieldControlSize } from '../control-size';
 import { NativeFieldShell, NATIVE_FIELD_INPUT_CLASS } from './native-field-shell';
 
 export interface TimeFieldProps {
@@ -40,6 +41,8 @@ export interface TimeFieldProps {
    * the field a user actually focuses.
    */
   id?: string;
+  /** Height from the shared control ladder — same names as `Input`'s `inputSize`. */
+  inputSize?: FieldControlSize;
   className?: string;
   'aria-label'?: string;
 }
@@ -57,6 +60,7 @@ export const TimeField = React.forwardRef<HTMLInputElement, TimeFieldProps>(
       step,
       name,
       id,
+      inputSize,
       className,
       'aria-label': ariaLabel,
     },
@@ -79,6 +83,7 @@ export const TimeField = React.forwardRef<HTMLInputElement, TimeFieldProps>(
         icon={<Clock aria-hidden />}
         invalid={invalid}
         disabled={disabled}
+        inputSize={inputSize}
         className={className}
       >
         <input

package/src/components/forms/editable/index.tsx

@@ -3,6 +3,7 @@
 import * as React from "react";
 
 import { cn } from "../../../lib/utils";
+import type { FieldControlSize } from "../control-size";
 import { inputClass, TEXTAREA_CLASS } from "../input";
 
 // =============================================================================
@@ -45,7 +46,7 @@ export type EditablePreviewProps = React.ComponentPropsWithoutRef<"span">;
 
 export interface EditableInputProps extends Omit<React.ComponentPropsWithoutRef<"input">, "value" | "defaultValue"> {
   /** Density — matches the standalone Input's `inputSize`. Default: 'default'. */
-  inputSize?: 'default' | 'sm';
+  inputSize?: FieldControlSize;
 }
 
 export type EditableTextareaProps = Omit<React.ComponentPropsWithoutRef<"textarea">, "value" | "defaultValue">;

package/src/components/forms/input/index.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 
 import { useStoredValue, type StorageType, type UseStoredValueOptions } from '../../../hooks';
 import { cn } from '../../../lib/utils';
+import { fieldSizeClass, type FieldControlSize } from '../control-size';
 
 export interface InputProps extends React.ComponentProps<"input"> {
   /**
@@ -30,11 +31,14 @@ export interface InputProps extends React.ComponentProps<"input"> {
    */
   storageTtl?: number;
   /**
-   * Control height/density.
-   * - `default` — 40px (forms, standalone fields).
-   * - `sm` — 36px, smaller text (inline edits, dense rows, settings chips).
+   * Control height, from the shared ladder in `forms/control-size.ts` — the
+   * same name gives a `Button` and a `SelectTrigger` the same height.
+   * - `xs` — 28px.
+   * - `sm` — 32px.
+   * - `default` — 36px.
+   * - `lg` — 44px.
    */
-  inputSize?: 'default' | 'sm';
+  inputSize?: FieldControlSize;
   /**
    * Drop the field chrome — border, surface, rounding, focus ring — for an
    * input that sits inside a control that draws them itself (`InputGroup`).
@@ -76,8 +80,10 @@ const INPUT_CHROME =
 const INPUT_BASE = cn(INPUT_CORE, INPUT_CHROME);
 
 const INPUT_SIZE: Record<NonNullable<InputProps['inputSize']>, string> = {
-  default: "h-10 px-3 py-2 text-base md:text-sm",
-  sm: "h-9 px-2.5 py-1.5 text-sm",
+  xs: fieldSizeClass('xs'),
+  sm: fieldSizeClass('sm'),
+  default: fieldSizeClass('default'),
+  lg: fieldSizeClass('lg'),
 };
 
 /** Resolve the full input class for a given size. */
@@ -146,7 +152,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
     return (
       <input
         type={type}
-        className={cn(INPUT_CLASS, className)}
+        className={resolvedClass}
         ref={ref}
         defaultValue={storageKey && storedValue ? storedValue : defaultValue}
         onChange={storageKey ? handleChange : onChange}

package/src/components/forms/input-affix/index.tsx

@@ -3,6 +3,7 @@
 import * as React from 'react';
 
 import { cn } from '../../../lib/utils';
+import type { FieldControlSize } from '../control-size';
 import {
   InputGroup,
   InputGroupAddon,
@@ -41,11 +42,13 @@ export interface InputAffixProps
   suffix?: React.ReactNode;
   /** Applied to the group, so callers can size the whole control. */
   groupClassName?: string;
+  /** Height from the shared control ladder — same names as `Input`'s `inputSize`. */
+  inputSize?: FieldControlSize;
 }
 
 const InputAffix = React.forwardRef<HTMLInputElement, InputAffixProps>(
-  ({ prefix, suffix, className, groupClassName, ...props }, ref) => (
-    <InputGroup className={groupClassName}>
+  ({ prefix, suffix, className, groupClassName, inputSize, ...props }, ref) => (
+    <InputGroup className={groupClassName} inputSize={inputSize}>
       {prefix ? (
         <InputGroupAddon align="inline-start" aria-hidden="true">
           {prefix}

package/src/components/forms/input-group/index.tsx

@@ -5,10 +5,18 @@ import * as React from 'react';
 
 import { cn } from '../../../lib/utils';
 import { Button } from '../../forms/button';
+import { CONTROL_SIZE, type FieldControlSize } from '../control-size';
 import { Input } from '../../forms/input';
 import { Textarea } from '../../forms/textarea';
 
-function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
+function InputGroup({
+  className,
+  inputSize = "default",
+  ...props
+}: React.ComponentProps<"div"> & {
+  /** Height from the shared control ladder — the same name as `Input`'s `inputSize`. */
+  inputSize?: FieldControlSize
+}) {
   return (
     <div
       data-slot="input-group"
@@ -20,18 +28,12 @@ function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
         // nearly invisible next to a plain field's, and a focused money input
         // showed a crisp inner rectangle inside a ghost of an outer one.
         "group/input-group border-border bg-input shadow-xs relative flex w-full items-center rounded-[var(--radius)] border outline-none transition-[color,background-color,border-color,box-shadow]",
-        // Matches `Input`'s default size (h-10), not its `sm` one.
-        //
-        // This was `h-9`, which made a grouped input a row shorter than a bare
-        // `Input` or a `SelectTrigger` beside it — visible the moment a form
-        // puts a prefixed money field next to a plain select, and not
-        // attributable to either component from the outside. A wrapper that
-        // changes a control's height is a wrapper that cannot be dropped into
-        // an existing row.
-        //
-        // Use `className="h-9"` at the call site for the compact size, the
-        // same way `inputSize="sm"` is opted into rather than inherited.
-        "h-10 has-[>textarea]:h-auto",
+        // Height comes from the shared control ladder, the same map `Input` and
+        // `SelectTrigger` read, so a grouped input is never a row shorter or
+        // taller than a bare one beside it. A wrapper that changes a control's
+        // height cannot be dropped into an existing row.
+        CONTROL_SIZE[inputSize].height,
+        "has-[>textarea]:h-auto",
 
         // Variants based on alignment.
         //

package/src/components/forms/mask-input/index.tsx

@@ -3,6 +3,7 @@
 import * as React from "react";
 
 import { cn } from "../../../lib/utils";
+import { CONTROL_SIZE } from "../control-size";
 
 // =============================================================================
 // Types
@@ -458,7 +459,8 @@ const MaskInput = React.forwardRef<HTMLInputElement, MaskInputProps>(
         ref={composedRef}
         value={displayValue}
         className={cn(
-          "flex h-10 w-full rounded-[var(--radius)] border border-border bg-transparent px-3 py-2 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          CONTROL_SIZE.default.height,
+          "flex w-full rounded-[var(--radius)] border border-border bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
           className
         )}
         onChange={handleChange}

package/src/components/forms/phone-input/index.tsx

@@ -209,8 +209,7 @@ const PhoneInput = React.forwardRef<HTMLInputElement, PhoneInputProps>(
           <DropdownMenuTrigger asChild>
             <Button
               variant="outline"
-              size="sm"
-              className="h-10 px-3 rounded-r-none border-r-0 flex items-center gap-2"
+              className="px-3 rounded-r-none border-r-0 flex items-center gap-2"
               disabled={disabled}
             >
               <Flag countryCode={currentCountry.code} rounded className="h-3 w-4" />
@@ -227,7 +226,8 @@ const PhoneInput = React.forwardRef<HTMLInputElement, PhoneInputProps>(
                   placeholder={translations.searchCountries}
                   value={searchQuery}
                   onChange={(e) => setSearchQuery(e.target.value)}
-                  className="pl-8 h-8"
+                  inputSize="sm"
+                  className="pl-8"
                   autoFocus
                 />
               </div>

package/src/components/index.ts

@@ -12,6 +12,8 @@ export type { TouchSafeInputProps, TouchSafeTextareaProps, TouchSafeSelectProps
 export { Button, ButtonLink, buttonVariants } from './forms/button';
 export type { ButtonProps, ButtonLinkProps } from './forms/button';
 export { Input } from './forms/input';
+export { CONTROL_SIZE } from './forms/control-size';
+export type { ControlSize, FieldControlSize } from './forms/control-size';
 export { Textarea } from './forms/textarea';
 export { Label } from './forms/label';
 export { Checkbox } from './forms/checkbox';

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

@@ -10,6 +10,7 @@ import { LanguageFlag } from '../specialized/flag';
 import { Badge } from '../data/badge';
 import { Button } from '../forms/button';
 import { Checkbox } from '../forms/checkbox';
+import { CONTROL_SIZE } from '../forms/control-size';
 import {
   Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList
 } from '../navigation/command';
@@ -363,6 +364,14 @@ export function LanguageSelect({
   }
 
   // Dropdown variant (displayValue is memoized above, before the inline guard)
+  const triggerSize = size === 'sm' ? 'sm' : 'default';
+  // Single-select: a fixed-height pill (the Button size sets height).
+  // Multiple: allow growth so wrapped badges aren't clipped, never shorter than
+  // the fixed control of the same size.
+  const triggerSizeClass = multiple
+    ? cn('h-auto', CONTROL_SIZE[triggerSize].minHeight, size === 'sm' ? 'py-1' : 'py-2')
+    : size === 'sm' && 'text-xs';
+
   return (
     <Popover
       open={open}
@@ -376,19 +385,10 @@ export function LanguageSelect({
       <PopoverTrigger asChild>
         <Button
           variant="outline"
-          size={size === 'sm' ? 'sm' : 'default'}
+          size={triggerSize}
           role="combobox"
           aria-expanded={open}
-          className={cn(
-            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.
-            multiple
-              ? (size === 'sm' ? "min-h-8 h-auto py-1" : "min-h-10 h-auto py-2")
-              : (size === 'sm' ? "text-xs" : "h-10"),
-            className
-          )}
+          className={cn(SELECT_TRIGGER_CLASS, triggerSizeClass, className)}
           disabled={disabled}
         >
           <div className="flex-1 text-left overflow-hidden">

package/src/components/select/select.tsx

@@ -7,6 +7,7 @@ import * as SelectPrimitive from '@radix-ui/react-select';
 
 import { cn } from '../../lib/utils';
 import { Badge } from '../data/badge';
+import { CONTROL_SIZE, type FieldControlSize } from '../forms/control-size';
 
 /**
  * Radix `<Select.Item value="" />` is reserved (it's how Radix represents
@@ -59,14 +60,23 @@ const SelectTrigger = React.forwardRef<
      * status bar or toolbar where the trigger should read like a plain button.
      */
     variant?: "default" | "ghost";
+    /**
+     * Height from the shared control ladder (`forms/control-size.ts`): the same
+     * name as a `Button` or `Input` gives the same height. Ignored by `ghost`,
+     * which has no fixed height.
+     */
+    size?: FieldControlSize;
   }
->(({ className, children, icon: Icon, variant = "default", ...props }, ref) => (
+>(({ className, children, icon: Icon, variant = "default", size = "default", ...props }, ref) => (
   <SelectPrimitive.Trigger
     ref={ref}
     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-border bg-transparent px-3 py-2 shadow-sm focus:ring-1 focus:ring-ring",
+        cn(
+          CONTROL_SIZE[size].height,
+          "w-full rounded-[var(--radius)] border border-border bg-transparent px-3 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

@@ -1,3 +1,6 @@
+import { cn } from '../../lib/utils';
+import { CONTROL_SIZE } from '../forms/control-size';
+
 /**
  * The shared class list for a select-like trigger.
  *
@@ -19,5 +22,7 @@ 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";
+export const SELECT_TRIGGER_MULTI_CLASS = cn(
+  "w-full justify-between font-normal h-auto py-2",
+  CONTROL_SIZE.default.minHeight,
+);