docs: add component pages

apps/docs/src/pages/components/atom.md

@@ -1,3 +1,94 @@
-# Atom
+---
+meta:
+  title: Atom
+  description: A fundamental building block component in Vuetify0.
+  keywords: atom, vuetify0, component
+category: Component
+performance: 0
+---
 
-The Atom component is the foundational building block for all other components in Vuetify0. It provides dynamic element rendering and supports renderless capabilities.
+# Atom Component
+
+## Description
+
+The `Atom` component serves as a fundamental building block within the Vuetify0 framework. It is designed to be a highly flexible and reusable component, often used as a base for more complex UI elements. Its primary purpose is to encapsulate basic rendering logic and provide a consistent foundation for other components.
+
+## API
+
+### Props
+
+- **`as`**: `HTMLElement | null`
+  - Specifies the HTML element to render the component as. If `null`, it defaults to a `div`.
+- **`renderless`**: `boolean`
+  - If `true`, the component will not render any HTML element itself, but will still provide its functionality to its children. This is useful for creating higher-order components or renderless components.
+
+### Slots
+
+- **`default`**: `(props: T) => any`
+  - The default slot allows you to inject content into the `Atom` component. The `props` object provides access to internal properties or methods of the `Atom` component, allowing for flexible rendering based on its state.
+
+### Events
+
+There are no specific events emitted by the `Atom` component.
+
+## Examples
+
+### Basic Usage
+
+```html
+<template>
+  <Atom>
+    <div>This is a basic Atom component.</div>
+  </Atom>
+</template>
+
+<script setup lang="ts">
+  import { Atom } from '@vuetify/0/components/Atom'
+</script>
+```
+
+### Rendering as a different HTML element
+
+```html
+<template>
+  <Atom as="span">
+    <span>This Atom component renders as a span.</span>
+  </Atom>
+</template>
+
+<script setup lang="ts">
+  import { Atom } from '@vuetify/0/components/Atom'
+</script>
+```
+
+### Renderless Atom
+
+```html
+<template>
+  <Atom renderless>
+    <template #default="{ someInternalProp }">
+      <div>This content is rendered by a renderless Atom. Internal prop: {{ someInternalProp }}</div>
+    </template>
+  </Atom>
+</template>
+
+<script setup lang="ts">
+  import { Atom } from '@vuetify/0/components/Atom'
+</script>
+```
+
+### Atom with custom content via slot
+
+```html
+<template>
+  <Atom>
+    <template #default="{ message }">
+      <h1>{{ message }}</h1>
+    </template>
+  </Atom>
+</template>
+
+<script setup lang="ts">
+  import { Atom } from '@vuetify/0/components/Atom'
+</script>
+```

apps/docs/src/pages/components/avatar.md

@@ -1 +1,91 @@
-# Avatar
+---
+meta:
+  title: Avatar
+  description: A component for displaying user avatars or other circular images.
+  keywords: avatar, vuetify0, component, user profile
+category: Component
+performance: 0
+---
+
+# Avatar Component
+
+## Description
+
+The `Avatar` component in Vuetify0 is used to display circular images, typically representing user profiles, but can also be used for other visual elements requiring a circular shape. It provides options for displaying images, fallback content, and managing loading states.
+
+## API
+
+### Props
+
+- **`type`**: `"image" | "fallback"`
+  - Specifies the type of content the avatar displays. Can be either an image or a fallback (e.g., initials or an icon).
+- **`priority`**: `number`
+  - Determines the loading priority of the avatar, useful for optimizing image loading in lists or grids.
+- **`status`**: `"idle" | "loading" | "loaded" | "error"`
+  - Indicates the current loading status of the avatar's content.
+- **`isVisible`**: `Readonly<ComputedGetter<boolean>>`
+  - A computed property indicating whether the avatar is currently visible.
+
+### Slots
+
+- **`default`**
+  - The default slot for custom content within the avatar, such as an image or text.
+
+### Events
+
+There are no specific events emitted by the `Avatar` component.
+
+## Examples
+
+### Basic Image Avatar
+
+```vue
+<template>
+  <Avatar type="image" src="https://example.com/avatar.jpg" />
+</template>
+
+<script setup lang="ts">
+import { Avatar } from '@vuetify/0/components/Avatar';
+</script>
+```
+
+### Avatar with Fallback (Initials)
+
+```vue
+<template>
+  <Avatar type="fallback">
+    <span>JD</span>
+  </Avatar>
+</template>
+
+<script setup lang="ts">
+import { Avatar } from '@vuetify/0/components/Avatar';
+</script>
+```
+
+### Avatar with Loading Status
+
+```vue
+<template>
+  <Avatar type="image" src="https://example.com/loading-avatar.jpg" status="loading" />
+</template>
+
+<script setup lang="ts">
+import { Avatar } from '@vuetify/0/components/Avatar';
+</script>
+```
+
+### Avatar with Custom Content
+
+```vue
+<template>
+  <Avatar>
+    <img src="https://example.com/custom-avatar.png" alt="Custom Avatar" />
+  </Avatar>
+</template>
+
+<script setup lang="ts">
+import { Avatar } from '@vuetify/0/components/Avatar';
+</script>
+```
+

apps/docs/src/pages/components/breakpoints.md

