docs(storybook): add StatusBadge to all component docs pages

libs/core/src/components/pds-accordion/docs/pds-accordion.mdx

@@ -3,9 +3,12 @@ import * as stories from '../stories/pds-accordion.stories.js';
 
 import {DocArgsTable, DocCanvas} from '@pine-ds/doc-components';
 import { components } from '../../../../dist/docs.json';
+import { StatusBadge } from '../../../stories/_helpers';
 
 <Meta of={stories} />
 
+<StatusBadge component="pds-accordion" />
+
 # Accordion
 
 An Accordion, composed of a single label and a panel of custom content, is used to show and hide information. They can be helpful for users to scan the contents of the page and find the information they need quickly and easily.

libs/core/src/components/pds-alert/docs/pds-alert.mdx

@@ -3,9 +3,12 @@ import * as stories from '../stories/pds-alert.stories.js';
 
 import {DocArgsTable, DocCanvas} from '@pine-ds/doc-components';
 import { components } from '../../../../dist/docs.json';
+import { StatusBadge } from '../../../stories/_helpers';
 
 <Meta of={stories} />
 
+<StatusBadge component="pds-alert" />
+
 # Alert
 
 Alerts display inline messages with distinct variants for information, success, warnings, errors, and other states. They can be dismissible and include an actions slot for related buttons.

libs/core/src/components/pds-avatar/docs/pds-avatar.mdx

@@ -5,9 +5,12 @@ import {DocArgsTable, DocCanvas} from '@pine-ds/doc-components';
 import { components } from '../../../../dist/docs.json';
 
 import sampleImg from '../assets/demi_wilkinson.jpg';
+import { StatusBadge } from '../../../stories/_helpers';
 
 <Meta of={stories} />
 
+<StatusBadge component="pds-avatar" />
+
 # Avatar
 
 Avatars display a thumbnail representation of a person or organization, supporting an image, an initials fallback, and an optional badge. They can also function as a dropdown trigger.

libs/core/src/components/pds-box/docs/pds-box.mdx

@@ -3,9 +3,12 @@ import * as stories from '../stories/pds-box.stories.js';
 
 import { DocArgsTable, DocCanvas } from '@pine-ds/doc-components';
 import { components } from '../../../../dist/docs.json';
+import { StatusBadge } from '../../../stories/_helpers';
 
 <Meta of={stories} />
 
+<StatusBadge component="pds-box" />
+
 # Box
 
 Box is our primitive layout component. It is intended to be used as a building block for more complex layouts. It allows for custom sizing, colors, padding, and alignment while still adhering to Pine tokens and brand guidelines. The component uses logical properties for margin and padding, making it adaptable to different writing modes and languages.

libs/core/src/components/pds-checkbox/docs/pds-checkbox.mdx

@@ -3,9 +3,12 @@ import * as stories from '../stories/pds-checkbox.stories.js';
 
 import {DocArgsTable, DocCanvas} from '@pine-ds/doc-components';
 import { components } from '../../../../dist/docs.json';
+import { StatusBadge } from '../../../stories/_helpers';
 
 <Meta of={stories} />
 
+<StatusBadge component="pds-checkbox" />
+
 # Checkbox
 
 Checkboxes provide users with selectable options like toggling a single setting or selecting multiple options from a list.

libs/core/src/components/pds-chip/docs/pds-chip.mdx

@@ -3,9 +3,12 @@ import * as stories from '../stories/pds-chip.stories.js';
 
 import {DocArgsTable, DocCanvas} from '@pine-ds/doc-components';
 import { components } from '../../../../dist/docs.json';
+import { StatusBadge } from '../../../stories/_helpers';
 
 <Meta of={stories} />
 
+<StatusBadge component="pds-chip" />
+
 # Chip
 
 Chips are used to inform users about the status of an object or to associate properties with a parent. Commonly used in tabular data to indicate status.

libs/core/src/components/pds-combobox/docs/pds-combobox.mdx

@@ -3,9 +3,12 @@ import * as stories from '../stories/pds-combobox.stories.js';
 
 import { DocArgsTable, DocCanvas } from '@pine-ds/doc-components';
 import { components } from '../../../../dist/docs.json';
+import { StatusBadge } from '../../../stories/_helpers';
 
 <Meta of={stories} />
 
+<StatusBadge component="pds-combobox" />
+
 # Combobox
 
 A combobox is a text input with a dropdown list of options, allowing users to filter and select from a list. It is useful for searchable selects and autocomplete scenarios.

libs/core/src/components/pds-container/docs/pds-container.mdx

