refactor: update docs and remove overlay component

Author: mertsincan

apps/showcase/docs/styled/components/accordion/features.mdx

@@ -4,7 +4,7 @@ description: Accordion groups content into collapsible panels.
 component: accordion
 ---
 
-<DocDemoViewer name="accordion:basic-demo" mode="collapsible"/>
+<DocDemoViewer name="accordion:basic-demo" mode="collapsible" hideName />
 
 ## Usage
 
@@ -27,6 +27,12 @@ import { Accordion } from '@primereact/ui/accordion';
 
 ## Examples
 
+### Basic
+
+A simple accordion with expandable panels controlled via the `value` prop.
+
+<DocDemoViewer name="accordion:basic-demo" />
+
 ### Multiple
 
 Each `Accordion.Panel` should define a unique `value`. By default, a single panel is open at a time. Enable `multiple` on `Accordion.Root` to allow multiple panels to stay open.

apps/showcase/docs/styled/components/animateonscroll/features.mdx

@@ -4,7 +4,7 @@ description: AnimateOnScroll applies enter and leave animations to elements as t
 component: animateonscroll
 ---
 
-<DocDemoViewer name="animateonscroll:basic-demo" mode="collapsible" />
+<DocDemoViewer name="animateonscroll:basic-demo" mode="collapsible" hideName />
 
 ## Usage
 
@@ -18,6 +18,12 @@ import { AnimateOnScroll } from '@primereact/ui/animateonscroll';
 
 ## Examples
 
+### Basic
+
+Elements animate into view as they enter the viewport during scroll.
+
+<DocDemoViewer name="animateonscroll:basic-demo" />
+
 ### Enter & Leave
 
 Animation classes are defined with the `enterClassName` and `leaveClassName` properties. This example uses animations from the `tailwindcss-primeui` plugin, but any valid CSS animation is supported.

apps/showcase/docs/styled/components/autocomplete/features.mdx

@@ -4,7 +4,7 @@ description: AutoComplete is an input component that provides real-time suggesti
 component: autocomplete
 ---
 
-<DocDemoViewer name="autocomplete:basic-demo" mode="collapsible"/>
+<DocDemoViewer name="autocomplete:basic-demo" mode="collapsible" hideName />
 
 ## Usage
 
@@ -39,6 +39,12 @@ import { AutoComplete } from '@primereact/ui/autocomplete';
 
 ## Examples
 
+### Basic
+
+An input that filters and suggests options as the user types.
+
+<DocDemoViewer name="autocomplete:basic-demo" />
+
 ### Sizes
 
 Use the `size` property to change the size of an autocomplete.

apps/showcase/docs/styled/components/avatar/features.mdx

@@ -4,7 +4,7 @@ description: Avatar represents people using icons, labels and images.
 component: avatar
 ---
 
-<DocDemoViewer name="avatar:basic-demo" mode="collapsible"/>
+<DocDemoViewer name="avatar:basic-demo" mode="collapsible" hideName />
 
 ## Usage
 
@@ -24,6 +24,12 @@ import { AvatarGroup } from '@primereact/ui/avatargroup';
 
 ## Examples
 
+### Basic
+
+Displays a user representation using an image, icon, or label initials.
+
+<DocDemoViewer name="avatar:basic-demo" />
+
 ### Fallback
 
 The `Avatar.Fallback` component displays a label or an icon when an image fails to load or when an image is not preferred.

apps/showcase/docs/styled/components/badge/features.mdx

@@ -4,7 +4,7 @@ description: Badge is a small status indicator for another element.
 component: badge
 ---
 
-<DocDemoViewer name="badge:basic-demo" mode="collapsible"/>
+<DocDemoViewer name="badge:basic-demo" mode="collapsible" hideName />
 
 ## Usage
 
@@ -18,6 +18,12 @@ import { Badge } from '@primereact/ui/badge';
 
 ## Examples
 
