phx-react
Version:
PHX REACT
46 lines (45 loc) • 1.68 kB
TypeScript
import React from 'react';
import { BorderColor, Responsive, SpacingScale } from '../types';
export declare const spacingMap: Record<SpacingScale, string>;
export declare const borderWidthMap: {
none: string;
thin: string;
medium: string;
};
export declare const lineStylesMap: {
solid: string;
dotted: string;
};
export type Element = 'div' | 'span' | 'section' | 'legend' | 'ul' | 'li';
export type LineStyles = 'solid' | 'dotted';
export type BorderWidth = 'none' | 'thin' | 'medium';
export interface PHXBoxProps {
children?: React.ReactNode;
as?: Element;
p?: Responsive<SpacingScale>;
pt?: Responsive<SpacingScale>;
pb?: Responsive<SpacingScale>;
pl?: Responsive<SpacingScale>;
pr?: Responsive<SpacingScale>;
m?: Responsive<SpacingScale>;
mt?: Responsive<SpacingScale>;
mb?: Responsive<SpacingScale>;
ml?: Responsive<SpacingScale>;
mr?: Responsive<SpacingScale>;
fullWidth?: boolean;
maxWidth?: number;
borderStyle?: LineStyles;
borderWidth?: BorderWidth;
/** Vertical start border width */
borderTop?: BorderWidth;
/** Vertical end border width */
borderBottom?: BorderWidth;
/** Horizontal start border width */
borderLeft?: BorderWidth;
/** Horizontal end border width */
borderRight?: BorderWidth;
borderColor?: BorderColor;
cursor?: 'pointer' | 'default';
widthFitContent?: boolean;
}
export declare const PHXBox: ({ children, p, pt, pb, pl, pr, m, mt, mb, ml, mr, fullWidth, borderStyle, borderWidth, maxWidth, as, borderTop, borderBottom, borderLeft, borderRight, borderColor, cursor, widthFitContent, }: PHXBoxProps) => React.JSX.Element;