docs: remove default from styled toggle

Author: steffanek

apps/website/src/routes/docs/styled/toggle/examples/bind-pressed.tsx

@@ -0,0 +1,26 @@
+import { component$, useComputed$, useSignal } from '@builder.io/qwik';
+import { Toggle } from '~/components/ui';
+
+export default component$(() => {
+  const pressedState = useSignal(true);
+
+  const text = useComputed$(() => {
+    return pressedState.value ? 'You pressed me' : 'You unpressed me';
+  });
+
+  return (
+    <div class="flex flex-col items-center justify-center">
+      <Toggle bind:pressed={pressedState} class="shrink-0">
+        Hello
+      </Toggle>
+
+      <span>{text.value}</span>
+      <button
+        style={{ border: '1px solid black', padding: '10px' }}
+        onClick$={() => (pressedState.value = true)}
+      >
+        I can only press
+      </button>
+    </div>
+  );
+});

apps/website/src/routes/docs/styled/toggle/examples/defaultPressed.tsx renamed to apps/website/src/routes/docs/styled/toggle/examples/initialPressed.tsx

@@ -76,16 +76,20 @@ import { Toggle } from '~/components/ui';
 
 ### Initial Value (Uncontrolled)
 
-An initial, uncontrolled value can be provided using the `defaultPressed` prop.
+An initial, uncontrolled value can be provided using the `pressed` prop.
 
-<Showcase name="defaultPressed" />
+<Showcase name="initialPressed" />
+
+If you want to have some control when the toggle is pressed, like making some side effect you can use
+the `onPressedChange$`. The event is fired when the user toggle the button, and receives the new value.
+
+<Showcase name="pressed" />
 
 ### Reactive Value (Controlled)
 
-Pass the `pressed` prop to make the pressed state controlled.
-The `onPressedChange$` event is fired when the user toggle the button, and receives the new value.
+Pass a signal to `bind:value` prop to make the pressed state controlled (binding the value with a signal).
 
-<Showcase name="pressed" />
+<Showcase name="bind-pressed" />
 
 ### Disabled