Shadcn रेडियो बटन की अत्यधिक जटिलता

• वेब ब्राउज़र में डिफ़ॉल्ट रूप से मौजूद radio button एक साधारण HTML element है, लेकिन Shadcn UI लाइब्रेरी इसे React components की कई परतों में फिर से बनाती है
• Shadcn के <RadioGroup> और <RadioGroupItem>, Radix UI के components को फिर से wrap करते हैं और lucide-react icon तथा दर्जनों Tailwind classes का उपयोग करते हैं
• Radix accessibility और customization के लिए ARIA attributes का उपयोग करता है, लेकिन वास्तव में डिफ़ॉल्ट <input type="radio"> की जगह button element को दोबारा इस्तेमाल करता है
• जबकि वही styling साधारण CSS से भी की जा सकती है, यह संरचना सैकड़ों लाइनों का code और कई dependencies जोड़कर अनावश्यक जटिलता पैदा करती है
• बुनियादी HTML elements का पुन: उपयोग न करने से performance में गिरावट और maintenance का बोझ बढ़ता है, और web development की सरलता को नुकसान पहुँचता है

---

Shadcn रेडियो बटन संरचना का विश्लेषण

• Shadcn, radio button को <RadioGroup> और <RadioGroupItem> इन दो components के ज़रिए लागू करता है
  • हर component, @radix-ui/react-radio-group से लाए गए primitives को wrap करता है और lucide-react के CircleIcon का उपयोग करता है
  • इसमें 45 से अधिक lines का code, 3 external imports, और styling के लिए 30 से अधिक Tailwind classes शामिल हैं
• एक साधारण गोल संकेत के लिए SVG icon library लोड की जाती है
  • जबकि यह काम CSS के border-radius या <circle> element से भी किया जा सकता है

Radix UI की भूमिका

• Shadcn द्वारा उपयोग किया जाने वाला Radix, accessibility और customization पर केंद्रित low-level UI component library है
  • Radix का radio group implementation लगभग 215 lines के React code और 7 files के import पर आधारित है
• Radix, <button> element में ARIA attributes जोड़कर उसे radio button की तरह काम करने लायक बनाता है
  • लेकिन W3C के ARIA उपयोग का पहला सिद्धांत साफ़ कहता है: “जहाँ संभव हो, मूल HTML elements का उपयोग करें”
  • Radix इस सिद्धांत का पालन नहीं करता और <input> की जगह button को फिर से इस्तेमाल करता है
• <form> के अंदर ही hidden <input type="radio"> जोड़ने वाली इसकी संरचना सुसंगत नहीं लगती

CSS से संभव एक सरल विकल्प

• डिफ़ॉल्ट HTML radio button को appearance: none, ::before, :checked, border-radius आदि से आसानी से style किया जा सकता है
  • उदाहरण code में dependencies, JavaScript, या ARIA attributes के बिना पूर्ण customization दिखाया गया है
  • वही प्रभाव Tailwind से भी बनाया जा सकता है
• “radio button की styling कठिन है” यह धारणा अतीत की समस्या है; अब शुद्ध CSS से पर्याप्त नियंत्रण संभव है

जटिलता के जमा होने की समस्या

• Shadcn और Radix को साथ उपयोग करने पर दो libraries और सैकड़ों lines के code को समझना पड़ता है
  • एक साधारण radio button के लिए कई KB JavaScript अतिरिक्त लोड होती है
  • उपयोगकर्ता को button toggle करने के लिए JS parse और execution का इंतज़ार करना पड़ता है
• ऐसी संरचना cognitive load बढ़ाती है, bugs की संभावना फैलाती है, और web performance घटाती है

सरलता की ओर वापसी

• ब्राउज़र पहले से ही radio button देता है, और <input type="radio" name="beverage" value="coffee" /> की एक लाइन ही काफ़ी है
• अनावश्यक abstraction और nested libraries का उपयोग web development की मूल सरलता और दक्षता को नुकसान पहुँचाता है
• छोटे UI elements में भी मूल functionality का पुन: उपयोग करने वाला design maintenance और performance, दोनों के लिए अधिक फायदेमंद है