docs(cli): make more showcases interactive (frozen previews)

Same class of bug as #3187/#3188/#3189: these showcase blocks rendered
controlled components with a static value and a no-op onChange, so the
docsite previews were frozen. Wire local useState + onChange in:
TextInput, TextArea, NumberInput, SegmentedControl, RadioList, Tab,
TabList, TabMenu. (NumberInput/RadioList also gain 'use client'.)
Found by scanning template blocks for onChange={() => {}}.

Author: durvesh1992

.changeset/interactive-showcases-2.md

@@ -0,0 +1,6 @@
+---
+'@astryxdesign/cli': patch
+---
+
+[docs] Wire local state into more showcase examples that were frozen (static value + no-op onChange): TextInput, TextArea, NumberInput, SegmentedControl, RadioList, Tab, TabList, and TabMenu. Follows the same fix as the Slider/Selector/MultiSelector showcases so the docsite previews are actually interactive
+@durvesh1992

packages/cli/templates/blocks/components/NumberInput/NumberInputShowcase.tsx

@@ -1,15 +1,19 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
+'use client';
+
+import {useState} from 'react';
 import {NumberInput} from '@astryxdesign/core/NumberInput';
 
 export default function NumberInputShowcase() {
+  const [value, setValue] = useState<number | null>(0);
   return (
     <div style={{width: 300}}>
       <NumberInput
         label="Quantity"
         placeholder="Enter quantity"
-        value={0}
-        onChange={() => {}}
+        value={value}
+        onChange={setValue}
       />
     </div>
   );

packages/cli/templates/blocks/components/RadioList/RadioListShowcase.tsx

@@ -1,10 +1,17 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
+'use client';
+
+import {useState} from 'react';
 import {RadioList, RadioListItem} from '@astryxdesign/core/RadioList';
 
 export default function RadioListShowcase() {
+  const [value, setValue] = useState('');
   return (
-    <RadioList label="Notification preference" value="" onChange={() => {}}>
+    <RadioList
+      label="Notification preference"
+      value={value}
+      onChange={setValue}>
       <RadioListItem label="Email" value="email" />
       <RadioListItem label="SMS" value="sms" />
       <RadioListItem label="Push notification" value="push" />

packages/cli/templates/blocks/components/SegmentedControl/SegmentedControlShowcase.tsx

@@ -2,14 +2,16 @@
 
 'use client';
 
+import {useState} from 'react';
 import {
   SegmentedControl,
   SegmentedControlItem,
 } from '@astryxdesign/core/SegmentedControl';
 
 export default function SegmentedControlShowcase() {
+  const [value, setValue] = useState('grid');
   return (
-    <SegmentedControl value="grid" onChange={() => {}} label="View mode">
+    <SegmentedControl value={value} onChange={setValue} label="View mode">
       <SegmentedControlItem value="grid" label="Grid" />
       <SegmentedControlItem value="list" label="List" />
       <SegmentedControlItem value="table" label="Table" />

packages/cli/templates/blocks/components/Tab/TabShowcase.tsx

@@ -2,12 +2,14 @@
 
 'use client';
 
+import {useState} from 'react';
 import {TabList, Tab} from '@astryxdesign/core/TabList';
 import {Badge} from '@astryxdesign/core/Badge';
 
 export default function TabShowcase() {
+  const [value, setValue] = useState('inbox');
   return (
-    <TabList value="inbox" onChange={() => {}}>
+    <TabList value={value} onChange={setValue}>
       <Tab
         value="inbox"
         label="Inbox"

packages/cli/templates/blocks/components/TabList/TabListShowcase.tsx

@@ -2,11 +2,13 @@
 
 'use client';
 
+import {useState} from 'react';
 import {TabList, Tab} from '@astryxdesign/core/TabList';
 
 export default function TabListShowcase() {
+  const [value, setValue] = useState('home');
   return (
-    <TabList value="home" onChange={() => {}}>
+    <TabList value={value} onChange={setValue}>
       <Tab value="home" label="Home" />
       <Tab value="projects" label="Projects" />
       <Tab value="settings" label="Settings" />

packages/cli/templates/blocks/components/TabMenu/TabMenuShowcase.tsx

@@ -2,11 +2,13 @@
 
 'use client';
 
+import {useState} from 'react';
 import {TabList, Tab, TabMenu} from '@astryxdesign/core/TabList';
 
 export default function TabMenuShowcase() {
+  const [value, setValue] = useState('settings');
   return (
-    <TabList value="settings" onChange={() => {}}>
+    <TabList value={value} onChange={setValue}>
       <Tab value="overview" label="Overview" />
       <Tab value="activity" label="Activity" />
       <TabMenu

packages/cli/templates/blocks/components/TextArea/TextAreaShowcase.tsx

@@ -2,15 +2,17 @@
 
 'use client';
 
+import {useState} from 'react';
 import {TextArea} from '@astryxdesign/core/TextArea';
 
 export default function TextAreaShowcase() {
+  const [value, setValue] = useState('');
   return (
     <div style={{width: 400}}>
       <TextArea
         label="Description"
-        value=""
-        onChange={() => {}}
+        value={value}
+        onChange={setValue}
         placeholder="Enter a description..."
       />
     </div>

packages/cli/templates/blocks/components/TextInput/TextInputShowcase.tsx

@@ -2,15 +2,17 @@
 
 'use client';
 
+import {useState} from 'react';
 import {TextInput} from '@astryxdesign/core/TextInput';
 
 export default function TextInputShowcase() {
+  const [value, setValue] = useState('');
   return (
     <div style={{width: 300}}>
       <TextInput
         label="Name"
-        value=""
-        onChange={() => {}}
+        value={value}
+        onChange={setValue}
         placeholder="Enter your name"
       />
     </div>