{
    "id": "bhaskar/draggable-bottom-sheet",
    "kind": "component",
    "title": "Draggable Bottom Sheet",
    "summary": "A bottom sheet that slides up over a dimmed screen with a drag handle. Drag it down to dismiss or let it spring back.",
    "author": "Admin",
    "stars": 0,
    "url": "https://ownlyplans.com/bhaskar/draggable-bottom-sheet/",
    "stack": [],
    "tools": [
        "claude-code"
    ],
    "difficulty": "beginner",
    "license": "cc-by-4.0",
    "version": "1.0",
    "overview": "",
    "steps": [],
    "files": [],
    "install": "",
    "how_to_use": "Use the component code (html, css, js, or react) directly, or run the install command.",
    "component": {
        "category": "Cards",
        "html": "<div class=\"bsw\"><button class=\"op\">Open bottom sheet</button><div class=\"ov\"></div><div class=\"sh\"><div class=\"hd\"><i></i></div><h5>Share this file</h5><p>Anyone with the link can view.</p><div class=\"gr\"><span><svg viewBox=\"0 0 24 24\"><rect x=\"8\" y=\"8\" width=\"11\" height=\"11\" rx=\"2\"/><path d=\"M5 15V6a1 1 0 011-1h9\"/></svg>Copy link</span><span><svg viewBox=\"0 0 24 24\"><rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2\"/><path d=\"M3 7l9 6 9-6\"/></svg>Email</span><span><svg viewBox=\"0 0 24 24\"><path d=\"M4 5h16v11H9l-5 4z\"/></svg>Message</span><span><svg viewBox=\"0 0 24 24\"><circle cx=\"6\" cy=\"12\" r=\"1.5\"/><circle cx=\"12\" cy=\"12\" r=\"1.5\"/><circle cx=\"18\" cy=\"12\" r=\"1.5\"/></svg>More</span></div><button class=\"cn\">Cancel</button></div></div>",
        "css": ".bsw{position:relative;width:340px;height:330px;overflow:hidden;border-radius:18px;font-family:system-ui,-apple-system,sans-serif;color:#f1f1f1}.op{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:12px 20px;border-radius:999px;border:1px solid #2a2a2a;background:#1b1b1b;color:#f1f1f1;font:600 13px/1 inherit;cursor:pointer}.ov{position:absolute;inset:0;background:rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:opacity .3s}.bsw.open .ov{opacity:1;pointer-events:auto}.sh{position:absolute;left:0;right:0;bottom:0;padding:0 18px 18px;border-radius:22px 22px 0 0;background:#1c1c1c;border-top:1px solid #2c2c2c;transform:translateY(105%);transition:transform .5s cubic-bezier(.3,1.15,.4,1);touch-action:none}.bsw.open .sh{transform:none}.sh.drag{transition:none}.hd{display:grid;place-items:center;padding:10px 0 12px;cursor:grab}.hd i{width:38px;height:4px;border-radius:2px;background:#444}.sh h5{margin:0 0 4px;font-size:15px}.sh p{margin:0 0 14px;font-size:12px;color:#8a8a8a}.gr{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.gr span{display:grid;justify-items:center;gap:7px;padding:12px 4px;border-radius:12px;background:#242424;font-size:11px;color:#cfcfcf;cursor:pointer;transition:background .2s,transform .2s}.gr span:hover{background:#2c2c2c;transform:translateY(-2px)}.gr svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.cn{width:100%;margin-top:12px;padding:12px;border:0;border-radius:12px;background:#2a2a2a;color:#fff;font:600 13px/1 inherit;cursor:pointer}",
        "js": "(function(){var r=document.querySelector('.bsw'),s=r.querySelector('.sh'),y0=0,dy=0,d=false;function c(){r.classList.remove('open');s.style.transform=''}r.querySelector('.op').onclick=function(){r.classList.add('open')};r.querySelector('.ov').onclick=c;r.querySelector('.cn').onclick=c;document.addEventListener('keydown',function(e){if(e.key==='Escape')c()});s.onpointerdown=function(e){if(e.target.closest('.gr,.cn'))return;d=true;y0=e.clientY;dy=0;s.classList.add('drag');s.setPointerCapture(e.pointerId)};s.onpointermove=function(e){if(!d)return;dy=Math.max(0,e.clientY-y0);s.style.transform='translateY('+dy+'px)'};s.onpointerup=function(){if(!d)return;d=false;s.classList.remove('drag');if(dy>70){c()}else{s.style.transform=''}}})();",
        "react": "",
        "dependencies": [],
        "install": "",
        "licence_notice": ""
    }
}