Feat/toggle (#192)

* feat: initial toggle impl

* fix: tsconfig and toggle root

* feat: toggle + indicator

* feat: tests

* feat: correct examples

* fix: examples

* update

* fix: build

* feat: move everything to utils package

* fix: types

* feat: final test

* fix: hmr and initial monorepo docs

* fix: format

* feat: update for vitest

* update docs

Author: thejackshelton-kunaico

CONTRIBUTING.md

@@ -29,6 +29,7 @@
     "@kunai-consulting/code-notate": "0.0.2",
     "@kunai-consulting/code-notate-core": "0.0.2",
     "@kunai-consulting/qwik": "workspace:*",
+    "@kunai-consulting/qwik-utils": "workspace:*",
     "@qwik-ui/headless": "^0.6.4",
     "@qwikest/icons": "^0.0.13",
     "@tailwindcss/vite": "^4.1.3",

apps/docs/package.json

@@ -1 +1 @@
-{"version":"1.2.0","languages":{"en-us":{"hash":"en-us_d75dd384268ca","wasm":"en-us","page_count":35}}}
+{"version":"1.2.0","languages":{"en-us":{"hash":"en-us_14c018bb95deb","wasm":"en-us","page_count":37}}}

apps/docs/public/pagefind/fragment/en-us_0af724b.pf_fragment

@@ -25,7 +25,6 @@ export const Sidebar = component$((props: PropsOf<"nav">) => {
             { id: "/base/checkbox", label: "Checkbox" },
             { id: "/base/checklist", label: "Checklist" },
             { id: "/base/otp", label: "OTP" },
-            { id: "/base/popover", label: "Popover" },
             { id: "/base/radio-group", label: "Radio Group" },
             { id: "/base/slider", label: "Slider" },
             { id: "/base/switch", label: "Switch" }
@@ -37,15 +36,17 @@ export const Sidebar = component$((props: PropsOf<"nav">) => {
           children: [
             { id: "/base/resizable", label: "Resizable" },
             { id: "/base/scroll-area", label: "Scroll Area" },
-            { id: "/base/tree", label: "Tree" }
+            { id: "/base/tree", label: "Tree" },
+            { id: "/base/popover", label: "Popover" }
           ]
         },
         {
           id: "/base/selection",
           label: "Selection Components",
           children: [
             { id: "/base/calendar", label: "Calendar" },
-            { id: "/base/pagination", label: "Pagination" }
+            { id: "/base/pagination", label: "Pagination" },
+            { id: "/base/toggle", label: "Toggle" }
           ]
         },
         {
@@ -88,7 +89,8 @@ export const Sidebar = component$((props: PropsOf<"nav">) => {
             { id: "/contributing/indexing", label: "Indexing" },
             { id: "/contributing/events", label: "Events" },
             { id: "/contributing/testing", label: "Testing" },
-            { id: "/contributing/styling", label: "Styling" }
+            { id: "/contributing/styling", label: "Styling" },
+            { id: "/contributing/monorepo", label: "Monorepo" }
           ]
         },
         {

apps/docs/public/pagefind/fragment/en-us_13ebbfa.pf_fragment

@@ -0,0 +1,22 @@
+import { $, component$, useSignal, useStyles$ } from "@builder.io/qwik";
+import { Toggle } from "@kunai-consulting/qwik";
+import { LuThumbsUp } from "@qwikest/icons/lucide";
+import styles from "./toggle.css?inline";
+
+export default component$(() => {
+  useStyles$(styles);
+  const countSig = useSignal(0);
+
+  const handleChange = $(() => {
+    countSig.value++;
+  });
+
+  return (
+    <div>
+      <Toggle.Root class="toggle-root" aria-label="Toggle Like" onChange$={handleChange}>
+        <LuThumbsUp />
+      </Toggle.Root>
+      <p>Count: {countSig.value}</p>
+    </div>
+  );
+});

apps/docs/public/pagefind/fragment/en-us_146df58.pf_fragment

@@ -0,0 +1,23 @@
+import { component$, useSignal, useStyles$ } from "@builder.io/qwik";
+import { Toggle } from "@kunai-consulting/qwik";
+import { LuStar } from "@qwikest/icons/lucide";
+import styles from "./toggle.css?inline";
+
+export default component$(() => {
+  useStyles$(styles);
+  const showToggleSig = useSignal(false);
+
+  return (
+    <div>
+      <button type="button" onClick$={() => (showToggleSig.value = true)}>
+        Render Toggle
+      </button>
+
+      {showToggleSig.value && (
+        <Toggle.Root class="toggle-root" aria-label="Toggle Favourite">
+          <LuStar />
+        </Toggle.Root>
+      )}
+    </div>
+  );
+});

apps/docs/public/pagefind/fragment/en-us_14fb52e.pf_fragment

@@ -0,0 +1,14 @@
+import { component$, useStyles$ } from "@builder.io/qwik";
+import { Toggle } from "@kunai-consulting/qwik";
+import { LuItalic } from "@qwikest/icons/lucide";
+import styles from "./toggle.css?inline";
+
+export default component$(() => {
+  useStyles$(styles);
+
+  return (
+    <Toggle.Root class="toggle-root" aria-label="Toggle Italic (disabled)" disabled>
+      <LuItalic />
+    </Toggle.Root>
+  );
+});

apps/docs/public/pagefind/fragment/en-us_155dfb2.pf_fragment

@@ -0,0 +1,14 @@
+import { component$, useStyles$ } from "@builder.io/qwik";
+import { Toggle } from "@kunai-consulting/qwik";
+import { LuBold } from "@qwikest/icons/lucide";
+import styles from "./toggle.css?inline";
+
+export default component$(() => {
+  useStyles$(styles);
+
+  return (
+    <Toggle.Root class="toggle-root" aria-label="Toggle Bold">
+      <LuBold />
+    </Toggle.Root>
+  );
+});

apps/docs/public/pagefind/fragment/en-us_15b0925.pf_fragment

@@ -0,0 +1,15 @@
+import { component$, useStyles$ } from "@builder.io/qwik";
+import { Toggle } from "@kunai-consulting/qwik"; // Adjust import path
+import styles from "./toggle.css?inline";
+
+export default component$(() => {
+  useStyles$(styles);
+
+  return (
+    <Toggle.Root class="toggle-root" aria-label="Toggle State">
+      <Toggle.Indicator class="toggle-indicator" fallback={<span>Is Off</span>}>
+        <span>Is On</span>
+      </Toggle.Indicator>
+    </Toggle.Root>
+  );
+});

apps/docs/public/pagefind/fragment/en-us_179faf1.pf_fragment

@@ -0,0 +1,23 @@
+import { component$, useStyles$ } from "@builder.io/qwik";
+import { Toggle } from "@kunai-consulting/qwik";
+import { LuVolume2, LuVolumeX } from "@qwikest/icons/lucide";
+import styles from "./toggle.css?inline";
+
+/**
+ *  Wrapper component needed because Qwikest icons uses inline components, and you cannot serialize them through props. Once we have Qwik icons library this wrapper component will not be needed.
+ */
+export const VolumeComp = component$(() => {
+  return <LuVolumeX />;
+});
+
+export default component$(() => {
+  useStyles$(styles);
+
+  return (
+    <Toggle.Root class="toggle-root" aria-label="Toggle Mute" pressed={true}>
+      <Toggle.Indicator class="toggle-indicator" fallback={<VolumeComp />}>
+        <LuVolume2 />
+      </Toggle.Indicator>
+    </Toggle.Root>
+  );
+});

apps/docs/public/pagefind/fragment/en-us_17f44b9.pf_fragment

@@ -0,0 +1,41 @@
+import { component$, useSignal, useStyles$ } from "@builder.io/qwik";
+import { Toggle } from "@kunai-consulting/qwik";
+import { LuVolume2, LuVolumeX } from "@qwikest/icons/lucide";
+import styles from "./toggle.css?inline";
+
+/**
+ *  Wrapper component needed because Qwikest icons uses inline components, and you cannot serialize them through props. Once we have Qwik icons library this wrapper component will not be needed.
+ */
+export const VolumeComp = component$(() => {
+  return <LuVolumeX />;
+});
+
+export default component$(() => {
+  useStyles$(styles);
+  const isPressedSig = useSignal(true);
+
+  return (
+    <div>
+      <Toggle.Root
+        class="toggle-root"
+        aria-label="Toggle Mute"
+        bind:pressed={isPressedSig}
+      >
+        <Toggle.Indicator class="toggle-indicator" fallback={<VolumeComp />}>
+          <LuVolume2 />
+        </Toggle.Indicator>
+      </Toggle.Root>
+
+      <button
+        type="button"
+        onClick$={() => {
+          isPressedSig.value = !isPressedSig.value;
+        }}
+      >
+        Toggle Signal
+      </button>
+
+      <p>Bound Signal: {isPressedSig.value.toString()}</p>
+    </div>
+  );
+});

apps/docs/public/pagefind/fragment/en-us_18d3d66.pf_fragment

@@ -0,0 +1,30 @@
+.toggle-root {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px 12px;
+  border-radius: 6px;
+  border: 1px solid gray;
+  background-color: #f0f0f0;
+  color: #333;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+}
+
+.toggle-root:focus-visible {
+  outline: 2px solid dodgerblue;
+  outline-offset: 2px;
+}
+
+.toggle-root[data-disabled] {
+  opacity: 0.5;
+  cursor: not-allowed;
+  background-color: #e0e0e0;
+  border-color: #cccccc;
+}
+
+.toggle-root[data-pressed] {
+  background-color: #0a4d70;
+  border-color: #083a5a;
+  color: white;
+}

apps/docs/public/pagefind/fragment/en-us_1ac68c5.pf_fragment

@@ -7,7 +7,8 @@ import {
   useContextProvider,
   useSignal
 } from "@builder.io/qwik";
-import { Render, getNextIndex, resetIndexes, withAsChild } from "@kunai-consulting/qwik";
+import { Render, withAsChild } from "@kunai-consulting/qwik";
+import { getNextIndex, resetIndexes } from "@kunai-consulting/qwik-utils";
 
 export default component$(() => {
   const isRenderedSig = useSignal(false);

apps/docs/public/pagefind/fragment/en-us_1b4e863.pf_fragment

@@ -7,7 +7,8 @@ import {
   useContextProvider,
   useSignal
 } from "@builder.io/qwik";
-import { Render, getNextIndex, resetIndexes, withAsChild } from "@kunai-consulting/qwik";
+import { Render, withAsChild } from "@kunai-consulting/qwik";
+import { getNextIndex, resetIndexes } from "@kunai-consulting/qwik-utils";
 
 export default component$(() => {
   const isRenderedSig = useSignal(false);