Interactive Components

/**
 * Single-value slider with customizable range and styling
 * @param props - Slider configuration, value, and event handlers
 */
function Slider(props: SliderProps): JSX.Element;

/**
 * Range slider with start and end values for selecting ranges
 * @param props - Range slider configuration and value range
 */
function RangeSlider(props: RangeSliderProps): JSX.Element;

/**
 * Multi-handle slider for complex value selections
 * @param props - Multi-slider configuration with multiple handles
 */
function MultiSlider(props: MultiSliderProps): JSX.Element;

interface SliderProps extends SliderBaseProps {
  initialValue?: number;
  value?: number;
  onChange?: (value: number) => void;
  onRelease?: (value: number) => void;
}

interface RangeSliderProps extends SliderBaseProps {
  value?: NumberRange;
  defaultValue?: NumberRange;
  onChange?: (range: NumberRange) => void;
  onRelease?: (range: NumberRange) => void;
}

interface MultiSliderProps extends SliderBaseProps {
  defaultTrackIntent?: Intent;
  onButtonClick?: (state: MultiSliderState) => void;
  onButtonDoubleClick?: (state: MultiSliderState) => void;
  onButtonKeyDown?: (state: MultiSliderState, event: React.KeyboardEvent<HTMLElement>) => void;
  onButtonKeyUp?: (state: MultiSliderState, event: React.KeyboardEvent<HTMLElement>) => void;
  onButtonMouseDown?: (state: MultiSliderState, event: React.MouseEvent<HTMLElement>) => void;
  onButtonRelease?: (state: MultiSliderState) => void;
  children?: React.ReactNode;
}

interface SliderBaseProps extends Props {
  disabled?: boolean;
  intent?: Intent;
  labelPrecision?: number;
  labelRenderer?: boolean | ((value: number, opts?: { isHandleTooltip: boolean }) => string | JSX.Element);
  labelStepSize?: number;
  labelValues?: number[];
  max?: number;
  min?: number;
  showTrackFill?: boolean;
  stepSize?: number;
  vertical?: boolean;
}

type NumberRange = [number, number];

import { Slider, RangeSlider, MultiSlider, Intent } from "@blueprintjs/core";

// Basic slider
<Slider
  min={0}
  max={100}
  stepSize={5}
  value={value}
  onChange={(val) => setValue(val)}
  labelStepSize={20}
/>

// Range slider
<RangeSlider
  min={0}
  max={100}
  value={[20, 80]}
  onChange={(range) => setRange(range)}
  intent={Intent.PRIMARY}
/>

// Multi-slider with custom handles
<MultiSlider min={0} max={100}>
  <MultiSlider.Handle value={25} type="start" intent={Intent.SUCCESS} />
  <MultiSlider.Handle value={75} type="end" intent={Intent.DANGER} />
</MultiSlider>

/**
 * Inline editable text component with click-to-edit behavior
 * @param props - Editable text configuration, value, and event handlers
 */
function EditableText(props: EditableTextProps): JSX.Element;

interface EditableTextProps extends IntentProps, Props {
  alwaysRenderInput?: boolean;
  confirmOnEnterKey?: boolean;
  defaultValue?: string;
  disabled?: boolean;
  isEditing?: boolean;
  maxLength?: number;
  maxLines?: number;
  minLines?: number;
  minWidth?: number;
  multiline?: boolean;
  onCancel?: (value: string) => void;
  onChange?: (value: string) => void;
  onConfirm?: (value: string) => void;
  onEdit?: (value?: string) => void;
  placeholder?: string;
  selectAllOnFocus?: boolean;
  type?: string;
  value?: string;
}

import { EditableText, Intent } from "@blueprintjs/core";

// Basic editable text
<EditableText
  placeholder="Click to edit..."
  value={title}
  onChange={(value) => setTitle(value)}
  onConfirm={(value) => saveTitle(value)}
/>

// Multiline editable text
<EditableText
  multiline
  minLines={3}
  maxLines={10}
  value={description}
  onChange={(value) => setDescription(value)}
  intent={hasError ? Intent.DANGER : Intent.NONE}
/>

/**
 * Stackable panel navigation system for multi-level interfaces
 * @param props - Panel stack configuration and navigation
 */
