Styling System

/**
 * Returns the namespace prefix for all Blueprint CSS classes
 * @returns Current CSS namespace (default: "bp5")
 */
function getClassNamespace(): string;

/**
 * Returns CSS class for alignment
 * @param alignment - Alignment value to convert to class
 * @returns CSS class string or undefined
 */
function alignmentClass(alignment: Alignment | undefined): string | undefined;

/**
 * Returns CSS class for elevation level
 * @param elevation - Elevation level to convert to class
 * @returns CSS class string or undefined
 */
function elevationClass(elevation: Elevation | undefined): string | undefined;

/**
 * Returns CSS class for icon name
 * @param iconName - Icon name to convert to class
 * @returns CSS class string or undefined
 */
function iconClass(iconName: string | undefined): string | undefined;

/**
 * Returns CSS class for intent styling
 * @param intent - Intent value to convert to class
 * @returns CSS class string or undefined
 */
function intentClass(intent: Intent | undefined): string | undefined;

/**
 * Returns CSS class for position
 * @param position - Position value to convert to class
 * @returns CSS class string or undefined
 */
function positionClass(position: Position | undefined): string | undefined;

/**
 * Returns CSS class for size with legacy prop support
 * @param size - Size value or HTML input size
 * @param legacyProps - Legacy large/small boolean props
 * @returns CSS class string or class object
 */
function sizeClass(
  size: Size | HTMLInputProps["size"],
  legacyProps: Partial<Record<"large" | "small", boolean>>
): string | Record<string, boolean>;

/**
 * Returns CSS class for button variant with legacy prop support
 * @param variant - Button variant value
 * @param legacyProps - Legacy minimal/outlined boolean props
 * @returns CSS class string or class object
 */
function variantClass(
  variant: ButtonVariant,
  legacyProps: Record<"minimal" | "outlined", boolean | undefined>
): string | Record<string, boolean>;

// State modifiers
const ACTIVE: string;
const DISABLED: string;
const LOADING: string;
const SELECTED: string;

// Layout modifiers  
const FILL: string;
const FIXED: string;
const FIXED_TOP: string;
const INLINE: string;
const VERTICAL: string;

// Size modifiers
const LARGE: string;
const SMALL: string;
const COMPACT: string;

// Style modifiers
const DARK: string;
const MINIMAL: string;
const OUTLINED: string;
const INTERACTIVE: string;
const ROUND: string;
const PADDED: string;
const MULTILINE: string;
const READ_ONLY: string;

// Alignment modifiers
const ALIGN_LEFT: string;
const ALIGN_RIGHT: string;

const POSITION_TOP: string;
const POSITION_BOTTOM: string;
const POSITION_LEFT: string;
const POSITION_RIGHT: string;

const ELEVATION_0: string;
const ELEVATION_1: string;
const ELEVATION_2: string;
const ELEVATION_3: string;
const ELEVATION_4: string;

const INTENT_PRIMARY: string;
const INTENT_SUCCESS: string;
const INTENT_WARNING: string;
const INTENT_DANGER: string;

const FOCUS_DISABLED: string;
const FOCUS_STYLE_MANAGER_IGNORE: string;

// Text utilities
const UI_TEXT: string;
const RUNNING_TEXT: string;
const MONOSPACE_TEXT: string;
const TEXT_LARGE: string;
const TEXT_SMALL: string;
const TEXT_MUTED: string;
const TEXT_DISABLED: string;
const TEXT_OVERFLOW_ELLIPSIS: string;

// Text elements
const BLOCKQUOTE: string;
const CODE: string;
const CODE_BLOCK: string;
const HEADING: string;
const LIST: string;
const LIST_UNSTYLED: string;
const RTL: string;

// Button classes
const BUTTON: string;
const BUTTON_GROUP: string;
const BUTTON_SPINNER: string;
const BUTTON_TEXT: string;

// Card classes  
const CARD: string;
const CARD_LIST: string;
const CARD_LIST_BORDERED: string;