@@ -1 +1,98 @@
-# Breakpoints
+---
+meta:
+  title: Breakpoints
+  description: A component for managing responsive breakpoints and providing breakpoint-related information.
+  keywords: breakpoints, responsive, vuetify0, component
+category: Component
+performance: 0
+---
+
+# Breakpoints Component
+
+## Description
+
+The `Breakpoints` component in Vuetify0 provides a way to manage and react to different screen sizes and device orientations. It leverages the `useBreakpoints` composable to expose reactive properties related to the current breakpoint, allowing you to build responsive layouts and adapt your UI based on the user's device.
+
+## API
+
+### Props
+
+- **`name`**: `string`
+  - The name of the breakpoint context.
+- **`width`**: `number`
+  - The current width of the viewport.
+- **`height`**: `number`
+  - The current height of the viewport.
+- **`isMobile`**: `boolean`
+  - Indicates if the current viewport is considered a mobile device.
+- **`xs`**: `boolean`
+  - Indicates if the current viewport is within the 'extra small' breakpoint.
+- **`sm`**: `boolean`
+  - Indicates if the current viewport is within the 'small' breakpoint.
+- **`md`**: `boolean`
+  - Indicates if the current viewport is within the 'medium' breakpoint.
+- **`lg`**: `boolean`
+  - Indicates if the current viewport is within the 'large' breakpoint.
+- **`xl`**: `boolean`
+  - Indicates if the current viewport is within the 'extra large' breakpoint.
+- **`xxl`**: `boolean`
+  - Indicates if the current viewport is within the 'double extra large' breakpoint.
+
+### Slots
+
+- **`default`**: `(scope: BreakpointsContext) => any`
+  - The default slot provides access to the `BreakpointsContext` object, which contains all the reactive breakpoint properties. This allows you to conditionally render content or apply styles based on the current breakpoint.
+
+### Events
+
+There are no specific events emitted by the `Breakpoints` component.
+
+## Examples
+
+### Basic Usage with Breakpoint Information
+
+```vue
+<template>
+  <Breakpoints>
+    <template #default="{ xs, sm, md, lg, xl, xxl, width, height, isMobile }">
+      <div>
+        <p>Current Width: {{ width }}px</p>
+        <p>Current Height: {{ height }}px</p>
+        <p>Is Mobile: {{ isMobile }}</p>
+        <p v-if="xs">Extra Small Screen</p>
+        <p v-if="sm">Small Screen</p>
+        <p v-if="md">Medium Screen</p>
+        <p v-if="lg">Large Screen</p>
+        <p v-if="xl">Extra Large Screen</p>
+        <p v-if="xxl">Double Extra Large Screen</p>
+      </div>
+    </template>
+  </Breakpoints>
+</template>
+
+<script setup lang="ts">
+import { Breakpoints } from '@vuetify/0/components/Breakpoints';
+</script>
+```
+
+### Conditional Rendering based on Breakpoint
+
+```vue
+<template>
+  <Breakpoints>
+    <template #default="{ mdAndUp }">
+      <div v-if="mdAndUp">
+        This content is visible on medium screens and larger.
+      </div>
+      <div v-else>
+        This content is visible on screens smaller than medium.
+      </div>
+    </template>
+  </Breakpoints>
+</template>
+
+<script setup lang="ts">
+import { Breakpoints } from '@vuetify/0/components/Breakpoints';
+</script>
+```
+

apps/docs/src/pages/components/context.md

@@ -1 +1,92 @@
-# Context
+---
+meta:
+  title: Context
+  description: A component for providing and injecting context data within a component tree.
+  keywords: context, vuetify0, component, dependency injection
+category: Component
+performance: 0
+---
+
+# Context Component
+
+## Description
+
+The `Context` component in Vuetify0 facilitates dependency injection by providing a mechanism to share data down the component tree without explicitly passing props at each level. It leverages Vue's `provide` and `inject` functionalities, wrapped in a convenient component structure, to manage and retrieve contextual data.
+
+## API
+
+### Props
+
+- **`contextKey`**: `InjectionKey<T> | string`
+  - The key used to identify the context. This can be a Vue `InjectionKey` or a string.
+- **`value`**: `T`
+  - The value to be provided as context. This value can be of any type `T`.
+
+### Slots
+
+- **`default`**: `() => any`
+  - The default slot allows you to place child components that will have access to the provided context.
+
+### Events
+
+There are no specific events emitted by the `Context` component.
+
+## Examples
+
+### Basic Context Provision and Injection
+
+```vue
+<template>
+  <Context :contextKey="myContextKey" :value="myContextValue">
+    <ChildComponent />
+  </Context>
+</template>
+
+<script setup lang="ts">
+import { provide, inject, InjectionKey, ref } from 'vue';
+import { Context } from '@vuetify/0/components/Context';
+
+interface MyContextType {
+  message: string;
+}
+
+const myContextKey: InjectionKey<MyContextType> = Symbol('my-context-key');
+const myContextValue = ref({ message: 'Hello from Context!' });
+
+const ChildComponent = {
+  setup() {
+    const context = inject(myContextKey);
+    return {
+      context,
+    };
+  },
+  template: `<div>{{ context?.message }}</div>`,
+};
+</script>
+```
+
+### Using String as Context Key
+
+```vue
+<template>
+  <Context contextKey="myStringContext" value="This is a string context.">
+    <AnotherChildComponent />
+  </Context>
+</template>
+
+<script setup lang="ts">
+import { inject } from 'vue';
+import { Context } from '@vuetify/0/components/Context';
+
+const AnotherChildComponent = {
+  setup() {
+    const context = inject('myStringContext');
+    return {
+      context,
+    };
+  },
+  template: `<div>{{ context }}</div>`,
+};
+</script>
+```
+