function PanelStack(props: PanelStackProps): JSX.Element;

/**
 * Enhanced panel stack with improved performance and features
 * @param props - Enhanced panel stack configuration
 */
function PanelStack2(props: PanelStack2Props): JSX.Element;

interface PanelStackProps extends Props {
  initialPanel?: IPanel;
  onClose?: (removedPanel: IPanel) => void;
  onOpen?: (addedPanel: IPanel) => void;
  renderActivePanelOnly?: boolean;
  showPanelHeader?: boolean;
  stack?: IPanel[];
}

interface PanelStack2Props extends Props {
  initialPanel?: Panel;
  onClose?: (removedPanel: Panel) => void;
  onOpen?: (addedPanel: Panel) => void;
  renderActivePanelOnly?: boolean;
  showPanelHeader?: boolean;
  stack?: Panel[];
}

// Legacy panel interface (PanelStack)
interface IPanel {
  component: React.ComponentType<IPanelProps>;
  props?: any;
  title?: React.ReactNode;
  htmlTitle?: string;
}

interface IPanelProps {
  closePanel?: () => void;
  openPanel?: (panel: IPanel) => void;
}

// Enhanced panel interface (PanelStack2)
interface Panel {
  renderPanel: PanelRenderer;
  title?: React.ReactNode;
  htmlTitle?: string;
}

type PanelRenderer = (props: PanelProps) => React.ReactNode;

interface PanelProps {
  closePanel: () => void;
  openPanel: (panel: Panel) => void;
}

/**
 * Multi-option selection control with button-like appearance
 * @param props - Segmented control options and selection state
 */
function SegmentedControl(props: SegmentedControlProps): JSX.Element;

interface SegmentedControlProps extends Props {
  defaultValue?: string;
  disabled?: boolean;
  fill?: boolean;
  inline?: boolean;
  intent?: SegmentedControlIntent;
  large?: boolean;
  onValueChange?: (value: string, targetElement?: HTMLElement) => void;
  options: Array<OptionProps | string>;
  small?: boolean;
  value?: string;
}

type SegmentedControlIntent = Intent;

/**
 * Card containing a checkbox control with enhanced styling
 * @param props - Checkbox card configuration and state
 */
function CheckboxCard(props: CheckboxCardProps): JSX.Element;

/**
 * Card containing a radio button control with enhanced styling
 * @param props - Radio card configuration and state
 */
function RadioCard(props: RadioCardProps): JSX.Element;

/**
 * Card containing a switch control with enhanced styling
 * @param props - Switch card configuration and state
 */
function SwitchCard(props: SwitchCardProps): JSX.Element;

interface CheckboxCardProps extends ControlCardProps {
  defaultIndeterminate?: boolean;
  indeterminate?: boolean;
}

interface RadioCardProps extends ControlCardProps {
  value?: string | number;
}

interface SwitchCardProps extends ControlCardProps {
  innerLabel?: string;
  innerLabelChecked?: string;
}

interface ControlCardProps extends ControlProps {
  alignIndicator?: Alignment;
  compact?: boolean;
  elevation?: Elevation;
  showAsSelectedWhenChecked?: boolean;
}

/**
 * Collapsible section with header, content, and styling options
 * @param props - Section configuration, content, and collapse state
 */
function Section(props: SectionProps): JSX.Element;

/**
 * Section with card-like styling and elevation
 * @param props - Section card configuration and styling
 */
function SectionCard(props: SectionCardProps): JSX.Element;

interface SectionProps extends Props {
  collapseProps?: Partial<CollapseProps>;
  collapsible?: boolean;
  compact?: boolean;
  elevation?: SectionElevation;
  icon?: IconName | MaybeElement;
  isOpen?: boolean;
  onToggle?: (isOpen: boolean, event?: React.MouseEvent<HTMLElement>) => void;
  rightElement?: React.ReactNode;
  subtitle?: React.ReactNode;
  title?: React.ReactNode;
  titleRenderer?: (props: SectionProps, state: { isCollapsed: boolean; isOpen: boolean }) => React.ReactNode;
  children?: React.ReactNode;
}

interface SectionCardProps extends SectionProps {
  padded?: boolean;
}

