feat(components): migrate 8 more components to useReactiveProp (#1704)

Drawer, Radio, Select, Textarea, Tooltip, Progress, Pagination, and
SidebarSection now use useReactiveProp for their canonical prop instead
of the legacy state({{ prop }}) capture-once pattern. Brings the total
to 14 migrated components, covering all the common reactive primitives
(open, checked, value, show, current-page, expanded).

Each migration is a single-line swap. The default useReactiveProp parser
handles booleans (open/checked/show/expanded), numbers (current-page,
progress value), and strings (input/textarea/select value via explicit
parse opt to coerce null→'').

Updated test/edge-cases/issue-fixes.test.ts to assert all 14 migrated
components actually invoke useReactiveProp for their canonical prop.

Components left on capture-once: Notification (intentional — uses
defineExpose's open(opts) for imperative control), Tabs / Accordion
(active state is owned by the container, not driven from outside),
CommandPalette (similar — open state is imperative).

Author: glennmichael123

packages/components/src/ui/drawer/Drawer.stx

@@ -32,7 +32,10 @@ export const closeButtonClasses = `absolute top-0 ${closeButtonPosition[position
 
 <script client>
 const emit = defineEmits()
-const isOpen = state({{ open }})
+// useReactiveProp lets the parent drive `open` via signals
+// (`:open="drawerOpen()"`) instead of the prop being captured once.
+// See stacksjs/stx#1704.
+const isOpen = useReactiveProp('open', {{ open }})
 
 function close() {
   isOpen.set(false)

packages/components/src/ui/pagination/Pagination.stx

@@ -17,7 +17,9 @@ export const iconClasses = `w-5 h-5`.trim()
 const emit = defineEmits()
 const totalPages = {{ totalPages }}
 const siblingCount = {{ siblingCount }}
-const page = state({{ currentPage }})
+// Reactive prop binding — parent can drive `current-page` via signals
+// (useful for URL-driven pagination via useSearchParams). See #1704.
+const page = useReactiveProp('current-page', {{ currentPage }})
 
 function goToPage(target) {
   if (target >= 1 && target <= totalPages && target !== page()) {

packages/components/src/ui/progress/Progress.stx

@@ -45,7 +45,8 @@ export const circularBarColor = color === 'primary' ? 'stroke-blue-600 dark:stro
 const max = {{ max }}
 const indeterminate = {{ indeterminate }}
 const circumference = {{ circumference }}
-const value = state({{ value }})
+// Reactive prop binding — parent can drive `value` via signals. See #1704.
+const value = useReactiveProp('value', {{ value }})
 
 const percentage = derived(() => Math.min(Math.max((value() / max) * 100, 0), 100))
 const percentLabel = derived(() => `${Math.round(percentage())}%`)

packages/components/src/ui/radio/Radio.stx

@@ -25,7 +25,8 @@ export const inputId = `radio-${value || label}`
 const emit = defineEmits()
 const isDisabled = {{ disabled }}
 const radioValue = {{ value }}
-const isChecked = state({{ checked }})
+// Reactive prop binding — parent can drive `checked` via signals. See #1704.
+const isChecked = useReactiveProp('checked', {{ checked }})
 
 function onInputChange(event) {
   if (isDisabled) {

packages/components/src/ui/select/Select.stx

@@ -27,7 +27,8 @@ export const selectId = `select-${value}`
 
 <script client>
 const emit = defineEmits()
-const selectedValue = state({{ value }})
+// Reactive prop binding — parent can drive `value` via signals. See #1704.
+const selectedValue = useReactiveProp('value', {{ value }}, { parse: (v) => v == null ? '' : String(v) })
 
 function onChange(event) {
   selectedValue.set(event.target.value)

packages/components/src/ui/sidebar/SidebarSection.stx

@@ -37,7 +37,8 @@ export const labelClasses = variant === 'workspace' || variant === 'desktop'
 const emit = defineEmits()
 const sectionId = {{ id }}
 const collapsibleProp = {{ collapsible }}
-const isExpanded = state({{ expanded }})
+// Reactive prop binding — parent can drive `expanded` via signals. See #1704.
+const isExpanded = useReactiveProp('expanded', {{ expanded }})
 
 function onHeaderClick() {
   if (!collapsibleProp) return

packages/components/src/ui/textarea/Textarea.stx

@@ -35,7 +35,8 @@ export const helperClasses = `mt-2 text-sm ${error ? 'text-red-600 dark:text-red
 const emit = defineEmits()
 const autoResize = {{ autoResize }}
 const maxRows = {{ maxRows }}
-const inputValue = state({{ value }})
+// Reactive prop binding — parent can drive `value` via signals. See #1704.
+const inputValue = useReactiveProp('value', {{ value }}, { parse: (v) => v == null ? '' : String(v) })
 
 function resizeTextarea(el) {
   if (!autoResize) return

packages/components/src/ui/tooltip/Tooltip.stx

@@ -27,7 +27,8 @@ export const arrowClass = `absolute w-0 h-0 border-4 border-transparent ${arrowC
 <script client>
 const delay = {{ delay }}
 const isDisabled = {{ disabled }}
-const isVisible = state({{ show }})
+// Reactive prop binding — parent can drive `show` via signals. See #1704.
+const isVisible = useReactiveProp('show', {{ show }})
 let timeoutId = null
 
 function showTooltip() {

packages/stx/test/edge-cases/issue-fixes.test.ts

@@ -364,11 +364,19 @@ describe('#1704 — useReactiveProp bridges parent clientReactive props into chi
     const componentsDir = path.resolve(__dirname, '../../../components/src/ui')
     const checks: Array<[string, string]> = [
       ['dialog/Dialog.stx', "useReactiveProp('open',"],
+      ['drawer/Drawer.stx', "useReactiveProp('open',"],
       ['switch/Switch.stx', "useReactiveProp('checked',"],
       ['checkbox/Checkbox.stx', "useReactiveProp('checked',"],
+      ['radio/Radio.stx', "useReactiveProp('checked',"],
       ['input/TextInput.stx', "useReactiveProp('value',"],
       ['input/PasswordInput.stx', "useReactiveProp('value',"],
       ['input/NumberInput.stx', "useReactiveProp('value',"],
+      ['select/Select.stx', "useReactiveProp('value',"],
+      ['textarea/Textarea.stx', "useReactiveProp('value',"],
+      ['progress/Progress.stx', "useReactiveProp('value',"],
+      ['tooltip/Tooltip.stx', "useReactiveProp('show',"],
+      ['pagination/Pagination.stx', "useReactiveProp('current-page',"],
+      ['sidebar/SidebarSection.stx', "useReactiveProp('expanded',"],
     ]
     for (const [file, marker] of checks) {
       const src = fs.readFileSync(path.join(componentsDir, file), 'utf8')