@@ -3,9 +3,12 @@ import * as stories from '../stories/pds-container.stories.js';
 
 import {DocArgsTable, DocCanvas} from '@pine-ds/doc-components';
 import { components } from '../../../../dist/docs.json';
+import { StatusBadge } from '../../../stories/_helpers';
 
 <Meta of={stories} />
 
+<StatusBadge component="pds-container" />
+
 # Container
 
 Container constrains its children to a semantic max-width, centering them within the available space. Use it to wrap form panels, settings pages, and full-page flows.

libs/core/src/components/pds-copytext/docs/pds-copytext.mdx

@@ -3,9 +3,12 @@ import * as stories from '../stories/pds-copytext.stories.js';
 
 import {DocArgsTable, DocCanvas} from '@pine-ds/doc-components';
 import { components } from '../../../../dist/docs.json';
+import { StatusBadge } from '../../../stories/_helpers';
 
 <Meta of={stories} />
 
+<StatusBadge component="pds-copytext" />
+
 # Copy Text
 
 Copy Text displays a value alongside a copy button, letting users copy codes, IDs, or short strings to their clipboard in a single click. It supports truncation with a hover tooltip for long values.

libs/core/src/components/pds-divider/docs/pds-divider.mdx

@@ -3,9 +3,12 @@ import * as stories from '../stories/pds-divider.stories.js';
 
 import { DocArgsTable, DocCanvas } from '@pine-ds/doc-components';
 import { components } from '../../../../dist/docs.json';
+import { StatusBadge } from '../../../stories/_helpers';
 
 <Meta of={stories} />
 
+<StatusBadge component="pds-divider" />
+
 # Divider
 
 A divider is used to create a clear visual separation between sections of content within a layout.

libs/core/src/components/pds-dropdown-menu/docs/pds-dropdown-menu.mdx

@@ -3,9 +3,12 @@ import * as stories from '../stories/pds-dropdown-menu.stories.js';
 
 import { DocArgsTable, DocCanvas } from '@pine-ds/doc-components';
 import { components } from '../../../../dist/docs.json';
+import { StatusBadge } from '../../../stories/_helpers';
 
 <Meta of={stories} />
 
+<StatusBadge component="pds-dropdown-menu" />
+
 # Dropdown Menu
 
 Dropdown Menus reveal a list of actions from a button trigger, implementing the WAI-ARIA Menu Button pattern. Use them to conserve space when options do not need to be visible at all times.

libs/core/src/components/pds-filters/docs/pds-filters.mdx

@@ -3,9 +3,12 @@ import * as stories from '../stories/pds-filters.stories.js';
 
 import { DocArgsTable, DocCanvas } from '@pine-ds/doc-components';
 import { components } from '../../../../dist/docs.json';
+import { StatusBadge } from '../../../stories/_helpers';
 
 <Meta of={stories} />
 
+<StatusBadge component="pds-filters" />
+
 # Filters
 
 Filters provide a flexible system for building filter interfaces from a row of popover triggers. A parent pds-filters container manages layout while individual pds-filter children hold the popover content for each facet.

libs/core/src/components/pds-icon/docs/pds-icon.mdx

@@ -3,9 +3,12 @@ import * as stories from '../stories/pds-icon.stories.js';
 
 import { DocArgsTable, DocCanvas } from '@pine-ds/doc-components';
 import { components as pdsDocsJson } from '@pine-ds/icons/dist/docs.json';
+import { StatusBadge } from '../../../stories/_helpers';
 
 <Meta of={stories} />
 
+<StatusBadge component="pds-icon" />
+
 # Icon
 Icons render scalable glyphs from Pine's icon set, representing actions, statuses, or features in the interface.
 

libs/core/src/components/pds-image/docs/pds-image.mdx

@@ -3,9 +3,12 @@ import * as stories from '../stories/pds-image.stories.js';
 
 import {DocArgsTable, DocCanvas} from '@pine-ds/doc-components';
 import { components } from '../../../../dist/docs.json';
+import { StatusBadge } from '../../../stories/_helpers';
 
 <Meta of={stories} />
 
+<StatusBadge component="pds-image" />
+
 # Image
 
 An image can be used to convey supplemental information to the user or as decoration.

libs/core/src/components/pds-input/docs/pds-input.mdx

@@ -3,9 +3,12 @@ import * as stories from '../stories/pds-input.stories.js';
 
 import {DocArgsTable, DocCanvas} from '@pine-ds/doc-components';
 import { components } from '../../../../dist/docs.json';
+import { StatusBadge } from '../../../stories/_helpers';
 
 <Meta of={stories} />
 
