Devkit general

type ActionButtonProps = { /** Button label text */ label?: string /** Shows a spinner on the trigger button */ loading?: boolean /** Disables the trigger button */ disabled?: boolean /** Additional class for the trigger button */ className?: string /** * Visual s…

type AddUserModalProps = { /** Controls whether the dialog is visible */ open: boolean /** Called when the user dismisses the modal (cancel or backdrop) */ onClose: VoidFunction /** List of assignable roles rendered in the role select drop-down */ roles: RoleOptio…

type AlarmsBellButtonProps = { /** * Severity-bucketed alarm counts rendered in the stacked badge. * @default {} */ counts?: AlarmsBellButtonCounts /** Click handler — typically opens an alerts panel or routes to /alerts. */ onClick?: (event: MouseEvent<HTMLButtonElem…

type AlertConfirmationModalProps = { /** Controls dialog visibility */ isOpen: boolean /** Called when the user confirms the action */ onOk: VoidFunction }

type AlertsTableTitleProps = { /** Section heading */ title: ReactNode /** Optional subtitle or count badge */ subtitle?: ReactNode /** Additional CSS class */ className?: string }

type AppHeaderProps = { /** Left-most slot — typically the app's brand lockup / logo. */ logo?: ReactNode /** Left-edge content — e.g. a sidebar collapse toggle or brand wordmark. */ start?: ReactNode /** Middle slot — e.g. the dashboard stats strip or page tit…

type AreaChartProps = { /** Chart data - required, provided by parent */ data: ChartJS<'line'>['data'] /** Chart.js options - merged with defaults */ options?: ChartJS<'line'>['options'] /** Custom HTML tooltip configuration. When provided, replaces the default…

type ArrowIconProps = { isOpen?: boolean } & IconProps

type AverageDowntimeChartProps = Partial<{ /** * Chart title (unit renders on its own line below) * @default "Monthly Average Downtime" */ title: string /** * Unit subtitle under the title * @default % */ unit: string /** * Chart height in pixels * @default 280 */ height:…

type BadgeProps = { /** * Badge content (wraps children with badge) */ children?: ReactNode /** * Number to display in badge * If > overflowCount, will show "overflowCount+" * @default 0 */ count?: number /** * Maximum count to display * @default 99 */ over…

type BarChartProps = { /** Chart data - required, provided by parent. Use `as any` for mixed bar+line datasets. */ data: any /** Chart.js options - merged with defaults */ options?: ChartJS<'bar'>['options'] /** * Stack bars on top of each other * @default fal…

type BreadcrumbsProps = { /** Ordered trail; the last item is rendered as current */ items: BreadcrumbItem[] /** * Show a leading "Back" button * @default false */ showBack?: boolean /** * Label for the back button * @default "Back" */ backLabel?: string /** Root…

type BtcAveragePriceProps = Partial<{ /** * BTC price in USD; formatted with grouping and no decimal places. * When `null`, `undefined`, non-finite, or negative, the value shows `-` (`FALLBACK` from format utils). */ price: number | null /** * Label for the BTC avera…

type ButtonProps = Partial< { /** * Show a spinner instead of the content and disable the button. * @default false */ loading: boolean /** * Make the button stretch to fill its container. * @default false */ fullWidth: boolean /** Icon node rendered alongsid…

type CardBodyProps = HTMLAttributes<HTMLDivElement>

type CardFooterProps = HTMLAttributes<HTMLDivElement>

type CardHeaderProps = HTMLAttributes<HTMLDivElement>

type CascaderProps = { /** * Hierarchical options to display in the cascader * Parent options with children appear in the left panel * Child options appear in the right panel when parent is selected */ options: CascaderOption[] /** * Current selected value(s)…

type ChangeConfirmationModalProps = { /** Controls whether the dialog is visible */ open: boolean /** Dialog header title */ title: string /** Called when the user clicks the confirm button */ onConfirm: VoidFunction /** Called when the user cancels or dismisses the dialog *…

type ChartContainerProps = { /** Chart heading (renders as `<h3>` unless `header` is provided) */ title?: string /** * Optional node rendered immediately after the title text (e.g. an info * tooltip). Only shown when `title` is set and `header` is not. Additive - *…

type ChartStatsFooterProps = Partial<{ /** Min/Max/Avg values row */ minMaxAvg: MinMaxAvgValues /** Additional stats displayed in a columnar grid */ stats: ChartStatsFooterItem[] /** * Number of stat items per column (default: 1) * @default 1 */ statsPerColumn: number…

type CheckboxProps = { // Key controlled-state props re-declared from the Radix root so they surface in // the generated docs (types reuse Radix's via indexed access — cannot drift). /** Controlled checked state */ checked?: CheckboxRootProps['checked'] /** Un…

type CurrentAlertsProps = { /** * Devices carrying alerts (`last.alerts`), as a flat list. Unwrapping any * backend envelope is the data layer's job, not this component's. */ devices?: Device[] /** * Show DataTable loading overlay * @default false */ isLoading?: bo…

type DashboardDateRangePickerProps = { /** Current range as `{ start, end }` epoch-millisecond timestamps. */ value: DashboardDateRange /** Fires with the next `{ start, end }` window when the user applies a range. */ onChange: (next: DashboardDateRange) => void /** * Display…

type DataLabelProps = Partial<{ /** * Range start; formatted in the active timezone (`dd/MM/yy`). */ startDate: Date | null /** * Range end; formatted in the active timezone (`dd/MM/yy`). */ endDate: Date | null /** * Label text; defaults to `PERIOD`. * @defaul…

type DataTableProps = { /** * The data to be shown in the table. See https://tanstack.com/table/v8/docs/guide/data */ data: I[] /** * The column configuration table. See https://tanstack.com/table/v8/docs/guide/column-defs */ columns: DataTableColumnDef<I, any>…

type DatePickerProps = { /** * Currently selected date */ selected?: Date /** * Callback when date changes */ onSelect?: (date: Date | undefined) => void /** * Placeholder text when no date is selected * @default "Pick a date" */ placeholder?: string /** * Date…

type DateRangePickerProps = { /** * Selected date range */ selected?: DateRange /** * Callback when date range changes */ onSelect?: (range: DateRange | undefined) => void /** * Placeholder text when no range is selected * @default "Pick a date range" */ placeholder?…

type DetailLegendProps = { /** Legend items to display */ items: DetailLegendItem[] /** Callback when a legend item is toggled */ onToggle?: (label: string, index: number) => void /** Custom class name */ className?: string }

type DeviceExplorerProps = { /** Additional class names */ className?: string /** Controlled row-selection state */ selectedDevices?: DataTableRowSelectionState /** Setter for row selection */ onSelectedDevicesChange?: (selections: DataTableRowSelectionState) => voi…

type DialogContentProps = { /** Renders `DialogTitle` (and optional `DialogDescription`) inside the header */ title?: string /** Renders `DialogDescription` below the title */ description?: string /** * Whether clicking the overlay closes the dialog * @default true…

type DialogHeaderProps = { /** * Applies `mdk-dialog__header--bare` to the header * @default false */ bare?: boolean /** Shows an ✕ close button in the header */ closable?: boolean /** Fired when the ✕ button is clicked */ onClose?: VoidFunction }

type DividerProps = { /** * Line orientation * @default 'horizontal' */ orientation?: DividerOrientation /** * Line style * @default false */ dashed?: boolean /** * Renders a dotted line (takes precedence over `dashed`) * @default false */ dotted?: boolean /*…

type DoughnutChartProps = { /** Array of labelled slices */ data: DoughnutChartDataset[] /** * Unit suffix appended to values in tooltips and legends * @default '' */ unit?: string /** Chart.js options – merged with defaults */ options?: ChartJS<'doughnut'>['option…

type EmptyStateProps = { /** * Description text or ReactNode displayed below the image */ description: ReactNode /** * Image to display. Use "default" for the standard illustration, * "simple" for a minimal icon, or pass a custom ReactNode. * @default "default"…

type EnabledDisableToggleProps = { /** Current state. A boolean drives a switch display; non-boolean shows action buttons. */ value: unknown /** Tank identifier used in the label (`Tank {N} Circulation`). Pass an empty string for the air exhaust label. */ tankNumber: numb…

type ErrorCardProps = { /** * Error message string. Supports `\n` for line breaks. */ error: string /** * Title displayed above the error message * @default "Errors" */ title?: string /** * Display variant. "card" shows a bordered container, "inline" shows flat…

type ExportButtonProps = { /** * Fires with the chosen format when the user picks an item. Return a promise * to show a loading state until it settles; a rejection clears it and is not * rethrown, so report failures inside the handler. */ onExport: (format: Export…

type FeatureFlagsSettingsProps = { /** Current flag values keyed by flag name */ featureFlags: Record<string, boolean> /** Whether editing is permitted */ isEditingEnabled: boolean /** * Show loading state * @default false */ isLoading?: boolean /** * Show saving spinner…

type FormCascaderProps = BaseFormFieldProps<TFieldValues, TName> & { options: CascaderOption[] multiple?: boolean cascaderProps?: Omit< React.ComponentProps<typeof Cascader>, 'value' | 'onChange' | 'options' | 'placeholder' > }

type FormCheckboxProps = BaseFormFieldProps<TFieldValues, TName> & { checkboxProps?: React.ComponentProps<typeof Checkbox> layout?: 'row' | 'column' }

type FormDatePickerProps = BaseFormFieldProps<TFieldValues, TName> & { datePickerProps?: Omit<React.ComponentProps<typeof DatePicker>, 'selected' | 'onSelect'> }

type FormInputProps = BaseFormFieldProps<TFieldValues, TName> & { type?: React.ComponentProps<typeof Input>['type'] variant?: React.ComponentProps<typeof Input>['variant'] inputProps?: Omit<React.ComponentProps<typeof Input>, 'type' | 'variant'> }

type FormProps = Omit< ComponentProps<'form'>, 'children' > & { form: UseFormReturn<TFieldValues> children: ReactNode }

type FormRadioGroupProps = BaseFormFieldProps<TFieldValues, TName> & { options: FormRadioOption[] orientation?: 'horizontal' | 'vertical' radioGroupProps?: Omit< React.ComponentProps<typeof RadioGroup>, 'onValueChange' | 'defaultValue' | 'orientation' > }

type FormSelectProps = BaseFormFieldProps<TFieldValues, TName> & { options: FormSelectOption[] selectProps?: Omit<React.ComponentProps<typeof Select>, 'onValueChange' | 'defaultValue'> }

type FormSwitchProps = BaseFormFieldProps<TFieldValues, TName> & { switchProps?: Omit<React.ComponentProps<typeof Switch>, 'checked' | 'onCheckedChange'> layout?: 'row' | 'column' }

type FormTagInputProps = BaseFormFieldProps<TFieldValues, TName> & { options?: TagInputOption[] allowCustomTags?: boolean variant?: 'default' | 'search' tagInputProps?: Omit< React.ComponentProps<typeof TagInput>, 'value' | 'onTagsChange' | 'label' | 'placeholder'…

type FormTextAreaProps = BaseFormFieldProps<TFieldValues, TName> & { textAreaProps?: React.ComponentProps<typeof TextArea> }

type GaugeChartProps = { /** Value between 0 and 1 (e.g. 0.75 = 75%). Values outside the range are clamped. */ percent: number /** * Arc colours in HEX format. * @default [COLOR.GREEN, COLOR.RED] */ colors?: string[] /** * Arc thickness as a fraction of the gaug…

type HeaderConsumptionBoxProps = { /** Icon shown next to the stat */ icon?: ReactNode /** Current site-level power consumption, in megawatts. */ valueMw?: number /** * Unit label — defaults to `MW`. * @default MW */ unit?: string /** Additional class names */ className?:…

type HeaderControlsSettingsProps = { /** Current header preference values */ preferences: HeaderPreferences /** * Show loading state * @default false */ isLoading?: boolean /** Called when a preference toggle changes */ onToggle: (key: keyof HeaderPreferences, value: boolea…

type HeaderEfficiencyBoxProps = { /** Icon shown next to the stat */ icon?: ReactNode /** Efficiency in watts per TH/s. */ valueWthS?: number /** * Unit label — defaults to `W/TH/S`. * @default W/TH/S */ unit?: string /** Additional class names */ className?: string }

type HeaderHashrateBoxProps = { /** Icon shown next to the stat */ icon?: ReactNode /** App-side aggregate hashrate in PH/s. */ appPhs?: number /** Pool-side aggregate hashrate in PH/s. */ poolPhs?: number /** * Hashrate unit label — defaults to `PH/s`. * @default PH/s…

type HeaderMinersBoxProps = { /** Icon shown next to the "Miners" label. Caller-provided so the package stays icon-agnostic. */ icon?: ReactNode /** Total miners across the site (denominator of the `158 / 2,188` ratio). */ total?: number /** Online miners (the `158`…

type HeaderStatsBarProps = { /** Stat boxes to render in order, left-to-right. */ children: ReactNode /** Optional class hook. */ className?: string }

type HeatmapLegendProps = { /** Value (or pre-formatted label) at the low end of the scale. */ min: number | string /** Value (or pre-formatted label) at the high end of the scale. */ max: number | string /** Unit suffix appended to `min`/`max`. */ unit?: string /*…

type HeatmapProps = { /** Rows of cells (row-major). Rows may be ragged. */ data: HeatmapCell[][] /** * Range floor (maps to the first gradient stop); auto-derived from the finite values when omitted. * @default auto */ min?: number /** * Range ceiling (maps…

type HistoricalAlertsProps = { /** * Pre-fetched historical alerts log entries (each with a `thing` device payload). * @default [] */ alerts?: AlertRecord[] /** * Show DataTable loading overlay * @default false */ isLoading?: boolean /** * Filters and search tags comi…

type ImportExportSettingsProps = { /** Trigger configuration export */ onExport: VoidFunction /** Apply imported configuration */ onImport: (data: SettingsExportData) => void /** Custom file-parsing function */ onParseFile?: (file: File) => Promise<SettingsExportData> /**…

type IndicatorProps = { /** * Color variant of the indicator * @default 'gray' */ color?: IndicatorColor /** * Size variant of the indicator * @default 'md' */ size?: ComponentSize /** * Custom className for the root element */ className?: string /** * When tru…

type InputProps = Omit<ComponentProps<'input'>, 'prefix' | 'size'> & { /** * Optional label displayed above the input */ label?: string /** * HTML id for the input. Required when using label for accessibility. * @default auto-generated */ id?: string /** *…

type LabeledCardProps = Partial<{ /** * Applies a dark background modifier * @default false */ isDark: boolean /** Additional class for the root element */ className: string /** * Prevents content from wrapping * @default false */ hasNoWrap: boolean /** * Sets `p…

type LineChartCardProps = Partial<{ /** Pre-adapted chart data (use this OR rawData+dataAdapter) */ data: LineChartCardData /** Raw data to be transformed by dataAdapter */ rawData: unknown /** Adapter to transform rawData into LineChartCardData */ dataAdapter: (da…

type LoaderProps = { /** * Size of each dot in pixels * @default 10 */ size?: number /** * Number of dots to display * @default 5 */ count?: 3 | 5 | 7 /** * Color variant of the loader * @default 'orange' */ color?: 'red' | 'gray' | 'blue' | 'amber' | 'orang…

type LogActivityIconProps = { status: string }

type LogDotProps = { /** `'Incidents'` renders a colored circle; `'Activity'` renders an activity icon */ type: string /** Severity string for color mapping */ status: string }

type LogItemProps = { data: LogData onLogClicked?: (uuid: string) => void }

type LogRowProps = { /** Log entry data */ log: LogData /** Log type (controls dot appearance) */ type: string /** Inline style for the row container */ style?: CSSProperties /** Click handler */ onLogClicked?: (uuid: string) => void }

type LogsCardProps = Partial<{ /** Log type (`'Incidents'` or `'Activity'`); controls the `LogDot` appearance */ type: string /** Card header label */ label: string /** * Applies dark card theme * @default false */ isDark: boolean /** * Shows skeleton rows whi…

type ManageUserModalProps = { /** Controls dialog visibility */ open: boolean /** Called when the dialog closes */ onClose: VoidFunction /** The user being edited */ user: SettingsUser /** Available role options */ roles: RoleOption[] /** Permission levels per role *…

type MdkWordmarkProps = { /** * Visual size of the wordmark. `sm` ≈ 24px tall, `md` ≈ 32px, `lg` ≈ 64px * @default 'md' */ size?: MdkWordmarkSize /** Optional class hook on the outer `<svg>`. */ className?: string /** * Accessible label * @default 'MDK' */ title?…

type MiningPoolsPanelProps = Partial<{ /** * Override the card title — defaults to `Mining Pools`. * @default "Mining Pools" */ label: string /** * Hide the title row entirely. * @default false */ hideHeader: boolean /** * Loading state — renders skeleton rows. * @def…

type MinMaxAvgProps = MinMaxAvgValues & { /** Additional root class */ className?: string }

type MultiSelectProps = { /** `{ value, label, disabled? }` entries to render as option rows */ options: MultiSelectOption[] /** Controlled selected values. Omit to use `defaultValue` for uncontrolled mode. */ value?: string[] /** * Initial values for uncontrolle…

type NotFoundPageProps = { /** * Callback fired when the "Go Home" button is clicked */ onGoHome?: VoidFunction /** * Page title * @default "404" */ title?: string /** * Message displayed below the title * @default "The page you are looking for does not exist." */…

type OperationsEnergyCostChartProps = Partial<{ /** * Chart title * @default "Operations vs Energy Cost" */ title: string /** * Subtitle and tooltip unit label * @default $/MWh */ unit: string /** * Doughnut height in pixels * @default 200 */ height: number /** Extra class on…

type PaginationProps = { /** * Current active page number * @default 1 */ current?: number /** * Total number of items * @default 0 */ total?: number /** * Number of items per page * @default 20 */ pageSize?: number /** * Page size options for the select dropdow…

type PoolDetailsCardProps = PoolDetailsCardPartialProps & { /** Detail rows to render */ details: PoolDetailItem[] }

type PowerModeTimelineChartProps = Partial<{ /** * Initial power-mode entries (each with start/end ts + mode). * @default [] */ data: PowerModeTimelineEntry[] /** * Streaming updates appended to the initial data. * @default [] */ dataUpdates: PowerModeTimelineEntry[] /** *…

type ProfileMenuProps = { /** Items rendered in the dropdown, top-to-bottom. */ items: ProfileMenuItem[] /** Optional user label rendered at the top of the dropdown (e.g. an email). */ user?: ReactNode /** * Override the trigger icon — defaults to the user-avatar…

type RadioGroupProps = { /** * Layout orientation * @default 'vertical' */ orientation?: 'horizontal' | 'vertical' /** * Remove gap between radio items * @default false */ noGap?: boolean /** * Custom className for the group */ className?: string } & ComponentPr…

type RadioProps = { // Key prop re-declared from the Radix item so it surfaces in the generated docs // (type reuses Radix's via indexed access — cannot drift). /** Value associated with this option */ value: RadioItemProps['value'] /** * Size variant of th…

type RBACControlSettingsProps = { /** List of current users */ users: SettingsUser[] /** Available role options */ roles: RoleOption[] /** Permission levels per role */ rolePermissions: Record<string, Record<string, PermLevel>> /** Display labels for permission keys */ p…

type ReportTimeFrameSelectorProps = Pick< ReportTimeFrameSelectorState, 'presetTimeFrame' | 'dateRange' | 'setPresetTimeFrame' | 'setDateRange' >

type RequireAuthProps = { /** Rendered when a token is present. */ children: ReactNode /** Rendered when no token is present — typically `<Navigate to="/signin" />`. */ fallback: ReactNode /** * When true (default), the current location is persisted to sessionSto…

type SelectProps = SelectRootProps & { // Key controlled-state props re-declared from the Radix root so they surface in // the generated docs (types reuse Radix's via indexed access — cannot drift). /** Controlled value */ value?: SelectRootProps['value'] /*…

type SettingsDashboardProps = { /** Danger-zone action buttons (reset, delete) */ dangerActions?: ActionButtonProps[] /** Props forwarded to `HeaderControlsSettings` */ headerControlsProps?: HeaderControlsSettingsProps /** Props forwarded to `RBACControlSettings` */ rb…

type SidebarProps = SidebarOptions & SidebarCallbacks & { /** Menu items (supports nested `items`) */ items: SidebarMenuItem[] }

type SignInGoogleButtonProps = Omit<ButtonProps, 'onClick' | 'children'> & { /** * Base URL of the OAuth backend (no trailing slash). Click navigates to * `${oauthBaseUrl}/oauth/google`. */ oauthBaseUrl: string /** * Override the visible button label. * @default "Sign i…

type SiteStatsBarProps = { /** Site label rendered in the header row. */ title: string /** * Current site-level power consumption, in watts. It is displayed divided by 1000, so * `powerUnit` names the kilo unit (`kW` by default). */ power?: number /** * Display un…

type SkeletonBlockProps = Partial<{ /** * Renders a perfect circle using `height` as the diameter * @default false */ circle: boolean /** Additional class for the element */ className: string /** Width in pixels (number) or any CSS value (string) */ width: number |…

type SpinnerProps = { /** * Size variant of the spinner * @default 'md' */ size?: ComponentSize /** * Color variant of the spinner * @default 'primary' */ color?: 'primary' | 'secondary' /** * Whether to display in fullscreen mode * @default false */ fullScre…

type SwitchProps = { // Key controlled-state props re-declared from the Radix root so they surface in // the generated docs (types reuse Radix's via indexed access — cannot drift). /** Controlled checked state */ checked?: SwitchRootProps['checked'] /** Unco…

type TagFilterBarProps = { /** Active tag filter values */ filterTags: string[] /** Current local filter state */ localFilters: AlertLocalFilters /** Called when tag filter changes */ onSearchTagsChange: (tags: string[]) => void /** Called when any local filter ch…

type TagInputProps = { /** * Controlled tags (array of tag values) * @default [] */ value?: string[] /** * Callback when tags change (add/remove) */ onTagsChange?: (tags: string[]) => void /** * Callback when input value changes (typing). Receives current inpu…

type TagProps = { /** * Color variant of the tag * @default 'dark' */ color?: 'dark' | 'red' | 'green' | 'amber' | 'blue' /** * Custom className for the root element */ className?: string /** * Children content */ children?: ReactNode } & ComponentPropsWi…

type TextAreaProps = ComponentProps<'textarea'> & { /** * Optional label displayed above the textarea */ label?: string /** * HTML id for the textarea. Required when using label for accessibility. * @default auto-generated */ id?: string /** * Validation error…

type ThresholdLineChartProps = Partial<{ /** Chart title (unit appended when `unit` is set) */ title: string /** Shown in title and axis/tooltip formatting */ unit: string /** * Chart height in pixels (`360` when `isTall`) * @default 280 */ height: number /** * When tru…

type TimeframeControlsProps = Partial<{ /** Helper text below the controls */ hint: string /** Called when the Reset button is clicked */ onReset: VoidFunction /** * Shows the Reset button * @default false */ showResetButton: boolean /** * Show week selector * @default…

type TimeframeWeekFlatContentProps = { visibleWeeks: ReturnType<typeof weeksOfMonth> }

type TimeframeWeekTreeContentProps = { timezone: string selectedYear: number selectedMonth: number }

type TimelineChartProps = { /** Initial timeline data */ initialData: TimelineChartData /** Streaming updates appended to the initial data */ newData?: TimelineChartData /** * Ignore `newData` * @default false */ skipUpdates?: boolean /** Visible time window */ ran…

type TimelineSelectorProps = { /** Currently selected timeline value (e.g. `'1m'`, `'5m'`). */ value: string /** Called whenever the user picks a new option. */ onChange: (next: string) => void /** * Available options — defaults to {@link getTimelineOptions}. Pass a c…

type TypographyProps = { /** * Determines the rendered HTML element and base style * @default 'body' */ variant?: 'heading1' | 'heading2' | 'heading3' | 'body' | 'secondary' | 'caption' /** * Text size; defaults to the variant's size when unset. */ size?: 'xs' |…

type WidgetTopRowProps = { /** Widget title */ title: string /** Power reading; rendered in kilo-units */ power?: number /** Power unit (e.g. `"kW"`) */ unit?: string /** Error tooltip content; replaces power */ statsErrorMessage?: string | ErrorWithTimestamp[] |…