From 6252ed30459a7b91588459b719a7fa4f2ec71aac Mon Sep 17 00:00:00 2001
From: Madeorsk <madeorsk@protonmail.com>
Date: Fri, 27 Sep 2024 19:03:44 +0200
Subject: [PATCH] Add a tip component.

---
 demo/DemoApp.tsx                |  5 +++++
 package.json                    |  2 +-
 src/Components/Tips/Tip.tsx     | 17 +++++++++++++++++
 src/styles/_components.less     |  1 +
 src/styles/components/_tip.less | 28 ++++++++++++++++++++++++++++
 5 files changed, 52 insertions(+), 1 deletion(-)
 create mode 100644 src/Components/Tips/Tip.tsx
 create mode 100644 src/styles/components/_tip.less

diff --git a/demo/DemoApp.tsx b/demo/DemoApp.tsx
index 0cad5db..337c509 100644
--- a/demo/DemoApp.tsx
+++ b/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",
diff --git a/package.json b/package.json
index 45088ac..7f641d3 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-	"version": "1.6.3",
+	"version": "1.7.0",
 	"name": "@kernelui/core",
 	"description": "Kernel UI Core.",
 	"scripts": {
diff --git a/src/Components/Tips/Tip.tsx b/src/Components/Tips/Tip.tsx
new file mode 100644
index 0000000..4d984fd
--- /dev/null
+++ b/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>
+	);
+}
diff --git a/src/styles/_components.less b/src/styles/_components.less
index 078f745..8d4a577 100644
--- a/src/styles/_components.less
+++ b/src/styles/_components.less
@@ -20,3 +20,4 @@
 @import "components/_steps-counter";
 @import "components/_subapp";
 @import "components/_table";
+@import "components/_tip";
diff --git a/src/styles/components/_tip.less b/src/styles/components/_tip.less
new file mode 100644
index 0000000..535e673
--- /dev/null
+++ b/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;
+	}
+}