react-miui 0.3.0 → 0.4.3

package/src/demo/components/layout/list/Header.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { List } from "../../../../components/layout/list/List";
+import { Item } from "../../../../components/layout/list/Item";
+import { Header } from "../../../../components/layout/list/Header";
+
+const ListHeaderDemo = () => {
+    return (
+        <List>
+            <Header>Section name</Header>
+            <Item>Item</Item>
+            <Item>Another item</Item>
+            <Item>One more</Item>
+            <Header>Status section</Header>
+            <Item>Item</Item>
+            <Item>One more</Item>
+            <Header>Advanced</Header>
+            <Item>Item</Item>
+            <Item>Another item</Item>
+            <Item>One more</Item>
+        </List>
+    );
+};
+
+export { ListHeaderDemo };

package/src/demo/components/layout/list/ItemRatio.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { List } from "../../../../components/layout/list/List";
+import { Item } from "../../../../components/layout/list/Item";
+import { ICON, Icon } from "../../../../components/icons/Icon";
+
+const ItemRatioDemo = () => {
+    return (
+        <List>
+            <Item ratio={"1/"}>
+                <span>Label</span>
+                <>Value</>
+            </Item>
+            <Item ratio={"1/"}>
+                <span>Label</span>
+                <Icon name={ICON.forward} />
+            </Item>
+        </List>
+    );
+};
+
+export { ItemRatioDemo };

package/src/demo/components/layout/list/Label.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import { List } from "../../../../components/layout/list/List";
+import { Item } from "../../../../components/layout/list/Item";
+
+const Label = Item.Label;
+
+const ItemLabelDemo = () => {
+    return (
+        <List>
+            <Item>
+                <Label sub={"Here is a little text explaining things. Don't go too long, but make it non-ambiguous."}>
+                    Transmit power
+                </Label>
+            </Item>
+            <Item ratio={"6/4/"}>
+                <Label sub={"Here is a little text explaining things. Don't go too long, but make it non-ambiguous."}>
+                    Transmit power
+                </Label>
+                <></>
+                <>Value</>
+            </Item>
+            <Item>
+                <Label sub={"Just one sentence."}>
+                    Complicated name
+                </Label>
+            </Item>
+        </List>
+    );
+};
+
+export { ItemLabelDemo };

package/src/demo/components/layout/list/List.Item.module.scss

@@ -1,3 +1,7 @@
 .custom {
     border-left: 3px solid green;
 }
+
+.item {
+    display: flex;
+}

package/src/demo/components/layout/list/Value.module.scss

@@ -0,0 +1,4 @@
+.icon {
+    color: var(--toolbar-border);
+    margin-left: calc(40px / var(--ratio-dimensions));
+}

package/src/demo/components/layout/list/Value.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+
+import { List } from "../../../../components/layout/list/List";
+import { Item } from "../../../../components/layout/list/Item";
+import { ICON, Icon } from "../../../../components/icons/Icon";
+import styles from "./Value.module.scss";
+
+const { Label, Value } = Item;
+
+const ValueDemo = () => {
+    return (
+        <List>
+            <Item>
+                <Label>Name</Label>
+                <Value>Jack The 23rd</Value>
+            </Item>
+            <Item>
+                <Label>Start at</Label>
+                <Value>18:00</Value>
+                <Icon name={ICON.forward} className={styles.icon} />
+            </Item>
+        </List>
+    );
+};
+
+export { ValueDemo };

package/src/demo/components/ui/icons/Icons.tsx

@@ -1,16 +1,12 @@
 import React from "react";
 import { Icon, ICON, Item, List } from "../../../../index.js";
 
