react-miui 0.9.3 → 0.10.1

package/src/demo/components/ui/message/Message.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+
+import { Message } from "../../../../components/ui/message/Message";
+
+interface Props {}
+
+const MessageDemo: React.FC<Props> = () => {
+    return (
+        <>
+            <Message type={"warning"}>Files will be removed after 30 days.</Message>
+            <br /><br />
+            <Message type={"error"}>Files will be removed after 30 days.</Message>
+            <br /><br />
+            <Message type={"info"}>
+                Files will be removed after 30 days. Files will be removed after 30 days.
+            </Message>
+            <br /><br />
+            <Message type={"warning"} variant={"box"}>Files will be removed after 30 days.</Message>
+            <Message type={"error"} variant={"box"}>Files will be removed after 30 days.</Message>
+            <Message type={"info"} variant={"box"}>
+                Files will be removed after 30 days. Files will be removed after 30 days.
+            </Message>
+        </>
+    );
+};
+
+export { MessageDemo };

package/src/demo/componentsMap.ts

@@ -40,6 +40,7 @@ import { ListInsetDemo } from "./components/layout/list/Inset";
 import { ListSelectionDemo } from "./components/layout/list/Selection";
 import { TabsDemo } from "./components/ui/tabs/Tabs";
 import { ChoiceDemo } from "./components/form/Choice";
+import { MessageDemo } from "./components/ui/message/Message";
 
 interface TheMap {
     // eslint-disable-next-line @typescript-eslint/no-use-before-define
@@ -213,6 +214,10 @@ const componentsMap: TheMap = {
         name: "Toaster",
         Component: ToasterDemo,
     },
+    Message: {
+        name: "Message",
+        Component: MessageDemo,
+    },
     Modal: {
         name: "Modal",
         Component: ModalDemo,

package/src/global.scss

@@ -47,6 +47,8 @@
 
     // Shades: https://maketintsandshades.com/#038bf4,ff7200,7357e8,3ec234,3ec234,ff388f,ea2700
     --blue1: #038bf4;
+    --blue2: #b7d6f5;
+    --blue3: #dbe6ff;
     --orange1: #ff7200;
     --orange1-darker: #cc5b00;
     --purple1: #7357e8;
@@ -54,6 +56,12 @@
     --green1-darker: #38af2f;
     --pink1: #ff388f;
     --red1: #ea2700;
+    --yellow1: #ffde9d;
+    --yellow2: #e4a429;
+    --yellow3: #fff5db;
+    --pinky1: #f5c0b7;
+    --pinky2: #e07b67;
+    --pinky3: #ffe1db;
 
     --grey1: #737373;
 

package/src/index.ts

@@ -20,6 +20,7 @@ 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";
+export * from "./components/ui/message/Message.js";
 export * from "./components/ui/modal/Modal.js";
 export * from "./components/ui/modal/ModalButtons.js";
 export * from "./components/ui/tabs/Selector.js";