+### Basic
+
+A small overlay on another element to indicate a count or status.
+
+<DocDemoViewer name="badge:basic-demo" />
+
 ### Severity
 
 The `severity` property defines the visual style of a badge.

apps/showcase/docs/styled/components/breadcrumb/features.mdx

@@ -4,7 +4,7 @@ description: Breadcrumb provides contextual information about page hierarchy.
 component: breadcrumb
 ---
 
-<DocDemoViewer name="breadcrumb:basic-demo" mode="collapsible"/>
+<DocDemoViewer name="breadcrumb:basic-demo" mode="collapsible" hideName />
 
 ## Usage
 
@@ -23,6 +23,12 @@ import { Breadcrumb } from '@primereact/ui/breadcrumb';
 
 ## Examples
 
+### Basic
+
+Shows the current location within a navigational hierarchy.
+
+<DocDemoViewer name="breadcrumb:basic-demo" />
+
 ### Route
 
 A breadcrumb can be used with routing libraries to navigate between pages.

apps/showcase/docs/styled/components/button/features.mdx

@@ -4,7 +4,7 @@ description: Button is an extension to standard input element with icons and the
 component: button
 ---
 
-<DocDemoViewer name="button:basic-demo" mode="collapsible"/>
+<DocDemoViewer name="button:basic-demo" mode="collapsible" hideName />
 
 ## Usage
 
@@ -21,6 +21,12 @@ import { ButtonGroup } from '@primereact/ui/buttongroup';
 
 ## Examples
 
+### Basic
+
+A standard button with label, icon, and various severity options.
+
+<DocDemoViewer name="button:basic-demo" />
+
 ### Icons
 
 <DocDemoViewer name="button:icon-demo" />

apps/showcase/docs/styled/components/card/features.mdx

@@ -4,7 +4,7 @@ description: Card is a flexible container component.
 component: card
 ---
 
-<DocDemoViewer name="card:basic-demo" mode="collapsible" />
+<DocDemoViewer name="card:basic-demo" mode="collapsible" hideName />
 
 ## Usage
 
@@ -27,6 +27,12 @@ import { Card } from '@primereact/ui/card';
 
 ## Examples
 
+### Basic
+
+A container with a header, body, and footer for structured content.
+
+<DocDemoViewer name="card:basic-demo" />
+
 ### With Form
 
 Use `Card`, `Card.Body`, `Card.Caption`, `Card.Title`, `Card.Subtitle`, `Card.Content`, `Card.Footer`, to create a simple card.

apps/showcase/docs/styled/components/carousel/features.mdx

@@ -4,7 +4,7 @@ description: Carousel is a content slider featuring various customization option
 component: carousel
 ---
 
-<DocDemoViewer name="carousel:basic-demo" mode="collapsible"/>
+<DocDemoViewer name="carousel:basic-demo" mode="collapsible" hideName />
 
 ## Usage
 
@@ -25,6 +25,12 @@ import { Carousel } from '@primereact/ui/carousel';
 
 ## Examples
 
+### Basic
+
+Cycles through a set of items with navigation controls.
+
+<DocDemoViewer name="carousel:basic-demo" />
+
 ### Alignment
 
 Use the `align` property to align the carousel items. `slidesPerPage` property is used to control the number of slides visible per page.

apps/showcase/docs/styled/components/checkbox/features.mdx

@@ -4,7 +4,7 @@ description: Checkbox is an extension to standard checkbox element with theming.
 component: checkbox
 ---
 
-<DocDemoViewer name="checkbox:basic-demo" mode="collapsible"/>
+<DocDemoViewer name="checkbox:basic-demo" mode="collapsible" hideName />
 
 ## Usage
 
@@ -22,6 +22,12 @@ import { Checkbox } from '@primereact/ui/checkbox';
 
 ## Examples
 
+### Basic
+
+Toggles a boolean value with an associated label.
+
+<DocDemoViewer name="checkbox:basic-demo" />
+
 ### Sizes
 
 Use the `size` property to change the size of a checkbox.