// Dialog classes
const DIALOG: string;
const DIALOG_CONTAINER: string;
const DIALOG_HEADER: string;
const DIALOG_BODY: string;
const DIALOG_FOOTER: string;
const DIALOG_CLOSE_BUTTON: string;

// Form classes
const INPUT: string;
const INPUT_GROUP: string;
const INPUT_ACTION: string;
const TEXT_AREA: string;
const CONTROL: string;
const CONTROL_INDICATOR: string;
const CHECKBOX: string;
const RADIO: string;
const SWITCH: string;
const FILE_INPUT: string;
const FORM_GROUP: string;
const FORM_CONTENT: string;
const LABEL: string;

// Menu classes
const MENU: string;
const MENU_ITEM: string;
const MENU_DIVIDER: string;
const MENU_HEADER: string;

// Overlay classes
const OVERLAY: string;
const OVERLAY_BACKDROP: string;
const OVERLAY_CONTAINER: string;
const OVERLAY_CONTENT: string;
const POPOVER: string;
const POPOVER_ARROW: string;
const POPOVER_CONTENT: string;
const TOOLTIP: string;

// Navigation classes
const NAVBAR: string;
const NAVBAR_GROUP: string;
const NAVBAR_HEADING: string;
const NAVBAR_DIVIDER: string;
const BREADCRUMB: string;
const BREADCRUMBS: string;

// Data display classes
const TREE: string;
const TREE_NODE: string;
const TREE_NODE_CONTENT: string;
const TAG: string;
const TAG_REMOVE: string;
const PROGRESS_BAR: string;
const SPINNER: string;
const HTML_TABLE: string;

// Tab classes
const TAB: string;
const TAB_LIST: string;
const TAB_PANEL: string;
const TABS: string;

/**
 * Semantic color intents for consistent theming
 */
enum Intent {
  NONE = "none",
  PRIMARY = "primary",
  SUCCESS = "success", 
  WARNING = "warning",
  DANGER = "danger"
}

/**
 * Component size options
 */
enum Size {
  SMALL = "small",
  STANDARD = "standard",
  LARGE = "large"
}

/**
 * Shadow elevation levels
 */
enum Elevation {
  ZERO = 0,
  ONE = 1,
  TWO = 2,
  THREE = 3,
  FOUR = 4
}

/**
 * Positioning options
 */
enum Position {
  TOP = "top",
  BOTTOM = "bottom",
  LEFT = "left",
  RIGHT = "right",
  TOP_LEFT = "top-left",
  TOP_RIGHT = "top-right",
  BOTTOM_LEFT = "bottom-left", 
  BOTTOM_RIGHT = "bottom-right"
}

/**
 * Layout alignment options
 */
enum Alignment {
  CENTER = "center",
  LEFT = "left",
  RIGHT = "right",
  START = "start",
  END = "end"
}

/**
 * Text alignment options
 */
enum TextAlignment {
  LEFT = "left",
  CENTER = "center", 
  RIGHT = "right",
  JUSTIFY = "justify"
}

/**
 * Button styling variants
 */
enum ButtonVariant {
  SOLID = "solid",
  OUTLINED = "outlined",
  MINIMAL = "minimal"
}

/**
 * Complete color palette with semantic color names and hex values
 * Re-exported from @blueprintjs/colors package
 */
const Colors: {
  // Core grays
  BLACK: string;
  DARK_GRAY1: string;
  DARK_GRAY2: string;
  DARK_GRAY3: string;
  DARK_GRAY4: string;
  DARK_GRAY5: string;
  GRAY1: string;
  GRAY2: string;
  GRAY3: string;
  GRAY4: string;
  GRAY5: string;
  LIGHT_GRAY1: string;
  LIGHT_GRAY2: string;
  LIGHT_GRAY3: string;
  LIGHT_GRAY4: string;
  LIGHT_GRAY5: string;
  WHITE: string;

  // Intent colors
  BLUE1: string;
  BLUE2: string;
  BLUE3: string;
  BLUE4: string;
  BLUE5: string;
  GREEN1: string;
  GREEN2: string;
  GREEN3: string;
  GREEN4: string;
  GREEN5: string;
  ORANGE1: string;
  ORANGE2: string;
  ORANGE3: string;
  ORANGE4: string;
  ORANGE5: string;
  RED1: string;
  RED2: string;
  RED3: string;
  RED4: string;
  RED5: string;

  // Extended palette
  [key: string]: string;
};

