{"id":28859458,"url":"https://github.com/mirayatech/slot-picker-interaction","last_synced_at":"2026-04-30T20:32:37.768Z","repository":{"id":299684440,"uuid":"1003597738","full_name":"mirayatech/slot-picker-interaction","owner":"mirayatech","description":"🕓 A minimal, accessible time slot picker for real-world schedules.","archived":false,"fork":false,"pushed_at":"2025-06-17T19:33:44.000Z","size":93,"stargazers_count":15,"open_issues_count":0,"forks_count":1,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-04-30T20:32:27.811Z","etag":null,"topics":["animations","framer-motion","react","slot","taiwlindcss","time","time-slots","typescript","ui","ux"],"latest_commit_sha":null,"homepage":"https://slot-picker-interaction-psi.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mirayatech.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-06-17T11:41:01.000Z","updated_at":"2026-03-15T06:26:27.000Z","dependencies_parsed_at":"2025-06-17T20:04:30.445Z","dependency_job_id":"3736e27d-beb0-4bdb-af01-92607b2a73da","html_url":"https://github.com/mirayatech/slot-picker-interaction","commit_stats":null,"previous_names":["mirayatech/slot-picker-interaction"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/mirayatech/slot-picker-interaction","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mirayatech%2Fslot-picker-interaction","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mirayatech%2Fslot-picker-interaction/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mirayatech%2Fslot-picker-interaction/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mirayatech%2Fslot-picker-interaction/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mirayatech","download_url":"https://codeload.github.com/mirayatech/slot-picker-interaction/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mirayatech%2Fslot-picker-interaction/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32476682,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-30T13:12:12.517Z","status":"ssl_error","status_checked_at":"2026-04-30T13:12:06.837Z","response_time":57,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animations","framer-motion","react","slot","taiwlindcss","time","time-slots","typescript","ui","ux"],"created_at":"2025-06-20T04:00:55.873Z","updated_at":"2026-04-30T20:32:37.762Z","avatar_url":"https://github.com/mirayatech.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🕒 Time Slot Picker\n\nA project I built out of frustration with most time pickers out there. I wanted something that actually lets you express real-world availability. Not just \"anytime\" or a single range, but as many precise slots as you need. Think: 7:30–9:00, then again 13:00–15:30, and so on. All with a clean, minimal, and accessible UI that feels great to use.\n\n## ✨ Tech Stack\n\n- `React`\n- `TypeScript`\n- `Framer Motion`\n- `Tailwind CSS`\n- `Vite`\n- `clsx` + `tailwind-merge` for className composition\n\n## 🚀 Features\n\n- **Real Time Ranges:** Add as many slots as you want for each day. No more \"anytime\" nonsense.\n- **Instant Input Focus:** Open a day's schedule and the first \"From\" input is ready to go. No extra clicks.\n- **Accessibility First:**\n  - The toggle is a real switch (`role=\"switch\"`, `aria-checked`, `aria-label`), not just a styled button.\n  - Every button and control is keyboard accessible.\n  - No annoying focus rings, but still easy to navigate.\n- **Apple-Inspired Polish:**\n  - Soft, rounded corners, gentle shadows, and subtle transitions.\n  - Outlined, pill-shaped inputs and buttons.\n- **Minimal, Responsive Design:**\n  - Looks great on desktop, adapts well to smaller screens.\n- **No Distractions:**\n  - No colored focus rings or weird chrome—just a subtle border change on focus.\n  - Remove buttons are perfectly aligned for that satisfying visual harmony.\n- **Clean Class Logic:**\n  - I use a custom `cn` utility (combining `clsx` and `tailwind-merge`) to keep className logic tidy.\n\n## 💭 Why I Made This\n\nI kept running into time pickers that were either too basic or way too clunky. I wanted something that just works for real-life schedules—like when you're only available in the morning and then again in the evening. I obsessed over the details:\n\n- The first input is always focused so you can just start typing.\n- Every control is labeled and accessible.\n- The UI is so clean, people say \"wow\" when they see it.\n- No distractions, just clarity.\n\n## 🚦 Running the Project\n\n1. Clone the repository\n2. Install dependencies: `npm install`\n3. Run development server: `npm run dev`\n4. Open `http://localhost:5173` in your browser\n\n## 🎞️ Preview\n\n\nhttps://github.com/user-attachments/assets/fd274f21-143e-43b4-9049-a1cb365151cd\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmirayatech%2Fslot-picker-interaction","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmirayatech%2Fslot-picker-interaction","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmirayatech%2Fslot-picker-interaction/lists"}