ds-smart-ui
Version:
Smart UI v1.0.5 — A production-ready React component library by PT Praisindo Teknologi. Covers inputs, navigation, data display, feedback, and layout with a unified design system, semantic Typography tokens, and full Storybook documentation.
107 lines (106 loc) • 3.98 kB
TypeScript
import { CSSProperties, ElementType, ReactNode } from 'react';
export interface BoxProps {
children?: ReactNode;
/** Override the root element (default: "div") */
component?: ElementType;
display?: CSSProperties["display"];
overflow?: CSSProperties["overflow"];
overflowX?: CSSProperties["overflowX"];
overflowY?: CSSProperties["overflowY"];
position?: CSSProperties["position"];
top?: number | string;
right?: number | string;
bottom?: number | string;
left?: number | string;
zIndex?: number | string;
width?: number | string;
height?: number | string;
minWidth?: number | string;
minHeight?: number | string;
maxWidth?: number | string;
maxHeight?: number | string;
flexDirection?: CSSProperties["flexDirection"];
flexWrap?: CSSProperties["flexWrap"];
flex?: CSSProperties["flex"];
flexGrow?: number | string;
flexShrink?: number | string;
flexBasis?: number | string;
alignItems?: CSSProperties["alignItems"];
alignContent?: CSSProperties["alignContent"];
alignSelf?: CSSProperties["alignSelf"];
justifyContent?: CSSProperties["justifyContent"];
justifyItems?: CSSProperties["justifyItems"];
justifySelf?: CSSProperties["justifySelf"];
gap?: number | string;
rowGap?: number | string;
columnGap?: number | string;
gridTemplateColumns?: CSSProperties["gridTemplateColumns"];
gridTemplateRows?: CSSProperties["gridTemplateRows"];
gridColumn?: CSSProperties["gridColumn"];
gridRow?: CSSProperties["gridRow"];
gridArea?: CSSProperties["gridArea"];
/** padding all sides */
p?: number | string;
/** padding-top */
pt?: number | string;
/** padding-right */
pr?: number | string;
/** padding-bottom */
pb?: number | string;
/** padding-left */
pl?: number | string;
/** padding left + right */
px?: number | string;
/** padding top + bottom */
py?: number | string;
/** margin all sides */
m?: number | string;
/** margin-top */
mt?: number | string;
/** margin-right */
mr?: number | string;
/** margin-bottom */
mb?: number | string;
/** margin-left */
ml?: number | string;
/** margin left + right (supports "auto") */
mx?: number | string;
/** margin top + bottom */
my?: number | string;
/** background-color shorthand */
bgcolor?: CSSProperties["backgroundColor"];
color?: CSSProperties["color"];
opacity?: number | string;
border?: CSSProperties["border"];
borderTop?: CSSProperties["borderTop"];
borderRight?: CSSProperties["borderRight"];
borderBottom?: CSSProperties["borderBottom"];
borderLeft?: CSSProperties["borderLeft"];
borderColor?: CSSProperties["borderColor"];
borderRadius?: CSSProperties["borderRadius"];
boxShadow?: CSSProperties["boxShadow"];
outline?: CSSProperties["outline"];
fontSize?: CSSProperties["fontSize"];
fontWeight?: CSSProperties["fontWeight"];
fontFamily?: CSSProperties["fontFamily"];
fontStyle?: CSSProperties["fontStyle"];
lineHeight?: CSSProperties["lineHeight"];
letterSpacing?: CSSProperties["letterSpacing"];
textAlign?: CSSProperties["textAlign"];
textDecoration?: CSSProperties["textDecoration"];
textTransform?: CSSProperties["textTransform"];
whiteSpace?: CSSProperties["whiteSpace"];
cursor?: CSSProperties["cursor"];
userSelect?: CSSProperties["userSelect"];
pointerEvents?: CSSProperties["pointerEvents"];
visibility?: CSSProperties["visibility"];
style?: CSSProperties;
className?: string;
id?: string;
onClick?: React.MouseEventHandler<HTMLElement>;
onMouseEnter?: React.MouseEventHandler<HTMLElement>;
onMouseLeave?: React.MouseEventHandler<HTMLElement>;
[key: string]: any;
}
declare const Box: import('react').ForwardRefExoticComponent<Omit<BoxProps, "ref"> & import('react').RefAttributes<HTMLElement>>;
export default Box;