Add a tip component.

demo/DemoApp.tsx

@@ -38,6 +38,7 @@ import {Box} from "../src/Components/Box";
 import {Await, useAsync} from "../src/Async";
 import {NotifyErrorsBoundary} from "../src/Components/Errors/NotifyErrorsBoundary";
 import {DemoFailingComponent, DemoResetComponent} from "./DemoFailingComponent";
+import {Tip} from "../src/Components/Tips/Tip";
 
 export function DemoApp()
 {
@@ -163,6 +164,10 @@ export function DemoApp()
 				<Radio name={"radio-test"}>Radio box test</Radio>
 				<Radio name={"radio-test"}>Radio box test</Radio>
 
+				<Tip>
+					A tip component, very useful in forms which require some explanations.
+				</Tip>
+
 				<Select options={{
 					"a": "AAAAAA",
 					"b": "BBBBBB",

package.json

@@ -1,5 +1,5 @@
 {
-	"version": "1.6.3",
+	"version": "1.7.0",
 	"name": "@kernelui/core",
 	"description": "Kernel UI Core.",
 	"scripts": {

src/Components/Tips/Tip.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import {classes} from "../../Utils";
+import {Info} from "@phosphor-icons/react";
+
+/**
+ * Simple text tip component.
+ */
+export function Tip({className, children, ...props}: React.PropsWithChildren<React.HTMLAttributes<HTMLParagraphElement>>)
+{
+	return (
+		<p className={classes("tip", className)} {...props}>
+			<Info weight={"duotone"} />
+
+			{children}
+		</p>
+	);
+}

src/styles/_components.less

@@ -20,3 +20,4 @@
 @import "components/_steps-counter";
 @import "components/_subapp";
 @import "components/_table";
+@import "components/_tip";

src/styles/components/_tip.less

@@ -0,0 +1,28 @@
+p.tip
+{
+	position: relative;
+
+	margin: auto;
+	width: 30em;
+	padding: 0.3em 0.5em 0.3em 3em;
+	border-radius: 0.3em;
+	box-sizing: border-box;
+
+	border: solid var(--background-darkest) thin;
+	color: var(--foreground-lightest);
+
+	svg
+	{
+		position: absolute;
+		top: 0.3em;
+		left: 0.5em;
+
+		display: inline-block;
+		margin: 0;
+
+		color: var(--primary);
+		font-size: 1.5em;
+
+		vertical-align: middle;
+	}
+}