@dossierhq/design
Version:
The design system for Dossier.
59 lines (58 loc) • 2.32 kB
TypeScript
import type { FunctionComponent, MouseEventHandler, ReactNode } from 'react';
import { type FlexContainerProps, type FlexItemProps } from '../../utils/FlexboxUtils.js';
import { type GapProps, type MarginProps, type PaddingProps, type SizeProps } from '../../utils/LayoutPropsUtils.js';
interface FullscreenContainerProps {
card?: boolean;
height?: SizeProps['height'];
children: React.ReactNode;
}
interface FullscreenContainerRowProps extends MarginProps, PaddingProps, GapProps, FlexContainerProps, Pick<SizeProps, 'height'> {
id?: string;
center?: boolean;
fullWidth?: boolean;
fillHeight?: boolean;
sticky?: boolean;
style?: React.CSSProperties;
onClick?: MouseEventHandler<HTMLDivElement>;
children: React.ReactNode;
}
interface FullscreenContainerScrollableRowProps {
direction?: 'vertical' | 'horizontal';
scrollToTopSignal?: unknown;
shadows?: 'both' | 'bottom' | 'top' | 'none';
children: React.ReactNode;
}
interface FullscreenContainerColumnsProps {
fillHeight?: boolean;
children: React.ReactNode;
}
interface FullscreenContainerColumnProps extends PaddingProps, GapProps, FlexContainerProps {
width?: keyof typeof COLUMN_WIDTHS;
children?: React.ReactNode;
}
interface FullscreenContainerScrollableColumnProps extends PaddingProps, GapProps, FlexContainerProps {
width?: keyof typeof COLUMN_WIDTHS;
scrollToId?: string;
scrollToIdSignal?: unknown;
children: React.ReactNode;
}
interface FullscreenContainerItemProps extends FlexItemProps, MarginProps, PaddingProps {
children?: ReactNode;
}
/** @public */
export interface FullscreenContainerComponent extends FunctionComponent<FullscreenContainerProps> {
Row: FunctionComponent<FullscreenContainerRowProps>;
ScrollableRow: FunctionComponent<FullscreenContainerScrollableRowProps>;
Columns: FunctionComponent<FullscreenContainerColumnsProps>;
Column: FunctionComponent<FullscreenContainerColumnProps>;
ScrollableColumn: FunctionComponent<FullscreenContainerScrollableColumnProps>;
Item: FunctionComponent<FullscreenContainerItemProps>;
}
declare const COLUMN_WIDTHS: {
'1/12': string;
'2/12': string;
'3/12': string;
'4/12': string;
};
export declare const FullscreenContainer: FullscreenContainerComponent;
export {};