Skip to content

Commit f44761b

Browse files
TheMcnafahaTheMcnafaha
committed
feat: 80% template adapted to dot
1 parent 13ae35f commit f44761b

13 files changed

+63
-77
lines changed

‎apps/website/src/routes/docs/headless/checkbox/examples/hero.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import { component$, useSignal, useStyles$ } from '@builder.io/qwik';
2-
import { Checkbox, CheckboxIndicator } from '@qwik-ui/headless';
2+
import { Checkbox } from '@qwik-ui/headless';
33
export default component$(() => {
44
return (
55
<>
6-
<Checkbox class="flex items-center gap-3 border-2 border-black p-2 ">
6+
<Checkbox.Root class="flex items-center gap-3 border-2 border-black p-2 ">
77
<CheckboxIndicator class="flex h-[25px] w-[25px] items-center justify-center bg-slate-600">
88
✅
99
</CheckboxIndicator>
1010
I have read the README file
11-
</Checkbox>
11+
</Checkbox.Root>
1212
</>
1313
);
1414
});

‎apps/website/src/routes/docs/headless/checkbox/examples/pizza.tsx

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,13 @@
11
import { component$, useSignal, useStyles$ } from '@builder.io/qwik';
2-
import {
3-
Checkbox,
4-
CheckboxIndicator,
5-
CheckList,
6-
ChecklistIndicator,
7-
} from '@qwik-ui/headless';
2+
import { Checkbox } from '@qwik-ui/headless';
83
const toppingNames = ['hot peppers', 'ham', 'pineaple', 'mushroom'];
94
const toppingImages = ['🌶️', '🍗', '🍍', '🍄'];
105
export default component$(() => {
116
return (
127
<>
138
<h3 id="pizza-toppings">Pizza toppings</h3>
149
<CheckList ariaLabeledBy="pizza-toppings" class="flex flex-col gap-4">
15-
<Checkbox
10+
<Checkbox.Root
1611
class="flex items-center gap-3 border-2 border-black p-2"
1712
checkList={true}
1813
>
@@ -26,16 +21,16 @@ export default component$(() => {
2621
</div>
2722
</ChecklistIndicator>
2823
Pick all toppings
29-
</Checkbox>
24+
</Checkbox.Root>
3025

3126
{toppingNames.map((name, i) => {
3227
return (
33-
<Checkbox class="ml-8 flex items-center gap-3 border-2 border-black p-2">
28+
<Checkbox.Root class="ml-8 flex items-center gap-3 border-2 border-black p-2">
3429
<CheckboxIndicator class="flex h-[25px] w-[25px] items-center justify-center bg-slate-600">
3530
{toppingImages[i]}
3631
</CheckboxIndicator>
3732
{name}
38-
</Checkbox>
33+
</Checkbox.Root>
3934
);
4035
})}
4136
</CheckList>

‎apps/website/src/routes/docs/headless/checkbox/examples/test-controlled-list-false.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export default component$(() => {
1313
<>
1414
<h3 id="test123">Pick a cat</h3>
1515
<CheckList class="flex flex-col gap-3" ariaLabeledBy="test123">
16-
<Checkbox
16+
<Checkbox.Root
1717
class="flex items-center gap-3 bg-slate-900 text-white"
1818
checkList={true}
1919
checkBoxSig={checklistSig}
@@ -29,21 +29,21 @@ export default component$(() => {
2929
</div>
3030
</ChecklistIndicator>
3131
<p>Controlls all</p>
32-
</Checkbox>
33-
<Checkbox
32+
</Checkbox.Root>
33+
<Checkbox.Root
3434
id="child-1"
3535
class="flex items-center gap-3 bg-slate-900 pr-2 text-white"
3636
>
3737
<CheckboxIndicator class="w-fit bg-slate-600">✅</CheckboxIndicator>
3838
<p>No other stuff is needed here</p>
39-
</Checkbox>
39+
</Checkbox.Root>
4040

41-
<Checkbox id="child-2" class="bg-slate-900 text-white">
41+
<Checkbox.Root id="child-2" class="bg-slate-900 text-white">
4242
<div class="flex items-center gap-3">
4343
<CheckboxIndicator class="w-fit bg-slate-600">✅</CheckboxIndicator>
4444
<p>Im a true.tsx</p>
4545
</div>
46-
</Checkbox>
46+
</Checkbox.Root>
4747
</CheckList>
4848
<p>You signal is: </p>
4949
<p id="signal-to-text">{`${checklistSig.value}`}</p>

‎apps/website/src/routes/docs/headless/checkbox/examples/test-controlled-list-falses.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,29 +9,29 @@ export default component$(() => {
99
<>
1010
<h3 id="test123">Pick a cat</h3>
1111
<CheckList class="flex flex-col gap-3" ariaLabeledBy="test123">
12-
<Checkbox
12+
<Checkbox.Root
1313
class="flex items-center gap-3 bg-slate-900 p-2 text-white"
1414
checkList={true}
1515
>
1616
<CheckboxIndicator class=" flex w-[80px] justify-center bg-white p-3">
1717
✅
1818
</CheckboxIndicator>
1919
<p>Controlls all</p>
20-
</Checkbox>
21-
<Checkbox
20+
</Checkbox.Root>
21+
<Checkbox.Root
2222
checkBoxSig={firstUserSig}
2323
class="flex items-center gap-3 bg-slate-900 pr-2 text-white"
2424
>
2525
<CheckboxIndicator class="w-fit bg-slate-600">✅</CheckboxIndicator>
2626
<p>No other stuff is needed here</p>
27-
</Checkbox>
27+
</Checkbox.Root>
2828

29-
<Checkbox checkBoxSig={secondUserSig} class="bg-slate-900 text-white">
29+
<Checkbox.Root checkBoxSig={secondUserSig} class="bg-slate-900 text-white">
3030
<div class="flex items-center gap-3">
3131
<CheckboxIndicator class="w-fit bg-slate-600">✅</CheckboxIndicator>
3232
<p>No other stuff is needed here</p>
3333
</div>
34-
</Checkbox>
34+
</Checkbox.Root>
3535
</CheckList>
3636
</>
3737
);

‎apps/website/src/routes/docs/headless/checkbox/examples/test-controlled-list-mixed.tsx

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,15 @@ import { component$, useSignal, useStyles$ } from '@builder.io/qwik';
22
import { CheckboxIndicator } from 'packages/kit-headless/src/components/checkbox/checkbox-indicator';
33
import { Checkbox } from 'packages/kit-headless/src/components/checkbox/checkbox';
44
import { CheckList } from 'packages/kit-headless/src/components/checkbox/checklist';
5-
import { ChecklistIndicator } from '@qwik-ui/headless';
5+
import { Checkbox } from '@qwik-ui/headless';
66
export default component$(() => {
77
const firstUserSig = useSignal(false);
88
const secondUserSig = useSignal(true);
99
return (
1010
<>
1111
<h3 id="test123">Pick a cat</h3>
1212
<CheckList class="flex flex-col gap-3" ariaLabeledBy="test123">
13-
<Checkbox
13+
<Checkbox.Root
1414
class="flex items-center gap-3 bg-slate-900 p-2 text-white"
1515
checkList={true}
1616
>
@@ -24,21 +24,21 @@ export default component$(() => {
2424
</div>
2525
</ChecklistIndicator>
2626
<p>Controlls all</p>
27-
</Checkbox>
28-
<Checkbox
27+
</Checkbox.Root>
28+
<Checkbox.Root
2929
checkBoxSig={firstUserSig}
3030
class="flex items-center gap-3 bg-slate-900 pr-2 text-white"
3131
>
3232
<CheckboxIndicator class="w-fit bg-slate-600">✅</CheckboxIndicator>
3333
<p>No other stuff is needed here</p>
34-
</Checkbox>
34+
</Checkbox.Root>
3535

36-
<Checkbox checkBoxSig={secondUserSig} class="bg-slate-900 text-white">
36+
<Checkbox.Root checkBoxSig={secondUserSig} class="bg-slate-900 text-white">
3737
<div class="flex items-center gap-3">
3838
<CheckboxIndicator class="w-fit bg-slate-600">✅</CheckboxIndicator>
3939
<p>No other stuff is needed here</p>
4040
</div>
41-
</Checkbox>
41+
</Checkbox.Root>
4242
</CheckList>
4343
</>
4444
);

‎apps/website/src/routes/docs/headless/checkbox/examples/test-controlled-list-true.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export default component$(() => {
1212
<>
1313
<h3 id="test123">Pick a cat</h3>
1414
<CheckList class="flex flex-col gap-3" ariaLabeledBy="test123">
15-
<Checkbox
15+
<Checkbox.Root
1616
class="flex items-center gap-3 bg-slate-900 text-white"
1717
checkList={true}
1818
checkBoxSig={checklistSig}
@@ -28,21 +28,21 @@ export default component$(() => {
2828
</div>
2929
</ChecklistIndicator>
3030
<p>Controlls all</p>
31-
</Checkbox>
32-
<Checkbox
31+
</Checkbox.Root>
32+
<Checkbox.Root
3333
id="child-1"
3434
class="flex items-center gap-3 bg-slate-900 pr-2 text-white"
3535
>
3636
<CheckboxIndicator class="w-fit bg-slate-600">✅</CheckboxIndicator>
3737
<p>No other stuff is needed here</p>
38-
</Checkbox>
38+
</Checkbox.Root>
3939

40-
<Checkbox id="child-2" class="bg-slate-900 text-white">
40+
<Checkbox.Root id="child-2" class="bg-slate-900 text-white">
4141
<div class="flex items-center gap-3">
4242
<CheckboxIndicator class="w-fit bg-slate-600">✅</CheckboxIndicator>
4343
<p>Im a true.tsx</p>
4444
</div>
45-
</Checkbox>
45+
</Checkbox.Root>
4646
</CheckList>
4747
<p>You signal is: </p>
4848
<p id="signal-to-text">{`${checklistSig.value}`}</p>

‎apps/website/src/routes/docs/headless/checkbox/examples/test-controlled-list-trues.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,29 +9,29 @@ export default component$(() => {
99
<>
1010
<h3 id="test123">Pick a cat</h3>
1111
<CheckList class="flex flex-col gap-3" ariaLabeledBy="test123">
12-
<Checkbox
12+
<Checkbox.Root
1313
class="flex items-center gap-3 bg-slate-900 p-2 text-white"
1414
checkList={true}
1515
>
1616
<CheckboxIndicator class=" flex w-[80px] justify-center bg-white p-3">
1717
✅
1818
</CheckboxIndicator>
1919
<p>Controlls all</p>
20-
</Checkbox>
21-
<Checkbox
20+
</Checkbox.Root>
21+
<Checkbox.Root
2222
checkBoxSig={firstUserSig}
2323
class="flex items-center gap-3 bg-slate-900 pr-2 text-white"
2424
>
2525
<CheckboxIndicator class="w-fit bg-slate-600">✅</CheckboxIndicator>
2626
<p>No other stuff is needed here</p>
27-
</Checkbox>
27+
</Checkbox.Root>
2828

29-
<Checkbox checkBoxSig={secondUserSig} class="bg-slate-900 text-white">
29+
<Checkbox.Root checkBoxSig={secondUserSig} class="bg-slate-900 text-white">
3030
<div class="flex items-center gap-3">
3131
<CheckboxIndicator class="w-fit bg-slate-600">✅</CheckboxIndicator>
3232
<p>No other stuff is needed here</p>
3333
</div>
34-
</Checkbox>
34+
</Checkbox.Root>
3535
</CheckList>
3636
</>
3737
);

‎apps/website/src/routes/docs/headless/checkbox/examples/test-controlled-list.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,29 +9,29 @@ export default component$(() => {
99
<>
1010
<h3 id="test123">Pick a cat</h3>
1111
<CheckList class="flex flex-col gap-3" ariaLabeledBy="test123">
12-
<Checkbox
12+
<Checkbox.Root
1313
class="flex items-center gap-3 bg-slate-900 p-2 text-white"
1414
checkList={true}
1515
>
1616
<CheckboxIndicator class=" flex w-[80px] justify-center bg-white p-3">
1717
✅
1818
</CheckboxIndicator>
1919
<p>Controlls all</p>
20-
</Checkbox>
21-
<Checkbox
20+
</Checkbox.Root>
21+
<Checkbox.Root
2222
checkBoxSig={firstUserSig}
2323
class="flex items-center gap-3 bg-slate-900 pr-2 text-white"
2424
>
2525
<CheckboxIndicator class="w-fit bg-slate-600">✅</CheckboxIndicator>
2626
<p>No other stuff is needed here</p>
27-
</Checkbox>
27+
</Checkbox.Root>
2828

29-
<Checkbox class="bg-slate-900 text-white">
29+
<Checkbox.Root class="bg-slate-900 text-white">
3030
<div class="flex items-center gap-3">
3131
<CheckboxIndicator class="w-fit bg-slate-600">✅</CheckboxIndicator>
3232
<p>No other stuff is needed here</p>
3333
</div>
34-
</Checkbox>
34+
</Checkbox.Root>
3535
</CheckList>
3636
</>
3737
);

‎apps/website/src/routes/docs/headless/checkbox/examples/test-default.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,14 @@ export default component$(() => {
66
return (
77
<>
88
<p>I'm the default checkbox!!!</p>
9-
<Checkbox class=" text-white">
9+
<Checkbox.Root class=" text-white">
1010
<div class="flex items-center gap-3">
1111
<CheckboxIndicator class="w-fit bg-slate-600">
1212
<p id="indicator">✅</p>
1313
</CheckboxIndicator>
1414
<p>No other stuff is needed here</p>
1515
</div>
16-
</Checkbox>
16+
</Checkbox.Root>
1717
</>
1818
);
1919
});

‎apps/website/src/routes/docs/headless/checkbox/examples/test-hero.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,14 @@ export default component$(() => {
66
const userSig = useSignal(true);
77
return (
88
<>
9-
<Checkbox class="bg-slate-900 text-white" checkBoxSig={userSig}>
9+
<Checkbox.Root class="bg-slate-900 text-white" checkBoxSig={userSig}>
1010
<div class="flex items-center gap-3">
1111
<CheckboxIndicator class="w-fit bg-slate-600">
1212
<p id="indicator">✅</p>
1313
</CheckboxIndicator>
1414
<p>No other stuff is needed here</p>
1515
</div>
16-
</Checkbox>
16+
</Checkbox.Root>
1717
<div>{`${userSig.value}`}</div>
1818
</>
1919
);

0 commit comments

Comments
 (0)