{
    "id": "bhaskar/sky-pill-switch",
    "kind": "component",
    "title": "Sky Pill Switch",
    "summary": "A day and night switch: a white knob glides across a blue sky pill that swaps its sun for a crescent moon.",
    "author": "Admin",
    "stars": 0,
    "url": "https://ownlyplans.com/bhaskar/sky-pill-switch/",
    "stack": [],
    "tools": [
        "claude-code",
        "cursor",
        "lovable"
    ],
    "difficulty": "beginner",
    "license": "mit",
    "version": "1.0",
    "overview": "Built from one checkbox and a few pseudo-elements. Off shows daylight with the sun on the right; on turns the sky navy, moves the knob and shows the moon on the left.",
    "steps": [],
    "files": [],
    "install": "",
    "how_to_use": "Use the component code (html, css, js, or react) directly, or run the install command.",
    "component": {
        "category": "Toggles and inputs",
        "html": "<label class=\"sky\"><input type=\"checkbox\" role=\"switch\" aria-label=\"Night mode\"><span class=\"sky__track\"><span class=\"sky__sun\"></span><span class=\"sky__moon\"></span><span class=\"sky__knob\"></span></span></label>",
        "css": ".sky{position:relative;display:inline-block;width:64px;height:34px}\n.sky input{position:absolute;inset:0;z-index:1;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}\n.sky__track{position:absolute;inset:0;border-radius:34px;background:#36a2f4;box-shadow:inset 0 2px 4px rgba(0,0,0,.18);transition:background-color .4s ease}\n.sky__knob{position:absolute;top:4px;left:4px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.3);transition:transform .4s cubic-bezier(.3,1.3,.5,1)}\n.sky__sun{position:absolute;top:9px;right:9px;width:16px;height:16px;border-radius:50%;background:#ffc93c;box-shadow:0 0 0 3px rgba(255,201,60,.35);transition:opacity .3s ease}\n.sky__moon{position:absolute;top:9px;left:9px;width:16px;height:16px;border-radius:50%;background:transparent;box-shadow:inset -5px -2px 0 0 #f4f1de;opacity:0;transition:opacity .3s ease}\n.sky input:checked+.sky__track{background:#1d2a5c}\n.sky input:checked+.sky__track .sky__knob{transform:translateX(30px)}\n.sky input:checked+.sky__track .sky__sun{opacity:0}\n.sky input:checked+.sky__track .sky__moon{opacity:1}\n.sky input:focus-visible+.sky__track{outline:2px solid #1659f5;outline-offset:3px}\n@media (prefers-reduced-motion:reduce){.sky__track,.sky__knob,.sky__sun,.sky__moon{transition:none}}",
        "js": "",
        "react": "",
        "dependencies": [],
        "install": "",
        "licence_notice": ""
    }
}