Skip to main content

Icon Types

IconTheme

Theme variants for icon rendering.
type IconTheme = 'default' | 'solid' | 'mini'

IconPosition

Position of icon relative to content.
type IconPosition = 'right' | 'left'

SidebarIcon

Configuration for sidebar navigation icons.
type SidebarIcon = {
  path: string
  icon: IconSource
  title: string
  iconTheme: IconTheme
}

TableIcon

Icon type for table cells, can be a string or IconSource.
type TableIcon = string | IconSource

StepIcon

Icon configuration for step indicators.
type StepIcon = {
  name: string
  url: string
}

Button Types

ButtonVariant

Available button style variants.
type ButtonVariant =
  | 'warning'
  | 'primary'
  | 'secondary'
  | 'danger'
  | 'dark'
  | 'outline'
  | 'ghost'
  | 'selected'
  | 'dark-ghost'

ButtonFileType

File types supported by ButtonFile component.
type ButtonFileType = 'pdf' | 'xml' | 'png' | 'generic'

Status Types

Status

General status types for notifications and alerts.
type Status = 'success' | 'warning' | 'error' | 'info' | 'neutral'

StatusType

Color-based status types for tags and badges.
type StatusType =
  | 'grey'
  | 'green'
  | 'yellow'
  | 'red'
  | 'orange'
  | 'blue'
  | 'purple'
  | 'olive'
  | 'teal'
  | 'crimson'
  | 'blueViolet'
  | 'steelBlue'
  | 'empty'

FeedItemStatus

Status types for feed items and activity logs.
type FeedItemStatus = 'success' | 'failure' | 'run' | 'queued' | 'alert' | 'skip' | 'signed'

Data Types

AnyProp

Generic prop type that accepts various value types.
type AnyProp = string | number | object | boolean

SelectOption

Basic option structure for select inputs.
type SelectOption = {
  label: string
  value: AnyProp
}

DrawerOption

Extended option for drawer/dropdown menus with rich features.
type DrawerOption = SelectOption & {
  separator?: boolean
  destructive?: boolean
  selected?: boolean
  focused?: boolean
  icon?: IconSource | string | undefined
  rightIcon?: IconSource | undefined
  country?: string
  color?: StatusType
  picture?: string
  sandbox?: boolean
  iconClass?: string
  disabled?: boolean
  locked?: boolean
  groupBy?: string
  useAvatar?: boolean
  action?: Snippet<[DrawerOption]>
  flagPosition?: 'before' | 'after'
}

DrawerGroup

Configuration for grouping drawer options.
type DrawerGroup = {
  label: string
  slug: string
  emptyIcon?: IconSource
  emptyTitle?: string
  emptyDescription?: string
  hideCounter?: boolean
}

DataListItem

Label-value pair for data lists.
type DataListItem = {
  label: string
  value: string
}

Badge

Badge configuration with status color.
type Badge = {
  label: string
  status: StatusType
  dot?: boolean
}
Breadcrumb navigation item.
type Breadcrumb = {
  label: string
  url?: string
  country?: string
  copiable?: boolean
}

TabItem

Tab navigation item with optional indicators.
type TabItem = {
  label: string
  slug: string
  counter?: number
  check?: boolean
  warning?: boolean
}

Table Types

TableDataRow

Generic table row data structure.
type TableDataRow = { [key: string]: unknown }

TableAction

Action configuration for table rows.
type TableAction = DrawerOption & {
  slug?: string
}

TableSortBy

Sort direction for table columns.
type TableSortBy = '' | 'asc' | 'desc'

TableActionProp

Function type for generating row actions dynamically.
type TableActionProp = undefined | ((data: TableDataRow) => TableAction[])

TableGroupLabelProp

Function type for generating group labels.
type TableGroupLabelProp = undefined | ((data: TableDataRow) => string)

TableGroup

Grouped table data structure.
type TableGroup = {
  label: string
  rows: TableDataRow[]
}

TableField

Column configuration for legacy table components.
type TableField = {
  headerLabel: string
  slug: string
  sortable?: boolean
  grayed?: boolean
  formatter?: (data: TableDataRow) => string | number
  helperBadge?: (data: TableDataRow) => Badge | null
  helperStatus?: (data: TableDataRow) => FeedItemStatus | null
  helperIcons?: (data: TableDataRow) => TableIcon[]
  monospaced?: boolean
  nowrap?: boolean
  monospacedNums?: boolean
  rightAlign?: boolean
  isCountry?: boolean
  copy?: boolean
  style?: string
  status?: boolean
  noPadding?: boolean
}

Feed Types

FeedEvent

Event entry in activity feeds.
type FeedEvent = {
  status: {
    label: string
    type: StatusType
  }
  date: Date
  code?: string
  message?: string
}

FeedItemUser

User information for feed items.
type FeedItemUser = {
  name: string
  picture?: string
}

Company Types

Company

Company/organization data structure.
type Company = {
  id: string
  slug: string
  name: string
  country?: string
  logo_url?: string
  sandbox?: boolean
}

Date Utility Types

DatesFromToday

Pre-calculated date ranges relative to today.
type DatesFromToday = {
  today: Date
  startOfThisWeek: Date
  endOfThisWeek: Date
  startOfLastWeek: Date
  endOfLastWeek: Date
  startOfThisMonth: Date
  endOfThisMonth: Date
  startOfLastMonth: Date
  endOfLastMonth: Date
  startOfThisQuarter: Date
  endOfThisQuarter: Date
  startOfLastQuarter: Date
  endOfLastQuarter: Date
}

DataTable Types

The following types are used for DataTable configuration and are exported from @invopop/popui.

CellType

Available cell types for DataTable columns.
type CellType = 'text' | 'boolean' | 'tag' | 'date' | 'currency' | 'uuid' | 'custom'
See component-props for component prop interfaces.

Build docs developers (and LLMs) love