feat: add ProgressBar component

.changeset/weak-ravens-trade.md

@@ -0,0 +1,5 @@
+---
+"@lemonsqueezy/wedges": minor
+---
+
+feat: add ProgressBar component

apps/docs/src/config/sidebarConfig.ts

@@ -142,6 +142,11 @@ export const sidebarConfig: DocsConfig = {
           label: "Popover",
           href: "/components/popover",
         },
+        {
+          label: "Progress Bar",
+          href: "/components/progress-bar",
+          new: true,
+        },
         {
           label: "Radio Group",
           href: "/components/radio-group",
@@ -183,11 +188,6 @@ export const sidebarConfig: DocsConfig = {
           href: "/components/number-input",
           disabled: true,
         },
-        {
-          label: "Progress Bar",
-          href: "/components/progress-bar",
-          disabled: true,
-        },
         {
           label: "Progress Circle",
           href: "/components/progress-circle",

apps/docs/src/content/components/progress-bar.mdx

@@ -0,0 +1,177 @@
+---
+title: Progress Bar
+description: A progress bar visually showing the percentage of a task completed.
+links:
+  source: https://github.com/lmsqueezy/wedges/blob/main/packages/wedges/src/components/Progress/Progress.tsx
+  radix: https://www.radix-ui.com/primitives/docs/components/progress
+---
+
+<PreviewComponent name="progress-bar/preview" />
+
+### Usage
+
+```tsx
+import { ProgressBar } from "@lemonsqueezy/wedges";
+```
+
+```tsx showLineNumbers
+<ProgressBar value={50} />
+```
+
+### API Reference
+
+`ProgressBar` component extends the <a href="https://www.radix-ui.com/docs/primitives/components/progress" target="_blank" rel='nofollow noreferrer'>Radix Progress</a> component and supports all of its props.
+
+<PropsTable
+  content={[
+    [
+      {
+        value: "asChild",
+        description:
+          "Change the default rendered element for the one passed as a child, merging their props and behavior.",
+      },
+      { value: "boolean" },
+      { value: "false" },
+    ],
+    [
+      {
+        value: "value",
+        description:
+          "The progress value.",
+      },
+      { value: "number | null" },
+      {},
+    ],
+    [
+      {
+        value: "max",
+        description: "The maximum progress value.",
+      },
+      { value: "number" },
+      {},
+    ],
+    [
+      {
+        value: "getValueLabel",
+        description:
+          "The modality of the popover. When set to 'true', interaction with outside elements will be disabled and only popover content will be visible to screen readers.",
+      },
+      { value: "function", description: "(value: number, max: number) => string" },
+      {},
+    ],
+    [
+        {
+            value: 'variant',
+            description: 'The variant of the progress bar.',
+        },
+        { value: '"default" | "inline"' },
+        { value: '"default"' },
+    ],
+    [
+        {
+            value: 'color',
+            description: 'The color of the filled progress bar.',
+        },
+        { value: 'Enum', description: '"primary" | "purple" | "green" | "blue" | "orange" | "pink" | "yellow" | "red" | "secondary"' },
+        { value: '"primary"' },
+    ],
+    [
+      {
+        value: "disabled",
+        description:
+          "If set to `true`, additional styles will be applied to indicate that the progress bar is disabled.",
+      },
+      {
+        value: "boolean",
+      },
+      { value: "false" },
+    ],
+    [
+      {
+        value: "tooltip",
+        description: "Optional description of the progress bar, shown on hover.",
+      },
+      { value: "ReactNode" },
+      {},
+    ],
+    [
+      { value: "description", description: "Additional information displayed next to the label." },
+      { value: "ReactNode" },
+      {},
+    ],
+    [
+      {
+        value: "label",
+        description: "Label of the input.",
+      },
+      { value: "ReactNode" },
+      {},
+    ],
+    [
+      {
+        value: "helperText",
+        description:
+          "Additional text or information to guide the user. It's rendered below the progress bar.",
+      },
+      {
+        value: "ReactNode",
+      },
+      {},
+    ],
+    [
+        {
+            value: 'indicator',
+            description: 'Typically a text or icon element indicating the current progress value.',
+        },
+        { value: 'ReactNode' },
+        {},
+    ],
+    [
+        {
+            value: 'afterIndicator',
+            description: 'The slot to be rendered after the indicator.',
+        },
+        { value: 'ReactNode' },
+        {},
+    ]
+  ]}
+/>
+
+<PropsTable
+  isData
+  content={[
+    [
+      {
+        value: "[data-state]",
+      },
+      { value: '"complete" | "indeterminate" | "loading"' },
+    ],
+    [
+      {
+        value: "[data-value]",
+      },
+      { value: 'The current value' },
+    ],
+    [
+      {
+        value: "[data-max]",
+      },
+      { value: 'The max value' },
+    ],
+]}
+/>
+
+### Accessibility
+
+The `ProgressBar` component supports all accessibility features of the <a href="https://www.radix-ui.com/primitives/docs/components/progress#accessibility" target="_blank" rel="nofollow noreferrer">Radix Progress</a> primitive.
+
+
+### Examples
+
+The following example shows different layout variants.
+
+<PreviewComponent name="progress-bar/example-1" />
+
+Next example shows different color and layout combinations.
+
+<PreviewComponent name="progress-bar/example-2" />

apps/docs/src/examples/index.ts

@@ -1824,6 +1824,139 @@ export function Example() {
     </Popover>
   );
 }
+`,
+  },
+  "progress-bar/example-1": {
+    component: lazy(() => import("@/examples/progress-bar/example-1.tsx")),
+    code: `import { SpinnerIcon } from "@iconicicons/react";
+import { ProgressBar } from "@lemonsqueezy/wedges";
+
+export function Example() {
+  return (
+    <div className="inline-flex w-full max-w-[400px] flex-col gap-y-12">
+      <ProgressBar
+        afterIndicator={<SpinnerIcon className="animate-spin" />}
+        helperText="Helper text"
+        indicator="50%"
+        label="Label"
+        tooltip="A tooltip is a small box that appears when hovering over a UI element, providing additional information."
+        value={50}
+      />
+
+      <ProgressBar helperText="Helper text" value={50} />
+
+      <ProgressBar
+        afterIndicator={<SpinnerIcon className="animate-spin" />}
+        variant="inline"
+        indicator="50%"
+        label="Label"
+        tooltip="A tooltip is a small box that appears when hovering over a UI element, providing additional information."
+        value={50}
+      />
+    </div>
+  );
+}
+`,
+  },
+  "progress-bar/example-2": {
+    component: lazy(() => import("@/examples/progress-bar/example-2.tsx")),
+    code: `import { CheckCircleIcon, CloseCircleIcon, CloseIcon, SpinnerIcon } from "@iconicicons/react";
+import { ProgressBar } from "@lemonsqueezy/wedges";
+
+export function Example() {
+  return (
+    <div className="inline-flex w-full max-w-[400px] flex-col gap-y-12">
+      <ProgressBar
+        afterIndicator={<SpinnerIcon className="animate-spin" />}
+        helperText="27MB of 60MB "
+        indicator="50%"
+        label="Uploading..."
+        value={50}
+        tooltip="A tooltip is a small box that appears when hovering over a UI element, providing additional information."
+      />
+
+      <ProgressBar
+        afterIndicator={<CheckCircleIcon className="text-wg-green" />}
+        helperText="60MB of 60MB"
+        indicator="100%"
+        label="Uploading Complete"
+        value={100}
+        color="green"
+        tooltip="A tooltip is a small box that appears when hovering over a UI element, providing additional information."
+      />
+
+      <ProgressBar
+        afterIndicator={<CloseCircleIcon className="text-wg-red" />}
+        helperText={<span className="text-destructive">Oops, something went wrong</span>}
+        label="Uploading Failed"
+        value={100}
+        color="red"
+        tooltip="A tooltip is a small box that appears when hovering over a UI element, providing additional information."
+      />
+
+      <ProgressBar
+        variant="inline"
+        indicator="368"
+        label="Class A"
+        value={368}
+        max={500}
+        color="green"
+      />
+
+      <ProgressBar
+        variant="inline"
+        indicator="211"
+        label="Class B"
+        value={211}
+        max={500}
+        color="orange"
+      />
+
+      <ProgressBar
+        variant="inline"
+        indicator="96"
+        label="Class A"
+        value={96}
+        max={500}
+        color="red"
+      />
+
+      <ProgressBar
+        afterIndicator={<CloseIcon />}
+        indicator={<span className="text-surface-500">50% (9 sec left)</span>}
+        label="design system.fig"
+        description="(23.6MB)"
+        value={50}
+        tooltip="A tooltip is a small box that appears when hovering over a UI element, providing additional information."
+        color="secondary"
+      />
+
+      <ProgressBar indicator="70%" label="Please wait..." value={70} color="secondary" />
+    </div>
+  );
+}
+`,
+  },
+  "progress-bar/preview": {
+    component: lazy(() => import("@/examples/progress-bar/preview.tsx")),
+    code: `import { SpinnerIcon } from "@iconicicons/react";
+import { ProgressBar } from "@lemonsqueezy/wedges";
+
+export function Example() {
+  return (
+    <div className="inline-block w-full max-w-[400px]">
+      <ProgressBar
+        afterIndicator={<SpinnerIcon className="animate-spin" />}
+        helperText="Helper text"
+        indicator="50%"
+        label="Label"
+        tooltip="A tooltip is a small box that appears when hovering over a UI element, providing additional information."
+        value={50}
+        max={100}
+      />
+    </div>
+  );
+}
 `,
   },
   "radio-group/example-1": {

apps/docs/src/examples/progress-bar/example-1.tsx

@@ -0,0 +1,28 @@
+import { SpinnerIcon } from "@iconicicons/react";
+import { ProgressBar } from "@lemonsqueezy/wedges";
+
+export default function Example() {
+  return (
+    <div className="inline-flex w-full max-w-[400px] flex-col gap-y-12">
+      <ProgressBar
+        afterIndicator={<SpinnerIcon className="animate-spin" />}
+        helperText="Helper text"
+        indicator="50%"
+        label="Label"
+        tooltip="A tooltip is a small box that appears when hovering over a UI element, providing additional information."
+        value={50}
+      />
+
+      <ProgressBar helperText="Helper text" value={50} />
+
+      <ProgressBar
+        afterIndicator={<SpinnerIcon className="animate-spin" />}
+        variant="inline"
+        indicator="50%"
+        label="Label"
+        tooltip="A tooltip is a small box that appears when hovering over a UI element, providing additional information."
+        value={50}
+      />
+    </div>
+  );
+}