docs(cli): make Typeahead/Tokenizer/FileInput showcases interactive

Completes the frozen-showcase fixes (after #3199, #3200). These rendered
controlled components with a static value + no-op onChange. Wire local
state: Typeahead useState<SearchableItem|null>, Tokenizer
useState<SearchableItem[]>, FileInput useState<File|File[]|null>.
Typeahead also gains 'use client'.

Author: durvesh1992

.changeset/interactive-showcases-3.md

@@ -0,0 +1,6 @@
+---
+'@astryxdesign/cli': patch
+---
+
+[docs] Wire local state into the Typeahead, Tokenizer, and FileInput showcase examples (static value + no-op onChange → frozen previews). Completes the interactive-showcase fixes started for Slider/Selector/MultiSelector (#3187-#3189) and the input/tab batch
+@durvesh1992

packages/cli/templates/blocks/components/FileInput/FileInputShowcase.tsx

@@ -2,15 +2,17 @@
 
 'use client';
 
+import {useState} from 'react';
 import {FileInput} from '@astryxdesign/core/FileInput';
 
 export default function FileInputShowcase() {
+  const [value, setValue] = useState<File | File[] | null>(null);
   return (
     <div style={{width: 350}}>
       <FileInput
         label="Upload file"
-        value={null}
-        onChange={() => {}}
+        value={value}
+        onChange={setValue}
         placeholder="Drag files here or click to browse"
       />
     </div>

packages/cli/templates/blocks/components/Tokenizer/TokenizerShowcase.tsx

@@ -2,25 +2,27 @@
 
 'use client';
 
+import {useState} from 'react';
 import {Tokenizer} from '@astryxdesign/core/Tokenizer';
-import type {SearchSource} from '@astryxdesign/core/Typeahead';
+import type {SearchableItem, SearchSource} from '@astryxdesign/core/Typeahead';
 
 const source: SearchSource = {
   search: () => [],
   bootstrap: () => [],
 };
 
 export default function TokenizerShowcase() {
+  const [value, setValue] = useState<SearchableItem[]>([
+    {id: '1', label: 'Design'},
+    {id: '2', label: 'Engineering'},
+  ]);
   return (
     <Tokenizer
       label="Tags"
       placeholder="Search..."
       searchSource={source}
-      value={[
-        {id: '1', label: 'Design'},
-        {id: '2', label: 'Engineering'},
-      ]}
-      onChange={() => {}}
+      value={value}
+      onChange={setValue}
       style={{width: 400}}
     />
   );

packages/cli/templates/blocks/components/Typeahead/TypeaheadShowcase.tsx

@@ -1,5 +1,8 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
+'use client';
+
+import {useState} from 'react';
 import {Typeahead} from '@astryxdesign/core/Typeahead';
 import type {SearchableItem, SearchSource} from '@astryxdesign/core/Typeahead';
 
@@ -21,14 +24,15 @@ const fruitSource: SearchSource = {
 };
 
 export default function TypeaheadShowcase() {
+  const [value, setValue] = useState<SearchableItem | null>(null);
   return (
     <div style={{width: 320}}>
       <Typeahead
         label="Fruit"
         placeholder="Search fruits..."
         searchSource={fruitSource}
-        value={null}
-        onChange={() => {}}
+        value={value}
+        onChange={setValue}
       />
     </div>
   );