feat: adding mode prop to all components (#374)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit


- **New Features**
- Enhanced component customization with the introduction of
`globalState` in the `Provider` component and the `mode` property across
various components for improved theme control.
- Expanded monitoring capabilities with new directory path monitoring
for nodemon.

- **Documentation**
- Updated component documentation to reflect new properties and adjusted
JSX structure for clearer guidance.

- **Refactor**
- Unified property naming by switching from `kind` and `focus` to `mode`
and `focusMode` across components, improving consistency and
expandability.
    - Removed unused CSS classes and styles for cleaner codebase.

- **Style**
- Adjusted media queries and styles for light color schemes, and updated
component styling to align with the new `mode` property.

- **Chores**
- Updated dependencies, including the addition of `@versini/ui-plugins`
to improve development workflow and component functionality.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

packages/documentation/.ladle/components.tsx

@@ -49,15 +49,23 @@ const renderImportLine = ({
 			</Flexgrid>
 
 			<pre className="mt-0">
-				<code>{`import { ${importName} } from "@versini/${packageName}";`}</code>
+				<code className="text-wrap">{`import { ${importName} } from "@versini/${packageName}";`}</code>
 			</pre>
 		</div>
 	);
 };
 
-export const Provider: GlobalProvider = ({ children, storyMeta }) => {
+export const Provider: GlobalProvider = ({
+	children,
+	storyMeta,
+	globalState,
+}) => {
 	const className = clsx(
-		"prose prose-lighter mt-0 flex w-full flex-col p-2 sm:mt-3 md:mx-auto md:max-w-4xl",
+		"prose mt-0 flex w-full flex-col p-2 sm:mt-3 md:mx-auto md:max-w-4xl",
+		{
+			"prose-dark dark:prose-lighter":
+				!globalState?.story.startsWith("system--typography"),
+		},
 	);
 	const handleOnClickGitHub = () => {
 		window.open(import.meta.env.REPOSITORY, "_blank", "noopener,noreferrer");
@@ -76,12 +84,12 @@ export const Provider: GlobalProvider = ({ children, storyMeta }) => {
 				{children}
 			</div>
 			<Footer
-				kind="light"
+				mode="system"
 				row1={
 					<ButtonIcon
 						noBorder
 						size="small"
-						kind="light"
+						mode="system"
 						spacing={{ b: 2 }}
 						label="link to UI Components GitHub repository"
 						onClick={handleOnClickGitHub}
@@ -90,7 +98,7 @@ export const Provider: GlobalProvider = ({ children, storyMeta }) => {
 					</ButtonIcon>
 				}
 				row2={
-					<div className="text-copy-lighter">
+					<div>
 						UI Components v{import.meta.env.BUILDVERSION} - &copy;{" "}
 						{new Date().getFullYear()} {import.meta.env.OWNER}
 					</div>

packages/documentation/.ladle/config.mjs

@@ -13,7 +13,9 @@ export default {
 		"System*",
 	],
 	appendToHead: `
-	<style>html, body, .ladle-background {background-color:rgb(100 116 139)}</style>
+	<style>
+	  // .ladle-background {background-color:rgb(100 116 139)}
+	</style>
 	<link rel="preconnect" href="https://fonts.googleapis.com">
 	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 	<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">

packages/documentation/.ladle/styles.css

@@ -8,7 +8,7 @@
 	}
 }
 
-/* @media (prefers-color-scheme: light) {
+@media (prefers-color-scheme: light) {
 	html,
 	body,
 	.ladle-background {
@@ -21,4 +21,4 @@
 	.ladle-background {
 		background-color: rgb(100 116 139);
 	}
-} */
+}

packages/documentation/nodemon.json

@@ -4,6 +4,7 @@
 		".ladle/*.*",
 		"src/**/*.*",
 		"../ui-components/src/**/*.*",
-		"../ui-components/lib/**/*.*"
+		"../ui-components/lib/**/*.*",
+		"../ui-plugins/src/**/*.*"
 	]
 }