type SectionElevation = Elevation;

import { 
  PanelStack2, 
  SegmentedControl, 
  CheckboxCard, 
  RadioCard, 
  SwitchCard, 
  Section, 
  SectionCard,
  Intent,
  Elevation 
} from "@blueprintjs/core";

// Panel stack navigation
const MainPanel = ({ openPanel }) => (
  <div>
    <h2>Main Panel</h2>
    <Button 
      text="Open Settings" 
      onClick={() => openPanel({ 
        title: "Settings",
        renderPanel: SettingsPanel 
      })}
    />
  </div>
);

<PanelStack2 
  initialPanel={{ 
    title: "Home",
    renderPanel: MainPanel 
  }}
/>

// Segmented control
<SegmentedControl
  options={[
    { label: "List", value: "list" },
    { label: "Grid", value: "grid" },
    { label: "Table", value: "table" }
  ]}
  value={viewMode}
  onValueChange={(value) => setViewMode(value)}
  intent={Intent.PRIMARY}
/>

// Control cards
<CheckboxCard
  label="Enable notifications"
  checked={notifications}
  onChange={(e) => setNotifications(e.target.checked)}
  elevation={Elevation.ONE}
/>

<RadioCard
  label="Premium Plan"
  value="premium"
  checked={plan === "premium"}
  onChange={() => setPlan("premium")}
/>

<SwitchCard
  label="Dark Mode"
  checked={darkMode}
  onChange={(e) => setDarkMode(e.target.checked)}
  innerLabel="Light"
  innerLabelChecked="Dark"
/>

// Collapsible sections
<Section
  title="Advanced Settings"
  icon="cog"
  collapsible
  isOpen={isAdvancedOpen}
  onToggle={(open) => setIsAdvancedOpen(open)}
>
  <div>Advanced configuration options...</div>
</Section>

<SectionCard
  title="User Profile"
  subtitle="Manage your account"
  elevation={Elevation.TWO}
  padded
>
  <div>User profile content...</div>
</SectionCard>

interface HandleProps extends Props {
  disabled?: boolean;
  htmlTitle?: string;
  intentAfter?: Intent;
  intentBefore?: Intent;
  interactionKind?: HandleInteractionKind;
  onChange?: (newValue: number) => void;
  onRelease?: (newValue: number) => void;
  type?: HandleType;
  value: number;
}

enum HandleInteractionKind {
  LOCK = "lock",
  PUSH = "push", 
  NONE = "none"
}

enum HandleType {
  FULL = "full",
  START = "start",
  END = "end"
}

/**
 * Toast notification component for temporary messages
 * @param props - Toast content, styling, and behavior configuration
 */
function Toast(props: ToastProps): JSX.Element;

/**
 * Enhanced toast component with additional features
 * @param props - Enhanced toast configuration
 */
function Toast2(props: ToastProps): JSX.Element;

/**
 * Toast management interface for creating and controlling toast notifications
 * Note: Toaster.create() is deprecated, use OverlayToaster.create() instead
 */
interface Toaster {
  show(props: ToastProps, key?: string): string;
  dismiss(key: string): void;
  clear(): void;
  getToasts(): ToastOptions[];
}

/**
 * Deprecated toast management utilities (use OverlayToaster instead)
 * @deprecated Use OverlayToaster.create() instead
 */
const Toaster: {
  create(props?: OverlayToasterProps, container?: HTMLElement): Toaster;
};

/**
 * Overlay-based toaster component for rendering toast notifications
 * @param props - Overlay toaster configuration
 */
function OverlayToaster(props: OverlayToasterProps): JSX.Element;

interface ToastProps extends IntentProps, Props {
  action?: ActionProps;
  icon?: IconName | MaybeElement;
  message: React.ReactNode;
  onDismiss?: (didTimeoutExpire: boolean) => void;
  timeout?: number;
}

interface ToastOptions extends ToastProps {
  key: string;
}

enum ToasterPosition {
  TOP = "top",
  TOP_LEFT = "top-left",
  TOP_RIGHT = "top-right", 
  BOTTOM = "bottom",
  BOTTOM_LEFT = "bottom-left",
  BOTTOM_RIGHT = "bottom-right"
}