{
    "id": "bhaskar/segmented-control",
    "kind": "component",
    "title": "Segmented Control",
    "summary": "A sliding white pill that moves between Day, Week and Month for view modes and filters.",
    "author": "Admin",
    "stars": 0,
    "url": "https://ownlyplans.com/bhaskar/segmented-control/",
    "stack": [],
    "tools": [
        "claude-code",
        "cursor",
        "lovable"
    ],
    "difficulty": "beginner",
    "license": "mit",
    "version": "1.0",
    "overview": "Radiogroup semantics with real buttons. The pill is positioned from the active button so any labels and any number of options work.",
    "steps": [],
    "files": [],
    "install": "",
    "how_to_use": "Use the component code (html, css, js, or react) directly, or run the install command.",
    "component": {
        "category": "Buttons",
        "html": "<div class=\"sg\" role=\"radiogroup\" aria-label=\"View\"><span class=\"sg__p\"></span><button class=\"sg__b\" type=\"button\" role=\"radio\" aria-checked=\"true\">Day</button><button class=\"sg__b\" type=\"button\" role=\"radio\" aria-checked=\"false\">Week</button><button class=\"sg__b\" type=\"button\" role=\"radio\" aria-checked=\"false\">Month</button></div>",
        "css": ".sg{position:relative;display:inline-flex;padding:4px;border-radius:16px;background:#f0f0f1;border:1px solid #e4e4e7;box-shadow:inset 0 1px 3px rgba(0,0,0,.08)}\n.sg__p{position:absolute;top:4px;left:0;height:calc(100% - 8px);border-radius:12px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.16),0 4px 10px rgba(0,0,0,.06);transition:transform .28s cubic-bezier(.3,1.2,.5,1),width .28s ease}\n.sg__b{position:relative;z-index:1;padding:12px 26px;border:0;border-radius:12px;background:none;color:#737373;font:500 15px/1 system-ui,sans-serif;cursor:pointer;transition:color .2s ease}\n.sg__b[aria-checked=true]{color:#171717}\n.sg__b:focus-visible{outline:2px solid #1659f5;outline-offset:2px}\n@media (prefers-reduced-motion:reduce){.sg__p{transition:none}}",
        "js": "const g=document.querySelector('.sg'),p=g.querySelector('.sg__p'),bs=[...g.querySelectorAll('.sg__b')];\nfunction set(i){bs.forEach((b,k)=>b.setAttribute('aria-checked',k===i));p.style.width=bs[i].offsetWidth+'px';p.style.transform='translateX('+bs[i].offsetLeft+'px)'}\nbs.forEach((b,i)=>b.addEventListener('click',()=>set(i)));requestAnimationFrame(()=>set(0));",
        "react": "",
        "dependencies": [],
        "install": "",
        "licence_notice": ""
    }
}