fix(styled progress): change import statements

Author: maiieul

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

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

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

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

packages/kit-styled/src/components/progress/progress.tsx

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