Add subapps and their style.

demo/DemoApp.tsx

@@ -26,10 +26,13 @@ import {ToggleSwitch} from "../src/Components/Forms/ToggleSwitch";
 import {Step, Steps} from "../src/Components/Steps/Steps";
 import {AsyncPaginate, AutoPaginate, Paginate} from "../src/Components/Pagination/Paginate";
 import {useCurtains} from "../src/Components/Curtains/Curtains";
+import {Subapp, useSubapps} from "../src/Components/Subapps/Subapps";
+import {DemoSubapp} from "./DemoSubapp";
 
 export function DemoApp()
 {
 	const curtains = useCurtains();
+	const subapps = useSubapps();
 
 	const [datetime, setDatetime] = useState(null);
 
@@ -452,7 +455,24 @@ export function DemoApp()
 			<h3>Subapps</h3>
 
 			<Card>
-				<button>Open a subapp</button>
+				<button onClick={() => {
+					subapps.open(
+						<Subapp title={"Title test"}>
+							<p>A test content.</p>
+							<p>
+								Test button :
+								<Float mode={"click"} content={"Test content."}>
+									<button>A button with floating content</button>
+								</Float>
+							</p>
+						</Subapp>
+					)
+				}}>Open a subapp
+				</button>
+
+				<button onClick={() => { subapps.open(<DemoSubapp />) }}>
+					Complex subapp with component
+				</button>
 			</Card>
 
 			<h3>Modals</h3>

demo/DemoSubapp.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import {Subapp, useSubapp} from "../src/Components/Subapps/Subapps";
+import {Card} from "../src/Components/Card";
+
+/**
+ * A demo Subapp component.
+ */
+export function DemoSubapp()
+{
+	// Get subapp close function.
+	const {uuid, close} = useSubapp();
+
+	return (
+		<Subapp title={"My complex subapp"}>
+			<Card>
+				<p>This is a complex subapp.</p>
+
+				<p>UUID : <code>{uuid}</code></p>
+
+				<button onClick={close}>Close the subapp</button>
+			</Card>
+		</Subapp>
+	);
+}

src/Components/Subapps/Subapps.tsx

@@ -0,0 +1,51 @@
+import React from "react";
+import {X} from "@phosphor-icons/react";
+import {useCurtain, useCurtains} from "../Curtains/Curtains";
+
+/**
+ * More natural name of useCurtains for subapps.
+ * @see useCurtains
+ */
+export const useSubapps = useCurtains;
+
+/**
+ * More natural name of useCurtain for subapps.
+ * @see useCurtain
+ */
+export const useSubapp = useCurtain;
+
+/**
+ * Subapp main component.
+ */
+export function Subapp({title, closable, children}: React.PropsWithChildren<{
+	/**
+	 * Subapp title.
+	 */
+	title?: string;
+
+	/**
+	 * Can disable close button.
+	 */
+	closable?: boolean;
+}>)
+{
+	// Subapp is closable by default.
+	closable = closable !== undefined ? closable : true;
+
+	// Subapp state.
+	const {close} = useSubapp();
+
+	return (
+		<div className={"subapp"}>
+			<header>
+				<h1>{title ?? ""}</h1>
+
+				<button className={"icon-only close"} onClick={close} disabled={!closable}><X size={32}/></button>
+			</header>
+
+			<main>
+				{children}
+			</main>
+		</div>
+	);
+}

src/styles/_components.less

@@ -15,4 +15,5 @@
 @import "components/_select";
 @import "components/_steps";
 @import "components/_steps-counter";
+@import "components/_subapp";
 @import "components/_table";

src/styles/components/_subapp.less

@@ -0,0 +1,69 @@
+
+@subapp-margin: 1.5em;
+
+.curtain > .subapp
+{
+	position: absolute;
+	top: @subapp-margin;
+	left: @subapp-margin;
+
+	width: calc(100% - (2 * @subapp-margin));
+	height: calc(100% - (2 * @subapp-margin));
+	border-radius: 0.25em;
+	box-sizing: border-box;
+
+	background: var(--background);
+
+	overflow: auto;
+
+	> header
+	{
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+
+		> h1
+		{
+			flex: 1;
+			margin: auto;
+			padding: 1em 1em;
+
+			font-size: 1.66em;
+			font-weight: 650;
+		}
+
+		> .close
+		{
+			transition: opacity 0.2s ease;
+
+			width: 3em;
+			height: 3em;
+			margin: auto 1em;
+			padding: 0;
+			border-radius: 2em;
+
+			box-shadow: 0 0 0 0 transparent;
+			outline: none;
+			border: none;
+			background: none;
+			color: var(--foreground-lightest);
+
+			opacity: 0.6;
+
+			&:hover
+			{
+				opacity: 1;
+			}
+
+			&:disabled
+			{
+				opacity: 0.33;
+			}
+		}
+	}
+
+	> main
+	{
+		padding: 1em;
+	}
+}