Build a comprehensive Button State Showcase component using React and Tailwind CSS. The component should serve as a documentation or testing UI that displays a collection of disabled button variations in a single, organized view.

**Layout and Structure:**
- Create a container using a flexbox layout that allows for wrapping, ensuring buttons flow naturally to the next line on smaller screens.
- Use a consistent gap between elements to maintain a clean, organized grid-like appearance.
- The component should act as a wrapper for multiple button instances, each representing a distinct visual variant (e.g., Primary, Secondary, Tertiary, Outline, Ghost, and Destructive).

**Visual Style and Interactions:**
- The visual design should prioritize a "disabled" aesthetic: utilize reduced opacity, grayscale color palettes, and non-interactive cursor styles (e.g., `cursor-not-allowed`).
- Ensure the buttons are visually distinct from their active counterparts while maintaining the same underlying shape and padding to demonstrate consistency in the design system.
- Since these buttons are disabled, ensure all hover, active, and focus states are explicitly suppressed or set to a non-responsive state to reinforce that they are inactive.

**Implementation Details:**
- Use a modular approach by creating a single parent component that maps through an array of variant configurations. This makes the component easy to maintain and extend.
- The design should be fully responsive, stacking or flowing based on the available container width.
- Ensure the component is built using standard accessible HTML button elements or a UI library (like HeroUI or Shadcn/UI), ensuring that the `disabled` attribute is correctly applied to prevent any click events.