docs: remove noises from progress doc

Author: ditadi

apps/website/src/routes/docs/headless/progress/examples/hero.tsx

@@ -1,28 +1,20 @@
-import { component$, useSignal, useVisibleTask$ } from '@builder.io/qwik';
-import * as Progress from '@qwik-ui/headless';
+import { component$, useStyles$ } from '@builder.io/qwik';
+import { Progress, ProgressIndicator } from '@qwik-ui/headless';
+import styles from '../snippets/progress.css?inline';
 
 export default component$(() => {
-  const progress = useSignal(30);
+  useStyles$(styles);
 
-  useVisibleTask$(() => {
-    setTimeout(() => {
-      progress.value = 50;
-    }, 1000);
-  });
+  const progress = 30;
 
   return (
-    <>
-      <Progress.Root
-        value={progress.value}
-        class="h-7 w-full overflow-hidden rounded-full bg-gray-100"
-      >
-        <Progress.Indicator
-          class="h-full w-full bg-slate-700"
-          style={{
-            transform: `translateX(-${100 - progress.value}%)`,
-          }}
-        />
-      </Progress.Root>
-    </>
+    <Progress value={progress} class="progress">
+      <ProgressIndicator
+        class="progress-indicator"
+        style={{
+          transform: `translateX(-${100 - progress}%)`,
+        }}
+      />
+    </Progress>
   );
 });

apps/website/src/routes/docs/headless/progress/index.mdx

@@ -14,7 +14,7 @@ Displays a progress bar related to a task.
 
 <Showcase name="hero" />
 
-Qwik UI's Progress implementation follows the [WAI-Aria](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/) design pattern, along with some additional API's that enhance the flexibility, types, and performance.
+Qwik UI's Progress implementation follows the [WAI-Aria](https://www.w3.org/WAI/ARIA/apg/patterns/meter) design pattern, along with some additional API's that enhance the flexibility, types, and performance.
 
 <FeatureList
   features={['Provides context for assistive technology to read the progress of a task.']}
@@ -29,22 +29,24 @@ Qwik UI's Progress implementation follows the [WAI-Aria](https://www.w3.org/WAI/
 
 </div>
 
-> Rather than using the `details` and `summary` tags as disclosure widgets, we use a custom implementation. While these widgets can be used without JavaScript, they come with [their own accessibility drawbacks](https://www.scottohara.me/blog/2022/09/12/details-summary.html).
-
 ## Building blocks
 
 ```tsx
-import { component$, useSignal } from '@builder.io/qwik';
-import * as Progress from '@qwik-ui/headless';
+import { component$ } from '@builder.io/qwik';
+import { Progress, ProgressIndicator } from '@qwik-ui/headless';
 
 export default component$(() => {
-  const progress = useSignal(30);
+  const progress = 30;
+
   return (
-    <Progress.Root value={progress.value}>
-      <Progress.Indicator
-        style={{ transform: `translateX(-${100 - progress.value}%)` }}
+    <Progress value={progress} class="progress">
+      <ProgressIndicator
+        class="progress-indicator"
+        style={{
+          transform: `translateX(-${100 - progress}%)`,
+        }}
       />
-    </Progress.Root>
+    </Progress>
   );
 });
 ```

apps/website/src/routes/docs/headless/progress/snippets/progress.css

@@ -0,0 +1,13 @@
+.progress {
+  height: 1.75rem;
+  width: 100%;
+  overflow: hidden;
+  border-radius: calc(var(--border-radius) / 2);
+  background-color: hsl(var(--foreground));
+}
+
+.progress-indicator {
+  height: 100%;
+  width: 100%;
+  background-color: hsl(var(--primary));
+}

apps/website/src/routes/docs/styled/progress/examples/hero.tsx

@@ -1,18 +1,17 @@
-import { component$, useSignal, useVisibleTask$ } from '@builder.io/qwik';
+import { component$, useOnWindow, useSignal, $ } from '@builder.io/qwik';
 import { Progress } from '@qwik-ui/styled';
 
 export default component$(() => {
   const progress = useSignal(30);
 
-  useVisibleTask$(() => {
-    setTimeout(() => {
-      progress.value = 50;
-    }, 1000);
-  });
-
-  return (
-    <>
-      <Progress value={progress.value} />
-    </>
+  useOnWindow(
+    'load',
+    $(() => {
+      setTimeout(() => {
+        progress.value = 50;
+      }, 1000);
+    }),
   );
+
+  return <Progress value={progress.value} />;
 });

apps/website/src/routes/docs/styled/progress/index.mdx

@@ -22,19 +22,22 @@ qwik-ui add progress
 
 ```tsx
 import { cn } from '@qwik-ui/utils';
-import * as ProgressPrimitive from '@qwik-ui/headless';
+import {
+  Progress as QwikUIProgress,
+  ProgressIndicator as QwikUIProgressIndicator,
+} from '@qwik-ui/headless';
 import { PropsOf, component$ } from '@builder.io/qwik';
 
-export const Progress = component$<PropsOf<typeof ProgressPrimitive.Root>>((props) => {
+export const Progress = component$<PropsOf<typeof QwikUIProgress>>((props) => {
   return (
-    <ProgressPrimitive.Root
+    <QwikUIProgress
       class={cn('bg-secondary relative h-4 w-full overflow-hidden rounded', props?.class)}
     >
-      <ProgressPrimitive.Indicator
+      <QwikUIProgressIndicator
         class="bg-primary h-full w-full flex-1 transition-all"
         style={{ transform: `translateX(-${100 - (props.value || 0)}%)` }}
       />
-    </ProgressPrimitive.Root>
+    </QwikUIProgress>
   );
 });
 ```