docs: Improve documentation for @spuxx/solid library

Author: spuxx-dev

apps/starlight/src/assets/sidebar.ts

@@ -45,7 +45,12 @@ export const sidebar: StarlightUserConfigWithPlugins['sidebar'] = [
       },
       {
         label: 'Components',
-        autogenerate: { directory: 'solid/components' },
+        items: [
+          {
+            label: 'Layout',
+            autogenerate: { directory: 'solid/components/layout' },
+          },
+        ],
       },
     ],
   },

apps/starlight/src/content/docs/solid/components/layout/divider.mdx

@@ -0,0 +1,27 @@
+---
+title: 'Divider'
+description: 'A library containing various production-ready components for SolidJS applications.'
+---
+
+import TypeDoc from '@docs/solid/components/layout/divider.md';
+import { BaseColor, ContentColor } from '@packages/browser-utils/dist/main';
+import { Interactive } from '@src/components/interactive';
+
+<Interactive
+  componentName="Divider"
+  argDefinitions={{
+    color: {
+      type: 'string',
+      options: Object.values({ ...BaseColor, ...ContentColor }),
+    },
+    variant: {
+      type: 'string',
+      options: ['straight', 'sleek'],
+    },
+    vertical: {
+      type: 'boolean',
+    },
+  }}
+/>
+
+<TypeDoc />

apps/starlight/src/content/docs/solid/index.mdx

@@ -3,19 +3,6 @@ title: 'Solid'
 description: 'A library containing various production-ready components for SolidJS applications.'
 ---
 
-import { BaseColor, ContentColor } from "@packages/browser-utils/dist/main";
-import { Interactive } from "@src/components/interactive";
+import README from '@packages/solid/README.md';
 
-<Interactive componentName="Divider" title="Divider (horizontal)" argDefinitions={{
-  color: {
-    type: "string",
-    options: Object.values({...BaseColor, ...ContentColor})
-  },
-  variant: {
-    type: "string",
-    options: ["straight", "sleek"]
-  },
-  vertical: {
-    type: "boolean"
-  }
-}}/>
+<README />

packages/solid/README.md

@@ -1,16 +1,45 @@
-## Colors and Themes
+# @spuxx/solid
 
-### Custom Colors
+![Main pipeline](https://github.com/spuxx-dev/jslibs/actions/workflows/main.yml/badge.svg)
+![Release pipeline](https://github.com/spuxx-dev/jslibs/actions/workflows/release_solid.yml/badge.svg)
+![npm version](https://img.shields.io/npm/v/%40spuxx%2Fsolid)
+![npm bundle size](https://img.shields.io/bundlephobia/min/%40spuxx%2Fsolid)
+![License](https://img.shields.io/github/license/spuxx-dev/jslibs)
 
-Types for default colors provided by `@spuxx/styles` are defined in [src/types/registry.ts](packages/solidsrc/types/registry.ts).
-Custom colors can be added in a type-safe way by extending the `ColorRegistry` interface.
+<!-- vscode-markdown-toc -->
 
-```ts
-import { Colors } from '@spuxx/solid';
+- [Description](#Description)
+- [Documentation](#Documentation)
+- [Installation](#Installation)
+- [Links](#Links)
 
-declare module '@spuxx/solid' {
-  interface ColorRegistry {
-    myCustomColor: 'my-custom-color';
-  }
-}
-```
+<!-- vscode-markdown-toc-config
+	numbering=false
+	autoSave=true
+	/vscode-markdown-toc-config -->
+<!-- /vscode-markdown-toc -->
+
+## <a name='Description'></a>Description
+
+`@spuxx/solid` contains a selection of both primitive and composite components for SolidJS applications. It is primarily intended for my own use, but feel free to use it in your own projects. The components directly use the `@spuxx/browser-utils` package for styling and other utilities. In addition, the library bundles a couple of third-party components such as:
+
+- [@corvu/dialog](https://corvu.dev/docs/primitives/dialog/)
+
+## <a name='Documentation'></a>Documentation
+
+Documentation can be found [here](https://spuxx-dev.github.io/jslibs/solid).
+
+## <a name='Installation'></a>Installation
+
+Depending on your package manager, run:
+
+- `npm install @spuxx/solid` (npm)
+- `pnpm install @spuxx/solid` (pnpm)
+
+## <a name='Links'></a>Links
+
+- [About me](https://spuxx.dev/)
+- [Documentation](https://spuxx-dev.github.io/jslibs/solid)
+- [Source](https://github.com/spuxx-dev/jslibs)
+- [NPM](https://www.npmjs.com/package/@spuxx/solid)
+- [Buy me a coffee](https://buymeacoffee.com/spuxx) ☕️

packages/solid/src/components/layout/divider/divider.component.tsx

@@ -4,9 +4,8 @@ import { attributes, classNames } from '@src/main';
 
 /**
  * A divider component. Can be used to separate content. Supports vertical orientation.
- * Color defaults to `surface`, but can be customized with the `color` prop.
- * @param props
- * @returns
+ * @param props {@link DividerProps}
+ * @returns The divider component.
  */
 export const Divider: Component<DividerProps> = (props) => {
   const { color = 'text-subtle', variant = 'straight', vertical } = props;

packages/solid/src/components/layout/divider/divider.types.ts

@@ -1,6 +1,9 @@
 import { BaseColor, ContentColor } from '@spuxx/browser-utils';
 import { ComponentProps } from '@src/main';
 
+/**
+ * The Divider component's properties.
+ */
 export interface DividerProps extends ComponentProps<HTMLHRElement> {
   /**
    * The color of the divider.