@drawbridge/components 0.0.78 → 0.1.1

package/types/dashboard/steps.d.ts

@@ -0,0 +1,40 @@
+import { ComponentType } from 'react';
+
+export type StepStatus = 'cancelled' | 'failed' | 'partial' | 'processing' | 'skipped' | 'succeeded' | string;
+
+export interface StepRow {
+	error?: string | null;
+	message?: string | null;
+	request?: unknown;
+	response?: unknown;
+	slug?: string;
+	status?: StepStatus;
+	updatedAt?: string | number | Date;
+	[ key: string ]: unknown;
+}
+
+// One group from GET /organization/:id/steps: a workflow run, or a team
+// notification window.
+export interface StepGroup {
+	count?: number | null;
+	email?: string | null;
+	items?: StepRow[];
+	kind?: 'notify' | 'run' | string;
+	pending?: boolean | null;
+	[ key: string ]: unknown;
+}
+
+export interface StepsProps {
+	filters?: Record<string, unknown>;
+	limit?: number;
+	organization: { id: string; [ key: string ]: unknown };
+}
+
+// 'Team notification — 4 new entries' for a window; the entrant's email for a run.
+export declare const groupTitle: ( group: StepGroup ) => string;
+// The step's slug in a run; 'Email sent' / 'Some emails failed' / … in a window.
+export declare const rowLabel: ( options: { item?: StepRow; kind?: string } ) => string | undefined;
+
+declare const Steps: ComponentType<StepsProps>;
+
+export default Steps;

package/types/dashboard/swatch.d.ts

@@ -0,0 +1,14 @@
+import { ComponentType, MouseEventHandler } from 'react';
+
+export interface SwatchProps {
+	// Nothing renders without a hex.
+	color?: { hex?: string; rgb?: string } | null;
+	// Names the color in its tooltip; nothing renders without one.
+	label: string;
+	// Replaces copying the hex to the clipboard.
+	onClick?: MouseEventHandler<HTMLButtonElement>;
+}
+
+declare const Swatch: ComponentType<SwatchProps>;
+
+export default Swatch;

package/types/dashboard/table-cell-title.d.ts

@@ -0,0 +1,24 @@
+import { ComponentType, ReactNode, SVGProps } from 'react';
+import { AvatarProps } from './avatar';
+import { CardAssetFile } from '../shared/card-asset';
+
+export interface TableCellTitleProps {
+	// A 40px thumbnail: a file record or an image url, drawn by CardAsset. Pass this or avatar, not both.
+	asset?: CardAssetFile | string | null;
+	// A person ( email, image, name ) or an organization ( image, title ), drawn by a 40px Avatar.
+	avatar?: Omit<AvatarProps, 'size'> | null;
+	// Why the record needs attention, as alertFor returns it, or just the words.
+	// Shown with the small Error: the warning, or the lock a locked record passes.
+	error?: { icon?: ComponentType<SVGProps<SVGSVGElement>>; message?: string | null } | string | null;
+	// A campaign's dot when there is no picture, with the words it shows on hover: active
+	// ('Accepting submissions'), error (published, 'Not accepting submissions'), inactive (draft).
+	indicator?: { label: string; type: 'active' | 'error' | 'inactive' | 'warning' } | null;
+	// The badge beside the title, as statusBadge returns it.
+	status?: { text: string; type: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'ai' } | null;
+	subtitle?: ReactNode;
+	title: ReactNode;
+}
+
+declare const TableCellTitle: ComponentType<TableCellTitleProps>;
+
+export default TableCellTitle;

package/types/dashboard/table.d.ts

