Types reference

The package only exports types that describe your data (options, columns, marks, preset keys, toast payloads, etc.). Component prop interfaces (ButtonProps, TableProps, SliderProps, …) are intentionally internal, if you ever need them in TypeScript, use React.ComponentProps<typeof Button> (or the specific component) instead.

Types are recommended to be imported from h2o-library/types so bundlers can elide them cleanly. The same symbols are also available from the root entry when convenient:

import type { TableColumn, SortDirection, TabItem } from "h2o-library/types";

import type { TableColumn, SortDirection, TabItem } from "h2o-library";

Tables

SortDirection

export type SortDirection = "asc" | "desc" | null;

Member	Type	Description
`(union)`	`"asc" \| "desc" \| null`	Sort direction for `Table`. `null` means unsorted.

TableColumn<T>

export interface TableColumn<T> {
  key: string;
  label: string;
  sortable?: boolean;
  minWidth?: string;
  maxWidth?: string;
  width?: string;
  render?: (value: unknown, row: T) => React.ReactNode;
}

Member	Type	Description
`key`	`string`	Field key on each row object.
`label`	`string`	Header label.
`sortable`	`boolean`	When true, column participates in sorting.
`minWidth`	`string`	Optional CSS min-width for the column.
`maxWidth`	`string`	Optional CSS max-width for the column.
`width`	`string`	Optional CSS width for the column.
`render`	`(value, row) => ReactNode`	Custom cell content; receives cell value and full row.

ExpandableTableColumn<T>

export interface ExpandableTableColumn<T> {
  key: string;
  label: string;
  sortable?: boolean;
  minWidth?: string;
  maxWidth?: string;
  width?: string;
  render?: (value: unknown, row: T) => React.ReactNode;
}

Member	Type	Description
`key`	`string`	Field key on each row object.
`label`	`string`	Header label.
`sortable`	`boolean`	When true, column participates in sorting.
`minWidth`	`string`	Optional CSS min-width for the column.
`maxWidth`	`string`	Optional CSS max-width for the column.
`width`	`string`	Optional CSS width for the column.
`render`	`(value, row) => ReactNode`	Custom cell content; receives cell value and full row.

Options & items

export interface DropdownOption {
  label: string;
  value: string;
  disabled?: boolean;
}

Member	Type	Description
`label`	`string`	Visible label in the list.
`value`	`string`	Submitted / controlled value.
`disabled`	`boolean`	Disables the option.

MultiSelectOption

export interface MultiSelectOption {
  label: string;
  value: string;
}

Member	Type	Description
`label`	`string`	Chip / list label.
`value`	`string`	Stable option value.

CompactMultiSelectOption

export interface CompactMultiSelectOption {
  label: string;
  value: string;
  disabled?: boolean;
}

Member	Type	Description
`label`	`string`	Visible text.
`value`	`string`	Stable id in the selection payload.
`disabled`	`boolean`	Greys out or skips the option.

RadioOption

export interface RadioOption {
  label: string;
  value: string;
  icon?: IconType;
  dot?: "active" | "inactive";
  disabled?: boolean;
  tooltip?: string;
  tooltipPosition?: TooltipPosition;
}

Member	Type	Description
`label`	`string`	Option title.
`value`	`string`	Emitted to `onChange` when selected.
`icon`	`IconType`	Optional leading icon.
`dot`	`"active" \| "inactive"`	Status dot when no icon.
`disabled`	`boolean`	Disables the option.
`tooltip`	`string`	Tooltip on the option row.
`tooltipPosition`	`TooltipPosition`	Tooltip placement.

SliderMark

export type SliderMark = { value: number; label?: string };

Member	Type	Description
`value`	`number`	Position on the slider scale.
`label`	`string`	Optional tick label.

export interface MultiMenuItem {
  label: string;
  value: string;
  onClick?: () => void;
  disabled?: boolean;
  subItems?: MultiMenuItem[];
}

Member	Type	Description
`label`	`string`	Menu item label.
`value`	`string`	Unique id among siblings.
`onClick`	`() => void`	Invoked when the item is activated (no sub-menu).
`disabled`	`boolean`	Disables the item.
`subItems`	`MultiMenuItem[]`	Nested fly-out items.

TabItem

export type TabItem = {
  label: string;
  value: string;
  disabled?: boolean;
};

Member	Type	Description
`label`	`string`	Tab label.
`value`	`string`	Selected tab value.
`disabled`	`boolean`	Disables the tab.

ContentSwitchOption

