feat(docs): docs fixes

Author: thejackshelton

apps/website/src/routes/docs/headless/(components)/accordion/examples.tsx

@@ -630,7 +630,7 @@ export const DynamicAccordion = component$(
             </label>
           </div>
 
-          <AccordionRoot class="text-white bg-slate-700 rounded-sm border-slate-600 border-[1px] box-border w-[min(400px,_100%)]">
+          <AccordionRoot class="text-white bg-slate-700 rounded-sm border-slate-600 border-[1px] border-t-0 box-border w-[min(400px,_100%)]">
             {itemStore.map(({ label, id }, index) => {
               return (
                 <AccordionItem id={`${id}`} key={id}>

apps/website/src/routes/docs/headless/(components)/tabs/index.css

@@ -1,11 +1,12 @@
 .tabs-example [role='tab'] {
   width: 250px;
-  background: var(--qwikui-slate-300);
-  color: var(--qwikui-slate-950);
+  background: var(--qwikui-slate-500);
+  color: white;
 }
 
 .tabs-example [role='tab'][disabled] {
-  color: var(--qwikui-slate-500);
+  color: var(--qwikui-slate-400);
+  background: var(--qwikui-slate-600);
 }
 
 .tabs-example [role='tab'].selected {

apps/website/src/routes/docs/headless/(components)/toggle/examples.tsx

@@ -1,12 +1,12 @@
-import { $, Slot, component$ } from '@builder.io/qwik';
+import { Slot, component$ } from '@builder.io/qwik';
 import { Toggle } from '@qwik-ui/primitives';
 import { PreviewCodeExample } from '../../../_components/preview-code-example/preview-code-example';
 
 export const Example01 = component$(() => {
   return (
     <PreviewCodeExample>
       <div q:slot="actualComponent">
-        <Toggle pressed onClick$={$(() => console.log('Toggle'))} />
+        <Toggle pressed={true} onClick$={() => console.log('Toggle')} />
       </div>
 
       <div q:slot="codeExample">

apps/website/src/routes/docs/headless/(components)/tooltip/examples.tsx

@@ -8,10 +8,11 @@ export const MainExample = component$(() => {
     <PreviewCodeExample>
       <div q:slot="actualComponent">
         <Tooltip
+          offset={8}
           content="I'm a tooltip!"
-          class="bg-slate-200 dark:bg-gray-900 p-4 rounded-xl"
+          class="bg-slate-800 p-4 rounded-xl text-white border-2 border-slate-400 shadow-dark-medium"
         >
-          Hover over me!
+          <span class="text-white">Hover over me!</span>
         </Tooltip>
       </div>
       <div q:slot="codeExample">
@@ -27,9 +28,13 @@ export const Example1 = component$(() => {
       <div q:slot="actualComponent">
         <Tooltip
           content="Clicking this icon takes you to Qwik UI's GitHub repository!"
-          class="bg-slate-200 dark:bg-gray-900 p-4 rounded-xl"
+          class="bg-slate-800 p-4 rounded-xl text-white border-2 border-slate-400 shadow-dark-medium"
+          offset={8}
         >
-          <a href="https://github.com/qwikifiers/qwik-ui" class="mx-auto">
+          <a
+            href="https://github.com/qwikifiers/qwik-ui"
+            class="block border-none text-white"
+          >
             <GitHubIcon />
           </a>
         </Tooltip>

packages/kit-headless/src/components/tooltip/tooltip.tsx

@@ -8,21 +8,26 @@ import {
   useSignal,
   useStylesScoped$,
 } from '@builder.io/qwik';
-import { computePosition, type ComputePositionConfig } from '@floating-ui/dom';
+import {
+  offset as _offset,
+  computePosition,
+  type ComputePositionConfig,
+} from '@floating-ui/dom';
 import styles from './tooltip.css?inline';
 
 export interface TooltipProps {
   class?: string;
   content: string;
   inline?: boolean;
   durationMs?: number;
+  offset?: number;
   position?: ComputePositionConfig['placement'];
 }
 
 type State = 'hidden' | 'positioned' | 'unpositioned' | 'closing';
 
 export const Tooltip = component$(
-  ({ content, position = 'top', durationMs = 100, ...props }: TooltipProps) => {
+  ({ offset, content, position = 'top', durationMs = 100, ...props }: TooltipProps) => {
     useStylesScoped$(styles);
     const id = useId();
     const triggerAnchor = useSignal<HTMLElement>();
@@ -34,13 +39,16 @@ export const Tooltip = component$(
 
     const update = $(async () => {
       const now = Date.now();
+      const middleware = [_offset(offset)];
+
       const hasMouseEnterDebounced = now - lastActivatedTimestamp.value >= 300;
       if (triggerAnchor.value && tooltipAnchor.value && hasMouseEnterDebounced) {
         const { x, y } = await computePosition(
           triggerAnchor.value,
           tooltipAnchor.value as HTMLElement,
           {
             placement: position,
+            middleware,
           },
         );
         lastActivatedTimestamp.value = now;

packages/primitives/src/lib/toggle/toggle.tsx

@@ -1,49 +1,40 @@
-import { component$, PropFunction, QwikMouseEvent, useSignal } from '@builder.io/qwik';
+import { component$, useSignal, QwikIntrinsicElements } from '@builder.io/qwik';
 
 export type ToggleProps = {
   disabled?: boolean;
-  /**
-   * The controlled state of the toggle.
-   */
   pressed?: boolean;
-  /**
-   * The state of the toggle when initially rendered. Use `defaultPressed`
-   * if you do not need to control the state of the toggle.
-   * @defaultValue false
-   */
   defaultPressed?: boolean;
+} & QwikIntrinsicElements['input'];
 
-  onClick$: PropFunction<(evt: QwikMouseEvent) => void>;
-};
-
-export const Toggle = component$((props: ToggleProps) => {
-  const {
-    pressed: pressedProp,
-    defaultPressed = false,
+export const Toggle = component$(
+  ({
     onClick$,
+    pressed,
+    defaultPressed = false,
     disabled,
     ...toggleProps
-  } = props;
-
-  const pressedState = useSignal(pressedProp || defaultPressed);
+  }: ToggleProps) => {
+    const pressedState = useSignal(pressed || defaultPressed);
 
-  return (
-    <input
-      type="checkbox"
-      role="switch"
-      aria-pressed={pressedState.value}
-      data-state={pressedState.value ? 'on' : 'off'}
-      data-disabled={disabled ? '' : undefined}
-      checked={pressedState.value}
-      onClick$={(event: QwikMouseEvent<HTMLInputElement>) => {
-        if (!disabled) {
-          pressedState.value = !pressedState.value;
-          if (onClick$) {
-            onClick$(event);
-          }
-        }
-      }}
-      {...toggleProps}
-    />
-  );
-});
+    // event handlers seem to break toggle when exported from qwik-ui primitive
+    return (
+      <input
+        type="checkbox"
+        role="switch"
+        aria-pressed={pressedState.value}
+        data-state={pressedState.value ? 'on' : 'off'}
+        data-disabled={disabled ? '' : undefined}
+        checked={pressedState.value}
+        // onClick$={[
+        //   () => {
+        //     if (!disabled) {
+        //       pressedState.value = !pressedState.value;
+        //     }
+        //   },
+        //   onClick$,
+        // ]}
+        {...toggleProps}
+      />
+    );
+  },
+);