more component fixes

Author: officialMECH

src/components/ui/atoms/badge/index.tsx src/components/ui/atoms/Badge/index.tsx

@@ -1,32 +1,44 @@
-import { css, cx } from "$/styles/css";
+import { css, cva, cx } from "$/styles/css";
 import { hstack, vstack } from "$/styles/patterns";
+import { RecipeVariantProps } from "$/styles/types";
 import { PropsWithChildren } from "react";
 
 interface Props {
 	title?: string;
 }
-
-function Component({ title, children }: PropsWithChildren<Props>) {
+function Component({ title, variant, children }: PropsWithChildren<Props> & RecipeVariantProps<typeof cn.root>) {
 	return (
-		<aside className={cx(cn.root)}>
-			{title && <span className={cx(cn.heading)}>{title}</span>}
+		<aside className={cx(cn.root({ variant }))}>
+			<span className={cx(cn.heading)}>{title ?? variant?.toUpperCase()}</span>
 			<small className={cx(cn.content)}>{children}</small>
 		</aside>
 	);
 }
 
 const cn = {
-	root: vstack({
-		gap: 1,
-		alignItems: "start",
-		width: "full",
-		padding: 4,
-		backgroundColor: "container",
+	root: cva({
+		base: vstack.raw({
+			gap: 1,
+			alignItems: "start",
+			width: "full",
+			padding: 4,
+		}),
+		variants: {
+			variant: {
+				info: {
+					backgroundColor: "container",
+				},
+			},
+		},
 	}),
 	heading: hstack({
 		fontWeight: "bold",
 	}),
-	content: css({}),
+	content: css({
+		"& :last-child": {
+			marginY: 0,
+		},
+	}),
 };
 
 export { Component };

src/components/ui/atoms/chart/index.tsx src/components/ui/atoms/Chart/index.tsx

@@ -0,0 +1 @@
+export { default as stub } from "./stub";

src/components/ui/atoms/icon/index.tsx src/components/ui/atoms/Icon/index.tsx

@@ -1,18 +1,18 @@
 import { Callout } from "$/components/ui/molecules";
 import { metadata } from "$/constants";
+import { ComponentPropsWithoutRef } from "react";
 
-function Component() {
-	return (
-		<Callout title="INFO">
+export default {
+	variant: "info",
+	children: (
+		<p>
 			This is a stub section.
 			<br />
 			If you have suggestions for content you'd like to see included here, join the{" "}
 			<a href={metadata.repository.concat("/discussions")} target="_blank">
 				discussions
 			</a>{" "}
 			and leave your thoughts!
-		</Callout>
-	);
-}
-
-export { Component };
+		</p>
+	),
+} as ComponentPropsWithoutRef<typeof Callout>;

src/components/ui/atoms/input/index.tsx src/components/ui/atoms/Input/index.tsx

@@ -1,12 +1,12 @@
 export { Component as DatasetActions } from "./actions/dataset";
 export { Component as LevelActions } from "./actions/level";
 export { Component as RowActions } from "./actions/row";
-export { Component as Stub } from "./callout/stub";
 export { Component as LevelCharts } from "./charts/level";
 export { Component as PieCharts } from "./charts/pie";
 export { Component as TimeCharts } from "./charts/time";
-export { Component as ArchiveDataForm } from "./form/archive";
-export { Component as ManualDatasetForm } from "./form/dataset";
-export { Component as ManualDataForm } from "./form/level";
+export { Component as ArchiveDataForm } from "./forms/archive";
+export { Component as ManualDatasetForm } from "./forms/dataset";
+export { Component as ManualDataForm } from "./forms/level";
 
+export * as callouts from "./callouts";
 export * as tables from "./tables";

src/components/ui/molecules/Callout/index.tsx

@@ -1,6 +1,7 @@
 import { Badge } from "$/components/ui/atoms";
+import { Callout } from "$/components/ui/molecules";
 import { Content } from "$/components/ui/organisms";
-import { LevelActions, Stub } from "$/components/ui/templates";
+import { LevelActions, callouts } from "$/components/ui/templates";
 import { resolveLevelIndex } from "$/helpers";
 import { useDataset, useTitle } from "$/hooks";
 import { useParams } from "$/router";
@@ -59,7 +60,7 @@ export default function Page() {
 	}
 	return (
 		<Content title={<Title />} layout={"level"}>
-			{data ? <Stub /> : "This level is not available."}
+			{data ? <Callout {...callouts.stub} /> : "This level is not available."}
 		</Content>
 	);
 }