@@ -0,0 +1,106 @@
+import { ComponentType, ElementType, ForwardRefExoticComponent, HTMLAttributes, ReactNode, RefAttributes, TdHTMLAttributes } from 'react';
+import { CellContext, ColumnDef, OnChangeFn, SortingState } from '@tanstack/react-table';
+import { ButtonProps } from '../shared/button';
+
+export type TableBadgeType = 'ai' | 'error' | 'primary' | 'secondary' | 'success' | 'warning';
+
+export interface TableActionButton {
+	// Defaults to Link; pass 'button' with onClick for an in-page action.
+	element?: ElementType;
+	icon?: ComponentType<{ className?: string }>;
+	// Defaults to 'Manage'; false or '' renders an icon-only button.
+	text?: ReactNode;
+	tooltip?: ReactNode;
+	// The Button variant; 'primary' by default.
+	variant?: ButtonProps[ 'variant' ];
+	className?: never;
+	[ key: string ]: unknown;
+}
+
+export interface TableActionControl {
+	element?: ElementType;
+	icon?: ComponentType<{ className?: string }>;
+	text?: ReactNode;
+	// The Button variant; 'secondary' by default.
+	variant?: ButtonProps[ 'variant' ];
+	className?: never;
+	[ key: string ]: unknown;
+}
+
+export interface TableActions {
+	badge?: { text: ReactNode; type?: TableBadgeType };
+	button?: TableActionButton;
+	controls?: TableActionControl[];
+	// Dropdown props (`button` for the trigger's Button props); `text` is its label (defaults to 'Actions').
+	dropdown?: { text?: ReactNode; items?: unknown[]; [ key: string ]: unknown };
+}
+
+// A row whose data carries `loading` renders in place as a processing row
+// (progress bar, Cancel through `cancel`) or, with `error`, as a failed row
+// (Delete through `endpoint`, Rerun through `retry`).
+export interface TableRowLoading {
+	actions?: TableActions;
+	cancel?: string;
+	endpoint?: string;
+	error?: ReactNode;
+	onError?: ( error: unknown ) => void;
+	onSuccess?: ( response: unknown ) => void;
+	progress?: { completed?: number; total?: number };
+	retry?: string;
+	title?: ReactNode;
+}
+
+export type TableColumn<TData = any> = ColumnDef<TData, any> & {
+	// Maps to tanstack's enableSorting.
+	sortable?: boolean;
+	meta?: { className?: string; classNameCell?: string; classNameHeader?: string };
+};
+
+export interface TableProps<TData = any> {
+	// Adds a sticky right-hand actions column built from each row.
+	actions?: ( row: TData ) => TableActions | null | undefined;
+	className?: string;
+	classNameColumn?: string;
+	classNameHeader?: string;
+	classNameRow?: string;
+	columns: TableColumn<TData>[];
+	data?: ( TData & { loading?: boolean | TableRowLoading } )[];
+	headers?: boolean;
+	manualSorting?: boolean;
+	// With onSortingChange the table is controlled by `sorting`.
+	onSortingChange?: OnChangeFn<SortingState>;
+	sorting?: SortingState;
+	truncate?: boolean;
+}
+
+export type TableCellRenderer = ( context: Pick<CellContext<any, any>, 'getValue'> & Partial<Pick<CellContext<any, any>, 'row'>> ) => ReactNode;
+
+// 'Jun 17, 2026', or '—' when empty.
+export declare const dateCell: TableCellRenderer;
+// An admin ID column: only a Copy ID button that copies the whole ID.
+export declare const TableCellId: ComponentType<{ id?: string | null }>;
+// The date with hour and minute, or '—'.
+export declare const dateTimeCell: TableCellRenderer;
+// 'N%', '—' when empty or on a redemption row.
+export declare const rateCell: TableCellRenderer;
+
+export declare const TableContainer: ComponentType<{ children?: ReactNode; className?: string }>;
+
+export declare const TableHeader: ComponentType<{
+	classNameHeader?: string;
+	classNameRow?: string;
+	headerGroups?: unknown[];
+	headers?: { className?: string; colSpan?: number; text?: ReactNode }[];
+}>;
+
+export declare const TableRow: ForwardRefExoticComponent<HTMLAttributes<HTMLTableRowElement> & RefAttributes<HTMLTableRowElement>>;
+
+export declare const TableCell: ComponentType<TdHTMLAttributes<HTMLTableCellElement> & { truncate?: boolean }>;
+
+export declare const TableBody: ComponentType<{ children?: ReactNode }>;
+
+export declare const TableActionsCell: ComponentType<{ actions?: TableActions | null }>;
+
+declare const Table: <TData = any>( props: TableProps<TData> ) => ReactNode;
+
+export default Table;

package/types/dashboard/template-dashboard.d.ts

