From 48d047e5d560cd4d33ad70839ee5deb1523a7c61 Mon Sep 17 00:00:00 2001
From: Mats Bosson <mats.bosson@gmail.com>
Date: Mon, 30 Mar 2026 03:47:43 +0700
Subject: [PATCH] Fix showcase Form rendering Form.Control uses render-prop
 children(ariaProps). Also moved navLinks creation inside App() to avoid
 SolidJS createRoot warning.

---
 packages/showcase/src/app.tsx                      |  4 +---
 packages/showcase/src/sections/inputs-advanced.tsx | 12 ++++++++++--
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/packages/showcase/src/app.tsx b/packages/showcase/src/app.tsx
index 5dbdbd7..5bb3ab9 100644
--- a/packages/showcase/src/app.tsx
+++ b/packages/showcase/src/app.tsx
@@ -44,8 +44,6 @@ function Section(props: { id: string; title: string; children: JSX.Element }) {
   return content;
 }
 
-const navLinks = categories.map((cat) => <NavLink cat={cat} />);
-
 /** Kitchen sink showcase page with all PettyUI components. */
 export function App() {
   const page = (
@@ -56,7 +54,7 @@ export function App() {
             PettyUI <span class="font-normal text-gray-400">Kitchen Sink</span>
           </h1>
           <nav class="flex gap-3 text-sm">
-            {navLinks}
+            {categories.map((cat) => <NavLink cat={cat} />)}
           </nav>
         </div>
       </header>
diff --git a/packages/showcase/src/sections/inputs-advanced.tsx b/packages/showcase/src/sections/inputs-advanced.tsx
index 5a9c1b3..604c4f1 100644
--- a/packages/showcase/src/sections/inputs-advanced.tsx
+++ b/packages/showcase/src/sections/inputs-advanced.tsx
@@ -11,13 +11,21 @@ function FormDemo() {
     >
       <Form.Field name="name" class="flex flex-col gap-1">
         <Form.Label class="text-sm font-medium text-gray-700">Name</Form.Label>
-        <Form.Control type="text" placeholder="Your name" class="border border-gray-300 rounded px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500" />
+        <Form.Control>
+          {(ariaProps) => (
+            <input {...ariaProps} type="text" placeholder="Your name" class="border border-gray-300 rounded px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500" />
+          )}
+        </Form.Control>
         <Form.Description class="text-xs text-gray-400">Required field</Form.Description>
         <Form.ErrorMessage class="text-xs text-red-500" />
       </Form.Field>
       <Form.Field name="email" class="flex flex-col gap-1">
         <Form.Label class="text-sm font-medium text-gray-700">Email</Form.Label>
-        <Form.Control type="email" placeholder="you@example.com" class="border border-gray-300 rounded px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500" />
+        <Form.Control>
+          {(ariaProps) => (
+            <input {...ariaProps} type="email" placeholder="you@example.com" class="border border-gray-300 rounded px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500" />
+          )}
+        </Form.Control>
         <Form.ErrorMessage class="text-xs text-red-500" />
       </Form.Field>
       <Form.Submit class="px-4 py-2 text-sm font-medium rounded bg-indigo-600 text-white hover:bg-indigo-700 self-start">Submit</Form.Submit>