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.
44 lines (43 loc) • 2.1 kB
TypeScript
import { CSSProperties, ElementType, ReactNode } from 'react';
type GridSize = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | "auto" | boolean;
export interface GridProps {
children?: ReactNode;
/** Makes this element a grid container */
container?: boolean;
/** @deprecated Use breakpoint props directly (xs, sm, etc.) — kept for backward compatibility */
item?: boolean;
/** Columns to span at xs (≥0px) breakpoint. Use `true` for full-width, "auto" for content-width */
xs?: GridSize;
/** Columns to span at sm (≥640px) breakpoint */
sm?: GridSize;
/** Columns to span at md (≥768px) breakpoint */
md?: GridSize;
/** Columns to span at lg (≥1024px) breakpoint */
lg?: GridSize;
/** Columns to span at xl (≥1280px) breakpoint */
xl?: GridSize;
/** Gap between items. Maps 1→8px, 2→16px … 8→64px. Default: 0 */
spacing?: number | string;
/** Row gap only. Overrides spacing for rows */
rowSpacing?: number | string;
/** Column gap only. Overrides spacing for columns */
columnSpacing?: number | string;
/** Total columns in the grid. Default: 12 */
columns?: number;
/** Controls grid-auto-flow: column for column/column-reverse direction */
direction?: "row" | "row-reverse" | "column" | "column-reverse";
/** CSS justifyContent on the grid container */
justifyContent?: CSSProperties["justifyContent"];
/** CSS alignItems on the grid container */
alignItems?: CSSProperties["alignItems"];
/** CSS alignContent on the grid container */
alignContent?: CSSProperties["alignContent"];
style?: CSSProperties;
className?: string;
id?: string;
/** Override the root element. Default: "div" */
component?: ElementType;
[key: string]: any;
}
declare const Grid: ({ children, container, item, xs, sm, md, lg, xl, spacing, rowSpacing, columnSpacing, columns, direction, justifyContent, alignItems, alignContent, style, className, id, component, ...props }: GridProps) => import("react/jsx-runtime").JSX.Element;
export default Grid;