@@ -0,0 +1,110 @@
+import { ComponentType, ElementType, ReactNode } from 'react';
+import { QueryKey, UseQueryResult } from '@tanstack/react-query';
+import { ButtonProps } from '../shared/button';
+
+// A header button. Without `title` the aria-label comes from the icon.
+export interface TemplateDashboardButton {
+	// The Button variant: 'secondary' when omitted ( 'success' for the primary `button` ).
+	variant?: ButtonProps[ 'variant' ];
+	className?: never;
+	element?: ElementType;
+	// Truthy shows a dot on the button ( e.g. filters applied ).
+	indicator?: unknown;
+	// Renders this instead of a button.
+	render?: () => ReactNode;
+	svg?: ComponentType<{ className?: string }>;
+	title?: ReactNode;
+	[ key: string ]: unknown;
+}
+
+export interface TemplateDashboardBadge {
+	text: ReactNode;
+	// Badge type; 'primary' when omitted.
+	type?: string;
+}
+
+// An organization or campaign task, as the api's tasks list ships it.
+export interface TemplateDashboardTask {
+	complete?: boolean;
+	href?: string;
+	increment?: boolean;
+	title: ReactNode;
+	[ key: string ]: unknown;
+}
+
+export interface TemplateDashboardProps {
+	// Makes the title a link back to this href.
+	back?: string;
+	badges?: TemplateDashboardBadge[];
+	// The primary action, right of the controls.
+	button?: TemplateDashboardButton;
+	children?: ReactNode;
+	// The scrolling body's classes; default 'px-6 pb-6 md:px-12 md:pb-12'.
+	className?: string;
+	controls?: TemplateDashboardButton[];
+	// A <Refetch /> beside the title.
+	refetch?: ReactNode;
+	// Next steps: the first item in a bar, the rest in the drawer.
+	tasks?: { items?: TemplateDashboardTask[] };
+	// No header without a title.
+	title?: ReactNode;
+}
+
+export interface TemplateDashboardErrorLink extends TemplateDashboardButton {
+	href: string;
+	// The Button variant ( e.g. 'success' ).
+	type?: ButtonProps[ 'variant' ];
+}
+
+// The api's empty / locked state, or a request error.
+export interface TemplateDashboardErrorDetail {
+	// Shows the `button` prop when true.
+	button?: boolean;
+	image?: string;
+	links?: TemplateDashboardErrorLink[];
+	message?: ReactNode;
+}
+
+export interface TemplateDashboardErrorProps {
+	back?: string;
+	// Shown only when error.button is true.
+	button?: TemplateDashboardButton;
+	className?: string;
+	error?: TemplateDashboardErrorDetail | ( Error & { status?: number } ) | null;
+	title?: ReactNode;
+}
+
+export interface RefetchProps {
+	// Invalidated together; nothing renders without any.
+	invalidate?: QueryKey[];
+}
+
+// Any header prop may be a function of the fetched data; the header then waits for it.
+export type TemplateDashboardChrome<TData = any> = {
+	[ K in Exclude<keyof TemplateDashboardProps, 'children'> ]?: TemplateDashboardProps[ K ] | ( ( data: TData ) => TemplateDashboardProps[ K ] );
+};
+
+export interface TemplateDashboardResourceProps<TData = any> extends TemplateDashboardChrome<TData> {
+	cache?: RequestCache;
+	children: ( data: TData, query: UseQueryResult<TData> ) => ReactNode;
+	classNameLoader?: string;
+	enabled?: boolean;
+	endpoint?: string;
+	// Replaces the default: a 403 shows its reason, a transient error offers a reload, anything else is notFound().
+	error?: ReactNode | ( ( query: UseQueryResult<TData> ) => ReactNode );
+	keepPrevious?: boolean;
+	loader?: boolean;
+	params?: Record<string, unknown>;
+	queryKey: QueryKey;
+	refetchInterval?: number | false;
+	refetchIntervalInBackground?: boolean;
+	refetchOnMount?: boolean | 'always';
+}
+
+export declare const Refetch: ComponentType<RefetchProps>;
+export declare const TemplateDashboardError: ComponentType<TemplateDashboardErrorProps>;
+export declare function TemplateDashboardResource<TData = any>( props: TemplateDashboardResourceProps<TData> ): ReactNode;
+
+declare const TemplateDashboard: ComponentType<TemplateDashboardProps>;
+
+export default TemplateDashboard;

package/types/dashboard/template-not-found.d.ts

@@ -0,0 +1,14 @@
+import { ComponentType, ReactNode } from 'react';
+
+export interface TemplateNotFoundProps {
+	// The button's text; false hides it. Default 'Back to organizations'.
+	button?: ReactNode | false;
+	// Where the button links; default '/organizations'.
+	href?: string | false;
+	// Default '404 — Nothing found'.
+	message?: ReactNode;
+}
+
+declare const TemplateNotFound: ComponentType<TemplateNotFoundProps>;
+
+export default TemplateNotFound;

