docs: progress headless and styled doc

Author: ditadi

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

@@ -20,7 +20,6 @@ export default component$(() => {
           class="h-full w-full bg-slate-700"
           style={{
             transform: `translateX(-${100 - progress.value}%)`,
-            transition: 'transform 0.3s',
           }}
         />
       </Progress.Root>

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

@@ -13,3 +13,74 @@ import { Note } from '~/components/note/note';
 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.
+
+<FeatureList
+  features={['Provides context for assistive technology to read the progress of a task.']}
+/>
+
+<div class="mb-6 flex flex-col gap-2">
+[View Source Code ↗️](https://github.com/qwikifiers/qwik-ui/tree/main/packages/kit-headless/src/components/progress)
+
+[Report an issue 🚨](https://github.com/qwikifiers/qwik-ui/issues)
+
+[Edit This Page 🗒️](<https://github.com/qwikifiers/qwik-ui/edit/main/apps/website/src/routes/docs/headless/(components)/progress/index.mdx>)
+
+</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';
+
+export default component$(() => {
+  const progress = useSignal(30);
+  return (
+    <Progress.Root value={progress.value}>
+      <Progress.Indicator
+        style={{ transform: `translateX(-${100 - progress.value}%)` }}
+      />
+    </Progress.Root>
+  );
+});
+```
+
+## Accessibility
+
+Adheres to the [progressbar role requirements](https://www.w3.org/WAI/ARIA/apg/patterns/meter/).
+
+## API
+
+### Root
+
+Contains all of the progress parts.
+
+<APITable
+  propDescriptors={[
+    {
+      name: 'class',
+      type: 'string',
+      description: 'CSS classes to apply to the Progress.',
+    },
+    {
+      name: 'value',
+      type: 'number',
+      description: 'The progress value.',
+    },
+    {
+      name: 'max',
+      type: 'number',
+      description: 'The maximum progress value',
+    },
+    {
+      name: 'getValueLabel',
+      type: 'function',
+      description:
+        'A function to get the accessible label text representing the current value in a human-readable format. If not provided, the value label will be read as the numeric value as a percentage of the max value.',
+    },
+  ]}
+/>

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

@@ -11,3 +11,40 @@ import { statusByComponent } from '~/_state/component-statuses';
 Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
 
 <Showcase name="hero" />
+
+## Installation
+
+### Run the following cli command or copy/paste the component code into your project
+
+```sh
+qwik-ui add progress
+```
+
+```tsx
+import { cn } from '@qwik-ui/utils';
+import * as ProgressPrimitive from '@qwik-ui/headless';
+import { PropsOf, component$ } from '@builder.io/qwik';
+
+export const Progress = component$<PropsOf<typeof ProgressPrimitive.Root>>((props) => {
+  return (
+    <ProgressPrimitive.Root
+      class={cn('bg-secondary relative h-4 w-full overflow-hidden rounded', props?.class)}
+    >
+      <ProgressPrimitive.Indicator
+        class="bg-primary h-full w-full flex-1 transition-all"
+        style={{ transform: `translateX(-${100 - (props.value || 0)}%)` }}
+      />
+    </ProgressPrimitive.Root>
+  );
+});
+```
+
+## Usage
+
+```tsx
+import { Progress } from '@qwik-ui/styled';
+```
+
+```tsx
+<Progress value={30} />
+```