refactor: remove status banner

maiieul · maiieul · commit 52b21ab38018 · 2026-04-23T11:44:33.000+02:00
diff --git a/apps/website/src/components/status-banner/status-banner.tsx b/apps/website/src/components/status-banner/status-banner.tsx
diff --git a/apps/website/src/routes/docs/contributing/index.mdx b/apps/website/src/routes/docs/contributing/index.mdx
@@ -125,7 +125,7 @@ There are more [docs components](https://github.com/qwikifiers/qwik-ui/tree/main
 
 ### Component status banner
 
-<StatusBanner status={statusByComponent.headless.Collapsible} />
+{statusByComponent.headless.Collapsible} />
 
 ### info popup (uses the popover)
 
diff --git a/apps/website/src/routes/docs/headless/accordion/index.mdx b/apps/website/src/routes/docs/headless/accordion/index.mdx
@@ -9,8 +9,6 @@ import { Note } from '~/components/note/note';
 import { ShowcaseHero, ShowcaseInitial, ShowcaseReactive, ShowcaseProgrammatic, ShowcaseOnChange, ShowcaseMultiple, ShowcaseCollapsible, ShowcaseDisabled, ShowcaseDisabledRoot, ShowcaseAnimation, ShowcaseCsr, ShowcaseDynamic } from './showcase-components';
 import { CodeSnippetAccordionCss, CodeSnippetAnimationCss, CodeSnippetBuildingBlocks } from './code-snippets';
 
-<StatusBanner status={statusByComponent.headless.Accordion} />
-
 # Accordion
 
 A set of interactive sections that show or hide connected information.
diff --git a/apps/website/src/routes/docs/headless/carousel/index.mdx b/apps/website/src/routes/docs/headless/carousel/index.mdx
@@ -10,8 +10,6 @@ import { AutoAPI } from '~/components/api-table/auto-api';
 
 import { api } from './auto-api/api';
 
-<StatusBanner status={statusByComponent.headless.Carousel} />
-
 # Carousel
 
 Display and navigate through multiple content items.
diff --git a/apps/website/src/routes/docs/headless/checkbox/index.mdx b/apps/website/src/routes/docs/headless/checkbox/index.mdx
@@ -7,8 +7,6 @@ import { statusByComponent } from '~/_state/component-statuses';
 
 import { ShowcaseHero, ShowcaseControlled, ShowcaseControlledValues, ShowcaseChecklist } from './showcase-components';
 
-<StatusBanner status={statusByComponent.headless.Select} />
-
 # Checkbox (Two-State)
 
 Allows users to visually select an option by checking it.
diff --git a/apps/website/src/routes/docs/headless/collapsible/index.mdx b/apps/website/src/routes/docs/headless/collapsible/index.mdx
@@ -6,8 +6,6 @@ import { AnatomyTable } from '~/components/anatomy-table/anatomy-table';
 import { ShowcaseHero, ShowcaseOpen, ShowcaseBindOpen, ShowcaseProgrammatic, ShowcaseOpenChange, ShowcaseDisabled, ShowcaseAnimation, ShowcaseCsr } from './showcase-components';
 import { CodeSnippetCollapsibleCss, CodeSnippetAnimationCss, CodeSnippetBuildingBlocks } from './code-snippets';
 
-<StatusBanner status={statusByComponent.headless.Collapsible} />
-
 # Collapsible
 
 An interactive section that shows or hides its connected information.
diff --git a/apps/website/src/routes/docs/headless/combobox/index.mdx b/apps/website/src/routes/docs/headless/combobox/index.mdx
@@ -7,8 +7,6 @@ import { statusByComponent } from '~/_state/component-statuses';
 import { ShowcaseHero, ShowcaseString, ShowcaseObject, ShowcaseItemValue, ShowcaseChange, ShowcaseInitial, ShowcaseReactive, ShowcaseProgrammatic, ShowcaseDisabled, ShowcaseAddItems, ShowcaseIndicator, ShowcaseMultiple, ShowcasePlaceholder, ShowcaseCsr, ShowcaseInline, ShowcaseCustomInline, ShowcaseFilter, ShowcaseEmpty, ShowcaseOpenChange, ShowcaseReactiveOpen, ShowcaseInput, ShowcaseReactiveInput, ShowcaseLoop, ShowcaseGroup, ShowcaseScrollable, ShowcaseRefs, ShowcaseForm } from './showcase-components';
 import { CodeSnippetBuildingBlocks, CodeSnippetComboboxCss } from './code-snippets';
 
-<StatusBanner status={statusByComponent.headless.Combobox} />
-
 # Combobox
 
 Users can either type a value or pick one from a dropdown list.
diff --git a/apps/website/src/routes/docs/headless/dropdown/index.mdx b/apps/website/src/routes/docs/headless/dropdown/index.mdx
@@ -8,8 +8,6 @@ import { statusByComponent } from '~/_state/component-statuses';
 
 import { ShowcaseHero, ShowcaseSimple } from './showcase-components';
 
-<StatusBanner status={statusByComponent.headless.Dropdown} />
-
 # Dropdown
 
 Customizable popover menu.
diff --git a/apps/website/src/routes/docs/headless/label/index.mdx b/apps/website/src/routes/docs/headless/label/index.mdx
@@ -9,8 +9,6 @@ import { Note } from '~/components/note/note';
 import { ShowcaseHero } from './showcase-components';
 import { CodeSnippetBuildingBlocks, CodeSnippetLabelCss } from './code-snippets';
 
-<StatusBanner status={statusByComponent.headless.Label} />
-
 # Label
 
 Renders an accessible label associated with controls.
diff --git a/apps/website/src/routes/docs/headless/modal/index.mdx b/apps/website/src/routes/docs/headless/modal/index.mdx
@@ -8,8 +8,6 @@ import { statusByComponent } from '~/_state/component-statuses';
 import { ShowcaseHero, ShowcaseAutoFocus, ShowcaseProgrammatic, ShowcaseBackdrop, ShowcaseBackdropClose, ShowcaseAlertDialog, ShowcaseAnimatable, ShowcaseTransition, ShowcaseBackdropAnimatable, ShowcaseSheet, ShowcaseBottomSheet, ShowcaseStacked } from './showcase-components';
 import { CodeSnippetBuildingBlocks, CodeSnippetBackdropCss, CodeSnippetStrippedStylesCss, CodeSnippetModalCss, CodeSnippetAnimationCss, CodeSnippetPageLoad } from './code-snippets';
 
-<StatusBanner status={statusByComponent.headless.Modal} />
-
 # Modal
 
 A panel that appears above all other content, blocking interaction with the rest of the page.
diff --git a/apps/website/src/routes/docs/headless/pagination/index.mdx b/apps/website/src/routes/docs/headless/pagination/index.mdx
@@ -6,8 +6,6 @@ import { statusByComponent } from '~/_state/component-statuses';
 
 import { ShowcaseHero, ShowcaseStyling, ShowcaseCustomButtonLabels, ShowcaseCustomArrows, ShowcaseHidePrevNextButtons, ShowcaseDisabled } from './showcase-components';
 
-<StatusBanner status={statusByComponent.headless.Pagination} />
-
 # Pagination
 
 <ShowcaseHero />
diff --git a/apps/website/src/routes/docs/headless/popover/index.mdx b/apps/website/src/routes/docs/headless/popover/index.mdx
@@ -28,8 +28,6 @@ import {
   CodeSnippetBuildingBlocks,
 } from './code-snippets';
 
-<StatusBanner status={statusByComponent.headless.Popover} />
-
 # Popover
 
 A popup that goes above other content on the page. You can still interact with the rest of the page while the popover is open.
diff --git a/apps/website/src/routes/docs/headless/progress/index.mdx b/apps/website/src/routes/docs/headless/progress/index.mdx
@@ -7,8 +7,6 @@ import { statusByComponent } from '~/_state/component-statuses';
 import { ShowcaseHero, ShowcaseMin, ShowcaseMax, ShowcaseComplete, ShowcaseIndeterminate, ShowcaseReactive, ShowcaseCsr } from './showcase-components';
 import { CodeSnippetBuildingBlocks, CodeSnippetIndeterminateCss, CodeSnippetProgressCss } from './code-snippets';
 
-<StatusBanner status={statusByComponent.headless.Progress} />
-
 # Progress
 
 Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
diff --git a/apps/website/src/routes/docs/headless/select/index.mdx b/apps/website/src/routes/docs/headless/select/index.mdx
@@ -8,8 +8,6 @@ import { statusByComponent } from '~/_state/component-statuses';
 import { ShowcaseHero, ShowcaseString, ShowcaseObject, ShowcaseItemValue, ShowcaseChangeValue, ShowcaseForm, ShowcaseDescription, ShowcaseUncontrolled, ShowcaseControlled, ShowcaseBindOpen, ShowcaseControlledValue, ShowcaseDisabled, ShowcaseAddUsers, ShowcaseIndicator, ShowcaseMultiple, ShowcaseMultiplePill, ShowcaseTypeahead, ShowcaseOpenChange, ShowcaseLoop, ShowcaseGroup, ShowcaseScrollable, ShowcaseCsr, ShowcaseFirstValueSelected } from './showcase-components';
 import { CodeSnippetBuildingBlocks, CodeSnippetSelectCss } from './code-snippets';
 
-<StatusBanner status={statusByComponent.headless.Select} />
-
 # Select
 
 A control that allows the user to select multiple predefined items from a listbox.
diff --git a/apps/website/src/routes/docs/headless/separator/index.mdx b/apps/website/src/routes/docs/headless/separator/index.mdx
@@ -6,8 +6,6 @@ import { statusByComponent } from '~/_state/component-statuses';
 
 import { ShowcaseHero } from './showcase-components';
 
-<StatusBanner status={statusByComponent.headless.Separator} />
-
 # Separator
 
 Visually separates content, sections of content or groups of menu items.
diff --git a/apps/website/src/routes/docs/headless/tabs/index.mdx b/apps/website/src/routes/docs/headless/tabs/index.mdx
@@ -7,8 +7,6 @@ import { statusByComponent } from '~/_state/component-statuses';
 import { ShowcaseFirst, ShowcaseVertical, ShowcaseDisabled, ShowcaseAutomatic, ShowcaseManual, ShowcaseDynamic, ShowcaseOnSelectedIndexChange, ShowcaseSelectedTabId, ShowcaseSelectedProp, ShowcaseOnClick, ShowcaseReusable } from './showcase-components';
 import { CodeSnippetLong, CodeSnippetShort } from './code-snippets';
 
-<StatusBanner status={statusByComponent.headless.Tabs} />
-
 # Tabs
 
 Explore and switch between different views using tabs
diff --git a/apps/website/src/routes/docs/headless/toggle-group/index.mdx b/apps/website/src/routes/docs/headless/toggle-group/index.mdx
@@ -7,8 +7,6 @@ import { statusByComponent } from '~/_state/component-statuses';
 import { ShowcaseHero, ShowcaseMultiple, ShowcaseInitialValue, ShowcaseValue, ShowcaseValueBind, ShowcaseDisabled, ShowcaseItemDisabledCenter, ShowcaseLoop, ShowcaseLoopItemDisabled, ShowcaseVertical, ShowcaseHorizontalRtl } from './showcase-components';
 import { CodeSnippetBuildingBlocks } from './code-snippets';
 
-<StatusBanner status={statusByComponent.headless['Toggle Group']} />
-
 # Toggle Group
 
 A set of two-state buttons that can be toggled on or off.
diff --git a/apps/website/src/routes/docs/headless/toggle/index.mdx b/apps/website/src/routes/docs/headless/toggle/index.mdx
@@ -7,8 +7,6 @@ import { statusByComponent } from '~/_state/component-statuses';
 import { ShowcaseHero, ShowcaseInitialPressed, ShowcasePressed, ShowcaseBindPressed, ShowcaseDisabled } from './showcase-components';
 import { CodeSnippetBuildingBlocks } from './code-snippets';
 
-<StatusBanner status={statusByComponent.headless.Toggle} />
-
 # Toggle
 
 A two-state button that can be either on or off.
diff --git a/apps/website/src/routes/docs/headless/tooltip/index.mdx b/apps/website/src/routes/docs/headless/tooltip/index.mdx
@@ -18,8 +18,6 @@ import {
   ShowcaseComplex,
 } from './showcase-components';
 
-<StatusBanner status={statusByComponent.headless.Tooltip} />
-
 import Styles from './examples/styles';
 
 # Tooltip
diff --git a/apps/website/src/routes/docs/styled/alert/index.mdx b/apps/website/src/routes/docs/styled/alert/index.mdx
@@ -6,8 +6,6 @@ import { statusByComponent } from '~/_state/component-statuses';
 
 import { ShowcaseHero, ShowcaseAlert, ShowcasePrimary } from './showcase-components';
 
-<StatusBanner status={statusByComponent.styled.Alert} />
-
 # Alert
 
 Displays a callout for user attention.
diff --git a/apps/website/src/routes/docs/styled/avatar/index.mdx b/apps/website/src/routes/docs/styled/avatar/index.mdx
@@ -6,8 +6,6 @@ import { statusByComponent } from '~/_state/component-statuses';
 
 import { ShowcaseHero } from './showcase-components';
 
-<StatusBanner status={statusByComponent.styled.Avatar} />
-
 # Avatar
 
 An image element with a fallback for representing the user.
diff --git a/apps/website/src/routes/docs/styled/badge/index.mdx b/apps/website/src/routes/docs/styled/badge/index.mdx
@@ -6,8 +6,6 @@ import { statusByComponent } from '~/_state/component-statuses';
 
 import { ShowcasePrimary, ShowcaseSecondary, ShowcaseAlert, ShowcaseOutline } from './showcase-components';
 
-<StatusBanner status={statusByComponent.styled.Badge} />
-
 # Badge
 
 Displays a badge or a component that looks like a badge.
diff --git a/apps/website/src/routes/docs/styled/breadcrumb/index.mdx b/apps/website/src/routes/docs/styled/breadcrumb/index.mdx
@@ -5,8 +5,6 @@ title: Qwik UI | Styled Breadcrumb Component
 import { statusByComponent } from '~/_state/component-statuses';
 import { ShowcasePrimary } from './showcase-components';
 
-<StatusBanner status={statusByComponent.styled.Breadcrumb} />
-
 # Breadcrumb
 
 Displays the path to the current resource using a hierarchy of links.
diff --git a/apps/website/src/routes/docs/styled/button/index.mdx b/apps/website/src/routes/docs/styled/button/index.mdx
@@ -6,8 +6,6 @@ import { statusByComponent } from '~/_state/component-statuses';
 
 import { ShowcasePrimary, ShowcaseSecondary, ShowcaseAlert, ShowcaseOutline, ShowcaseGhost, ShowcaseLink, ShowcaseSize, ShowcaseIcon, ShowcaseWithIcon, ShowcaseLoading } from './showcase-components';
 
-<StatusBanner status={statusByComponent.styled.Button} />
-
 # Button
 
 Displays a button or a component that looks like a button.
diff --git a/apps/website/src/routes/docs/styled/card/index.mdx b/apps/website/src/routes/docs/styled/card/index.mdx
@@ -6,8 +6,6 @@ import { statusByComponent } from '~/_state/component-statuses';
 
 import { ShowcaseHero } from './showcase-components';
 
-<StatusBanner status={statusByComponent.styled.Card} />
-
 # Card
 
 Displays a card with header, content, and footer.
diff --git a/apps/website/src/routes/docs/styled/checkbox/index.mdx b/apps/website/src/routes/docs/styled/checkbox/index.mdx
@@ -6,8 +6,6 @@ import { statusByComponent } from '~/_state/component-statuses';
 
 import { ShowcaseHero, ShowcaseWithText, ShowcaseDisabled, ShowcaseDataBinding } from './showcase-components';
 
-<StatusBanner status={statusByComponent.styled.Checkbox} />
-
 # Checkbox
 
 A control that allows the user to toggle between checked and not checked.
diff --git a/apps/website/src/routes/docs/styled/collapsible/index.mdx b/apps/website/src/routes/docs/styled/collapsible/index.mdx
@@ -7,9 +7,6 @@ import { statusByComponent } from '~/_state/component-statuses';
 
 import { ShowcaseHero } from './showcase-components';
 
-
-<StatusBanner status={statusByComponent.styled.Collapsible} />
-
 # Collapsible
 
 An interactive section that shows or hides its connected information.
diff --git a/apps/website/src/routes/docs/styled/combobox/index.mdx b/apps/website/src/routes/docs/styled/combobox/index.mdx
@@ -6,8 +6,6 @@ import { statusByComponent } from '~/_state/component-statuses';
 
 import { ShowcaseHero } from './showcase-components';
 
-<StatusBanner status={statusByComponent.styled.Combobox} />
-
 # Combobox
 
 Autocomplete input and command palette with a list of suggestions.
diff --git a/apps/website/src/routes/docs/styled/dropdown/index.mdx b/apps/website/src/routes/docs/styled/dropdown/index.mdx
@@ -6,8 +6,6 @@ import { statusByComponent } from '~/_state/component-statuses';
 
 import { ShowcaseHero } from './showcase-components';
 
-<StatusBanner status={statusByComponent.styled.Dropdown} />
-
 # Dropdown
 
 A vertically stacked set of interactive headings that each reveal a section of content.
diff --git a/apps/website/src/routes/docs/styled/input/index.mdx b/apps/website/src/routes/docs/styled/input/index.mdx
@@ -6,8 +6,6 @@ import { statusByComponent } from '~/_state/component-statuses';
 
 import { ShowcaseHero, ShowcaseFile, ShowcaseDisabled, ShowcaseWithLabel, ShowcaseWithButton, ShowcaseWithText, ShowcaseDataBinding } from './showcase-components';
 
-<StatusBanner status={statusByComponent.styled.Input} />
-
 # Input
 
 Displays a form input field or a component that looks like an input field.
diff --git a/apps/website/src/routes/docs/styled/label/index.mdx b/apps/website/src/routes/docs/styled/label/index.mdx
@@ -6,8 +6,6 @@ import { statusByComponent } from '~/_state/component-statuses';
 
 import { ShowcaseHero } from './showcase-components';
 
-<StatusBanner status={statusByComponent.styled.Label} />
-
 # Label
 
 Renders an accessible label associated with controls.
diff --git a/apps/website/src/routes/docs/styled/modal/index.mdx b/apps/website/src/routes/docs/styled/modal/index.mdx
@@ -6,8 +6,6 @@ import { statusByComponent } from '~/_state/component-statuses';
 
 import { ShowcaseHero, ShowcaseSheet } from './showcase-components';
 
-<StatusBanner status={statusByComponent.styled.Modal} />
-
 # Modal
 
 A window overlaid on either the primary window or another modal window, rendering the content underneath inert.
diff --git a/apps/website/src/routes/docs/styled/pagination/index.mdx b/apps/website/src/routes/docs/styled/pagination/index.mdx
@@ -6,6 +6,4 @@ import { statusByComponent } from '~/_state/component-statuses';
 
 # Pagination
 
-The Qwik UI Styled Pagination is like a digital concierge, ushering you politely from one page to the next, ensuring you never miss a beat in the rhythm of information.
-
-<StatusBanner status={statusByComponent.styled.Pagination} />
+The Qwik UI Styled Pagination is like a digital concierge, ushering you politely from one page to the next, ensuring you never miss a beat in the rhythm of information.
diff --git a/apps/website/src/routes/docs/styled/progress/index.mdx b/apps/website/src/routes/docs/styled/progress/index.mdx
diff --git a/apps/website/src/routes/docs/styled/radio-group/index.mdx b/apps/website/src/routes/docs/styled/radio-group/index.mdx
diff --git a/apps/website/src/routes/docs/styled/select/index.mdx b/apps/website/src/routes/docs/styled/select/index.mdx
diff --git a/apps/website/src/routes/docs/styled/separator/index.mdx b/apps/website/src/routes/docs/styled/separator/index.mdx
diff --git a/apps/website/src/routes/docs/styled/skeleton/index.mdx b/apps/website/src/routes/docs/styled/skeleton/index.mdx
diff --git a/apps/website/src/routes/docs/styled/tabs/index.mdx b/apps/website/src/routes/docs/styled/tabs/index.mdx
diff --git a/apps/website/src/routes/docs/styled/textarea/index.mdx b/apps/website/src/routes/docs/styled/textarea/index.mdx
diff --git a/apps/website/src/routes/docs/styled/toggle-group/index.mdx b/apps/website/src/routes/docs/styled/toggle-group/index.mdx
diff --git a/apps/website/src/routes/docs/styled/toggle/index.mdx b/apps/website/src/routes/docs/styled/toggle/index.mdx
diff --git a/apps/website/src/routes/docs/styled/tooltip/index.mdx b/apps/website/src/routes/docs/styled/tooltip/index.mdx