+<StatusBadge component="pds-input" />
+
 # Input
 
 Input captures a single line of text from the user, paired with a label and optional helper or error message. Use it for names, emails, IDs, and other short freeform values.

libs/core/src/components/pds-link/docs/pds-link.mdx

@@ -3,9 +3,12 @@ import * as stories from '../stories/pds-link.stories.js';
 
 import {DocArgsTable, DocCanvas} from '@pine-ds/doc-components';
 import { components } from '../../../../dist/docs.json';
+import { StatusBadge } from '../../../stories/_helpers';
 
 <Meta of={stories} />
 
+<StatusBadge component="pds-link" />
+
 # Link
 
 A hyperlink is used as a navigational element to direct users to another location on the website or application.

libs/core/src/components/pds-loader/docs/pds-loader.mdx

@@ -3,9 +3,12 @@ import * as stories from '../stories/pds-loader.stories.js';
 
 import {DocArgsTable, DocCanvas} from '@pine-ds/doc-components';
 import { components } from '../../../../dist/docs.json';
+import { StatusBadge } from '../../../stories/_helpers';
 
 <Meta of={stories} />
 
+<StatusBadge component="pds-loader" />
+
 # Loader
 
 Loaders signal that an operation is in progress via an animated spinner or typing indicator. Use them during time-consuming tasks to reassure users that the system is working.

libs/core/src/components/pds-multiselect/docs/pds-multiselect.mdx

@@ -3,9 +3,12 @@ import * as stories from '../stories/pds-multiselect.stories.js';
 
 import { DocArgsTable, DocCanvas } from '@pine-ds/doc-components';
 import { components } from '../../../../dist/docs.json';
+import { StatusBadge } from '../../../stories/_helpers';
 
 <Meta of={stories} />
 
+<StatusBadge component="pds-multiselect" />
+
 # Multiselect
 
 Multiselects let users pick several options from a searchable dropdown list. The trigger displays the selected count while the panel surfaces a filterable list of choices.

libs/core/src/components/pds-popover/docs/pds-popover.mdx

@@ -3,9 +3,12 @@ import * as stories from '../stories/pds-popover.stories.js';
 
 import { DocArgsTable, DocCanvas } from '@pine-ds/doc-components';
 import { components } from '../../../../dist/docs.json';
+import { StatusBadge } from '../../../stories/_helpers';
 
 <Meta of={stories} />
 
+<StatusBadge component="pds-popover" />
+
 # Popover
 Popovers display contextual information when users click or initiates a keyboard event on an element. They typically contain more information than tooltips and can include interactive elements.
 

libs/core/src/components/pds-progress/docs/pds-progress.mdx

@@ -3,9 +3,12 @@ import * as stories from '../stories/pds-progress.stories.js';
 
 import { DocArgsTable, DocCanvas } from '@pine-ds/doc-components';
 import { components } from '../../../../dist/docs.json';
+import { StatusBadge } from '../../../stories/_helpers';
 
 <Meta of={stories} />
 
+<StatusBadge component="pds-progress" />
+
 # Progress
 
 Progress bars visualize how far a task has advanced toward completion. They help users gauge wait time during uploads, downloads, or other long-running operations.

libs/core/src/components/pds-property/docs/pds-property.mdx

@@ -3,9 +3,12 @@ import * as stories from '../stories/pds-property.stories.js';
 
 import {DocArgsTable, DocCanvas} from '@pine-ds/doc-components';
 import { components } from '../../../../dist/docs.json';
+import { StatusBadge } from '../../../stories/_helpers';
 
 <Meta of={stories} />
 
+<StatusBadge component="pds-property" />
+
 # Property
 
 Properties pair an icon with a short label to present key-value pairs, status indicators, or tagged information in a compact horizontal layout. An icon is always shown; unspecified icons default to a star.

libs/core/src/components/pds-radio-group/docs/pds-radio-group.mdx

@@ -3,9 +3,12 @@ import * as stories from '../stories/pds-radio-group.stories.js';
 
 import { DocArgsTable, DocCanvas } from '@pine-ds/doc-components';
 import { components } from '../../../../dist/docs.json';
+import { StatusBadge } from '../../../stories/_helpers';
 
 <Meta of={stories} />
 
+<StatusBadge component="pds-radio-group" />
+
 # Radio Group
 
 Radio Groups wrap a set of related radio inputs, displaying a single error message and helper message for the whole group. Use them whenever users must pick exactly one option from a set.

libs/core/src/components/pds-radio/docs/pds-radio.mdx