package/types/dashboard/template-socket.d.ts

@@ -0,0 +1,17 @@
+import { ComponentType, ReactNode } from 'react';
+
+// Each joins its drawbridge-sync room on the socket held in the [ 'socket' ]
+// query ( ProviderUi sets it when NEXT_PUBLIC_SOCKET_URI is set ), keeps the
+// room's queries live, and renders its children.
+export interface TemplateSocketProps {
+	children?: ReactNode;
+}
+
+// The signed-in user's room ( the account query's id ).
+export declare const TemplateSocketAccount: ComponentType<TemplateSocketProps>;
+// The admin room, for an account with any admin.* permission.
+export declare const TemplateSocketAdmin: ComponentType<TemplateSocketProps>;
+// The route's campaign room ( params.campaign ).
+export declare const TemplateSocketCampaign: ComponentType<TemplateSocketProps>;
+// The route's organization room ( params.organization ); renders TemplateSuspended once the organization reads suspended.
+export declare const TemplateSocketOrganization: ComponentType<TemplateSocketProps>;

package/types/dashboard/template-suspended.d.ts

@@ -0,0 +1,12 @@
+import { ComponentType, ReactNode } from 'react';
+
+// The one explanation of a suspension: the modal's title and message.
+export declare const suspension: {
+	message: ReactNode;
+	title: string;
+};
+
+// Renders nothing: opens `suspension` in the dashboard modal and replaces the route with /organizations.
+declare const TemplateSuspended: ComponentType<Record<string, never>>;
+
+export default TemplateSuspended;

package/types/dashboard/template-ui.d.ts

@@ -0,0 +1,14 @@
+import { ComponentType, ReactNode } from 'react';
+
+export interface TemplateUiProps {
+	// The page, right of the sidebar.
+	children?: ReactNode;
+	// Key into the account's guide ( e.g. 'organization.campaigns' ) for this page's tour.
+	guide?: string;
+}
+
+// The dashboard shell: sidebar header, the menu for the route ( organization,
+// campaign, app, admin or account ) and the account dropdown.
+declare const TemplateUi: ComponentType<TemplateUiProps>;
+
+export default TemplateUi;

package/types/dashboard/wrapper-ai.d.ts

@@ -0,0 +1,12 @@
+import { ComponentType, ReactNode } from 'react';
+
+export interface WrapperAIProps {
+	children?: ReactNode;
+	className?: string;
+	// Above the Drawbridge AI badge.
+	header?: ReactNode;
+}
+
+declare const WrapperAI: ComponentType<WrapperAIProps>;
+
+export default WrapperAI;

package/types/input-group.d.ts