/**
 * Removes non-HTML props from props object
 * @param props - Props object to filter
 * @param options - Filtering options
 * @returns Filtered props object
 */
function removeNonHTMLProps(
  props: Record<string, any>,
  options?: {
    shouldOmit?: (key: string, value: any) => boolean;
  }
): Record<string, any>;

/**
 * Display name prefix for Blueprint components
 */
const DISPLAYNAME_PREFIX: string;

import { Classes, Intent, Size, Elevation, Colors } from "@blueprintjs/core";
import classNames from "classnames";

// Using CSS classes
const buttonClasses = classNames(
  Classes.BUTTON,
  Classes.INTENT_PRIMARY,
  Classes.LARGE,
  { [Classes.ACTIVE]: isActive }
);

// Using utility functions
const intentClass = Classes.intentClass(Intent.SUCCESS); // "bp5-intent-success"
const elevationClass = Classes.elevationClass(Elevation.TWO); // "bp5-elevation-2"

// Using design tokens in styles
const customStyles = {
  backgroundColor: Colors.BLUE3,
  color: Colors.WHITE,
  fontSize: Size.LARGE === "large" ? "16px" : "14px"
};

// Component with custom styling
<div 
  className={classNames(
    Classes.CARD,
    Classes.ELEVATION_2,
    Classes.INTERACTIVE
  )}
  style={customStyles}
>
  Custom styled card
</div>

// Responsive class application
const getButtonClasses = (size: Size, intent: Intent, minimal: boolean) => 
  classNames(
    Classes.BUTTON,
    Classes.sizeClass(size, {}),
    Classes.intentClass(intent),
    { [Classes.MINIMAL]: minimal }
  );

/**
 * Utility function to detect dark theme
 * @param element - Element to check theme context
 * @returns True if dark theme is active
 */
function isDarkTheme(element?: Element): boolean;

// Theme-aware classes
const DARK: string; // Applied to containers for dark theme

/**
 * Focus style manager for controlling focus visibility
 */
class FocusStyleManager {
  /**
   * Returns whether focus styles are currently enabled
   */
  static isActive(): boolean;
  
  /**
   * Enables or disables focus styles
   */
  static setEnabled(enabled: boolean): void;
  
  /**
   * Determines if focus styles should be enabled based on interaction
   */
  static alwaysShowFocus(): boolean;
  
  /**
   * Resets focus styles to automatic detection mode
   */
  static autoDetectEnabled(): void;
}

import { Classes, FocusStyleManager, removeNonHTMLProps } from "@blueprintjs/core";

// Focus management
FocusStyleManager.setEnabled(false); // Disable focus styles
const isFocusEnabled = FocusStyleManager.isActive();

// Props filtering for HTML elements
const cleanProps = removeNonHTMLProps(props, {
  shouldOmit: (key) => key.startsWith("bp-")
});

// Custom component with Blueprint classes
const CustomCard = ({ elevation, interactive, ...htmlProps }) => (
  <div
    {...removeNonHTMLProps(htmlProps)}
    className={classNames(
      Classes.CARD,
      Classes.elevationClass(elevation),
      { [Classes.INTERACTIVE]: interactive }
    )}
  />
);

// Theme-aware styling
const ThemedComponent = () => {
  const isDark = isDarkTheme();
  
  return (
    <div className={classNames(Classes.CARD, { [Classes.DARK]: isDark })}>
      Theme-aware content
    </div>
  );
};