@@ -3,9 +3,12 @@ import * as stories from '../stories/pds-radio.stories.js';
 
 import { DocArgsTable, DocCanvas } from '@pine-ds/doc-components';
 import { components } from '../../../../dist/docs.json';
+import { StatusBadge } from '../../../stories/_helpers';
 
 <Meta of={stories} />
 
+<StatusBadge component="pds-radio" />
+
 # Radio
 
 Radio components allow users to select one option from a group of two or more choices.

libs/core/src/components/pds-row/docs/pds-row.mdx

@@ -3,10 +3,12 @@ import * as stories from '../stories/pds-row.stories.js';
 
 import { DocArgsTable, DocCanvas } from '@pine-ds/doc-components';
 import { components } from '../../../../dist/docs.json';
-
+import { StatusBadge } from '../../../stories/_helpers';
 
 <Meta of={stories} />
 
+<StatusBadge component="pds-row" />
+
 # Row
 
 Row is a flexbox-based grid container that arranges content into responsive columns. It uses a 12-column system for laying out horizontal rows.

libs/core/src/components/pds-select/docs/pds-select.mdx

@@ -3,9 +3,12 @@ import * as stories from '../stories/pds-select.stories.js';
 
 import { DocArgsTable, DocCanvas } from '@pine-ds/doc-components';
 import { components } from '../../../../dist/docs.json';
+import { StatusBadge } from '../../../stories/_helpers';
 
 <Meta of={stories} />
 
+<StatusBadge component="pds-select" />
+
 # Select
 
 Selects present a single-choice dropdown, letting users pick one value from a predefined set of options.

libs/core/src/components/pds-sortable/docs/pds-sortable.mdx

@@ -3,9 +3,12 @@ import * as stories from '../stories/pds-sortable.stories.js';
 
 import { DocArgsTable, DocCanvas } from '@pine-ds/doc-components'
 import { components } from '../../../../dist/docs.json';
+import { StatusBadge } from '../../../stories/_helpers';
 
 <Meta of={stories} />
 
+<StatusBadge component="pds-sortable" />
+
 # Sortable
 
 Sortable is for creating containers of items that can be sorted via drag and drop functionality.

libs/core/src/components/pds-switch/docs/pds-switch.mdx

@@ -3,9 +3,12 @@ import * as stories from '../stories/pds-switch.stories.js';
 
 import {DocArgsTable, DocCanvas} from '@pine-ds/doc-components';
 import { components } from '../../../../dist/docs.json';
+import { StatusBadge } from '../../../stories/_helpers';
 
 <Meta of={stories} />
 
+<StatusBadge component="pds-switch" />
+
 # Switch
 
 Switches toggle a single setting between on and off, rendered as a sliding thumb inside a track. They work as form-associated inputs whose checked state submits with the surrounding form.

libs/core/src/components/pds-tabs/docs/pds-tabs.mdx

@@ -3,9 +3,12 @@ import * as stories from '../stories/pds-tabs.stories.js';
 
 import { DocArgsTable, DocCanvas } from '@pine-ds/doc-components';
 import { components } from '../../../../dist/docs.json';
+import { StatusBadge } from '../../../stories/_helpers';
 
 <Meta of={stories} />
 
+<StatusBadge component="pds-tabs" />
+
 # Tabs
 
 Tabs organize related content into separate panels that users switch between using a horizontal button bar, keeping only one panel visible at a time.

libs/core/src/components/pds-text/docs/pds-text.mdx

@@ -3,9 +3,12 @@ import * as stories from '../stories/pds-text.stories.js';
 
 import {DocArgsTable, DocCanvas} from '@pine-ds/doc-components';
 import { components } from '../../../../dist/docs.json';
+import { StatusBadge } from '../../../stories/_helpers';
 
 <Meta of={stories} />
 
+<StatusBadge component="pds-text" />
+
 # Text
 
 Text renders content using configurable semantic HTML tags for headings or body copy, applying Pine's typography tokens consistently across the interface.

libs/core/src/components/pds-textarea/docs/pds-textarea.mdx

@@ -3,9 +3,12 @@ import * as stories from '../stories/pds-textarea.stories.js';
 
 import {DocArgsTable, DocCanvas} from '@pine-ds/doc-components';
 import { components } from '../../../../dist/docs.json';
+import { StatusBadge } from '../../../stories/_helpers';
 
 <Meta of={stories} />
 
+<StatusBadge component="pds-textarea" />
+
 # Textarea
 
 Textarea captures multi-line text from the user, paired with a label and optional helper or error message. Use it for freeform content like comments, descriptions, or messages.