@rebasepro/ui 0.12.1-canary.gf5f1d39 → 0.13.0

package/src/components/BooleanSwitch.tsx

@@ -2,6 +2,41 @@
 import React from "react";
 import { cls } from "../util";
 
+/**
+ * Switch geometry, one row per size: track w x h, knob k, and the knob's
+ * off/on x-offsets. `on` is always `w - k - inset` so the knob is inset by the
+ * same amount at both ends and vertically centred.
+ *
+ * This is a table rather than inline `cls({...})` conditions on purpose. The
+ * offsets used to be computed object keys — `[value ? "translate-x-[24px]" :
+ * "translate-x-[3px]"]: size === "large"` — and `large` and `medium` both
+ * produced the key `translate-x-[3px]` when off. The later literal overwrote
+ * the earlier, so the off-state class was silently dropped for `large` and the
+ * knob sat flush against the edge.
+ */
+const SWITCH_GEOMETRY = {
+    smallest: {
+        track: "w-[34px] h-[18px] min-w-[34px] min-h-[18px]",
+        knob: "w-[16px] h-[16px]", off: "translate-x-[1px]", on: "translate-x-[17px]",
+        bar: "w-[16px] h-[6px]", barX: "translate-x-[9px]"
+    },
+    small: {
+        track: "w-[38px] h-[22px] min-w-[38px] min-h-[22px]",
+        knob: "w-[18px] h-[18px]", off: "translate-x-[2px]", on: "translate-x-[18px]",
+        bar: "w-[18px] h-[8px]", barX: "translate-x-[10px]"
+    },
+    medium: {
+        track: "w-[44px] h-[26px] min-w-[44px] min-h-[26px]",
+        knob: "w-[20px] h-[20px]", off: "translate-x-[3px]", on: "translate-x-[21px]",
+        bar: "w-[20px] h-[10px]", barX: "translate-x-[12px]"
+    },
+    large: {
+        track: "w-[48px] h-[28px] min-w-[48px] min-h-[28px]",
+        knob: "w-[22px] h-[22px]", off: "translate-x-[3px]", on: "translate-x-[23px]",
+        bar: "w-[22px] h-[11px]", barX: "translate-x-[13px]"
+    }
+} as const;
+
 export type BooleanSwitchProps = {
     value: boolean | null;
     className?: string;
@@ -44,7 +79,11 @@ export const BooleanSwitch = React.forwardRef(function BooleanSwitch({
                     }
                 }}
             className={cls(
-                size === "smallest" ? "w-[34px] h-[18px] min-w-[34px] min-h-[18px]" : size === "small" ? "w-[38px] h-[22px] min-w-[38px] min-h-[22px]" : "w-[44px] h-[26px] min-w-[44px] min-h-[26px]",
+                // `large` used to share the `medium` branch, so the two sizes
+                // rendered identically and the prop looked inert. Geometry is
+                // now derived from one table (see SWITCH_GEOMETRY) so the knob
+                // inset is symmetric at every size.
+                SWITCH_GEOMETRY[size].track,
                 "outline-none outline-hidden rounded-full relative shadow-sm",
                 value ? (disabled
                     ? "bg-white bg-opacity-54 bg-white/54 dark:bg-surface-accent-950 border-surface-accent-100 dark:border-surface-accent-700 ring-1 ring-surface-accent-200 dark:ring-surface-accent-700"
@@ -58,14 +97,8 @@ export const BooleanSwitch = React.forwardRef(function BooleanSwitch({
                 className={cls(
                     "block rounded-full transition-transform duration-100 ease-out transform will-change-auto shadow-sm",
                     disabled ? "bg-surface-accent-400 dark:bg-surface-accent-600" : "bg-surface-accent-400 dark:bg-surface-accent-600",
-                    {
-                        "w-[21px] h-[10px]": size === "medium" || size === "large",
-                        "w-[19px] h-[8px]": size === "small",
-                        "w-[16px] h-[6px]": size === "smallest",
-                        "translate-x-[10px]": size === "medium" || size === "large",
-                        "translate-x-[9px]": size === "small",
-                        "translate-x-[8px]": size === "smallest"
-                    }
+                    SWITCH_GEOMETRY[size].bar,
+                    SWITCH_GEOMETRY[size].barX
                 )}
             />}
 
@@ -74,14 +107,8 @@ export const BooleanSwitch = React.forwardRef(function BooleanSwitch({
                 className={cls(
                     "block rounded-full transition-transform duration-100 ease-out transform will-change-auto shadow-sm",
                     disabled ? "bg-surface-accent-300 dark:bg-surface-accent-700" : (value ? "bg-white shadow" : "bg-surface-accent-600 dark:bg-surface-accent-400"),
-                    {
-                        "w-[21px] h-[21px]": size === "medium" || size === "large",
-                        "w-[19px] h-[19px]": size === "small",
-                        "w-[16px] h-[16px]": size === "smallest",
-                        [value ? "translate-x-[19px]" : "translate-x-[3px]"]: size === "medium" || size === "large",
-                        [value ? "translate-x-[17px]" : "translate-x-[2px]"]: size === "small",
-                        [value ? "translate-x-[16px]" : "translate-x-[1px]"]: size === "smallest"
-                    }
+                    SWITCH_GEOMETRY[size].knob,
+                    value ? SWITCH_GEOMETRY[size].on : SWITCH_GEOMETRY[size].off
                 )}
             />}
         </button>;

package/src/components/BooleanSwitchWithLabel.tsx

@@ -1,6 +1,7 @@
 "use client";
 import React from "react";
 import {
+    controlHeightMixin,
     fieldBackgroundDisabledMixin,
     fieldBackgroundHoverMixin,
     fieldBackgroundMixin,
@@ -72,12 +73,11 @@ export const BooleanSwitchWithLabel = function BooleanSwitchWithLabel({
                 "rounded-lg max-w-full justify-between box-border relative inline-flex items-center",
                 !invisible && focus && !disabled ? focusedClasses : "",
                 error ? "text-red-500 dark:text-red-600" : (focus && !disabled ? "text-primary" : (!disabled ? "text-text-primary dark:text-text-primary-dark" : "text-text-secondary dark:text-text-secondary-dark")),
-                {
-                    "min-h-[28px]": size === "smallest",
-                    "min-h-[32px]": size === "small",
-                    "min-h-[44px]": size === "medium",
-                    "min-h-[64px]": size === "large"
-                },
+                // The one control size scale — 28/32/40/48. This component still
+                // carried its own map (…/44/64), so a switch at `large` stood
+                // 16px taller than the text field beside it, which read as a
+                // giant empty box once the label moved out of the control.
+                controlHeightMixin[size],
                 size === "small" || size === "smallest" ? "pl-2" : "pl-4",
                 size === "small" || size === "smallest" ? "pr-4" : "pr-6",
                 position === "end" ? "flex-row-reverse" : "flex-row",

package/src/components/Button.tsx

@@ -1,13 +1,14 @@
 "use client";
 import React from "react";
 import { cls } from "../util";
+import { type ButtonSize, controlHeightMixin, controlPaddingMixin } from "../styles";
 
 export type ButtonProps<C extends React.ElementType = "button"> = {
     children?: React.ReactNode;
     variant?: "filled" | "outlined" | "text";
     disabled?: boolean;
     color?: "primary" | "secondary" | "text" | "error" | "neutral";
-    size?: "small" | "medium" | "large" | "xl" | "2xl";
+    size?: ButtonSize;
     startIcon?: React.ReactNode;
     fullWidth?: boolean;
     className?: string;
@@ -41,21 +42,21 @@ const ButtonInner = React.memo(React.forwardRef<
         // Filled Variants
         "border border-primary bg-primary focus:ring-primary text-white hover:text-white hover:brightness-105": variant === "filled" && color === "primary" && !disabled,
         "border border-secondary bg-secondary focus:ring-secondary text-white hover:text-white hover:brightness-105": variant === "filled" && color === "secondary" && !disabled,
-        "border border-red-500 bg-red-500 hover:bg-red-600 focus:ring-red-500 text-white hover:text-white": variant === "filled" && color === "error" && !disabled,
+        "border border-red-600 bg-red-600 hover:bg-red-700 focus:ring-red-600 text-white hover:text-white": variant === "filled" && color === "error" && !disabled,
         "border border-surface-accent-200 bg-surface-accent-200 hover:bg-surface-accent-300 focus:ring-surface-accent-400 text-text-primary hover:text-text-primary dark:border-surface-accent-700 dark:bg-surface-accent-700 dark:hover:bg-surface-accent-600 dark:text-text-primary-dark hover:dark:text-text-primary-dark": variant === "filled" && color === "text" && !disabled,
         "border border-transparent bg-surface-100 hover:bg-surface-accent-200 text-text-primary dark:bg-surface-700 dark:hover:bg-surface-accent-700 dark:text-text-primary-dark hover:text-text-primary dark:text-text-primary-dark hover:dark:text-text-primary-dark": variant === "filled" && color === "neutral" && !disabled,
 
         // Text Variants
         "border border-transparent text-primary hover:text-primary hover:bg-surface-accent-200 hover:bg-opacity-75 hover:bg-surface-accent-200/75 dark:hover:bg-surface-accent-800": variant === "text" && color === "primary" && !disabled,
         "border border-transparent text-secondary hover:text-secondary hover:bg-surface-accent-200 hover:bg-opacity-75 hover:bg-surface-accent-200/75 dark:hover:bg-surface-accent-800": variant === "text" && color === "secondary" && !disabled,
-        "border border-transparent text-red-500 hover:text-red-500 hover:bg-red-500 hover:bg-opacity-10 hover:bg-red-500/10": variant === "text" && color === "error" && !disabled,
+        "border border-transparent text-red-600 hover:text-red-600 hover:bg-red-600 hover:bg-opacity-10 hover:bg-red-600/10": variant === "text" && color === "error" && !disabled,
         "border border-transparent text-text-primary hover:text-text-primary dark:text-text-primary-dark hover:dark:text-text-primary-dark hover:bg-surface-accent-200 hover:bg-opacity-75 hover:bg-surface-accent-200/75 dark:hover:bg-surface-accent-800": variant === "text" && color === "text" && !disabled,
         "border border-transparent text-text-primary hover:text-text-primary hover:bg-surface-accent-200 hover:bg-opacity-75 hover:bg-surface-accent-200/75 dark:text-text-primary-dark dark:hover:text-text-primary-dark dark:hover:bg-surface-accent-800": variant === "text" && color === "neutral" && !disabled,
 
         // Outlined Variants
         "border border-primary text-primary hover:text-primary hover:bg-primary-bg hover:bg-primary/10": variant === "outlined" && color === "primary" && !disabled,
         "border border-secondary text-secondary hover:text-secondary hover:bg-secondary-bg": variant === "outlined" && color === "secondary" && !disabled,
-        "border border-red-500 text-red-500 hover:text-red-500 hover:bg-red-500 hover:text-white": variant === "outlined" && color === "error" && !disabled,
+        "border border-red-500 text-red-600 hover:text-white hover:bg-red-600": variant === "outlined" && color === "error" && !disabled,
         "border border-surface-accent-400 text-text-primary hover:text-text-primary dark:text-text-primary-dark dark:border-surface-accent-600 hover:bg-surface-accent-200 hover:bg-opacity-75 hover:bg-surface-accent-200/75 dark:hover:bg-surface-accent-800": variant === "outlined" && color === "text" && !disabled,
         "border border-surface-300 text-text-primary hover:bg-surface-accent-200 hover:bg-opacity-75 hover:bg-surface-accent-200/75 dark:border-surface-600 dark:text-text-primary-dark dark:hover:bg-surface-accent-800": variant === "outlined" && color === "neutral" && !disabled,
 
@@ -66,15 +67,10 @@ const ButtonInner = React.memo(React.forwardRef<
         "border border-transparent bg-surface-300 dark:bg-surface-500 opacity-40 bg-surface-300/40 dark:bg-surface-500/40": variant === "filled" && disabled
     });
 
-    const sizeClasses = cls(
-        {
-            "py-1 px-2": size === "small",
-            "py-2 px-4": size === "medium",
-            "py-2.5 px-5": size === "large",
-            "py-3 px-6": size === "xl",
-            "py-4 px-10": size === "2xl"
-        }
-    );
+    // Height comes from the shared control scale (see styles.ts) so a Button
+    // and a TextField at the same `size` line up. Vertical padding is dropped:
+    // the button is an inline-flex box centring its content inside min-height.
+    const sizeClasses = cls("py-0", controlHeightMixin[size], controlPaddingMixin[size]);
 
     const iconColorClass = (color === "neutral" || color === "text") && !disabled
         ? "[&>svg]:text-surface-accent-500 dark:[&>svg]:text-surface-accent-300"

package/src/components/Checkbox.tsx

@@ -17,19 +17,29 @@ export interface CheckboxProps {
     "aria-label"?: string;
 }
 
+// Radius steps down with the box. `rounded-md` is 6px — on a 16-20px box that
+// is most of the edge, so the control reads as a squircle rather than a
+// checkbox. Box sizes match the icon glyph scale (16/16/20/24) so a Checkbox
+// sitting beside IconButtons in a table row is the same visual size.
 const sizeClasses = {
-    large: "w-6 h-6 rounded-md flex items-center justify-center",
-    medium: "w-5 h-5 rounded-md flex items-center justify-center",
-    small: "w-4 h-4 rounded-md flex items-center justify-center",
-    smallest: "w-4 h-4 rounded-md flex items-center justify-center"
+    large: "w-6 h-6 rounded flex items-center justify-center",
+    medium: "w-5 h-5 rounded flex items-center justify-center",
+    small: "w-4 h-4 rounded-sm flex items-center justify-center",
+    smallest: "w-4 h-4 rounded-sm flex items-center justify-center"
 };
 
+// Outer box is the hit area and sets the control's rendered height, so it
+// tracks the shared 28/32/40/48 scale. `smallest` used to reuse `small`'s
+// 32px box, which made the two sizes identical.
 const outerSizeClasses = {
     medium: "w-10 h-10",
     small: "w-8 h-8",
     large: "w-12 h-12 ",
-    smallest: "w-8 h-8"
+    smallest: "w-7 h-7"
 }
+// Flat p-2, as it always was. `shrink-0` on the box below is what stops it
+// being squashed; changing the padding here only shifts the control's optical
+// weight relative to the icons beside it.
 const paddingClasses = {
     medium: "p-2",
     small: "p-2",
@@ -82,7 +92,7 @@ export const Checkbox = React.memo(({
             )}>
                 <div
                     className={cls(
-                        "border-2 relative transition-colors ease-in-out duration-150",
+                        "border-2 shrink-0 relative transition-colors ease-in-out duration-150",
                         sizeClasses[size],
                         disabled
                             ? (indeterminate || isChecked ? "bg-surface-accent-400 dark:bg-surface-accent-600" : "bg-surface-accent-400 dark:bg-surface-accent-600")

package/src/components/Chip.tsx

@@ -16,11 +16,14 @@ export interface ChipProps {
     style?: React.CSSProperties;
 }
 
+// `small` and `medium` used to differ only in horizontal padding, so both
+// rendered at the same height and the step was invisible. Vertical rhythm now
+// increases across the whole scale.
 const sizeClassNames = {
     smallest: "px-1.5 py-px text-[10px]",
     small: "px-2 py-0.5 text-xs",
-    medium: "px-2.5 py-0.5 text-xs",
-    large: "px-3 py-1 text-xs"
+    medium: "px-2.5 py-1 text-xs",
+    large: "px-3 py-1.5 text-sm"
 }
 
 /**

package/src/components/ColorPicker.tsx

@@ -2,6 +2,7 @@
 import React from "react";
 import { CHIP_COLORS, cls } from "../util";
 import { ChipColorKey, ChipColorScheme } from "./Chip";
+import type { ChipTone } from "../util/chip_colors";
 import { CheckIcon } from "lucide-react";
 import { Tooltip } from "./Tooltip";
 
@@ -28,12 +29,16 @@ export interface ColorPickerProps {
     disabled?: boolean;
 }
 
-// Base colors in display order
+// Hues across, tones down — the arrangement the palette is built in.
 const BASE_COLORS = ["blue", "indigo", "violet", "purple", "fuchsia", "pink", "rose", "red", "orange", "yellow", "green", "emerald", "teal", "cyan", "gray"] as const;
 
+// Lightest first, matching how the bare hue name reads.
+const TONES: ChipTone[] = ["Lighter", "Light", "Dark", "Darker"];
+
 // Helper to get readable name from color key
-function getColorDisplayName(colorKey: ChipColorKey): string {
-    return `${colorKey.charAt(0).toUpperCase()}${colorKey.slice(1)}`;
+function getColorDisplayName(hue: string, tone: ChipTone): string {
+    const hueName = `${hue.charAt(0).toUpperCase()}${hue.slice(1)}`;
+    return tone === "Lighter" ? hueName : `${hueName} ${tone.toLowerCase()}`;
 }
 
 /**
@@ -80,48 +85,56 @@ export function ColorPicker({
                 </button>
             )}
 
-            <div className="flex flex-wrap gap-1.5">
-                {BASE_COLORS.map((base) => {
-                    const colorKey = base as ChipColorKey;
-                    const colorScheme = CHIP_COLORS[colorKey] as ChipColorScheme;
-                    const isSelected = value === colorKey;
-                    const displayName = getColorDisplayName(colorKey);
+            {/* One row per tone. Wrapping rather than a fixed 15-column grid:
+                the picker also opens inside narrow property panels, where
+                fifteen tracks would shrink each swatch to a few pixels. */}
+            {TONES.map((tone) => (
+                <div key={tone} className="flex flex-wrap gap-1.5">
+                    {BASE_COLORS.map((base) => {
+                        // The bare hue and its `Lighter` tone are the same
+                        // scheme; the picker offers the short name so configs
+                        // stay readable.
+                        const colorKey = (tone === "Lighter" ? base : `${base}${tone}`) as ChipColorKey;
+                        const colorScheme = CHIP_COLORS[colorKey] as ChipColorScheme;
+                        const isSelected = value === colorKey;
+                        const displayName = getColorDisplayName(base, tone);
 
-                    return (
-                        <Tooltip
-                            key={colorKey}
-                            title={displayName}
-                            delayDuration={300}
-                        >
-                            <button
-                                type="button"
-                                disabled={disabled}
-                                onClick={() => onChange(colorKey)}
-                                className={cls(
-                                    swatchSize,
-                                    "rounded-full transition-all flex items-center justify-center",
-                                    "hover:scale-110 hover:shadow-md",
-                                    "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1",
-                                    disabled && "opacity-50 cursor-not-allowed hover:scale-100",
-                                    isSelected && "ring-2 ring-primary ring-offset-1"
-                                )}
-                                style={{
-                                    backgroundColor: colorScheme.color
-                                }}
-                                aria-label={displayName}
-                                aria-pressed={isSelected}
+                        return (
+                            <Tooltip
+                                key={colorKey}
+                                title={displayName}
+                                delayDuration={300}
                             >
-                                {isSelected && (
-                                    <CheckIcon
-                                        size={checkSize}
-                                        style={{ color: colorScheme.text }}
-                                    />
-                                )}
-                            </button>
-                        </Tooltip>
-                    );
-                })}
-            </div>
+                                <button
+                                    type="button"
+                                    disabled={disabled}
+                                    onClick={() => onChange(colorKey)}
+                                    className={cls(
+                                        swatchSize,
+                                        "rounded-full transition-all flex items-center justify-center",
+                                        "hover:scale-110 hover:shadow-md",
+                                        "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1",
+                                        disabled && "opacity-50 cursor-not-allowed hover:scale-100",
+                                        isSelected && "ring-2 ring-primary ring-offset-1"
+                                    )}
+                                    style={{
+                                        backgroundColor: colorScheme.color
+                                    }}
+                                    aria-label={displayName}
+                                    aria-pressed={isSelected}
+                                >
+                                    {isSelected && (
+                                        <CheckIcon
+                                            size={checkSize}
+                                            style={{ color: colorScheme.text }}
+                                        />
+                                    )}
+                                </button>
+                            </Tooltip>
+                        );
+                    })}
+                </div>
+            ))}
         </div>
     );
 }

package/src/components/DateTimeField.tsx

@@ -55,6 +55,11 @@ export const DateTimeField: React.FC<DateTimeFieldProps> = ({
     const [isTyping, setIsTyping] = useState(false);
     const invalidValue = value !== undefined && value !== null && (!(value instanceof Date) || isNaN(value.getTime()));
 
+    // The calendar/clear adornments are IconButtons. Left at their default
+    // (`medium`, 40px) they floored the whole field at 40px, so smallest/small
+    // rendered identically to medium. Keep them a step below the field.
+    const adornmentSize = size === "large" ? "medium" : size === "medium" ? "small" : "smallest";
+
     useInjectStyles("DateTimeField", inputStyles);
 
     const handleClear = (e: React.MouseEvent) => {
@@ -231,8 +236,8 @@ hour12: false,
                     {
                         "min-h-[28px]": size === "smallest",
                         "min-h-[32px]": size === "small",
-                        "min-h-[44px]": size === "medium",
-                        "min-h-[64px]": size === "large"
+                        "min-h-[40px]": size === "medium",
+                        "min-h-[48px]": size === "large"
                     },
                     className
                 )}
@@ -251,7 +256,7 @@ hour12: false,
                                 ? focused
                                     ? "text-primary"
                                     : "text-text-secondary dark:text-text-secondary-dark"
-                                : "text-red-500 dark:text-red-500",
+                                : "text-red-600 dark:text-red-500",
                             disabled ? "opacity-50" : ""
                         )}
                         shrink={true}
@@ -276,16 +281,22 @@ hour12: false,
                         {
                             "min-h-[28px]": size === "smallest",
                             "min-h-[32px]": size === "small",
-                            "min-h-[44px]": size === "medium",
-                            "min-h-[64px]": size === "large"
+                            "min-h-[40px]": size === "medium",
+                            "min-h-[48px]": size === "large"
                         },
-                        label ? "pt-8 pb-2" : "py-2",
+                        // A flat py-2 (16px) plus the text-base line box floored
+                        // the field at 40px, so smallest/small/medium all
+                        // rendered the same height. Scale it with `size`.
+                        label
+                            ? "pt-8 pb-2"
+                            : { smallest: "py-0.5", small: "py-1", medium: "py-2", large: "py-3" }[size],
                         inputClassName,
                         disabled &&
                         "border border-transparent outline-hidden opacity-50 dark:opacity-50 text-surface-accent-600 dark:text-surface-accent-500"
                     )}
                 />
                 <IconButton
+                    size={adornmentSize}
                     onClick={(e) => {
                         e.stopPropagation();
                         inputRef.current?.showPicker();
@@ -296,6 +307,7 @@ hour12: false,
                 </IconButton>
                 {clearable && value && (
                     <IconButton
+                        size={adornmentSize}
                         onClick={handleClear}
                         className="absolute right-14 top-1/2 transform -translate-y-1/2 text-surface-accent-400 "
                     >

package/src/components/DialogActions.tsx

@@ -17,7 +17,9 @@ export function DialogActions({
     return <div
         className={cls(
             defaultBorderMixin,
-            "pt-2 pb-4 px-4 border-t flex flex-row items-center justify-end bottom-0 right-0 left-0 text-right z-2 gap-2",
+            // `shrink-0`: as a flex child at the foot of a column this bar must
+            // keep its height instead of being squeezed by the content above it.
+            "pt-2 pb-4 px-4 border-t flex flex-row items-center justify-end shrink-0 bottom-0 right-0 left-0 text-right z-2 gap-2",
             position,
             "bg-white bg-opacity-60 bg-white/60 dark:bg-surface-800 dark:bg-opacity-60 dark:bg-surface-800/60",
             translucent ? "backdrop-blur-sm" : "",

package/src/components/IconButton.tsx

@@ -16,19 +16,35 @@ export type IconButtonProps<C extends React.ElementType> =
 }
 
 const buttonClasses = "hover:bg-surface-accent-200 hover:bg-opacity-75 hover:bg-surface-accent-200/75 dark:hover:bg-surface-accent-800 hover:scale-[1.04] active:scale-95 transition-transform";
-const baseClasses = "inline-flex items-center justify-center p-2 text-sm font-medium focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 transition-colors ease-in-out duration-150";
+// `[&>svg]:shrink-0` is load-bearing: without it flex compresses the icon to
+// whatever width is left after padding, so an 18px icon in a 28px button
+// rendered 12x18 — visibly squashed rather than merely small.
+const baseClasses = "inline-flex items-center justify-center text-sm font-medium focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 transition-colors ease-in-out duration-150 [&>svg]:shrink-0";
 const colorClasses = "text-surface-accent-500 visited:text-surface-accent-500 dark:text-surface-accent-300 dark:visited:text-surface-accent-300";
+// Padding stays a flat p-2 (as it always was). Callers pass their own icon
+// sizes, so tightening it here shrinks the content box under an icon that was
+// sized for the old one and makes the icon overflow. `shrink-0` above is what
+// actually fixes the squashing — the icon keeps its own dimensions and simply
+// eats into the padding.
 const sizeClasses = {
-    medium: "w-10 !h-10 min-w-10 min-h-10",
-    small: "w-8 !h-8 min-w-8 min-h-8",
-    smallest: "w-7 !h-7 min-w-7 min-h-7",
-    large: "w-12 !h-12 min-w-12 min-h-12"
+    medium: "w-10 !h-10 min-w-10 min-h-10 p-2",
+    small: "w-8 !h-8 min-w-8 min-h-8 p-2",
+    smallest: "w-7 !h-7 min-w-7 min-h-7 p-2",
+    large: "w-12 !h-12 min-w-12 min-h-12 p-2"
 }
 const shapeClasses = {
     circular: "rounded-full",
     square: "rounded-md"
 }
 
+/** Icon size used when the caller doesn't set one on the child. */
+const defaultIconSize = {
+    smallest: 16,
+    small: 18,
+    medium: 20,
+    large: 24
+} as const;
+
 const IconButtonInner = <C extends React.ElementType = "button">({
                                                                      children,
                                                                      className,
@@ -44,6 +60,19 @@ const IconButtonInner = <C extends React.ElementType = "button">({
     const bgClasses = variant === "ghost" ? "bg-transparent" : "bg-surface-accent-200 bg-opacity-50 bg-surface-accent-200/50 dark:bg-surface-900 dark:bg-opacity-50 dark:bg-surface-900/50";
     const Component: React.ElementType<any> = component || "button";
     const isNativeButton = Component === "button";
+
+    // Give the icon a size that matches the button when the caller didn't pick
+    // one. Without this a bare <IconButton size="smallest"><PencilIcon/></…>
+    // renders lucide's 24px default inside a 28px button, so icon size ended up
+    // depending on whether each call site happened to pass one — which is what
+    // made a row of icon buttons look randomly sized. An explicit `size` on the
+    // child always wins.
+    const sizedChildren = React.Children.map(children, (child) => {
+        if (!React.isValidElement(child)) return child;
+        if ((child.props as { size?: unknown }).size !== undefined) return child;
+        return React.cloneElement(child as React.ReactElement<{ size?: number }>,
+            { size: defaultIconSize[size] });
+    });
     return (
         <Component
             type={isNativeButton ? "button" : undefined}
@@ -64,7 +93,7 @@ const IconButtonInner = <C extends React.ElementType = "button">({
                 sizeClasses[size],
                 className
             )}>
-            {children}
+            {sizedChildren}
         </Component>
     );
 };

package/src/components/Menubar.tsx

@@ -10,15 +10,26 @@ import { usePortalContainer } from "../hooks/PortalContainerContext";
 export function Menubar({
                             children,
                             onSelect,
+                            value,
+                            defaultValue,
+                            onValueChange,
                             className
                         }: {
     children: React.ReactNode,
     onSelect?: (event: React.SyntheticEvent) => void,
+    /** Value of the open menu, controlled. Pair with `onValueChange`. */
+    value?: string,
+    /** Value of the menu open on mount, uncontrolled. */
+    defaultValue?: string,
+    onValueChange?: (value: string) => void,
     className?: string
 }) {
     return (
         <MenubarPrimitive.Root
             onSelect={onSelect}
+            value={value}
+            defaultValue={defaultValue}
+            onValueChange={onValueChange}
             className={cls("z-10 flex bg-white dark:bg-surface-900 p-[3px] rounded-lg shadow-sm", className)}>
             {children}
         </MenubarPrimitive.Root>
@@ -26,10 +37,15 @@ export function Menubar({
 }
 
 export function MenubarMenu({
-                                children
-                            }: { children: React.ReactNode }) {
+                                children,
+                                value
+                            }: {
+    children: React.ReactNode,
+    /** Identifies this menu to the parent Menubar's `value`/`defaultValue`. */
+    value?: string
+}) {
     return (
-        <MenubarPrimitive.Menu>
+        <MenubarPrimitive.Menu value={value}>
             {children}
         </MenubarPrimitive.Menu>
     )

package/src/components/MultiSelect.tsx

@@ -224,12 +224,16 @@ export const MultiSelect = React.forwardRef<
                                 {
                                     "min-h-[28px]": size === "smallest",
                                     "min-h-[32px]": size === "small",
-                                    "min-h-[44px]": size === "medium",
-                                    "min-h-[64px]": size === "large"
+                                    "min-h-[40px]": size === "medium",
+                                    "min-h-[48px]": size === "large"
                                 },
                                 {
-                                    "py-1": size === "small" || size === "smallest",
-                                    "py-2": size === "medium" || size === "large"
+                                    // Kept tight so the min-height above governs:
+                                    // py-2 plus a medium Chip overflowed it and made
+                                    // smallest/small render at the same height.
+                                    "py-0": size === "smallest",
+                                    "py-0.5": size === "small",
+                                    "py-1": size === "medium" || size === "large"
                                 },
                                 {
                                     "px-2": size === "small" || size === "smallest",
@@ -256,7 +260,7 @@ export const MultiSelect = React.forwardRef<
                                             }
                                             return (
                                                 <Chip
-                                                    size={"medium"}
+                                                    size={size === "smallest" || size === "small" ? "smallest" : "small"}
                                                     key={String(value)}
                                                     className={cls("flex flex-row items-center p-1")}
                                                 >

package/src/components/SearchBar.tsx

@@ -22,7 +22,7 @@ interface SearchBarProps {
      * - "medium": 44px height (matches TextField medium)
      * @default "medium"
      */
-    size?: "smallest" | "small" | "medium";
+    size?: "smallest" | "small" | "medium" | "large";
     innerClassName?: string;
     className?: string;
     autoFocus?: boolean;
@@ -74,9 +74,11 @@ export function SearchBar({
     }, [onTextSearch]);
 
     // Height classes matching TextField sizes
-    const heightClass = size === "smallest" ? "h-8" : size === "small" ? "h-[36px]" : "h-[44px]";
-    const iconPaddingClass = size === "smallest" ? "px-2" : size === "small" ? "px-2" : "px-4";
-    const inputPaddingClass = size === "smallest" ? "pl-8" : size === "small" ? "pl-8" : "pl-12";
+    // Heights come from the shared control scale (styles.ts) so a SearchBar
+    // lines up with the Button and Select beside it in a toolbar.
+    const heightClass = { smallest: "h-[28px]", small: "h-[32px]", medium: "h-[40px]", large: "h-[48px]" }[size];
+    const iconPaddingClass = size === "smallest" || size === "small" ? "px-2" : size === "medium" ? "px-3" : "px-4";
+    const inputPaddingClass = size === "smallest" || size === "small" ? "pl-8" : size === "medium" ? "pl-10" : "pl-12";
 
     return (
         <div