Toggle

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>
  );
});

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>
  );
});

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>
  );
});

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>
  );
});

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>
  );
});

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>
  );
});