From 8f4eb77bdc04ce21cccaa4eccc2c4b2e43389ca0 Mon Sep 17 00:00:00 2001
From: Mats Bosson <mats.bosson@gmail.com>
Date: Mon, 30 Mar 2026 03:45:41 +0700
Subject: [PATCH] Fix showcase state attributes These components use children?:
 JSX.Element, not render-prop callbacks. State is exposed via
 data-state="checked|unchecked" attributes.

---
 .../showcase/src/sections/inputs-basic.tsx    | 45 ++++++++-----------
 .../src/sections/inputs-selection.tsx         | 14 +++---
 2 files changed, 23 insertions(+), 36 deletions(-)

diff --git a/packages/showcase/src/sections/inputs-basic.tsx b/packages/showcase/src/sections/inputs-basic.tsx
index 23f770a..8bbe323 100644
--- a/packages/showcase/src/sections/inputs-basic.tsx
+++ b/packages/showcase/src/sections/inputs-basic.tsx
@@ -47,40 +47,31 @@ const NumberFieldDemo = () => (
 /** Checkbox demo with checked and unchecked states. */
 const CheckboxDemo = () => (
   <div class="flex flex-col gap-3">
-    <Checkbox class="flex items-center gap-2 cursor-pointer">
-      {(state) => (
-        <>
-          <div class={`w-4 h-4 border rounded flex items-center justify-center text-xs ${state.checked() ? "bg-indigo-600 border-indigo-600 text-white" : "border-gray-300"}`}>
-            {state.checked() ? "✓" : ""}
-          </div>
-          <span class="text-sm text-gray-700">Accept terms and conditions</span>
-        </>
-      )}
+    <Checkbox class="flex items-center gap-2 cursor-pointer group">
+      <div class="w-4 h-4 border rounded flex items-center justify-center text-xs border-gray-300 group-data-[state=checked]:bg-indigo-600 group-data-[state=checked]:border-indigo-600 group-data-[state=checked]:text-white">
+        <span class="hidden group-data-[state=checked]:inline">✓</span>
+      </div>
+      <span class="text-sm text-gray-700">Accept terms and conditions</span>
     </Checkbox>
-    <Checkbox defaultChecked class="flex items-center gap-2 cursor-pointer">
-      {(state) => (
-        <>
-          <div class={`w-4 h-4 border rounded flex items-center justify-center text-xs ${state.checked() ? "bg-indigo-600 border-indigo-600 text-white" : "border-gray-300"}`}>
-            {state.checked() ? "✓" : ""}
-          </div>
-          <span class="text-sm text-gray-700">Subscribe to newsletter</span>
-        </>
-      )}
+    <Checkbox defaultChecked class="flex items-center gap-2 cursor-pointer group">
+      <div class="w-4 h-4 border rounded flex items-center justify-center text-xs border-gray-300 group-data-[state=checked]:bg-indigo-600 group-data-[state=checked]:border-indigo-600 group-data-[state=checked]:text-white">
+        <span class="hidden group-data-[state=checked]:inline">✓</span>
+      </div>
+      <span class="text-sm text-gray-700">Subscribe to newsletter</span>
     </Checkbox>
   </div>
 );
 
 /** Switch demo with on/off toggle. */
 const SwitchDemo = () => (
-  <Switch class="flex items-center gap-3 cursor-pointer">
-    {(state) => (
-      <>
-        <div class={`w-10 h-6 rounded-full relative transition-colors ${state.checked() ? "bg-indigo-600" : "bg-gray-300"}`}>
-          <div class={`absolute top-0.5 w-5 h-5 rounded-full bg-white shadow transition-transform ${state.checked() ? "translate-x-4" : "translate-x-0.5"}`} />
-        </div>
-        <span class="text-sm text-gray-700">{state.checked() ? "On" : "Off"}</span>
-      </>
-    )}
+  <Switch class="flex items-center gap-3 cursor-pointer group">
+    <div class="w-10 h-6 rounded-full relative transition-colors bg-gray-300 group-data-[state=checked]:bg-indigo-600">
+      <div class="absolute top-0.5 w-5 h-5 rounded-full bg-white shadow transition-transform translate-x-0.5 group-data-[state=checked]:translate-x-4" />
+    </div>
+    <span class="text-sm text-gray-700">
+      <span class="group-data-[state=checked]:hidden">Off</span>
+      <span class="hidden group-data-[state=checked]:inline">On</span>
+    </span>
   </Switch>
 );
 
diff --git a/packages/showcase/src/sections/inputs-selection.tsx b/packages/showcase/src/sections/inputs-selection.tsx
index 705aef3..78b2460 100644
--- a/packages/showcase/src/sections/inputs-selection.tsx
+++ b/packages/showcase/src/sections/inputs-selection.tsx
@@ -15,15 +15,11 @@ function RadioGroupDemo() {
     <RadioGroup defaultValue="option-b" class="flex flex-col gap-2">
       <For each={["option-a", "option-b", "option-c"]}>
         {(value) => (
-          <RadioGroup.Item value={value} class="flex items-center gap-2 cursor-pointer">
-            {(itemState) => (
-              <>
-                <div class={`w-4 h-4 rounded-full border-2 flex items-center justify-center ${itemState.checked() ? "border-indigo-600" : "border-gray-300"}`}>
-                  {itemState.checked() && <div class="w-2 h-2 rounded-full bg-indigo-600" />}
-                </div>
-                <span class="text-sm text-gray-700">Option {value.split("-")[1]?.toUpperCase()}</span>
-              </>
-            )}
+          <RadioGroup.Item value={value} class="flex items-center gap-2 cursor-pointer group">
+            <div class="w-4 h-4 rounded-full border-2 flex items-center justify-center border-gray-300 group-data-[state=checked]:border-indigo-600">
+              <div class="w-2 h-2 rounded-full bg-indigo-600 hidden group-data-[state=checked]:block" />
+            </div>
+            <span class="text-sm text-gray-700">Option {value.split("-")[1]?.toUpperCase()}</span>
           </RadioGroup.Item>
         )}
       </For>