docs: Document AppBar component

Author: spuxx-dev

apps/starlight/src/content/docs/solid/components/layout/app-bar.mdx

@@ -0,0 +1,15 @@
+---
+title: 'App Bar'
+description: |
+  The App Bar is a component that can be used to display content and actions related to the
+  current screen.
+---
+
+import TypeDoc from '@docs/solid/components/layout/app-bar.md';
+import { BaseColor } from '@packages/browser-utils';
+import { Interactive } from '@src/components/interactive';
+
+The App Bar is a component that can be used to display content and actions related to the
+current screen.
+
+<TypeDoc />

packages/solid/src/components/layout/app-bar/app-bar.component.tsx

@@ -2,10 +2,35 @@ import { AppBarProps, attributes, classNames } from '@src/main';
 import { Component, ParentProps } from 'solid-js';
 import { Dynamic } from 'solid-js/web';
 
+/**
+ * A section of the app bar.
+ * @param props - {@link ParentProps}
+ * @returns The section component.
+ */
 const Section: Component<ParentProps> = (props) => (
   <div {...classNames('spx-app-bar-section')}>{props.children}</div>
 );
 
+/**
+ * A flexibile app bar component that can be used to display content and actions related
+ * to the current screen.
+ * @param props - {@link AppBarProps}
+ * @returns The app bar component.
+ * @example
+ * ```tsx
+ * <AppBar>
+ *   <AppBar.Section>
+ *     Left content
+ *   </AppBar.Section>
+ *   <AppBar.Section>
+ *     Center content
+ *   </AppBar.Section>
+ *   <AppBar.Section>
+ *     Right content
+ *   </AppBar.Section>
+ * </AppBar>
+ * ```
+ */
 const AppBar: Component<AppBarProps> & {
   Section: Component<ParentProps>;
 } = ((props) => {