Create Community stage implemented

app/components/progress/ProportionBar/ProportionBar.container.tsx

@@ -1,11 +1,13 @@
 "use client";
 
 import { memo } from "react";
+import { normalizeProportionBarVariant } from "../../../../lib/propNormalization";
 import { ProportionBarView } from "./ProportionBar.view";
 import type { ProportionBarProps } from "./ProportionBar.types";
 
 const ProportionBarContainer = memo<ProportionBarProps>(
-  ({ progress = "3-2", className = "" }) => {
+  ({ progress = "3-2", className = "", variant: variantProp }) => {
+    const variant = normalizeProportionBarVariant(variantProp);
     const barClasses = `h-[8px] relative w-full`;
 
     return (
@@ -13,6 +15,7 @@ const ProportionBarContainer = memo<ProportionBarProps>(
         progress={progress}
         className={className}
         barClasses={barClasses}
+        variant={variant}
       />
     );
   },

app/components/progress/ProportionBar/ProportionBar.types.ts

@@ -1,3 +1,5 @@
+import type { ProportionBarVariantValue } from "../../../../lib/propNormalization";
+
 export type ProportionBarState =
   | "1-0"
   | "1-1"
@@ -12,13 +14,20 @@ export type ProportionBarState =
   | "3-1"
   | "3-2";
 
+export type ProportionBarVariant = ProportionBarVariantValue;
+
 export interface ProportionBarProps {
   progress?: ProportionBarState;
   className?: string;
+  /**
+   * `segmented` (Figma: create-flow footer): pill-shaped partial fills inside each segment.
+   */
+  variant?: ProportionBarVariant;
 }
 
 export interface ProportionBarViewProps {
   progress: ProportionBarState;
   className: string;
   barClasses: string;
+  variant: "default" | "segmented";
 }

app/components/progress/ProportionBar/ProportionBar.view.tsx

@@ -4,9 +4,11 @@ export function ProportionBarView({
   progress,
   className,
   barClasses,
+  variant,
 }: ProportionBarViewProps) {
   // Proportion bar type
   const [fullSegments, partialSegment] = progress.split("-").map(Number);
+  const segmented = variant === "segmented";
   // Calculate total progress:
   // - For 1-X: first section is (X+1)/6 filled
   // - For 2-X: first section full, second section X/3 filled
@@ -58,7 +60,11 @@ export function ProportionBarView({
         <div className="flex-1 h-full relative">
           {fullSegments === 1 ? (
             <div
-              className="absolute inset-y-0 left-0 bg-[var(--color-content-default-brand-primary)] rounded-l-[var(--radius-full)]"
+              className={`absolute inset-y-0 left-0 bg-[var(--color-content-default-brand-primary)] rounded-l-[var(--radius-full)] ${
+                segmented && partialSegment < 5
+                  ? "rounded-r-[var(--radius-full)]"
+                  : ""
+              }`.trim()}
               style={{ width: `${((partialSegment + 1) / 6) * 100}%` }}
             />
           ) : fullSegments >= 2 ? (
@@ -70,7 +76,11 @@ export function ProportionBarView({
           {fullSegments === 2 ? (
             partialSegment > 0 ? (
               <div
-                className="absolute inset-y-0 left-0 bg-[var(--color-content-default-brand-primary)]"
+                className={`absolute inset-y-0 left-0 bg-[var(--color-content-default-brand-primary)] ${
+                  segmented
+                    ? "rounded-l-[var(--radius-full)] rounded-r-[var(--radius-full)]"
+                    : ""
+                }`.trim()}
                 style={{ width: `${(partialSegment / 3) * 100}%` }}
               />
             ) : null
@@ -84,8 +94,12 @@ export function ProportionBarView({
           {fullSegments === 3 && partialSegment > 0 ? (
             <div
               className={`absolute inset-y-0 left-0 bg-[var(--color-content-default-brand-primary)] ${
-                partialSegment >= 3 ? "rounded-r-[var(--radius-full)]" : ""
-              }`}
+                segmented
+                  ? "rounded-l-[var(--radius-full)] rounded-r-[var(--radius-full)]"
+                  : partialSegment >= 3
+                    ? "rounded-r-[var(--radius-full)]"
+                    : ""
+              }`.trim()}
               style={{ width: `${Math.min((partialSegment / 3) * 100, 100)}%` }}
             />
           ) : null}