@@ -10,6 +10,7 @@ export interface InputGroupProps {
 	error?: ReactNode;
 	input?: ReactNode;
 	label?: ReactNode;
+	/** The help line under the field: plain text, never a component. An error takes its place. */
 	message?: ReactNode;
 	style?: BrandStyle;
 	[key: `data-${string}`]: unknown;

package/types/input-phone.d.ts

@@ -10,6 +10,8 @@ export interface InputPhoneValue {
 
 export interface InputPhoneProps {
 	countries?: string[];
+	// Disables the country select and the number.
+	disabled?: boolean;
 	onChange: ( value: InputPhoneValue ) => void;
 	style?: BrandStyle;
 	value?: InputPhoneValue;

package/types/input-textarea.d.ts

@@ -2,6 +2,8 @@ import { ComponentType, TextareaHTMLAttributes } from 'react';
 import { BrandStyle } from './styles';
 
 export interface InputTextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange' | 'style' | 'value'> {
+	// Sets rows when rows is not given; never reaches the DOM.
+	minRows?: number;
 	onChange: ( value: string ) => void;
 	rows?: number;
 	style?: BrandStyle;

package/types/shared/address-lines.d.ts

@@ -0,0 +1,14 @@
+import { ComponentType } from 'react';
+
+export interface AddressLinesProps {
+	address?: string;
+	address2?: string;
+	city?: string;
+	country?: string;
+	postal?: string;
+	province?: string;
+}
+
+declare const AddressLines: ComponentType<AddressLinesProps>;
+
+export default AddressLines;

package/types/shared/badge.d.ts

@@ -0,0 +1,14 @@
+import { ComponentType, ElementType, ReactNode } from 'react';
+
+export interface BadgeProps {
+	children?: ReactNode;
+	className?: string | null;
+	element?: ElementType;
+	size?: 'small' | null;
+	type?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'ai' | null;
+	[ key: string ]: unknown;
+}
+
+declare const Badge: ComponentType<BadgeProps>;
+
+export default Badge;

package/types/shared/button.d.ts

@@ -0,0 +1,29 @@
+import { ComponentType, ElementType, ReactNode, SVGProps } from 'react';
+import { BrandStyle } from '../styles';
+
+export interface ButtonProps {
+	children?: ReactNode;
+	// A Button takes no classes: its looks are its props.
+	className?: never;
+	disabled?: boolean;
+	element?: ElementType;
+	icon?: ComponentType<SVGProps<SVGSVGElement>> | null;
+	indicator?: 'ai' | 'error' | 'primary' | 'secondary' | 'success' | 'warning' | null;
+	// As wide as its content; full width otherwise.
+	inline?: boolean;
+	// flexbox's justify-content: where the content sits; 'between' splits label and icon.
+	justify?: 'between' | 'center' | 'end' | 'start';
+	loading?: boolean;
+	// The icon before the label (flexbox's row-reverse); after it otherwise.
+	reverse?: boolean;
+	size?: 'default' | 'small';
+	// The brand object: passing it brands the button (the variant is ignored).
+	style?: BrandStyle | null;
+	type?: 'button' | 'reset' | 'submit';
+	variant?: 'ai' | 'error' | 'link' | 'primary' | 'secondary' | 'success';
+	[ key: string ]: unknown;
+}
+
+declare const Button: ComponentType<ButtonProps>;
+
+export default Button;

package/types/shared/card-asset.d.ts

@@ -0,0 +1,29 @@
+import { ComponentType, SVGProps } from 'react';
+
+export interface CardAssetFile {
+	frames?: { sizes?: Record<string, string> }[];
+	mimetype?: string;
+	// Index into frames for a video's poster.
+	poster?: number;
+	sizes?: Record<string, string>;
+	updatedAt?: string | number | Date;
+	[ key: string ]: unknown;
+}
+
+export interface CardAssetProps {
+	// A file record, or a plain image url (a vendor logo).
+	asset?: CardAssetFile | string | null;
+	className?: string;
+	classNameContainer?: string;
+	classNameIcon?: string;
+	// Shown when there is no asset; defaults to the image glyph.
+	icon?: ComponentType<SVGProps<SVGSVGElement>>;
+	// The sizes key to render, e.g. '100x100'.
+	size?: string;
+	sizes?: string;
+	title?: string;
+}
+
+declare const CardAsset: ComponentType<CardAssetProps>;
+
+export default CardAsset;

package/types/shared/card-prize.d.ts

@@ -0,0 +1,27 @@
+import { ComponentType, ElementType, ReactNode } from 'react';
+import { CardAssetFile } from './card-asset';
+
+export interface CardPrizeProps {
+	// Layout only (spacing, width); the card draws its own colours.
+	className?: string;
+	currency?: { code?: string; digits?: number };
+	description?: ReactNode;
+	// With onClick, renders the card as a link Button.
+	element?: ElementType;
+	// Adds the row with remaining (or See results) and the icon.
+	footer?: boolean;
+	icon?: ComponentType<{ className?: string }>;
+	images?: { primary?: ( CardAssetFile & { filename?: string; id?: string } ) | null };
+	onClick?: () => void;
+	remaining?: number;
+	// The brand object: border and text in the brand's text colour.
+	style?: { text?: { color?: { hex?: string; rgb?: string } }; [ key: string ]: unknown } | null;
+	// Shown when there is no value.
+	subtitle?: ReactNode;
+	title?: string;
+	value?: number;
+}
+
+declare const CardPrize: ComponentType<CardPrizeProps>;
+
+export default CardPrize;

package/types/shared/carousel.d.ts

@@ -0,0 +1,21 @@
+import { ComponentType, ReactNode } from 'react';
+import { BrandStyle } from '../styles';
+
+export interface CarouselProps {
+	// Animate the viewport to the current slide's height.
+	autoHeight?: boolean;
+	// Where the dots sit: justify places the row, overlay lays it over the bottom of
+	// the slides (under them otherwise). Left out, there are no dots.
+	dots?: { justify?: 'center' | 'end' | 'start'; overlay?: boolean } | null;
+	fade?: boolean;
+	// What each slide is called: slides and dots read "<label> N of M". 'Slide' by default.
+	label?: string;
+	onSelect?: ( index: number ) => void;
+	slides?: ReactNode[];
+	// Brand dots in the text colour; black dots with a white border otherwise.
+	style?: BrandStyle;
+}
+
+declare const Carousel: ComponentType<CarouselProps>;
+
+export default Carousel;

package/types/shared/copy-to-clipboard.d.ts

@@ -0,0 +1,23 @@
+import { ComponentType, ReactNode, SVGProps } from 'react';
+import { BrandStyle } from '../styles';
+
+export interface CopyToClipboardProps {
+	children?: ReactNode;
+	// Layout only: it goes on the row inside the Button.
+	className?: string;
+	disabled?: boolean;
+	icon?: ComponentType<SVGProps<SVGSVGElement>>;
+	iconClassName?: string;
+	// Replaces children for two seconds after a copy.
+	message?: ReactNode;
+	onClick?: () => void;
+	// The brand object: the row's border and text take the brand's text colour.
+	style?: BrandStyle | null;
+	value?: string;
+	// The rest go on the Button ( data-guide, aria-label, inline ).
+	[ key: string ]: unknown;
+}
+
+declare const CopyToClipboard: ComponentType<CopyToClipboardProps>;
+
+export default CopyToClipboard;

package/types/shared/divider.d.ts

@@ -0,0 +1,11 @@
+import { ComponentType, ReactNode } from 'react';
+
+export interface DividerProps {
+	children?: ReactNode;
+	className?: string;
+	classNameLabel?: string;
+}
+
+declare const Divider: ComponentType<DividerProps>;
+
+export default Divider;

package/types/shared/empty.d.ts

@@ -0,0 +1,18 @@
+import { ComponentType, ReactNode } from 'react';
+import { BrandStyle } from '../styles';
+
+export interface EmptyProps {
+	children?: ReactNode;
+	// An Empty takes no classes: a caller that sizes or positions it wraps it.
+	className?: never;
+	// The brand object: outlined and written in the brand's text colour (the variant is ignored).
+	style?: BrandStyle | null;
+	// 'primary' is white, 'secondary' light grey; left off, the box is transparent.
+	variant?: 'primary' | 'secondary' | null;
+	// data- and aria- attributes.
+	[ key: string ]: unknown;
+}
+
+declare const Empty: ComponentType<EmptyProps>;
+
+export default Empty;

package/types/shared/error.d.ts

@@ -0,0 +1,17 @@
+import { ComponentType, ReactNode, SVGProps } from 'react';
+import { BrandStyle } from '../styles';
+
+export interface ErrorProps {
+	className?: string;
+	error?: ReactNode;
+	// The glyph before the error: the warning by default, the lock for a locked record.
+	icon?: ComponentType<SVGProps<SVGSVGElement>>;
+	label?: ReactNode;
+	// small: 12px text and a 12px icon, for the line under a table title.
+	size?: 'default' | 'small';
+	style?: BrandStyle;
+}
+
+declare const Error: ComponentType<ErrorProps>;
+
+export default Error;

package/types/shared/fieldset.d.ts

@@ -0,0 +1,17 @@
+import { ComponentType, ReactNode } from 'react';
+import { BrandStyle } from '../styles';
+
+export interface FieldsetProps {
+	button?: ReactNode;
+	children?: ReactNode;
+	className?: string | null;
+	disabled?: boolean;
+	legend?: ReactNode;
+	/** The brand: the legend and its underline take its text colour. */
+	style?: BrandStyle;
+	[ key: string ]: unknown;
+}
+
+declare const Fieldset: ComponentType<FieldsetProps>;
+
+export default Fieldset;

package/types/shared/form.d.ts

@@ -0,0 +1,13 @@
+import { ComponentType, FormEventHandler, ReactNode } from 'react';
+
+export interface FormProps {
+	children?: ReactNode;
+	className?: string;
+	noValidate?: boolean;
+	onSubmit?: FormEventHandler<HTMLFormElement>;
+	[ key: string ]: unknown;
+}
+
+declare const Form: ComponentType<FormProps>;
+
+export default Form;

package/types/shared/indicator.d.ts

@@ -0,0 +1,10 @@
+import { ComponentType } from 'react';
+
+export interface IndicatorProps {
+	className?: string | null;
+	type?: 'active' | 'error' | 'inactive' | 'warning';
+}
+
+declare const Indicator: ComponentType<IndicatorProps>;
+
+export default Indicator;