;
+
+export const ContainerExample: Story = {
+ args: {
+ children: (
+
+
+
+ | span: 1 |
+
+
+ span: 1 |
+
+
+ span: 1 |
+
+
+ span: 1 |
+
+
+ span: 1 |
+
+
+ span: 1 |
+
+
+ span: 1 |
+
+
+ span: 1 |
+
+
+ span: 1 |
+
+
+ span: 1 |
+
+
+ span: 1 |
+
+
+ span: 1 |
+
+
+
+
+ | span: 2 |
+
+
+ span: 2 |
+
+
+ span: 2 |
+
+
+ span: 2 |
+
+
+ span: 2 |
+
+
+ span: 2 |
+
+
+
+
+ | span: 3 |
+
+
+ span: 3 |
+
+
+ span: 3 |
+
+
+ span: 3 |
+
+
+
+
+ | span: 4 |
+
+
+ span: 4 |
+
+
+ span: 4 |
+
+
+
+
+ | span: 5 |
+
+
+ span: 5 |
+
+
+ span: 2 |
+
+
+
+
+ | span: 6 |
+
+
+ span: 6 |
+
+
+
+
+ | span: 7 |
+
+
+ span: 5 |
+
+
+
+
+ | span: 8 |
+
+
+ span: 4 |
+
+
+
+
+ | span: 9 |
+
+
+ span: 3 |
+
+
+
+
+ | span: 10 |
+
+
+ span: 2 |
+
+
+
+
+ | span: 11 |
+
+
+ span: 1 |
+
+
+
+
+ | span: 12 |
+
+
+
+ ),
+ },
+};
+
+export const ContainerWidth: Story = {
+ args: {
+ children: (
+
+
+
+ | Takes 3 columns. |
+
+
+ Takes the rest of the width. |
+
+
+
+
+ | Takes the rest of the width. |
+
+
+ Takes 6 columns. |
+
+
+
+ ),
+ },
+};
+
+export const ContainerFluid: Story = {
+ args: {
+ children: (
+
+
+
+
+ | Takes |
+
+
+ exact |
+
+
+ width. |
+
+
+
+
+
+
+ | Takes |
+
+
+ all |
+
+
+ available |
+
+
+ space. |
+
+
+
+
+ ),
+ },
+};
+
+export const ContainerResponsive: Story = {
+ args: {
+ children: (
+
+
+
+
+ | span: 2 |
+
+
+ span: 2 |
+
+
+ span: 2 |
+
+
+ span: 2 |
+
+
+ span: 2 |
+
+
+ span: 2 |
+
+
+
+
+ |
+ xs: 12
+ md: 6
+ |
+
+
+
+
+ |
+ sm: 8
+ xl: 2
+ |
+
+
+
+
+ |
+ md: 4
+ lg: 10
+ |
+
+
+
+
+ | xs:12 |
+
+
+
+
+ ),
+ },
+};
+
+export const ContainerOffset: Story = {
+ args: {
+ children: (
+
+
+
+ | span: 3 |
+
+
+ span: 3 |
+
+
+ span: 3 |
+
+
+ span: 3 |
+
+
+
+
+ |
+ xs: 6
+ offset-xs: 3
+ |
+
+
+
+ ),
+ },
+};
diff --git a/src/lib/Layout/Row.tsx b/src/lib/Layout/Row.tsx
new file mode 100644
index 00000000..91cbc51e
--- /dev/null
+++ b/src/lib/Layout/Row.tsx
@@ -0,0 +1,21 @@
+import type {ReactNode, FC} from 'react';
+import {useLocalTheme} from 'css-vars-hook';
+import classNames from 'classnames';
+
+import classes from './Layout.module.css';
+
+type RowProps = {
+ /** Select an HTML element to render as a container */
+ as?: string;
+ children: ReactNode;
+ className?: string;
+};
+
+export const Row: FC = ({className, children, as = 'div'}) => {
+ const {LocalRoot} = useLocalTheme();
+ return (
+
+ {children}
+
+ );
+};
diff --git a/src/lib/Layout/SizeTypes.tsx b/src/lib/Layout/SizeTypes.tsx
new file mode 100644
index 00000000..398c53a4
--- /dev/null
+++ b/src/lib/Layout/SizeTypes.tsx
@@ -0,0 +1,44 @@
+export enum Sizes {
+ xs = 'xs',
+ sm = 'sm',
+ md = 'md',
+ lg = 'lg',
+ xl = 'xl',
+}
+
+export enum Offsets {
+ xs = 'offsetXS',
+ sm = 'offsetSM',
+ md = 'offsetMD',
+ lg = 'offsetLG',
+ xl = 'offsetXL',
+}
+
+export type SizeUnit = number;
+export type FluidUnit = 'fluid';
+
+export type SizesConfig = {
+ /** The number of columns to span on tiny devices (≥360px) */
+ [Sizes.xs]: SizeUnit | FluidUnit;
+ /** The number of columns to span on small devices (≥576px) */
+ [Sizes.sm]: SizeUnit | FluidUnit;
+ /** The number of columns to span on medium devices (≥768px) */
+ [Sizes.md]: SizeUnit | FluidUnit;
+ /** The number of columns to span on large devices (≥992px) */
+ [Sizes.lg]: SizeUnit | FluidUnit;
+ /** The number of columns to span on extremely large devices (≥1280px) */
+ [Sizes.xl]: SizeUnit | FluidUnit;
+};
+
+export type OffsetConfig = {
+ /** The number of columns to off set this item from left side on extremely small devices (≥360px) */
+ [Offsets.xs]: SizeUnit;
+ /** The number of columns to off set this item from left side on small devices (≥576px) */
+ [Offsets.sm]: SizeUnit;
+ /** The number of columns to off set this item from left side on medium devices (≥768px) */
+ [Offsets.md]: SizeUnit;
+ /** The number of columns to off set this item from left side on large devices (≥992px) */
+ [Offsets.lg]: SizeUnit;
+ /** The number of columns to off set this item from left side on extremely large devices (≥1280px) */
+ [Offsets.xl]: SizeUnit;
+};
diff --git a/src/lib/Layout/index.ts b/src/lib/Layout/index.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/src/lib/Provider/Provider.mdx b/src/lib/Provider/Provider.mdx
new file mode 100644
index 00000000..b251ae74
--- /dev/null
+++ b/src/lib/Provider/Provider.mdx
@@ -0,0 +1,16 @@
+import { Meta, ArgsTable, Story } from "@storybook/blocks";
+
+import { Provider } from "./Provider";
+
+
+
+# Example Component Demo
+
+## Counter props
+
+
+
+## Description
+
+`Provider` component provides user basic interface to increment counter by one.
+
diff --git a/src/lib/Provider/Provider.tsx b/src/lib/Provider/Provider.tsx
new file mode 100644
index 00000000..8591c565
--- /dev/null
+++ b/src/lib/Provider/Provider.tsx
@@ -0,0 +1,6 @@
+import type {FC, ReactNode} from 'react';
+import {RootThemeProvider} from 'css-vars-hook';
+
+export const Provider: FC<{children?: ReactNode}> = ({children}) => {
+ return {children};
+};
diff --git a/src/lib/Provider/index.ts b/src/lib/Provider/index.ts
new file mode 100644
index 00000000..0439b997
--- /dev/null
+++ b/src/lib/Provider/index.ts
@@ -0,0 +1 @@
+export {Provider} from './Provider.tsx';
diff --git a/src/lib/Theme/index.ts b/src/lib/Theme/index.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/src/lib/Theme/theme.ts b/src/lib/Theme/theme.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/src/lib/index.ts b/src/lib/index.ts
index 7b9422fa..a3db8d63 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -1 +1,2 @@
export {Counter} from './CounterDemo';
+export {Provider} from './Provider';