mats.bosson/PettyUI
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Fix showcase state attributes

Browse Source 
These components use children?: JSX.Element, not render-prop callbacks.
State is exposed via data-state="checked|unchecked" attributes.
This commit is contained in:
Mats Bosson 2026-03-30 03:45:41 +07:00
parent 8761d317ae
commit 8f4eb77bdc
2 changed files with 23 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
packages/showcase/src/sections/inputs-basic.tsx
View File

@ -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() ? "✓" : ""}
<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() ? "✓" : ""}
<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"}`} />
<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">{state.checked() ? "On" : "Off"}</span>
</>
)}
<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>
);

10
packages/showcase/src/sections/inputs-selection.tsx
View File

@ -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" />}
<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>