-import styles from "./Icons.module.scss";
-
 const IconsDemo: React.FC = () => {
     const icons = Object.values(ICON).map((value) => {
         return (
-            <Item key={value}>
-                <div className={styles.row}>
-                    {value}
-                    <Icon name={value} />
-                </div>
+            <Item key={value} ratio={"1/"}>
+                {value}
+                <Icon name={value} />
             </Item>
         );
     });

package/src/demo/componentsMap.ts

@@ -23,6 +23,10 @@ import {
     ActionsOnLeft,
 } from "./components/ui/action/Action";
 import { ToggleDemo } from "./components/form/Toggle";
+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";
 
 interface TheMap {
     // eslint-disable-next-line @typescript-eslint/no-use-before-define
@@ -123,6 +127,24 @@ const componentsMap: TheMap = {
     ListItem: {
         name: "List & Item",
         Component: ListItemDemo,
+        children: {
+            Ratio: {
+                name: "Alignment",
+                Component: ItemRatioDemo,
+            },
+            Header: {
+                name: "Header",
+                Component: ListHeaderDemo,
+            },
+            Label: {
+                name: "Label",
+                Component: ItemLabelDemo,
+            },
+            Value: {
+                name: "Value",
+                Component: ValueDemo,
+            },
+        },
     },
     Pad: {
         name: "Direction pad",

package/src/global.scss

@@ -20,6 +20,8 @@
     --header-border: #c8c8c9;
     --header-bg: #efeff0;
     --header-text: #484848;
+    --text: #323232;
+    --sub: #959595;
 
     --toolbar-border: #ababab;
     --toolbar-bg: #f8f8f8;
@@ -52,4 +54,5 @@
 
 body {
     font-size: 15px;
+    color: var(--text);
 }

package/src/index.ts

@@ -1,11 +1,15 @@
 export * from "./components/form/Checkbox.js";
+export * from "./components/form/Toggle.js";
 
 export * from "./components/icons/Icon.js";
 
 export * from "./components/layout/header/Header.js";
+export * from "./components/layout/header/HeaderIconAction.js";
 export * from "./components/layout/header/StickyHeader.js";
 export * from "./components/layout/list/List.js";
 export * from "./components/layout/list/Item.js";
 
+export * from "./components/ui/action/Action.js";
+export * from "./components/ui/action/EqualActions.js";
 export * from "./components/ui/button/Button.js";
 export * from "./components/ui/directionPad/Pad.js";

package/dist/demo/Demo.d.ts

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

package/dist/demo/Demo.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Demo.d.ts","sourceRoot":"","sources":["../../src/demo/Demo.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,EAOjB,CAAC;AAEF,OAAO,EAAE,IAAI,EAAE,CAAC"}

package/dist/demo/Demo.js

@@ -1,18 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Demo = void 0;
-const react_1 = __importDefault(require("react"));
-const Demo_module_scss_1 = __importDefault(require("./Demo.module.scss"));
-const Menu_1 = require("./Menu");
-const Main_1 = require("./Main");
-const componentsMap_1 = require("./componentsMap");
-const Demo = (props) => {
-    return (react_1.default.createElement("div", { className: Demo_module_scss_1.default.container },
-        react_1.default.createElement(Menu_1.Menu, { list: componentsMap_1.componentsMap }),
-        react_1.default.createElement(Main_1.Main, null)));
-};
-exports.Demo = Demo;
-//# sourceMappingURL=Demo.js.map

package/dist/demo/Demo.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Demo.js","sourceRoot":"","sources":["../../src/demo/Demo.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAE1B,0EAAwC;AACxC,iCAA8B;AAC9B,iCAA8B;AAC9B,mDAAgD;AAEhD,MAAM,IAAI,GAAa,CAAC,KAAK,EAAE,EAAE;IAC7B,OAAO,CACH,uCAAK,SAAS,EAAE,0BAAM,CAAC,SAAS;QAC5B,8BAAC,WAAI,IAAC,IAAI,EAAE,6BAAa,GAAI;QAC7B,8BAAC,WAAI,OAAG,CACN,CACT,CAAC;AACN,CAAC,CAAC;AAEO,oBAAI"}

package/dist/demo/Demo.module.scss

@@ -1,4 +0,0 @@
-.container {
-    display: flex;
-    height: 100%;
-}

package/dist/demo/Main.d.ts

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

package/dist/demo/Main.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Main.d.ts","sourceRoot":"","sources":["../../src/demo/Main.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AA2CrD,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,EA6CjB,CAAC;AAEF,OAAO,EAAE,IAAI,EAAE,CAAC"}

package/dist/demo/Main.js

@@ -1,83 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Main = void 0;
-const react_1 = __importStar(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
-const Main_module_scss_1 = __importDefault(require("./Main.module.scss"));
-const safeUseHash_1 = require("./utils/safeUseHash");
-const componentsMap_1 = require("./componentsMap");
-const getComponentByHash = (hash) => {
-    const parts = hash.split("/");
-    let obj = componentsMap_1.componentsMap, objItem;
-    while (parts.length) {
-        const first = parts.shift();
-        objItem = obj === null || obj === void 0 ? void 0 : obj[first];
-        if (!objItem) {
-            return null;
-        }
-        obj = objItem.children;
-    }
-    if (objItem === null || objItem === void 0 ? void 0 : objItem.Component) {
-        return {
-            name: objItem.name,
-            Component: objItem.Component,
-        };
-    }
-    return null;
-};
-const Main = (props) => {
-    const [bg, setBg] = react_1.useState("white");
-    const hash = safeUseHash_1.safeUseHash();
-    const hashWithoutHash = hash.substr(1);
-    const info = getComponentByHash(hashWithoutHash);
-    const handleTransparentBg = react_1.useCallback(() => {
-        setBg("transparent");
-    }, []);
-    const handleWhiteBg = react_1.useCallback(() => {
-        setBg("white");
-    }, []);
-    const handleMobileBg = react_1.useCallback(() => {
-        setBg("mobile");
-    }, []);
-    if (!info) {
-        return (react_1.default.createElement("div", { className: Main_module_scss_1.default.container },
-            react_1.default.createElement("h1", { className: Main_module_scss_1.default.header }, "Hi there"),
-            "This is poor man's StoryBook."));
-    }
-    const Component = info.Component;
-    const componentCls = classnames_1.default(Main_module_scss_1.default.component, {
-        [Main_module_scss_1.default["component--transparent"]]: bg === "transparent",
-        [Main_module_scss_1.default["component--mobile"]]: bg === "mobile",
-    });
-    return (react_1.default.createElement("div", { className: Main_module_scss_1.default.container },
-        react_1.default.createElement("h1", { className: Main_module_scss_1.default.header }, info.name),
-        react_1.default.createElement("button", { onClick: handleTransparentBg }, "Transparent"),
-        react_1.default.createElement("button", { onClick: handleWhiteBg }, "White"),
-        react_1.default.createElement("button", { onClick: handleMobileBg }, "Mobile"),
-        react_1.default.createElement("div", { className: componentCls },
-            react_1.default.createElement(Component, null))));
-};
-exports.Main = Main;
-//# sourceMappingURL=Main.js.map

package/dist/demo/Main.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Main.js","sourceRoot":"","sources":["../../src/demo/Main.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAqD;AACrD,4DAAoC;AAKpC,0EAAwC;AAExC,qDAAkD;AAClD,mDAAgD;AAShD,MAAM,kBAAkB,GAAG,CAAC,IAAY,EAAwB,EAAE;IAC9D,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IAC9B,IAAI,GAAG,GAAuB,6BAAa,EACvC,OAA+B,CAAC;IAEpC,OAAO,KAAK,CAAC,MAAM,EAAE;QACjB,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,EAAG,CAAC;QAC7B,OAAO,GAAG,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAG,KAAK,CAAC,CAAC;QAEvB,IAAI,CAAC,OAAO,EAAE;YACV,OAAO,IAAI,CAAC;SACf;QACD,GAAG,GAAG,OAAO,CAAC,QAAQ,CAAC;KAC1B;IAED,IAAI,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,SAAS,EAAE;QACpB,OAAO;YACH,IAAI,EAAE,OAAO,CAAC,IAAI;YAClB,SAAS,EAAE,OAAO,CAAC,SAAS;SAC/B,CAAC;KACL;IAED,OAAO,IAAI,CAAC;AAChB,CAAC,CAAC;AAEF,MAAM,IAAI,GAAa,CAAC,KAAK,EAAE,EAAE;IAC7B,MAAM,CAAC,EAAE,EAAE,KAAK,CAAC,GAAG,gBAAQ,CAAK,OAAO,CAAC,CAAC;IAE1C,MAAM,IAAI,GAAG,yBAAW,EAAE,CAAC;IAC3B,MAAM,eAAe,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;IACvC,MAAM,IAAI,GAAG,kBAAkB,CAAC,eAAe,CAAC,CAAC;IAEjD,MAAM,mBAAmB,GAAG,mBAAW,CAAC,GAAG,EAAE;QACzC,KAAK,CAAC,aAAa,CAAC,CAAC;IACzB,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,MAAM,aAAa,GAAG,mBAAW,CAAC,GAAG,EAAE;QACnC,KAAK,CAAC,OAAO,CAAC,CAAC;IACnB,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,MAAM,cAAc,GAAG,mBAAW,CAAC,GAAG,EAAE;QACpC,KAAK,CAAC,QAAQ,CAAC,CAAC;IACpB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,IAAI,CAAC,IAAI,EAAE;QACP,OAAO,CACH,uCAAK,SAAS,EAAE,0BAAM,CAAC,SAAS;YAC5B,sCAAI,SAAS,EAAE,0BAAM,CAAC,MAAM,eAAe;4CAEzC,CACT,CAAC;KACL;IAED,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;IAEjC,MAAM,YAAY,GAAG,oBAAU,CAAC,0BAAM,CAAC,SAAS,EAAE;QAC9C,CAAC,0BAAM,CAAC,wBAAwB,CAAC,CAAC,EAAE,EAAE,KAAK,aAAa;QACxD,CAAC,0BAAM,CAAC,mBAAmB,CAAC,CAAC,EAAE,EAAE,KAAK,QAAQ;KACjD,CAAC,CAAC;IAEH,OAAO,CACH,uCAAK,SAAS,EAAE,0BAAM,CAAC,SAAS;QAC5B,sCAAI,SAAS,EAAE,0BAAM,CAAC,MAAM,IAAG,IAAI,CAAC,IAAI,CAAM;QAC9C,0CAAQ,OAAO,EAAE,mBAAmB,kBAAsB;QAC1D,0CAAQ,OAAO,EAAE,aAAa,YAAgB;QAC9C,0CAAQ,OAAO,EAAE,cAAc,aAAiB;QAEhD,uCAAK,SAAS,EAAE,YAAY;YACxB,8BAAC,SAAS,OAAG,CACX,CACJ,CACT,CAAC;AACN,CAAC,CAAC;AAEO,oBAAI"}

package/dist/demo/Main.module.scss

@@ -1,30 +0,0 @@
-.container {
-    flex: 1;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-}
-
-.component {
-    padding: 20px;
-    flex: 1;
-    overflow: auto;
-
-    &--transparent {
-        background-position: 0px 0px, 10px 10px;
-        background-size: 20px 20px;
-        background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee 100%),linear-gradient(45deg, #eee 25%, white 25%, white 75%, #eee 75%, #eee 100%);
-    }
-
-    &--mobile {
-        border-radius: 20px;
-        max-width: 400px;
-        width: 100%;
-        padding: 0;
-        margin: 20px 0;
-        align-self: center;
-        border: 10px solid black;
-        border-top-width: 30px;
-        position: relative;
-    }
-}

package/dist/demo/Menu.d.ts

@@ -1,9 +0,0 @@
-import React from "react";
-import type { componentsMap } from "./componentsMap";
-interface Props {
-    ancestors?: string[];
-    list: typeof componentsMap;
-}
-declare const Menu: React.FC<Props>;
-export { Menu };
-//# sourceMappingURL=Menu.d.ts.map

package/dist/demo/Menu.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../src/demo/Menu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAErD,UAAU,KAAK;IACX,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;IACrB,IAAI,EAAE,OAAO,aAAa,CAAC;CAC9B;AAED,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAuBzB,CAAC;AAMF,OAAO,EAAE,IAAI,EAAE,CAAC"}

package/dist/demo/Menu.js

@@ -1,31 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Menu = void 0;
-const react_1 = __importDefault(require("react"));
-const Menu_module_scss_1 = __importDefault(require("./Menu.module.scss"));
-const Menu = (props) => {
-    const cmp = Object.entries(props.list).map(([urlHash, component]) => {
-        const label = component.name;
-        const children = `children` in component && component.children
-            ? react_1.default.createElement(Menu, { ancestors: [...props.ancestors, urlHash], list: component.children })
-            : null;
-        return (react_1.default.createElement("li", { key: urlHash },
-            react_1.default.createElement("a", { href: "#" + [...props.ancestors, urlHash].join("/") }, label),
-            children));
-    });
-    const contents = react_1.default.createElement("ul", null, cmp);
-    if (!props.ancestors.length) {
-        cmp.unshift(react_1.default.createElement("li", { key: "--main" },
-            react_1.default.createElement("a", { href: "#" }, "Main")));
-        return react_1.default.createElement("menu", { className: Menu_module_scss_1.default.menu }, contents);
-    }
-    return contents;
-};
-exports.Menu = Menu;
-Menu.defaultProps = {
-    ancestors: [],
-};
-//# sourceMappingURL=Menu.js.map

package/dist/demo/Menu.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Menu.js","sourceRoot":"","sources":["../../src/demo/Menu.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAE1B,0EAAwC;AAQxC,MAAM,IAAI,GAAoB,CAAC,KAAK,EAAE,EAAE;IACpC,MAAM,GAAG,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,OAAO,EAAE,SAAS,CAAC,EAAE,EAAE;QAChE,MAAM,KAAK,GAAG,SAAS,CAAC,IAAI,CAAC;QAC7B,MAAM,QAAQ,GAAG,UAAU,IAAI,SAAS,IAAI,SAAS,CAAC,QAAQ;YAC1D,CAAC,CAAC,8BAAC,IAAI,IAAC,SAAS,EAAE,CAAC,GAAG,KAAK,CAAC,SAAU,EAAE,OAAO,CAAC,EAAE,IAAI,EAAE,SAAS,CAAC,QAAQ,GAAI;YAC/E,CAAC,CAAC,IAAI,CAAC;QAEX,OAAO,CACH,sCAAI,GAAG,EAAE,OAAO;YACZ,qCAAG,IAAI,EAAE,GAAG,GAAG,CAAC,GAAG,KAAK,CAAC,SAAU,EAAE,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,IAAG,KAAK,CAAK;YACnE,QAAQ,CACR,CACR,CAAC;IACN,CAAC,CAAC,CAAC;IAEH,MAAM,QAAQ,GAAG,0CAAK,GAAG,CAAM,CAAC;IAEhC,IAAI,CAAC,KAAK,CAAC,SAAU,CAAC,MAAM,EAAE;QAC1B,GAAG,CAAC,OAAO,CAAC,sCAAI,GAAG,EAAE,QAAQ;YAAE,qCAAG,IAAI,EAAE,GAAG,WAAU,CAAK,CAAC,CAAC;QAC5D,OAAO,wCAAM,SAAS,EAAE,0BAAM,CAAC,IAAI,IAAG,QAAQ,CAAQ,CAAC;KAC1D;IAED,OAAO,QAAQ,CAAC;AACpB,CAAC,CAAC;AAMO,oBAAI;AAJb,IAAI,CAAC,YAAY,GAAG;IAChB,SAAS,EAAE,EAAE;CAChB,CAAC"}

package/dist/demo/Menu.module.scss

@@ -1,41 +0,0 @@
-.menu {
-    margin: 0;
-    padding: 0;
-    border-right: 1px solid black;
-
-    ul {
-        margin: 0 0 0 15px;
-        padding: 0;
-    }
-
-    li {
-        padding: 0;
-        margin: 0;
-        list-style-type: none;
-    }
-
-    > ul {
-        margin: 0;
-        display: block;
-    }
-
-    > ul > li > a {
-        padding: 10px;
-        text-transform: uppercase;
-        font-size: 16px;
-    }
-
-    a {
-        padding: 5px 10px;
-        display: block;
-        color: black;
-        text-decoration: none;
-        font-size: 14px;
-
-        &:hover {
-            background: var(--active-bg);
-        }
-
-        --focus-bg-set: var(--focus-color);
-    }
-}

package/dist/demo/components/form/Checkbox.d.ts

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

package/dist/demo/components/form/Checkbox.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../../src/demo/components/form/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAIrD,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAQzB,CAAC;AAEF,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/dist/demo/components/form/Checkbox.js

@@ -1,31 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CheckboxDemo = void 0;
-const react_1 = __importStar(require("react"));
-const index_js_1 = require("../../../index.js");
-const CheckboxDemo = (props) => {
-    const [v, setV] = react_1.useState(false);
-    const handleToggle = react_1.useCallback(() => { setV((prevV) => !prevV); }, []);
-    return (react_1.default.createElement(index_js_1.Checkbox, { name: "a", onChange: handleToggle, checked: v }, "I want something something"));
-};
-exports.CheckboxDemo = CheckboxDemo;
-//# sourceMappingURL=Checkbox.js.map

package/dist/demo/components/form/Checkbox.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../../src/demo/components/form/Checkbox.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAqD;AAErD,gDAA6C;AAE7C,MAAM,YAAY,GAAa,CAAC,KAAK,EAAE,EAAE;IACrC,MAAM,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,gBAAQ,CAAC,KAAK,CAAC,CAAC;IAElC,MAAM,YAAY,GAAG,mBAAW,CAAC,GAAG,EAAE,GAAG,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEzE,OAAO,CACH,8BAAC,mBAAQ,IAAC,IAAI,EAAE,GAAG,EAAE,QAAQ,EAAE,YAAY,EAAE,OAAO,EAAE,CAAC,iCAAuC,CACjG,CAAC;AACN,CAAC,CAAC;AAEO,oCAAY"}

package/dist/demo/components/form/Toggle.d.ts

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

package/dist/demo/components/form/Toggle.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Toggle.d.ts","sourceRoot":"","sources":["../../../../src/demo/components/form/Toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAShE,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,GA+CvB,CAAC;AAEF,OAAO,EAAE,UAAU,EAAE,CAAC"}

package/dist/demo/components/form/Toggle.js

@@ -1,65 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ToggleDemo = void 0;
-const react_1 = __importStar(require("react"));
-const Toggle_1 = require("../../../components/form/Toggle");
-const List_1 = require("../../../components/layout/list/List");
-const Item_1 = require("../../../components/layout/list/Item");
-const Toggle_module_scss_1 = __importDefault(require("./Toggle.module.scss"));
-const handleNoop = () => undefined;
-const ToggleDemo = () => {
-    const [state, ss] = react_1.useState(null);
-    react_1.useEffect(() => {
-        setTimeout(() => { ss(true); }, 1000);
-    }, []);
-    const handleToggle = react_1.useCallback(() => {
-        if (state == null) {
-            return;
-        }
-        ss(null);
-        setTimeout(() => {
-            ss(!state);
-        }, 1000);
-    }, [state]);
-    return (react_1.default.createElement(List_1.List, null,
-        react_1.default.createElement(Item_1.Item, null,
-            react_1.default.createElement("div", { className: Toggle_module_scss_1.default.row },
-                react_1.default.createElement("span", null, "Off"),
-                react_1.default.createElement(Toggle_1.Toggle, { onChange: handleNoop, state: false }))),
-        react_1.default.createElement(Item_1.Item, null,
-            react_1.default.createElement("div", { className: Toggle_module_scss_1.default.row },
-                react_1.default.createElement("span", null, "On"),
-                react_1.default.createElement(Toggle_1.Toggle, { onChange: handleNoop, state: true }))),
-        react_1.default.createElement(Item_1.Item, null,
-            react_1.default.createElement("div", { className: Toggle_module_scss_1.default.row },
-                react_1.default.createElement("span", null, "Undetermined"),
-                react_1.default.createElement(Toggle_1.Toggle, { onChange: handleNoop, state: null }))),
-        react_1.default.createElement(Item_1.Item, null,
-            react_1.default.createElement("div", { className: Toggle_module_scss_1.default.row },
-                react_1.default.createElement("span", null, "Dynamic"),
-                react_1.default.createElement(Toggle_1.Toggle, { onChange: handleToggle, state: state })))));
-};
-exports.ToggleDemo = ToggleDemo;
-//# sourceMappingURL=Toggle.js.map

package/dist/demo/components/form/Toggle.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Toggle.js","sourceRoot":"","sources":["../../../../src/demo/components/form/Toggle.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAgE;AAChE,4DAAyD;AACzD,+DAA4D;AAC5D,+DAA4D;AAE5D,8EAA0C;AAE1C,MAAM,UAAU,GAAG,GAAG,EAAE,CAAC,SAAS,CAAC;AAEnC,MAAM,UAAU,GAAc,GAAG,EAAE;IAC/B,MAAM,CAAC,KAAK,EAAE,EAAE,CAAC,GAAG,gBAAQ,CAAiB,IAAI,CAAC,CAAC;IAEnD,iBAAS,CAAC,GAAG,EAAE;QAEX,UAAU,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC;IAC1C,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,YAAY,GAAG,mBAAW,CAAC,GAAG,EAAE;QAClC,IAAI,KAAK,IAAI,IAAI,EAAE;YACf,OAAO;SACV;QACD,EAAE,CAAC,IAAI,CAAC,CAAC;QACT,UAAU,CAAC,GAAG,EAAE;YACZ,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC;QAEf,CAAC,EAAE,IAAI,CAAC,CAAC;IACb,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,OAAO,CACH,8BAAC,WAAI;QACD,8BAAC,WAAI;YACD,uCAAK,SAAS,EAAE,4BAAM,CAAC,GAAG;gBACtB,kDAAgB;gBAChB,8BAAC,eAAM,IAAC,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,GAAI,CAC5C,CACH;QACP,8BAAC,WAAI;YACD,uCAAK,SAAS,EAAE,4BAAM,CAAC,GAAG;gBACtB,iDAAe;gBACf,8BAAC,eAAM,IAAC,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAE,IAAI,GAAI,CAC3C,CACH;QACP,8BAAC,WAAI;YACD,uCAAK,SAAS,EAAE,4BAAM,CAAC,GAAG;gBACtB,2DAAyB;gBACzB,8BAAC,eAAM,IAAC,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAE,IAAI,GAAI,CAC3C,CACH;QACP,8BAAC,WAAI;YACD,uCAAK,SAAS,EAAE,4BAAM,CAAC,GAAG;gBACtB,sDAAoB;gBACpB,8BAAC,eAAM,IAAC,QAAQ,EAAE,YAAY,EAAE,KAAK,EAAE,KAAK,GAAI,CAC9C,CACH,CACJ,CACV,CAAC;AACN,CAAC,CAAC;AAEO,gCAAU"}

package/dist/demo/components/form/Toggle.module.scss

@@ -1,5 +0,0 @@
-.row {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}

package/dist/demo/components/layout/header/Header.d.ts

@@ -1,8 +0,0 @@
-/// <reference types="react" />
-declare const HeaderDemo: () => JSX.Element;
-declare const CenteredHeaderDemo: () => JSX.Element;
-declare const ToolbarVariantDemo: () => JSX.Element;
-declare const HeaderWithButtonsDemo: () => JSX.Element;
-declare const HeaderWithButtonsOnSideDemo: () => JSX.Element;
-export { HeaderDemo, CenteredHeaderDemo, ToolbarVariantDemo, HeaderWithButtonsDemo, HeaderWithButtonsOnSideDemo };
-//# sourceMappingURL=Header.d.ts.map

package/dist/demo/components/layout/header/Header.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../../../src/demo/components/layout/header/Header.tsx"],"names":[],"mappings":";AAMA,QAAA,MAAM,UAAU,mBAUf,CAAC;AAEF,QAAA,MAAM,kBAAkB,mBASvB,CAAC;AAEF,QAAA,MAAM,kBAAkB,mBAMvB,CAAC;AAKF,QAAA,MAAM,qBAAqB,mBAqD1B,CAAC;AAEF,QAAA,MAAM,2BAA2B,mBAqBhC,CAAC;AAEF,OAAO,EAAE,UAAU,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,qBAAqB,EAAE,2BAA2B,EAAE,CAAC"}