docs(cli): make Slider/Selector/MultiSelector showcases interactive

.changeset/interactive-showcases.md

@@ -0,0 +1,6 @@
+---
+'@astryxdesign/cli': patch
+---
+
+[docs] Wire local state into the Slider, Selector, and MultiSelector showcase examples so they are interactive — they were controlled components with a static value and a no-op/missing onChange, so the docsite previews appeared frozen (#3187, #3188, #3189)
+@durvesh1992

packages/cli/templates/blocks/components/MultiSelector/MultiSelectorShowcase.tsx

@@ -1,15 +1,19 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
+'use client';
+
+import {useState} from 'react';
 import {MultiSelector} from '@astryxdesign/core/MultiSelector';
 
 export default function MultiSelectorShowcase() {
+  const [value, setValue] = useState<string[]>([]);
   return (
     <div style={{width: 300}}>
       <MultiSelector
         label="Columns"
         options={['Name', 'Email', 'Role', 'Status', 'Created']}
-        value={[]}
-        onChange={() => {}}
+        value={value}
+        onChange={setValue}
         placeholder="Select columns..."
       />
     </div>

packages/cli/templates/blocks/components/Selector/SelectorShowcase.tsx

@@ -2,16 +2,19 @@
 
 'use client';
 
+import {useState} from 'react';
 import {Selector} from '@astryxdesign/core/Selector';
 
 export default function SelectorShowcase() {
+  const [value, setValue] = useState<string | undefined>();
   return (
     <Selector
       style={{width: 300}}
       label="Fruit"
       options={['Apple', 'Banana', 'Orange', 'Mango', 'Pineapple']}
       placeholder="Select a fruit..."
-      onChange={() => {}}
+      value={value}
+      onChange={setValue}
     />
   );
 }