Add toggle and togglegroup headless and styled components

.changeset/cuddly-snakes-smell.md

@@ -0,0 +1,6 @@
+---
+'@qwik-ui/headless': minor
+'@qwik-ui/styled': minor
+---
+
+feat: toggle and togglegroup headless and styled components

apps/website/src/_state/component-statuses.ts

@@ -32,6 +32,8 @@ export const statusByComponent: ComponentKitsStatuses = {
     Separator: ComponentStatus.Beta,
     Skeleton: ComponentStatus.Beta,
     Tabs: ComponentStatus.Beta,
+    Toggle: ComponentStatus.Draft,
+    ToggleGroup: ComponentStatus.Draft,
     Textarea: ComponentStatus.Draft,
   },
   headless: {
@@ -49,6 +51,8 @@ export const statusByComponent: ComponentKitsStatuses = {
     Select: ComponentStatus.Beta,
     Separator: ComponentStatus.Beta,
     Tabs: ComponentStatus.Beta,
+    Toggle: ComponentStatus.Draft,
+    ToggleGroup: ComponentStatus.Draft,
     Tooltip: ComponentStatus.Beta,
   },
 };

apps/website/src/routes/docs/contributing/index.mdx

@@ -161,12 +161,8 @@ import { Collapsible } from '@qwik-ui/headless';
 export default component$(() => {
   return (
     <Collapsible.Root>
-      <Collapsible.Trigger>
-        Trigger
-      </Collapsible.Trigger>
-      <Collapsible.Content>
-        Content
-      </Collapsible.Content>
+      <Collapsible.Trigger>Trigger</Collapsible.Trigger>
+      <Collapsible.Content>Content</Collapsible.Content>
     </Collapsible.Root>
   );
 });
