docs: fix broken github source link (lmsqueezy#56)

* docs: fix broken github link

* refactor: fix prettier formatting

---------

Co-authored-by: Branko Conjic <[email protected]>

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

@@ -2,7 +2,7 @@
 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
+ source: https://github.com/lmsqueezy/wedges/blob/main/packages/wedges/src/components/Progress/ProgressBar.tsx
  radix: https://www.radix-ui.com/primitives/docs/components/progress
 ---
 
@@ -174,4 +174,4 @@ The following example shows different layout variants.
 
 Next example shows different color and layout combinations.
 
-<PreviewComponent name="progress-bar/example-2" />
+<PreviewComponent name="progress-bar/example-2" />

apps/docs/src/examples/index.ts

@@ -1868,70 +1868,91 @@ export function Example() {
  <div className="inline-flex w-full max-w-[400px] flex-col gap-y-12">
  <ProgressBar
  afterIndicator={<SpinnerIcon className="animate-spin" />}
- helperText="27MB of 60MB "
+ 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."
+ value={50}
  />
 
  <ProgressBar
  afterIndicator={<CheckCircleIcon className="text-wg-green" />}
+ color="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."
+ value={100}
  />
 
  <ProgressBar
  afterIndicator={<CloseCircleIcon className="text-wg-red" />}
+ color="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."
+ value={100}
  />
 
  <ProgressBar
- variant="inline"
+ color="green"
  indicator="368"
  label="Class A"
- value={368}
  max={500}
- color="green"
+ value={368}
+ variant="inline"
  />
 
  <ProgressBar
- variant="inline"
+ color="orange"
  indicator="211"
  label="Class B"
- value={211}
  max={500}
- color="orange"
+ value={211}
+ variant="inline"
  />
 
  <ProgressBar
- variant="inline"
+ color="red"
  indicator="96"
  label="Class A"
- value={96}
  max={500}
- color="red"
+ value={96}
+ variant="inline"
  />
 
  <ProgressBar
  afterIndicator={<CloseIcon />}
+ color="secondary"
+ description="(23.6MB)"
  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"
+ value={50}
  />
 
  <ProgressBar indicator="70%" label="Please wait..." value={70} color="secondary" />
+
+ <ProgressBar
+ afterIndicator={<SpinnerIcon className="animate-spin" />}
+ indicator="50%"
+ label="Progress"
+ tooltip="A tooltip is a small box that appears when hovering over a UI element, providing additional information."
+ value={50}
+ variant="inline"
+ />
+
+ <ProgressBar indicator="50% Complete" value={50} variant="inline" color="blue" />
+
+ <ProgressBar
+ afterIndicator={<CloseIcon />}
+ description="35%"
+ value={35}
+ variant="inline"
+ color="yellow"
+ />
+
+ <ProgressBar value={70} color="pink" helperText="(650MB/1.12GB) · 17 seconds remaining" />
  </div>
  );
 }

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

@@ -3,7 +3,7 @@ import { ProgressBar } from "@lemonsqueezy/wedges";
 
 export default function Example() {
  return (
- <div className="inline-flex w-full max-w-[400px] flex-col gap-y-16">
+ <div className="inline-flex w-full max-w-[400px] flex-col gap-y-12">
  <ProgressBar
  afterIndicator={<SpinnerIcon className="animate-spin" />}
  helperText="27MB of 60MB"
@@ -53,7 +53,7 @@ export default function Example() {
  <ProgressBar
  color="red"
  indicator="96"
- label="Class A"
+ label="Class C"
  max={500}
  value={96}
  variant="inline"

packages/wedges/src/components/Progress/ProgressBar.tsx

@@ -12,7 +12,7 @@ const progressBarVariants = cva({
  variants: {
  variant: {
  default: "flex-col gap-2",
- inline: "xs:flex-nowrap xs:gap-4 min-w-[200px] flex-wrap items-center gap-2",
+ inline: "min-w-[200px] flex-wrap items-center gap-2 xs:flex-nowrap xs:gap-4",
  },
  color: {
  primary: ["bg-primary"],