{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "progress-stretch",
  "type": "registry:component",
  "title": "Progress (Stretch)",
  "description": "Progress with expanding current step.",
  "dependencies": [
    "@radix-ui/react-progress"
  ],
  "registryDependencies": [
    "tooltip"
  ],
  "files": [
    {
      "path": "registry/turbopills/ui/progress/progress.tsx",
      "content": "\"use client\";\r\n\r\nimport * as React from \"react\";\r\nimport { cn } from \"@/lib/utils\";\r\nimport {\r\n  Tooltip,\r\n  TooltipContent,\r\n  TooltipTrigger,\r\n} from \"@/components/ui/tooltip\";\r\n\r\nexport interface ProgressStep {\r\n  label?: string;\r\n  tooltip?: string;\r\n}\r\n\r\nexport interface ProgressProps {\r\n  value?: number;\r\n  animated?: boolean;\r\n  filledClassName?: string;\r\n  unfilledClassName?: string;\r\n  currentClassName?: string;\r\n  className?: string;\r\n}\r\n\r\nexport function useProgressHelpers({\r\n  value = 0,\r\n  stepCount,\r\n  highlightCurrent = false,\r\n  animated = true,\r\n  filledClassName,\r\n  unfilledClassName,\r\n  currentClassName,\r\n}: {\r\n  value?: number;\r\n  stepCount: number;\r\n  highlightCurrent?: boolean;\r\n  animated?: boolean;\r\n  filledClassName?: string;\r\n  unfilledClassName?: string;\r\n  currentClassName?: string;\r\n}) {\r\n  const transitionClass = animated ? \"transition-all duration-500\" : \"\";\r\n  const clampedValue = Math.min(Math.max(value, 0), 100);\r\n\r\n  const getStepState = (index: number) => {\r\n    const midpoint = ((index + 0.5) / stepCount) * 100;\r\n    const isFilled = value >= midpoint;\r\n    const nextMidpoint = ((index + 1.5) / stepCount) * 100;\r\n    const isCurrent = isFilled && value < nextMidpoint;\r\n    return { isFilled, isCurrent };\r\n  };\r\n\r\n  const getStateClasses = (isFilled: boolean, isCurrent: boolean) => {\r\n    if (isCurrent) {\r\n      return cn(\r\n        \"bg-primary\",\r\n        highlightCurrent ? \"ring-2 ring-primary/70\" : \"\",\r\n        currentClassName,\r\n      );\r\n    }\r\n    return isFilled\r\n      ? cn(\"bg-primary\", filledClassName)\r\n      : cn(\"bg-muted\", unfilledClassName);\r\n  };\r\n\r\n  return {\r\n    transitionClass,\r\n    clampedValue,\r\n    getStepState,\r\n    getStateClasses,\r\n  };\r\n}\r\n\r\nexport function StepLabel({ label }: { label?: string }) {\r\n  if (!label) return null;\r\n  return (\r\n    <span className=\"absolute top-full mt-2 text-xs text-muted-foreground whitespace-nowrap\">\r\n      {label}\r\n    </span>\r\n  );\r\n}\r\n\r\nexport function WithTooltip({\r\n  children,\r\n  tooltip,\r\n}: {\r\n  children: React.ReactElement;\r\n  tooltip?: string;\r\n}) {\r\n  if (!tooltip) return children;\r\n  return (\r\n    <Tooltip>\r\n      <TooltipTrigger asChild>{children}</TooltipTrigger>\r\n      <TooltipContent>{tooltip}</TooltipContent>\r\n    </Tooltip>\r\n  );\r\n}\r\n\r\nexport const ProgressContainer = React.forwardRef<\r\n  HTMLDivElement,\r\n  {\r\n    children: React.ReactNode;\r\n    hasLabels: boolean;\r\n  }\r\n>(({ children, hasLabels }, ref) => {\r\n  return (\r\n    <div ref={ref} className={cn(\"relative w-full\", hasLabels && \"pb-6\")}>\r\n      {children}\r\n    </div>\r\n  );\r\n});\r\n\r\nProgressContainer.displayName = \"ProgressContainer\";\r\n\r\nexport function renderStepsArray(\r\n  count: number,\r\n  steps: ProgressStep[] | undefined,\r\n  renderItem: (index: number, step?: ProgressStep) => React.ReactNode,\r\n) {\r\n  return Array.from({ length: count }, (_, index) =>\r\n    renderItem(index, steps?.[index]),\r\n  );\r\n}\r\n",
      "type": "registry:component",
      "target": "components/turbopills/ui/progress/progress.tsx"
    },
    {
      "path": "registry/turbopills/ui/progress/progress-stretch.tsx",
      "content": "\"use client\";\r\n\r\nimport { forwardRef } from \"react\";\r\nimport * as ProgressPrimitive from \"@radix-ui/react-progress\";\r\nimport { cn } from \"@/lib/utils\";\r\nimport {\r\n  type ProgressProps,\r\n  type ProgressStep,\r\n  useProgressHelpers,\r\n  ProgressContainer,\r\n  StepLabel,\r\n  WithTooltip,\r\n  renderStepsArray,\r\n} from \"./progress\";\r\n\r\nexport type ProgressStretchProps = ProgressProps & {\r\n  highlightCurrent?: boolean;\r\n  cellGap?: number;\r\n  currentWeight?: number;\r\n  collapsedWeight?: number;\r\n  steps?: ProgressStep[] | number;\r\n};\r\n\r\nexport const ProgressStretch = forwardRef<HTMLDivElement, ProgressStretchProps>(\r\n  (\r\n    {\r\n      className,\r\n      value = 0,\r\n      animated = true,\r\n      highlightCurrent = false,\r\n      filledClassName,\r\n      unfilledClassName,\r\n      currentClassName,\r\n      cellGap = 4,\r\n      currentWeight = 8,\r\n      collapsedWeight = 1,\r\n      steps,\r\n    },\r\n    ref,\r\n  ) => {\r\n    const effectiveStepCount = Array.isArray(steps)\r\n      ? steps.length\r\n      : typeof steps === \"number\"\r\n        ? steps\r\n        : 4;\r\n    const hasLabels = Array.isArray(steps) ? steps.some((s) => s.label) : false;\r\n\r\n    const { transitionClass, getStepState, getStateClasses } =\r\n      useProgressHelpers({\r\n        value,\r\n        stepCount: effectiveStepCount,\r\n        highlightCurrent,\r\n        animated,\r\n        filledClassName,\r\n        unfilledClassName,\r\n        currentClassName,\r\n      });\r\n\r\n    const hasCurrentCell = Array.from(\r\n      { length: effectiveStepCount },\r\n      (_, i) => i,\r\n    ).some((i) => getStepState(i).isCurrent);\r\n\r\n    const minCellWidth = 8;\r\n\r\n    return (\r\n      <ProgressContainer ref={ref} hasLabels={hasLabels}>\r\n        <ProgressPrimitive.Root\r\n          className={cn(\"relative rounded-full w-full h-2\", className)}\r\n        >\r\n          <div className=\"flex h-full w-full\" style={{ gap: `${cellGap}px` }}>\r\n            {renderStepsArray(\r\n              effectiveStepCount,\r\n              Array.isArray(steps) ? steps : undefined,\r\n              (index, step) => {\r\n                const { isFilled, isCurrent } = getStepState(index);\r\n\r\n                const flexValue = hasCurrentCell\r\n                  ? isCurrent\r\n                    ? `${currentWeight} 1 0`\r\n                    : `${collapsedWeight} 1 ${minCellWidth}px`\r\n                  : `1 1 0`;\r\n\r\n                return (\r\n                  <div\r\n                    key={index}\r\n                    className=\"relative flex flex-col items-center\"\r\n                    style={{\r\n                      flex: flexValue,\r\n                      transition: animated ? \"flex 500ms\" : undefined,\r\n                    }}\r\n                  >\r\n                    <WithTooltip tooltip={step?.tooltip}>\r\n                      <div\r\n                        className={cn(\r\n                          \"h-full w-full rounded-full\",\r\n                          transitionClass,\r\n                          getStateClasses(isFilled, isCurrent),\r\n                        )}\r\n                      />\r\n                    </WithTooltip>\r\n                    <StepLabel label={step?.label} />\r\n                  </div>\r\n                );\r\n              },\r\n            )}\r\n          </div>\r\n        </ProgressPrimitive.Root>\r\n      </ProgressContainer>\r\n    );\r\n  },\r\n);\r\n\r\nProgressStretch.displayName = \"ProgressStretch\";",
      "type": "registry:component",
      "target": "components/turbopills/ui/progress/progress-stretch.tsx"
    }
  ]
}