@@ -230,7 +226,7 @@ async function setup(page: Page, exampleName: string) {
 }
 
 test.describe('Mouse Behavior', () => {
-    test(`GIVEN a collapsible
+  test(`GIVEN a collapsible
           WHEN clicking on the trigger
           THEN the content should be visible`, async ({ page }) => {
     const { driver: d } = await setup(page, 'hero');

apps/website/src/routes/docs/headless/menu.md

@@ -29,3 +29,5 @@
 - [Separator](/docs/headless/separator)
 - [Tabs](/docs/headless/tabs)
 - [Tooltip](/docs/headless/tooltip)
+- [Toggle](/docs/headless/toggle)
+- [ToggleGroup](/docs/headless/toggle-group)

apps/website/src/routes/docs/headless/toggle-group/examples/disabled.tsx

@@ -0,0 +1,23 @@
+import { component$, useStyles$ } from '@builder.io/qwik';
+import styles from '../snippets/toggle.css?inline';
+
+import { ToggleGroup } from '@qwik-ui/headless';
+
+export default component$(() => {
+  useStyles$(styles);
+  return (
+    <div class="toggle-container">
+      <ToggleGroup.Root disabled>
+        <ToggleGroup.Item value="left" aria-label="Left aligned" class="toggle">
+          Left
+        </ToggleGroup.Item>
+        <ToggleGroup.Item value="center" aria-label="Center aligned" class="toggle">
+          Center
+        </ToggleGroup.Item>
+        <ToggleGroup.Item value="right" aria-label="Right aligned" class="toggle">
+          Right
+        </ToggleGroup.Item>
+      </ToggleGroup.Root>
+    </div>
+  );
+});

apps/website/src/routes/docs/headless/toggle-group/examples/hero.tsx

@@ -0,0 +1,22 @@
+import { component$, useStyles$ } from '@builder.io/qwik';
+import styles from '../snippets/toggle.css?inline';
+import { ToggleGroup } from '@qwik-ui/headless';
+
+export default component$(() => {
+  useStyles$(styles);
+  return (
+    <div class="toggle-container">
+      <ToggleGroup.Root>
+        <ToggleGroup.Item value="left" aria-label="Left aligned" class="toggle">
+          Left
+        </ToggleGroup.Item>
+        <ToggleGroup.Item value="center" aria-label="Center aligned" class="toggle">
+          Center
+        </ToggleGroup.Item>
+        <ToggleGroup.Item value="right" aria-label="Right aligned" class="toggle">
+          Right
+        </ToggleGroup.Item>
+      </ToggleGroup.Root>
+    </div>
+  );
+});

apps/website/src/routes/docs/headless/toggle-group/examples/horizontal-rtl.tsx

@@ -0,0 +1,23 @@
+import { component$, useStyles$ } from '@builder.io/qwik';
+import styles from '../snippets/toggle.css?inline';
+
+import { ToggleGroup } from '@qwik-ui/headless';
+
+export default component$(() => {
+  useStyles$(styles);
+  return (
+    <div class="toggle-container">
+      <ToggleGroup.Root orientation={'horizontal'} direction={'rtl'}>
+        <ToggleGroup.Item value="left" aria-label="Left aligned" class="toggle">
+          Left
+        </ToggleGroup.Item>
+        <ToggleGroup.Item value="center" aria-label="Center aligned" class="toggle">
+          Center
+        </ToggleGroup.Item>
+        <ToggleGroup.Item value="right" aria-label="Right aligned" class="toggle">
+          Right
+        </ToggleGroup.Item>
+      </ToggleGroup.Root>
+    </div>
+  );
+});

apps/website/src/routes/docs/headless/toggle-group/examples/initialValue.tsx

@@ -0,0 +1,23 @@
+import { component$, useStyles$ } from '@builder.io/qwik';
+import styles from '../snippets/toggle.css?inline';
+
+import { ToggleGroup } from '@qwik-ui/headless';
+
+export default component$(() => {
+  useStyles$(styles);
+  return (
+    <div class="toggle-container">
+      <ToggleGroup.Root value={'left'}>
+        <ToggleGroup.Item value="left" aria-label="Left aligned" class="toggle">
+          Left
+        </ToggleGroup.Item>
+        <ToggleGroup.Item value="center" aria-label="Center aligned" class="toggle">
+          Center
+        </ToggleGroup.Item>
+        <ToggleGroup.Item value="right" aria-label="Right aligned" class="toggle">
+          Right
+        </ToggleGroup.Item>
+      </ToggleGroup.Root>
+    </div>
+  );
+});

apps/website/src/routes/docs/headless/toggle-group/examples/item-disabled-center.tsx

@@ -0,0 +1,28 @@
+import { component$, useStyles$ } from '@builder.io/qwik';
+import styles from '../snippets/toggle.css?inline';
+
+import { ToggleGroup } from '@qwik-ui/headless';
+
+export default component$(() => {
+  useStyles$(styles);
+  return (
+    <div class="toggle-container">
+      <ToggleGroup.Root>
+        <ToggleGroup.Item value="left" aria-label="Left aligned" class="toggle">
+          Left
+        </ToggleGroup.Item>
+        <ToggleGroup.Item
+          disabled
+          value="center"
+          aria-label="Center aligned"
+          class="toggle"
+        >
+          Center
+        </ToggleGroup.Item>
+        <ToggleGroup.Item value="right" aria-label="Right aligned" class="toggle">
+          Right
+        </ToggleGroup.Item>
+      </ToggleGroup.Root>
+    </div>
+  );
+});

apps/website/src/routes/docs/headless/toggle-group/examples/loop-item-disabled.tsx

@@ -0,0 +1,23 @@
+import { component$, useStyles$ } from '@builder.io/qwik';
+import styles from '../snippets/toggle.css?inline';
+
+import { ToggleGroup } from '@qwik-ui/headless';
+
+export default component$(() => {
+  useStyles$(styles);
+  return (
+    <div class="toggle-container">
+      <ToggleGroup.Root loop>
+        <ToggleGroup.Item disabled value="left" aria-label="Left aligned" class="toggle">
+          Left
+        </ToggleGroup.Item>
+        <ToggleGroup.Item value="center" aria-label="Center aligned" class="toggle">
+          Center
+        </ToggleGroup.Item>
+        <ToggleGroup.Item value="right" aria-label="Right aligned" class="toggle">
+          Right
+        </ToggleGroup.Item>
+      </ToggleGroup.Root>
+    </div>
+  );
+});

apps/website/src/routes/docs/headless/toggle-group/examples/loop.tsx

@@ -0,0 +1,23 @@
+import { component$, useStyles$ } from '@builder.io/qwik';
+import styles from '../snippets/toggle.css?inline';
+
+import { ToggleGroup } from '@qwik-ui/headless';
+
+export default component$(() => {
+  useStyles$(styles);
+  return (
+    <div class="toggle-container">
+      <ToggleGroup.Root loop>
+        <ToggleGroup.Item value="left" aria-label="Left aligned" class="toggle">
+          Left
+        </ToggleGroup.Item>
+        <ToggleGroup.Item value="center" aria-label="Center aligned" class="toggle">
+          Center
+        </ToggleGroup.Item>
+        <ToggleGroup.Item value="right" aria-label="Right aligned" class="toggle">
+          Right
+        </ToggleGroup.Item>
+      </ToggleGroup.Root>
+    </div>
+  );
+});

apps/website/src/routes/docs/headless/toggle-group/examples/multiple.tsx

@@ -0,0 +1,23 @@
+import { component$, useStyles$ } from '@builder.io/qwik';
+import styles from '../snippets/toggle.css?inline';
+
+import { ToggleGroup } from '@qwik-ui/headless';
+
+export default component$(() => {
+  useStyles$(styles);
+  return (
+    <div class="toggle-container">
+      <ToggleGroup.Root multiple>
+        <ToggleGroup.Item value="left" aria-label="Left aligned" class="toggle">
+          Left
+        </ToggleGroup.Item>
+        <ToggleGroup.Item value="center" aria-label="Center aligned" class="toggle">
+          Center
+        </ToggleGroup.Item>
+        <ToggleGroup.Item value="right" aria-label="Right aligned" class="toggle">
+          Right
+        </ToggleGroup.Item>
+      </ToggleGroup.Root>
+    </div>
+  );
+});

apps/website/src/routes/docs/headless/toggle-group/examples/test-csr-order-multiple-bind.tsx

@@ -0,0 +1,42 @@
+import { component$, useStyles$ } from '@builder.io/qwik';
+import styles from '../snippets/toggle.css?inline';
+import { ToggleGroup } from '@qwik-ui/headless';
+import { useSignal } from '@builder.io/qwik';
+
+export default component$(() => {
+  useStyles$(styles);
+  const items = ['left', 'center', 'right'];
+  const isItemsRenderedSig = useSignal(false);
+  const valueSelected = useSignal<string[]>(['left', 'center']);
+
+  return (
+    <div>
+      <button onClick$={() => (isItemsRenderedSig.value = true)}>
+        render on the client
+      </button>
+      {isItemsRenderedSig.value && (
+        <div class="toggle-container">
+          <ToggleGroup.Root multiple bind:value={valueSelected}>
+            {items.map((item, index) => (
+              <ToggleGroup.Item
+                key={index}
+                value={item}
+                aria-label={`${item} item`}
+                class="toggle"
+              >
+                {item}
+              </ToggleGroup.Item>
+            ))}
+          </ToggleGroup.Root>
+          <span test-data-bounded-span>You selected: {valueSelected.value}</span>
+          <button
+            style={{ border: '1px solid black', padding: '10px' }}
+            onClick$={() => (valueSelected.value = ['right'])}
+          >
+            I can only press 'right'
+          </button>
+        </div>
+      )}
+    </div>
+  );
+});

apps/website/src/routes/docs/headless/toggle-group/examples/test-csr-order-multiple.tsx

@@ -0,0 +1,32 @@
+import { component$, useStyles$ } from '@builder.io/qwik';
+import styles from '../snippets/toggle.css?inline';
+import { ToggleGroup } from '@qwik-ui/headless';
+import { useSignal } from '@builder.io/qwik';
+
+export default component$(() => {
+  useStyles$(styles);
+  const items = ['left', 'center', 'right'];
+  const isItemsRenderedSig = useSignal(false);
+
+  return (
+    <div>
+      <button onClick$={() => (isItemsRenderedSig.value = true)}>
+        render on the client
+      </button>
+      {isItemsRenderedSig.value && (
+        <ToggleGroup.Root multiple>
+          {items.map((item, index) => (
+            <ToggleGroup.Item
+              key={index}
+              value={item}
+              aria-label={`${item} item`}
+              class="toggle"
+            >
+              {item}
+            </ToggleGroup.Item>
+          ))}
+        </ToggleGroup.Root>
+      )}
+    </div>
+  );
+});

apps/website/src/routes/docs/headless/toggle-group/examples/test-csr-order-single-bind-center.tsx

@@ -0,0 +1,42 @@
+import { component$, useStyles$ } from '@builder.io/qwik';
+import styles from '../snippets/toggle.css?inline';
+import { ToggleGroup } from '@qwik-ui/headless';
+import { useSignal } from '@builder.io/qwik';
+
+export default component$(() => {
+  useStyles$(styles);
+  const items = ['left', 'center', 'right'];
+  const isItemsRenderedSig = useSignal(false);
+  const valueSelected = useSignal<string>('center');
+
+  return (
+    <div>
+      <button onClick$={() => (isItemsRenderedSig.value = true)}>
+        render on the client
+      </button>
+      {isItemsRenderedSig.value && (
+        <div class="toggle-container">
+          <ToggleGroup.Root bind:value={valueSelected}>
+            {items.map((item, index) => (
+              <ToggleGroup.Item
+                key={index}
+                value={item}
+                aria-label={`${item} item`}
+                class="toggle"
+              >
+                {item}
+              </ToggleGroup.Item>
+            ))}
+          </ToggleGroup.Root>
+          <span test-data-bounded-span>You selected: {valueSelected.value}</span>
+          <button
+            style={{ border: '1px solid black', padding: '10px' }}
+            onClick$={() => (valueSelected.value = 'right')}
+          >
+            I can only press 'right'
+          </button>
+        </div>
+      )}
+    </div>
+  );
+});