@muraldevkit/ui-toolkit 2.1.0 → 2.2.0

package/dist/components/grid/MrlCol/MrlCol.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { GridColumns } from '../constants';
+interface MrlCol extends GridColumns {
+    /**
+     * Children to be rendered within the component.
+     */
+    children: React.ReactNode;
+    className?: string;
+}
+/**
+ * MrlCol React component.
+ *
+ * @param props - component props
+ * @returns a MrlCol React component.
+ */
+export declare function MrlCol(props: MrlCol): JSX.Element;
+export {};

package/dist/components/grid/MrlCol/index.d.ts

@@ -0,0 +1 @@
+export { MrlCol } from './MrlCol';

package/dist/components/grid/MrlGrid/MrlGrid.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import '../grid.variables.scss';
+import '../grid.global.scss';
+interface MrlGrid {
+    /**
+     * Children to be rendered within the component.
+     */
+    children: React.ReactNode;
+    className?: string;
+}
+/**
+ * MrlCol React component.
+ *
+ * @param props - component props
+ * @returns a MrlCol React component.
+ */
+export declare function MrlGrid({ children, className }: MrlGrid): JSX.Element;
+export {};

package/dist/components/grid/MrlGrid/index.d.ts

@@ -0,0 +1 @@
+export { MrlGrid } from './MrlGrid';

package/dist/components/grid/MrlRow/MrlRow.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import { AlignOptions, GutterSizes, JustifyOptions } from '../constants';
+interface MrlRow {
+    /**
+     * Flex alignment of the children within the component.
+     */
+    align?: AlignOptions;
+    /**
+     * Children to be rendered within the component.
+     */
+    children: React.ReactNode;
+    className?: string;
+    /**
+     * Gutter size for columns within the row
+     */
+    gutter?: GutterSizes;
+    /**
+     * Justify content of the children within the component.
+     */
+    justify?: JustifyOptions;
+}
+/**
+ * MrlRow React component.
+ *
+ * @param props - component props
+ * @returns a MrlRow React component.
+ */
+export declare function MrlRow({ align, children, className, gutter, justify }: MrlRow): JSX.Element;
+export {};

package/dist/components/grid/MrlRow/index.d.ts

@@ -0,0 +1 @@
+export { MrlRow } from './MrlRow';

package/dist/components/grid/constants.d.ts

@@ -0,0 +1,49 @@
+/**
+ * Alignment & justification options for grid containers
+ */
+export type AlignOptions = 'start' | 'center' | 'end';
+export type JustifyOptions = 'start' | 'center' | 'end' | 'between' | 'around';
+/**
+ * Available grid sizes
+ */
+export declare const GridSizes: string[];
+/**
+ * Number of columns that will be span on the grid.
+ */
+export type NumCols = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+/**
+ * The type of classes that can be configured based on the bootstrap API.
+ * Current supported:
+ * - columns "col-<size>-<number>"
+ * - offsets "offset-<size>-<number>""
+ */
+type GridClass = 'col' | 'offset';
+/**
+ * Interface of available class selectors based on GridClass
+ *
+ * Example interface:
+ * {
+ *    col?: number,
+ *    offset?: number
+ * }
+ */
+type GridClassConfig = {
+    [key in GridClass]?: NumCols;
+};
+/**
+ * Options to configure the number of columns to span on different screen sizes.
+ */
+type ColumnConfig = NumCols | 'auto' | GridClassConfig | undefined;
+export interface GridColumns {
+    xs?: ColumnConfig;
+    sm?: ColumnConfig;
+    md?: ColumnConfig;
+    lg?: ColumnConfig;
+    xl?: ColumnConfig;
+    xxl?: ColumnConfig;
+}
+/**
+ * Available gutter sizes for customizing the grid
+ */
+export type GutterSizes = 0 | 1 | 2;
+export {};

package/dist/components/grid/index.d.ts

@@ -0,0 +1,3 @@
+export * from './MrlGrid';
+export * from './MrlRow';
+export * from './MrlCol';

package/dist/components/index.d.ts

@@ -2,6 +2,7 @@ export * from './button';
 export * from './divider';
 export * from './focus-trap';
 export * from './form';
+export * from './grid';
 export * from './link';
 export * from './modal';
 export * from './notification';