/**
 * Shared class fragments used across component variants.
 *
 * These exist so "what a focused control looks like" or "what a disabled
 * control looks like" is decided once, not re-typed in every `cva()` call. A
 * component that needs to deviate should still compose from here and override
 * the specific utility rather than starting from scratch.
 */

/** Keyboard focus ring. Uses `focus-visible` only — never on mouse click. */
export const focusRing =
  'outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:border-ring';

/** Consistent treatment for a disabled *action* (button, menu item, tab). */
export const disabledState =
  'disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50';

/**
 * Disabled treatment for a *form field*. Unlike {@link disabledState} it keeps
 * pointer events so the cursor can communicate why the field is inert.
 */
export const disabledField = 'disabled:cursor-not-allowed disabled:opacity-50';

/** Applied when a field fails validation (`aria-invalid`). */
export const invalidState =
  'aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40';

/** Sizes an icon rendered inside a control, so callers never set it manually. */
export const iconSizing =
  "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4";

/** The shared control height scale. Keeps buttons, inputs and selects aligned. */
export const controlHeights = {
  sm: 'h-8',
  md: 'h-9',
  lg: 'h-10',
} as const;

export type ControlSize = keyof typeof controlHeights;