react-miui 0.4.3 → 0.5.0

package/CHANGELOG.md

@@ -6,6 +6,11 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 ## [UNRELEASED]
 (nothing yet)
 
+## [0.5.0] - 2021-12-17
+### Added
+- Section component + container
+- Card component
+
 ## [0.4.3] - 2021-11-27
 ### Fixed
 - Button component crashing

package/dist/components/layout/card/Card.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+declare type Variants = "margin";
+interface Props {
+    variant?: Variants;
+}
+declare const Card: React.FC<Props>;
+export { Card };
+//# sourceMappingURL=Card.d.ts.map

package/dist/components/layout/card/Card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/card/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,aAAK,QAAQ,GAAG,QAAQ,CAAC;AAEzB,UAAU,KAAK;IACX,OAAO,CAAC,EAAE,QAAQ,CAAC;CACtB;AAED,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAWzB,CAAC;AAEF,OAAO,EAAE,IAAI,EAAE,CAAC"}

package/dist/components/layout/card/Card.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Card = void 0;
+const react_1 = __importDefault(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const makeVariants_js_1 = require("../../../utils/makeVariants.js");
+const Card_module_scss_1 = __importDefault(require("./Card.module.scss"));
+const Card = (props) => {
+    const v = makeVariants_js_1.makeVariants(props.variant);
+    const cls = classnames_1.default(Card_module_scss_1.default.card, {
+        [Card_module_scss_1.default.margin]: v.includes("margin"),
+    });
+    return (react_1.default.createElement("div", { className: cls }, props.children));
+};
+exports.Card = Card;
+//# sourceMappingURL=Card.js.map

package/dist/components/layout/card/Card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../../src/components/layout/card/Card.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,4DAAoC;AAEpC,oEAA8D;AAC9D,0EAAwC;AAQxC,MAAM,IAAI,GAAoB,CAAC,KAAK,EAAE,EAAE;IACpC,MAAM,CAAC,GAAG,8BAAY,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IACtC,MAAM,GAAG,GAAG,oBAAU,CAAC,0BAAM,CAAC,IAAI,EAAE;QAChC,CAAC,0BAAM,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC;KACxC,CAAC,CAAC;IAIH,OAAO,CACH,uCAAK,SAAS,EAAE,GAAG,IAAG,KAAK,CAAC,QAAQ,CAAO,CAC9C,CAAC;AACN,CAAC,CAAC;AAEO,oBAAI"}

package/dist/components/layout/card/Card.module.scss

@@ -0,0 +1,15 @@
+.card {
+    background: var(--background);
+    border-radius: 5px;
+    display: flex;
+    flex-direction: column;
+
+    + .card {
+        margin-top: 23px;
+    }
+}
+
+.margin {
+    margin-left: 23px;
+    margin-right: 23px;
+}

package/dist/components/layout/section/Section.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import { SectionContainer } from "./SectionContainer.js";
+interface SubComponents {
+    Container: typeof SectionContainer;
+}
+declare type Variant = "horizontal" | "vertical";
+interface Props {
+    variant?: Variant | Variant[];
+}
+declare const Section: React.FC<Props> & SubComponents;
+export { Section };
+//# sourceMappingURL=Section.d.ts.map

package/dist/components/layout/section/Section.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Section.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/section/Section.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAIzD,UAAU,aAAa;IACnB,SAAS,EAAE,OAAO,gBAAgB,CAAC;CACtC;AAED,aAAK,OAAO,GAAG,YAAY,GAAG,UAAU,CAAC;AAEzC,UAAU,KAAK;IACX,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,EAAE,CAAC;CACjC;AAED,QAAA,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,aAYhC,CAAC;AAIF,OAAO,EAAE,OAAO,EAAE,CAAC"}

package/dist/components/layout/section/Section.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Section = void 0;
+const react_1 = __importDefault(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const SectionContainer_js_1 = require("./SectionContainer.js");
+const makeVariants_js_1 = require("../../../utils/makeVariants.js");
+const Section_module_scss_1 = __importDefault(require("./Section.module.scss"));
+const Section = (props) => {
+    const v = makeVariants_js_1.makeVariants(props.variant);
+    const cls = classnames_1.default(Section_module_scss_1.default.section, {
+        [Section_module_scss_1.default.vertical]: v.includes("vertical"),
+        [Section_module_scss_1.default.horizontal]: v.includes("horizontal"),
+    });
+    return (react_1.default.createElement("section", { className: cls }, props.children));
+};
+exports.Section = Section;
+Section.Container = SectionContainer_js_1.SectionContainer;
+//# sourceMappingURL=Section.js.map

package/dist/components/layout/section/Section.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Section.js","sourceRoot":"","sources":["../../../../src/components/layout/section/Section.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,4DAAoC;AAEpC,+DAAyD;AACzD,oEAA8D;AAC9D,gFAA2C;AAY3C,MAAM,OAAO,GAAoC,CAAC,KAAK,EAAE,EAAE;IACvD,MAAM,CAAC,GAAG,8BAAY,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAEtC,MAAM,GAAG,GAAG,oBAAU,CAAC,6BAAM,CAAC,OAAO,EAAE;QACnC,CAAC,6BAAM,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,UAAU,CAAC;QACzC,CAAC,6BAAM,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,YAAY,CAAC;KAChD,CAAC,CAAC;IACH,OAAO,CACH,2CAAS,SAAS,EAAE,GAAG,IAClB,KAAK,CAAC,QAAQ,CACT,CACb,CAAC;AACN,CAAC,CAAC;AAIO,0BAAO;AAFhB,OAAO,CAAC,SAAS,GAAG,sCAAgB,CAAC"}

package/dist/components/layout/section/Section.module.scss

@@ -0,0 +1,17 @@
+.section {
+    background: var(--background);
+}
+
+.section + .section {
+    margin-top: 23px;
+}
+
+.vertical {
+    margin-top: 23px;
+    margin-bottom: 23px;
+}
+
+.horizontal {
+    margin-left: 23px;
+    margin-right: 23px;
+}

package/dist/components/layout/section/SectionContainer.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+declare const SectionContainer: React.FC;
+export { SectionContainer };
+//# sourceMappingURL=SectionContainer.d.ts.map

package/dist/components/layout/section/SectionContainer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionContainer.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/section/SectionContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,QAAA,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAI7B,CAAC;AAEF,OAAO,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/components/layout/section/SectionContainer.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SectionContainer = void 0;
+const react_1 = __importDefault(require("react"));
+const SectionContainer_module_scss_1 = __importDefault(require("./SectionContainer.module.scss"));
+const SectionContainer = (props) => {
+    return (react_1.default.createElement("div", { className: SectionContainer_module_scss_1.default.container }, props.children));
+};
+exports.SectionContainer = SectionContainer;
+//# sourceMappingURL=SectionContainer.js.map

package/dist/components/layout/section/SectionContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionContainer.js","sourceRoot":"","sources":["../../../../src/components/layout/section/SectionContainer.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAE1B,kGAAoD;AAEpD,MAAM,gBAAgB,GAAa,CAAC,KAAK,EAAE,EAAE;IACzC,OAAO,CACH,uCAAK,SAAS,EAAE,sCAAM,CAAC,SAAS,IAAG,KAAK,CAAC,QAAQ,CAAO,CAC3D,CAAC;AACN,CAAC,CAAC;AAEO,4CAAgB"}

package/dist/components/layout/section/SectionContainer.module.scss

@@ -0,0 +1,4 @@
+.container {
+    background: var(--toolbar-bg);
+    flex: 1;
+}

package/dist/global.scss

@@ -4,6 +4,8 @@
     --ratio-border:     2.666666;
     --ratio-font:       1.666666;
 
+    --background: white;
+
     --main-color: #008ad2; // used
     --main-color-alt: #006AA9;
 

package/docs/enums/ICON.html

@@ -3,8 +3,8 @@
 <head>
 	<meta charset="utf-8">
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
-	<title>ICON | react-miui - v0.4.3</title>
-	<meta name="description" content="Documentation for react-miui - v0.4.3">
+	<title>ICON | react-miui - v0.5.0</title>
+	<meta name="description" content="Documentation for react-miui - v0.5.0">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<link rel="stylesheet" href="../assets/css/main.css">
 	<link rel="stylesheet" href="../assets/css/pages.css">
@@ -23,7 +23,7 @@
 						<li class="state loading">Preparing search index...</li>
 						<li class="state failure">The search index is not available</li>
 					</ul>
-					<a href="../index.html" class="title">react-miui - v0.4.3</a>
+					<a href="../index.html" class="title">react-miui - v0.5.0</a>
 				</div>
 				<div class="table-cell" id="tsd-widgets">
 					<div id="tsd-filter">
@@ -90,7 +90,7 @@
 					<div class="tsd-signature tsd-kind-icon">back<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol"> = &quot;back&quot;</span></div>
 					<aside class="tsd-sources">
 						<ul>
-							<li>Defined in <a href="https://github.com/dzek69/react-miui/blob/8840afb/src/components/icons/Icon.tsx#L10">src/components/icons/Icon.tsx:10</a></li>
+							<li>Defined in <a href="https://github.com/dzek69/react-miui/blob/c202cd3/src/components/icons/Icon.tsx#L10">src/components/icons/Icon.tsx:10</a></li>
 						</ul>
 					</aside>
 				</section>
@@ -100,7 +100,7 @@
 					<div class="tsd-signature tsd-kind-icon">checkmark<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol"> = &quot;checkmark&quot;</span></div>
 					<aside class="tsd-sources">
 						<ul>
-							<li>Defined in <a href="https://github.com/dzek69/react-miui/blob/8840afb/src/components/icons/Icon.tsx#L9">src/components/icons/Icon.tsx:9</a></li>
+							<li>Defined in <a href="https://github.com/dzek69/react-miui/blob/c202cd3/src/components/icons/Icon.tsx#L9">src/components/icons/Icon.tsx:9</a></li>
 						</ul>
 					</aside>
 				</section>
@@ -110,7 +110,7 @@
 					<div class="tsd-signature tsd-kind-icon">forward<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol"> = &quot;forward&quot;</span></div>
 					<aside class="tsd-sources">
 						<ul>
-							<li>Defined in <a href="https://github.com/dzek69/react-miui/blob/8840afb/src/components/icons/Icon.tsx#L11">src/components/icons/Icon.tsx:11</a></li>
+							<li>Defined in <a href="https://github.com/dzek69/react-miui/blob/c202cd3/src/components/icons/Icon.tsx#L11">src/components/icons/Icon.tsx:11</a></li>
 						</ul>
 					</aside>
 				</section>

package/docs/index.html

@@ -3,8 +3,8 @@
 <head>
 	<meta charset="utf-8">
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
-	<title>react-miui - v0.4.3</title>
-	<meta name="description" content="Documentation for react-miui - v0.4.3">
+	<title>react-miui - v0.5.0</title>
+	<meta name="description" content="Documentation for react-miui - v0.5.0">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<link rel="stylesheet" href="assets/css/main.css">
 	<link rel="stylesheet" href="assets/css/pages.css">
@@ -23,7 +23,7 @@
 						<li class="state loading">Preparing search index...</li>
 						<li class="state failure">The search index is not available</li>
 					</ul>
-					<a href="index.html" class="title">react-miui - v0.4.3</a>
+					<a href="index.html" class="title">react-miui - v0.5.0</a>
 				</div>
 				<div class="table-cell" id="tsd-widgets">
 					<div id="tsd-filter">
@@ -57,7 +57,7 @@
 					<a href="modules.html">Globals</a>
 				</li>
 			</ul>
-			<h1>Project react-miui - v0.4.3</h1>
+			<h1>Project react-miui - v0.5.0</h1>
 		</div>
 	</div>
 </header>

package/docs/modules/Item.html

@@ -3,8 +3,8 @@
 <head>
 	<meta charset="utf-8">
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
-	<title>Item | react-miui - v0.4.3</title>
-	<meta name="description" content="Documentation for react-miui - v0.4.3">
+	<title>Item | react-miui - v0.5.0</title>
+	<meta name="description" content="Documentation for react-miui - v0.5.0">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<link rel="stylesheet" href="../assets/css/main.css">
 	<link rel="stylesheet" href="../assets/css/pages.css">
@@ -23,7 +23,7 @@
 						<li class="state loading">Preparing search index...</li>
 						<li class="state failure">The search index is not available</li>
 					</ul>
-					<a href="../index.html" class="title">react-miui - v0.4.3</a>
+					<a href="../index.html" class="title">react-miui - v0.5.0</a>
 				</div>
 				<div class="table-cell" id="tsd-widgets">
 					<div id="tsd-filter">

package/docs/modules/List.html

@@ -3,8 +3,8 @@
 <head>
 	<meta charset="utf-8">
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
-	<title>List | react-miui - v0.4.3</title>
-	<meta name="description" content="Documentation for react-miui - v0.4.3">
+	<title>List | react-miui - v0.5.0</title>
+	<meta name="description" content="Documentation for react-miui - v0.5.0">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<link rel="stylesheet" href="../assets/css/main.css">
 	<link rel="stylesheet" href="../assets/css/pages.css">
@@ -23,7 +23,7 @@
 						<li class="state loading">Preparing search index...</li>
 						<li class="state failure">The search index is not available</li>
 					</ul>
-					<a href="../index.html" class="title">react-miui - v0.4.3</a>
+					<a href="../index.html" class="title">react-miui - v0.5.0</a>
 				</div>
 				<div class="table-cell" id="tsd-widgets">
 					<div id="tsd-filter">

package/docs/modules/StickyHeader.html

@@ -3,8 +3,8 @@
 <head>
 	<meta charset="utf-8">
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
-	<title>StickyHeader | react-miui - v0.4.3</title>
-	<meta name="description" content="Documentation for react-miui - v0.4.3">
+	<title>StickyHeader | react-miui - v0.5.0</title>
+	<meta name="description" content="Documentation for react-miui - v0.5.0">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<link rel="stylesheet" href="../assets/css/main.css">
 	<link rel="stylesheet" href="../assets/css/pages.css">
@@ -23,7 +23,7 @@
 						<li class="state loading">Preparing search index...</li>
 						<li class="state failure">The search index is not available</li>
 					</ul>
-					<a href="../index.html" class="title">react-miui - v0.4.3</a>
+					<a href="../index.html" class="title">react-miui - v0.5.0</a>
 				</div>
 				<div class="table-cell" id="tsd-widgets">
 					<div id="tsd-filter">
@@ -92,7 +92,7 @@
 						<li class="tsd-description">
 							<aside class="tsd-sources">
 								<ul>
-									<li>Defined in <a href="https://github.com/dzek69/react-miui/blob/8840afb/src/components/layout/header/StickyHeader.tsx#L50">src/components/layout/header/StickyHeader.tsx:50</a></li>
+									<li>Defined in <a href="https://github.com/dzek69/react-miui/blob/c202cd3/src/components/layout/header/StickyHeader.tsx#L50">src/components/layout/header/StickyHeader.tsx:50</a></li>
 								</ul>
 							</aside>
 							<h4 class="tsd-parameters-title">Parameters</h4>

package/docs/modules.html

@@ -3,8 +3,8 @@
 <head>
 	<meta charset="utf-8">
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
-	<title>react-miui - v0.4.3</title>
-	<meta name="description" content="Documentation for react-miui - v0.4.3">
+	<title>react-miui - v0.5.0</title>
+	<meta name="description" content="Documentation for react-miui - v0.5.0">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<link rel="stylesheet" href="assets/css/main.css">
 	<link rel="stylesheet" href="assets/css/pages.css">
@@ -23,7 +23,7 @@
 						<li class="state loading">Preparing search index...</li>
 						<li class="state failure">The search index is not available</li>
 					</ul>
-					<a href="index.html" class="title">react-miui - v0.4.3</a>
+					<a href="index.html" class="title">react-miui - v0.5.0</a>
 				</div>
 				<div class="table-cell" id="tsd-widgets">
 					<div id="tsd-filter">
@@ -57,7 +57,7 @@
 					<a href="modules.html">Globals</a>
 				</li>
 			</ul>
-			<h1>Project react-miui - v0.4.3</h1>
+			<h1>Project react-miui - v0.5.0</h1>
 		</div>
 	</div>
 </header>
@@ -110,7 +110,7 @@
 					<div class="tsd-signature tsd-kind-icon">Action<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">React.VFC</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">Props</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol"> = ...</span></div>
 					<aside class="tsd-sources">
 						<ul>
-							<li>Defined in <a href="https://github.com/dzek69/react-miui/blob/8840afb/src/components/ui/action/Action.tsx#L22">src/components/ui/action/Action.tsx:22</a></li>
+							<li>Defined in <a href="https://github.com/dzek69/react-miui/blob/c202cd3/src/components/ui/action/Action.tsx#L22">src/components/ui/action/Action.tsx:22</a></li>
 						</ul>
 					</aside>
 				</section>
@@ -120,7 +120,7 @@
 					<div class="tsd-signature tsd-kind-icon">Button<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">React.FC</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">Props</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol"> = ...</span></div>
 					<aside class="tsd-sources">
 						<ul>
-							<li>Defined in <a href="https://github.com/dzek69/react-miui/blob/8840afb/src/components/ui/button/Button.tsx#L12">src/components/ui/button/Button.tsx:12</a></li>
+							<li>Defined in <a href="https://github.com/dzek69/react-miui/blob/c202cd3/src/components/ui/button/Button.tsx#L12">src/components/ui/button/Button.tsx:12</a></li>
 						</ul>
 					</aside>
 				</section>
@@ -130,7 +130,7 @@
 					<div class="tsd-signature tsd-kind-icon">Checkbox<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">React.FC</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">Props</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol"> = ...</span></div>
 					<aside class="tsd-sources">
 						<ul>
-							<li>Defined in <a href="https://github.com/dzek69/react-miui/blob/8840afb/src/components/form/Checkbox.tsx#L13">src/components/form/Checkbox.tsx:13</a></li>
+							<li>Defined in <a href="https://github.com/dzek69/react-miui/blob/c202cd3/src/components/form/Checkbox.tsx#L13">src/components/form/Checkbox.tsx:13</a></li>
 						</ul>
 					</aside>
 				</section>
@@ -140,7 +140,7 @@
 					<div class="tsd-signature tsd-kind-icon">Direction<wbr>Pad<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">React.FC</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">Props</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol"> = ...</span></div>
 					<aside class="tsd-sources">
 						<ul>
-							<li>Defined in <a href="https://github.com/dzek69/react-miui/blob/8840afb/src/components/ui/directionPad/Pad.tsx#L17">src/components/ui/directionPad/Pad.tsx:17</a></li>
+							<li>Defined in <a href="https://github.com/dzek69/react-miui/blob/c202cd3/src/components/ui/directionPad/Pad.tsx#L17">src/components/ui/directionPad/Pad.tsx:17</a></li>
 						</ul>
 					</aside>
 				</section>
@@ -150,7 +150,7 @@
 					<div class="tsd-signature tsd-kind-icon">Equal<wbr>Actions<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">React.FC</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">Props</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol"> = ...</span></div>
 					<aside class="tsd-sources">
 						<ul>
-							<li>Defined in <a href="https://github.com/dzek69/react-miui/blob/8840afb/src/components/ui/action/EqualActions.tsx#L11">src/components/ui/action/EqualActions.tsx:11</a></li>
+							<li>Defined in <a href="https://github.com/dzek69/react-miui/blob/c202cd3/src/components/ui/action/EqualActions.tsx#L11">src/components/ui/action/EqualActions.tsx:11</a></li>
 						</ul>
 					</aside>
 				</section>
@@ -160,7 +160,7 @@
 					<div class="tsd-signature tsd-kind-icon">Header<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">React.FC</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">Props</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol"> = ...</span></div>
 					<aside class="tsd-sources">
 						<ul>
-							<li>Defined in <a href="https://github.com/dzek69/react-miui/blob/8840afb/src/components/layout/header/Header.tsx#L23">src/components/layout/header/Header.tsx:23</a></li>
+							<li>Defined in <a href="https://github.com/dzek69/react-miui/blob/c202cd3/src/components/layout/header/Header.tsx#L23">src/components/layout/header/Header.tsx:23</a></li>
 						</ul>
 					</aside>
 				</section>
@@ -170,7 +170,7 @@
 					<div class="tsd-signature tsd-kind-icon">Header<wbr>Icon<wbr>Action<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">React.VFC</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">Props</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol"> = ...</span></div>
 					<aside class="tsd-sources">
 						<ul>
-							<li>Defined in <a href="https://github.com/dzek69/react-miui/blob/8840afb/src/components/layout/header/HeaderIconAction.tsx#L22">src/components/layout/header/HeaderIconAction.tsx:22</a></li>
+							<li>Defined in <a href="https://github.com/dzek69/react-miui/blob/c202cd3/src/components/layout/header/HeaderIconAction.tsx#L22">src/components/layout/header/HeaderIconAction.tsx:22</a></li>
 						</ul>
 					</aside>
 				</section>
@@ -180,7 +180,7 @@
 					<div class="tsd-signature tsd-kind-icon">Icon<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">React.FC</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">Props</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol"> = ...</span></div>
 					<aside class="tsd-sources">
 						<ul>
-							<li>Defined in <a href="https://github.com/dzek69/react-miui/blob/8840afb/src/components/icons/Icon.tsx#L25">src/components/icons/Icon.tsx:25</a></li>
+							<li>Defined in <a href="https://github.com/dzek69/react-miui/blob/c202cd3/src/components/icons/Icon.tsx#L25">src/components/icons/Icon.tsx:25</a></li>
 						</ul>
 					</aside>
 				</section>
@@ -190,7 +190,7 @@
 					<div class="tsd-signature tsd-kind-icon">Item<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">React.FC</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">Props</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol"> &amp; </span><span class="tsd-signature-type">SubComponents</span><span class="tsd-signature-symbol"> = ...</span></div>
 					<aside class="tsd-sources">
 						<ul>
-							<li>Defined in <a href="https://github.com/dzek69/react-miui/blob/8840afb/src/components/layout/list/Item.tsx#L27">src/components/layout/list/Item.tsx:27</a></li>
+							<li>Defined in <a href="https://github.com/dzek69/react-miui/blob/c202cd3/src/components/layout/list/Item.tsx#L27">src/components/layout/list/Item.tsx:27</a></li>
 						</ul>
 					</aside>
 				</section>
@@ -200,7 +200,7 @@
 					<div class="tsd-signature tsd-kind-icon">List<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">React.FC</span><span class="tsd-signature-symbol"> &amp; </span><span class="tsd-signature-type">SubComponents</span><span class="tsd-signature-symbol"> = ...</span></div>
 					<aside class="tsd-sources">
 						<ul>
-							<li>Defined in <a href="https://github.com/dzek69/react-miui/blob/8840afb/src/components/layout/list/List.tsx#L10">src/components/layout/list/List.tsx:10</a></li>
+							<li>Defined in <a href="https://github.com/dzek69/react-miui/blob/c202cd3/src/components/layout/list/List.tsx#L10">src/components/layout/list/List.tsx:10</a></li>
 						</ul>
 					</aside>
 				</section>
@@ -210,7 +210,7 @@
 					<div class="tsd-signature tsd-kind-icon">Sticky<wbr>Header<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">React.FC</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">Props</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol"> &amp; </span><span class="tsd-signature-type">Content</span><span class="tsd-signature-symbol"> = ...</span></div>
 					<aside class="tsd-sources">
 						<ul>
-							<li>Defined in <a href="https://github.com/dzek69/react-miui/blob/8840afb/src/components/layout/header/StickyHeader.tsx#L17">src/components/layout/header/StickyHeader.tsx:17</a></li>
+							<li>Defined in <a href="https://github.com/dzek69/react-miui/blob/c202cd3/src/components/layout/header/StickyHeader.tsx#L17">src/components/layout/header/StickyHeader.tsx:17</a></li>
 						</ul>
 					</aside>
 				</section>
@@ -220,7 +220,7 @@
 					<div class="tsd-signature tsd-kind-icon">Toggle<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">React.VFC</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">Props</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol"> = ...</span></div>
 					<aside class="tsd-sources">
 						<ul>
-							<li>Defined in <a href="https://github.com/dzek69/react-miui/blob/8840afb/src/components/form/Toggle.tsx#L11">src/components/form/Toggle.tsx:11</a></li>
+							<li>Defined in <a href="https://github.com/dzek69/react-miui/blob/c202cd3/src/components/form/Toggle.tsx#L11">src/components/form/Toggle.tsx:11</a></li>
 						</ul>
 					</aside>
 				</section>

package/docs/pages/Tutorials/Test.html

@@ -3,8 +3,8 @@
 <head>
 	<meta charset="utf-8">
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
-	<title>Test | react-miui - v0.4.3</title>
-	<meta name="description" content="Documentation for react-miui - v0.4.3">
+	<title>Test | react-miui - v0.5.0</title>
+	<meta name="description" content="Documentation for react-miui - v0.5.0">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<link rel="stylesheet" href="../../assets/css/main.css">
 	<link rel="stylesheet" href="../../assets/css/pages.css">
@@ -23,7 +23,7 @@
 						<li class="state loading">Preparing search index...</li>
 						<li class="state failure">The search index is not available</li>
 					</ul>
-					<a href="../../index.html" class="title">react-miui - v0.4.3</a>
+					<a href="../../index.html" class="title">react-miui - v0.5.0</a>
 				</div>
 				<div class="table-cell" id="tsd-widgets">
 					<div id="tsd-filter">

package/esm/components/layout/card/Card.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+declare type Variants = "margin";
+interface Props {
+    variant?: Variants;
+}
+declare const Card: React.FC<Props>;
+export { Card };
+//# sourceMappingURL=Card.d.ts.map

package/esm/components/layout/card/Card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/card/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,aAAK,QAAQ,GAAG,QAAQ,CAAC;AAEzB,UAAU,KAAK;IACX,OAAO,CAAC,EAAE,QAAQ,CAAC;CACtB;AAED,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAWzB,CAAC;AAEF,OAAO,EAAE,IAAI,EAAE,CAAC"}

package/esm/components/layout/card/Card.js

@@ -0,0 +1,13 @@
+import React from "react";
+import classnames from "classnames";
+import { makeVariants } from "../../../utils/makeVariants.js";
+import styles from "./Card.module.scss";
+const Card = (props) => {
+    const v = makeVariants(props.variant);
+    const cls = classnames(styles.card, {
+        [styles.margin]: v.includes("margin"),
+    });
+    return (React.createElement("div", { className: cls }, props.children));
+};
+export { Card };
+//# sourceMappingURL=Card.js.map

package/esm/components/layout/card/Card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../../src/components/layout/card/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAC9D,OAAO,MAAM,MAAM,oBAAoB,CAAC;AAQxC,MAAM,IAAI,GAAoB,CAAC,KAAK,EAAE,EAAE;IACpC,MAAM,CAAC,GAAG,YAAY,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IACtC,MAAM,GAAG,GAAG,UAAU,CAAC,MAAM,CAAC,IAAI,EAAE;QAChC,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC;KACxC,CAAC,CAAC;IAIH,OAAO,CACH,6BAAK,SAAS,EAAE,GAAG,IAAG,KAAK,CAAC,QAAQ,CAAO,CAC9C,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EAAE,IAAI,EAAE,CAAC"}

package/esm/components/layout/card/Card.module.scss

@@ -0,0 +1,15 @@
+.card {
+    background: var(--background);
+    border-radius: 5px;
+    display: flex;
+    flex-direction: column;
+
+    + .card {
+        margin-top: 23px;
+    }
+}
+
+.margin {
+    margin-left: 23px;
+    margin-right: 23px;
+}

package/esm/components/layout/section/Section.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import { SectionContainer } from "./SectionContainer.js";
+interface SubComponents {
+    Container: typeof SectionContainer;
+}
+declare type Variant = "horizontal" | "vertical";
+interface Props {
+    variant?: Variant | Variant[];
+}
+declare const Section: React.FC<Props> & SubComponents;
+export { Section };
+//# sourceMappingURL=Section.d.ts.map

package/esm/components/layout/section/Section.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Section.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/section/Section.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAIzD,UAAU,aAAa;IACnB,SAAS,EAAE,OAAO,gBAAgB,CAAC;CACtC;AAED,aAAK,OAAO,GAAG,YAAY,GAAG,UAAU,CAAC;AAEzC,UAAU,KAAK;IACX,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,EAAE,CAAC;CACjC;AAED,QAAA,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,aAYhC,CAAC;AAIF,OAAO,EAAE,OAAO,EAAE,CAAC"}

package/esm/components/layout/section/Section.js

@@ -0,0 +1,16 @@
+import React from "react";
+import classnames from "classnames";
+import { SectionContainer } from "./SectionContainer.js";
+import { makeVariants } from "../../../utils/makeVariants.js";
+import styles from "./Section.module.scss";
+const Section = (props) => {
+    const v = makeVariants(props.variant);
+    const cls = classnames(styles.section, {
+        [styles.vertical]: v.includes("vertical"),
+        [styles.horizontal]: v.includes("horizontal"),
+    });
+    return (React.createElement("section", { className: cls }, props.children));
+};
+Section.Container = SectionContainer;
+export { Section };
+//# sourceMappingURL=Section.js.map

package/esm/components/layout/section/Section.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Section.js","sourceRoot":"","sources":["../../../../src/components/layout/section/Section.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAC9D,OAAO,MAAM,MAAM,uBAAuB,CAAC;AAY3C,MAAM,OAAO,GAAoC,CAAC,KAAK,EAAE,EAAE;IACvD,MAAM,CAAC,GAAG,YAAY,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAEtC,MAAM,GAAG,GAAG,UAAU,CAAC,MAAM,CAAC,OAAO,EAAE;QACnC,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,UAAU,CAAC;QACzC,CAAC,MAAM,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,YAAY,CAAC;KAChD,CAAC,CAAC;IACH,OAAO,CACH,iCAAS,SAAS,EAAE,GAAG,IAClB,KAAK,CAAC,QAAQ,CACT,CACb,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,CAAC,SAAS,GAAG,gBAAgB,CAAC;AAErC,OAAO,EAAE,OAAO,EAAE,CAAC"}

package/esm/components/layout/section/Section.module.scss

@@ -0,0 +1,17 @@
+.section {
+    background: var(--background);
+}
+
+.section + .section {
+    margin-top: 23px;
+}
+
+.vertical {
+    margin-top: 23px;
+    margin-bottom: 23px;
+}
+
+.horizontal {
+    margin-left: 23px;
+    margin-right: 23px;
+}

package/esm/components/layout/section/SectionContainer.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+declare const SectionContainer: React.FC;
+export { SectionContainer };
+//# sourceMappingURL=SectionContainer.d.ts.map

package/esm/components/layout/section/SectionContainer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionContainer.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/section/SectionContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,QAAA,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAI7B,CAAC;AAEF,OAAO,EAAE,gBAAgB,EAAE,CAAC"}

package/esm/components/layout/section/SectionContainer.js

@@ -0,0 +1,7 @@
+import React from "react";
+import styles from "./SectionContainer.module.scss";
+const SectionContainer = (props) => {
+    return (React.createElement("div", { className: styles.container }, props.children));
+};
+export { SectionContainer };
+//# sourceMappingURL=SectionContainer.js.map

package/esm/components/layout/section/SectionContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionContainer.js","sourceRoot":"","sources":["../../../../src/components/layout/section/SectionContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,MAAM,MAAM,gCAAgC,CAAC;AAEpD,MAAM,gBAAgB,GAAa,CAAC,KAAK,EAAE,EAAE;IACzC,OAAO,CACH,6BAAK,SAAS,EAAE,MAAM,CAAC,SAAS,IAAG,KAAK,CAAC,QAAQ,CAAO,CAC3D,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,EAAE,gBAAgB,EAAE,CAAC"}

package/esm/components/layout/section/SectionContainer.module.scss

@@ -0,0 +1,4 @@
+.container {
+    background: var(--toolbar-bg);
+    flex: 1;
+}

package/esm/global.scss

@@ -4,6 +4,8 @@
     --ratio-border:     2.666666;
     --ratio-font:       1.666666;
 
+    --background: white;
+
     --main-color: #008ad2; // used
     --main-color-alt: #006AA9;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-miui",
-  "version": "0.4.3",
+  "version": "0.5.0",
   "author": "Jacek Nowacki",
   "license": "MIT",
   "scripts": {
@@ -51,7 +51,7 @@
     "husky": "^4.3.0",
     "jest": "^27.0.6",
     "must": "^0.13.4",
-    "next": "^11.1.2",
+    "next": "^11.1.3",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-use": "^17.2.4",

package/src/components/layout/card/Card.module.scss

@@ -0,0 +1,15 @@
+.card {
+    background: var(--background);
+    border-radius: 5px;
+    display: flex;
+    flex-direction: column;
+
+    + .card {
+        margin-top: 23px;
+    }
+}
+
+.margin {
+    margin-left: 23px;
+    margin-right: 23px;
+}

package/src/components/layout/card/Card.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import classnames from "classnames";
+
+import { makeVariants } from "../../../utils/makeVariants.js";
+import styles from "./Card.module.scss";
+
+type Variants = "margin";
+
+interface Props {
+    variant?: Variants;
+}
+
+const Card: React.FC<Props> = (props) => {
+    const v = makeVariants(props.variant);
+    const cls = classnames(styles.card, {
+        [styles.margin]: v.includes("margin"),
+    });
+
+    // @TODO auto wrap some children in Section
+
+    return (
+        <div className={cls}>{props.children}</div>
+    );
+};
+
+export { Card };

package/src/components/layout/section/Section.module.scss

@@ -0,0 +1,17 @@
+.section {
+    background: var(--background);
+}
+
+.section + .section {
+    margin-top: 23px;
+}
+
+.vertical {
+    margin-top: 23px;
+    margin-bottom: 23px;
+}
+
+.horizontal {
+    margin-left: 23px;
+    margin-right: 23px;
+}

package/src/components/layout/section/Section.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import classnames from "classnames";
+
+import { SectionContainer } from "./SectionContainer.js";
+import { makeVariants } from "../../../utils/makeVariants.js";
+import styles from "./Section.module.scss";
+
+interface SubComponents {
+    Container: typeof SectionContainer;
+}
+
+type Variant = "horizontal" | "vertical";
+
+interface Props {
+    variant?: Variant | Variant[];
+}
+
+const Section: React.FC<Props> & SubComponents = (props) => {
+    const v = makeVariants(props.variant);
+
+    const cls = classnames(styles.section, {
+        [styles.vertical]: v.includes("vertical"),
+        [styles.horizontal]: v.includes("horizontal"),
+    });
+    return (
+        <section className={cls}>
+            {props.children}
+        </section>
+    );
+};
+
+Section.Container = SectionContainer;
+
+export { Section };

package/src/components/layout/section/SectionContainer.module.scss

@@ -0,0 +1,4 @@
+.container {
+    background: var(--toolbar-bg);
+    flex: 1;
+}

package/src/components/layout/section/SectionContainer.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+
+import styles from "./SectionContainer.module.scss";
+
+const SectionContainer: React.FC = (props) => {
+    return (
+        <div className={styles.container}>{props.children}</div>
+    );
+};
+
+export { SectionContainer };

package/src/demo/Main.module.scss

@@ -9,6 +9,8 @@
     padding: 20px;
     flex: 1;
     overflow: auto;
+    display: flex;
+    flex-direction: column;
 
     &--transparent {
         background-position: 0px 0px, 10px 10px;

package/src/demo/components/layout/card/Card.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { Card } from "../../../../components/layout/card/Card";
+import { Section } from "../../../../components/layout/section/Section";
+
+const CardDemo = () => {
+    return (
+        <Section.Container>
+            <Card>
+                <Section variant={["vertical", "horizontal"]}>Content</Section>
+            </Card>
+            <Card>
+                <Section variant={["vertical", "horizontal"]}>Content</Section>
+            </Card>
+            <Card variant={"margin"}>
+                <Section variant={["vertical", "horizontal"]}>Content</Section>
+            </Card>
+        </Section.Container>
+    );
+};
+
+export { CardDemo };

package/src/demo/components/layout/section/Section.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import { Section } from "../../../../components/layout/section/Section.js";
+import { List } from "../../../../components/layout/list/List";
+import { Item } from "../../../../components/layout/list/Item";
+
+const SectionDemo = () => {
+    return (
+        <Section.Container>
+            <Section>
+                <List>
+                    <List.Header>Section name</List.Header>
+                    <Item>Item</Item>
+                    <Item>Item</Item>
+                </List>
+            </Section>
+            <Section>
+                <List>
+                    <List.Header>Section name</List.Header>
+                    <Item>Item</Item>
+                    <Item>Item</Item>
+                </List>
+            </Section>
+            <Section>
+                <List>
+                    <List.Header>Section name</List.Header>
+                    <Item>Item</Item>
+                    <Item>Item</Item>
+                </List>
+            </Section>
+        </Section.Container>
+    );
+};
+
+export { SectionDemo };

package/src/demo/componentsMap.ts

@@ -27,6 +27,8 @@ import { ItemRatioDemo } from "./components/layout/list/ItemRatio";
 import { ItemLabelDemo } from "./components/layout/list/Label";
 import { ListHeaderDemo } from "./components/layout/list/Header";
 import { ValueDemo } from "./components/layout/list/Value";
+import { SectionDemo } from "./components/layout/section/Section";
+import { CardDemo } from "./components/layout/card/Card";
 
 interface TheMap {
     // eslint-disable-next-line @typescript-eslint/no-use-before-define
@@ -146,6 +148,14 @@ const componentsMap: TheMap = {
             },
         },
     },
+    Section: {
+        name: "Section",
+        Component: SectionDemo,
+    },
+    Card: {
+        name: "Card",
+        Component: CardDemo,
+    },
     Pad: {
         name: "Direction pad",
         Component: DirectionPadDemo,

package/src/global.scss

@@ -4,6 +4,8 @@
     --ratio-border:     2.666666;
     --ratio-font:       1.666666;
 
+    --background: white;
+
     --main-color: #008ad2; // used
     --main-color-alt: #006AA9;