export type ContentSwitchOption = {
  label: string;
  value: string;
  icon?: IconType;
  disabled?: boolean;
};

Member	Type	Description
`label`	`string`	Segment label.
`value`	`string`	Segment value.
`icon`	`IconType`	Optional leading icon.
`disabled`	`boolean`	Disables the segment.

SegmentedToggleOption

export type SegmentedToggleOption = {
  label: string;
  value: string;
  icon?: IconType;
  iconProps?: React.SVGProps<SVGSVGElement> & {
    size?: number;
    strokeWidth?: number;
  };
  labelProps?: React.HTMLAttributes<HTMLSpanElement>;
  disabled?: boolean;
};

Member	Type	Description
`label`	`string`	Segment label.
`value`	`string`	Segment value.
`icon`	`IconType`	Optional icon name.
`iconProps`	`SVGProps<SVGSVGElement> & …`	Forwarded to the segment icon (`size`, `strokeWidth`, SVG attrs).
`labelProps`	`HTMLAttributes<HTMLSpanElement>`	Props for the label span.
`disabled`	`boolean`	Disables the segment.

LegendItem

export type LegendItem = {
  label: string;
  color: string;
  style?: LegendStyle;
};

Member	Type	Description
`label`	`string`	Legend entry label.
`color`	`string`	Swatch color (CSS color).
`onClick`	`() => void`	Optional click handler on the legend item.
`style`	`LegendStyle`	Swatch shape: line, dashed-line, rectangle, circle.

ChartKPI

export type ChartKPI = {
  label: string;
  value: string | number;
};

Member	Type	Description
`label`	`string`	KPI label.
`value`	`string \| number`	KPI value.

ChartType & ChartProps

export type ChartType = "bar" | "line" | "pie" | "heatmap";

export type ChartProps<T extends ChartType> = BaseChartProps & {
  data: BaseChartData[T];
} & (T extends "bar" ? BarChartSpecificProps : Record<string, never>);

Member	Type	Description
`ChartType`	`"bar" \| "line" \| "pie" \| "heatmap"`	Discriminant for the combined `Chart` component.
`data`	`BarChartDataPoint[] \| LineChartDataPoint[] \| …`	Shape depends on `type`; import point types from `h2o-library/charts`.
`layout / orientation / …`	`bar-only`	When `type` is `"bar"`, extra props such as `layout`, `orientation`, `rotateLabels`, `wrapLabels` apply.

CalendarMode

export type CalendarMode = "single" | "range";

Member	Type	Description
`(union)`	`"single" \| "range"`	Selection mode for `Calendar`.

ToastOptions

export interface ToastOptions {
  variant: ToastVariant;
  title: string;
  description?: string;
  primaryAction?: { label: string; action: () => void };
  secondaryAction?: { label: string; action: () => void };
  duration?: number;
}

Member	Type	Description
`variant`	`ToastVariant`	Toast style.
`title`	`string`	Heading.
`description`	`string`	Body text.
`primaryAction`	`{ label; action }`	Primary button.
`secondaryAction`	`{ label; action }`	Secondary button.
`duration`	`number`	Auto-dismiss ms; `0` disables.

Variants And Presets

Preset (DateRangePicker)

export type Preset =
  | "today"
  | "last_7_days"
  | "last_30_days"
  // …and other built-in preset keys
  | "custom";

Member	Type	Description
`(union)`	`string literal union`	Built-in range shortcuts for `DateRangePicker`. See source for the full list.

ToastVariant & ToastPosition

export type ToastVariant = "info" | "error" | "warning" | "success";

export type ToastPosition =
  | "top-right"
  | "top-left"
  | "bottom-right"
  | "bottom-left"
  | "top-center"
  | "bottom-center";

Member	Type	Description
`ToastVariant`	`"info" \| "error" \| "warning" \| "success"`	Visual style for `showToast`.
`ToastPosition`	`string union`	`ToastProvider` placement.

MessageVariant

export type MessageVariant = "info" | "muted" | "error" | "warning" | "success";

Member	Type	Description
`(union)`	`string union`	`Message` visual variant.

export type TooltipPosition = "top" | "bottom" | "left" | "right";

Member	Type	Description
`(union)`	`string union`	Preferred tooltip placement.

IconType

export type IconType =
  | "plus"
  | "minus"
  | "chevron-right"
  // …full union in h2o-library (see Icon docs)
  | "alert-triangle";

Member	Type	Description
`(union)`	`string literals`	All supported icon names. Import from `h2o-library` / `h2o-library/types`; see the [Icon](/docs/components/icon) page for the complete set.