{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "doctor-appointment-scheduler",
  "title": "Doctor Appointment Scheduler",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/doctor-appointment-scheduler/DoctorAppointmentScheduler.vue",
      "content": "<script setup lang=\"ts\">\nimport { ref, computed } from 'vue'\nimport type { HTMLAttributes } from 'vue'\nimport {\n  BadgeCheck,\n  Building2,\n  Calendar,\n  CalendarCheck,\n  Check,\n  CheckCircle2,\n  ChevronLeft,\n  ChevronRight,\n  Info,\n  Lock,\n  MapPin,\n  RotateCcw,\n  ShieldCheck,\n  Star,\n  Stethoscope,\n  Sun,\n  Sunset,\n  Video,\n} from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\nimport { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Input } from '@/components/ui/input'\nimport { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'\nimport { Separator } from '@/components/ui/separator'\nimport { Textarea } from '@/components/ui/textarea'\n\nexport interface DoctorAppointmentSchedulerProps {\n  doctorName?: string\n  doctorTitle?: string\n  doctorAvatar?: string\n  specialty?: string\n  clinicName?: string\n  clinicAddress?: string\n  rating?: number\n  reviewCount?: number\n  insurances?: string[]\n  initialDate?: string\n  initialTime?: string\n  initialVisitType?: 'in-person' | 'telehealth'\n  initialReason?: string\n  class?: HTMLAttributes['class']\n}\n\nconst props = withDefaults(defineProps<DoctorAppointmentSchedulerProps>(), {\n  doctorName: 'Dr. Marcus Thorne, MD, FACC',\n  doctorTitle: 'Board-Certified Cardiologist · Cedars-Sinai Heart Institute',\n  doctorAvatar: 'https://images.unsplash.com/photo-1622253692010-333f2da6031d?q=80&w=320&auto=format&fit=crop',\n  specialty: 'Cardiology & Internal Medicine',\n  clinicName: 'Cedars-Sinai Medical Plaza',\n  clinicAddress: 'Cedars-Sinai Medical Plaza, Suite 400, Los Angeles, CA',\n  rating: 4.9,\n  reviewCount: 240,\n  insurances: () => ['BlueCross BlueShield', 'Aetna', 'UnitedHealthcare', 'Medicare', 'Cigna'],\n  initialDate: '2026-08-27',\n  initialTime: '10:15 AM',\n  initialVisitType: 'in-person',\n  initialReason: 'chest-pain',\n})\n\n// Hardcoded week selector data\nconst weekDays = [\n  { id: '2026-08-24', weekday: 'Mon', day: '24', month: 'Aug', fullDate: 'Monday, Aug 24, 2026', slotsCount: 6 },\n  { id: '2026-08-25', weekday: 'Tue', day: '25', month: 'Aug', fullDate: 'Tuesday, Aug 25, 2026', slotsCount: 8 },\n  { id: '2026-08-26', weekday: 'Wed', day: '26', month: 'Aug', fullDate: 'Wednesday, Aug 26, 2026', slotsCount: 5 },\n  { id: '2026-08-27', weekday: 'Thu', day: '27', month: 'Aug', fullDate: 'Thursday, Aug 27, 2026', slotsCount: 8 },\n  { id: '2026-08-28', weekday: 'Fri', day: '28', month: 'Aug', fullDate: 'Friday, Aug 28, 2026', slotsCount: 7 },\n  { id: '2026-08-29', weekday: 'Sat', day: '29', month: 'Aug', fullDate: 'Saturday, Aug 29, 2026', slotsCount: 4 },\n]\n\n// Available Time Slots\nconst morningSlots = ['09:00 AM', '09:30 AM', '10:15 AM', '11:00 AM']\nconst afternoonSlots = ['02:00 PM', '02:45 PM', '03:30 PM', '04:15 PM']\n\n// Reasons for consultation\nconst visitReasons = [\n  {\n    value: 'annual-checkup',\n    label: 'Annual Checkup',\n    description: 'Routine wellness & cardiovascular health screening',\n    copay: '$25.00',\n  },\n  {\n    value: 'follow-up',\n    label: 'Follow-up',\n    description: 'Post-treatment evaluation & diagnostic review',\n    copay: '$20.00',\n  },\n  {\n    value: 'chest-pain',\n    label: 'Chest Pain Consultation',\n    description: 'Comprehensive symptom evaluation & urgent diagnostics',\n    copay: '$30.00',\n  },\n  {\n    value: 'medication-review',\n    label: 'Medication Review',\n    description: 'Prescription adjustment & therapeutic monitoring',\n    copay: '$15.00',\n  },\n  {\n    value: 'hypertension-evaluation',\n    label: 'Hypertension Evaluation',\n    description: 'Blood pressure assessment & ongoing care plan',\n    copay: '$25.00',\n  },\n]\n\n// State\nconst selectedDate = ref(props.initialDate)\nconst selectedTime = ref(props.initialTime)\nconst visitType = ref<'in-person' | 'telehealth'>(props.initialVisitType)\nconst selectedReason = ref(props.initialReason)\nconst patientName = ref('Sarah Jenkins')\nconst patientPhone = ref('+1 (555) 382-9104')\nconst insurancePolicy = ref('BCBS-90481240')\nconst notes = ref('Occasional mild tightness after morning workouts; seeking ECG review.')\nconst isBooked = ref(false)\nconst bookingReference = ref('APT-84920')\nconst calendarAdded = ref(false)\n\n// Computed helpers\nconst currentDateObj = computed(() => {\n  return weekDays.find((d) => d.id === selectedDate.value) || weekDays[3]\n})\n\nconst currentReasonObj = computed(() => {\n  return visitReasons.find((r) => r.value === selectedReason.value) || visitReasons[2]\n})\n\nconst selectedSlotFormatted = computed(() => {\n  return `${currentDateObj.value.weekday}, ${currentDateObj.value.month} ${currentDateObj.value.day} at ${selectedTime.value}`\n})\n\nconst locationText = computed(() => {\n  if (visitType.value === 'in-person') {\n    return 'In-Person · Room 402, Cedars-Sinai Plaza'\n  }\n  return 'Video Telehealth · Secure HIPAA Link'\n})\n\nfunction handleBook() {\n  if (!patientName.value.trim() || !patientPhone.value.trim()) return\n  isBooked.value = true\n}\n\nfunction handleReset() {\n  isBooked.value = false\n  calendarAdded.value = false\n}\n\nfunction handleAddToCalendar() {\n  calendarAdded.value = true\n}\n</script>\n\n<template>\n  <div data-slot=\"doctor-appointment-scheduler\" :class=\"cn('mx-auto w-full max-w-6xl space-y-6', props.class)\">\n    <!-- 1. Doctor Profile Hero Card -->\n    <Card class=\"border-border bg-card overflow-hidden shadow-xs\">\n      <CardContent class=\"p-6 md:p-8\">\n        <div class=\"flex flex-col gap-6 md:flex-row md:items-center md:justify-between\">\n          <!-- Left: Avatar + Core Bio -->\n          <div class=\"flex flex-col items-start gap-5 sm:flex-row sm:items-center\">\n            <div class=\"relative shrink-0\">\n              <Avatar class=\"border-primary/20 bg-muted size-20 rounded-2xl border-2 shadow-xs md:size-24\">\n                <AvatarImage :src=\"doctorAvatar\" :alt=\"doctorName\" class=\"rounded-2xl object-cover\" />\n                <AvatarFallback class=\"bg-primary/10 text-primary rounded-2xl text-lg font-bold\"> MT </AvatarFallback>\n              </Avatar>\n              <div\n                class=\"border-success/30 bg-success/10 text-success text-success absolute -right-1.5 -bottom-1.5 flex items-center gap-1 rounded-full border px-2 py-0.5 text-xs font-semibold backdrop-blur-sm\"\n              >\n                <span class=\"bg-success size-1.5 animate-pulse rounded-full\" />\n                <span>Available</span>\n              </div>\n            </div>\n\n            <div class=\"space-y-2\">\n              <div class=\"flex flex-wrap items-center gap-2\">\n                <h1 class=\"text-foreground text-xl font-bold tracking-tight md:text-2xl\">\n                  {{ doctorName }}\n                </h1>\n                <BadgeCheck class=\"text-primary size-5 shrink-0\" aria-label=\"Verified Doctor\" />\n              </div>\n\n              <p class=\"text-muted-foreground text-xs font-normal md:text-sm\">\n                {{ doctorTitle }}\n              </p>\n\n              <div class=\"flex flex-wrap items-center gap-2 pt-0.5\">\n                <Badge wrap variant=\"secondary\" class=\"text-xs font-medium\">\n                  {{ specialty }}\n                </Badge>\n                <Badge wrap variant=\"outline\" class=\"text-muted-foreground border-border text-xs font-medium\">\n                  16+ Yrs Experience\n                </Badge>\n                <Badge wrap variant=\"outline\" class=\"text-muted-foreground border-border text-xs font-medium\">\n                  Cedars-Sinai Affiliated\n                </Badge>\n              </div>\n            </div>\n          </div>\n\n          <!-- Right: Rating, Clinic & Insurance Highlights -->\n          <div class=\"border-border/80 bg-muted/30 flex shrink-0 flex-col gap-2.5 rounded-xl border p-4 md:max-w-xs\">\n            <div class=\"flex items-center justify-between gap-3\">\n              <div class=\"text-foreground flex items-center gap-1.5\">\n                <Star class=\"fill-warning text-warning size-4 shrink-0\" />\n                <span class=\"text-sm font-bold tabular-nums\">{{ rating }}</span>\n                <span class=\"text-muted-foreground text-xs\">({{ reviewCount }} reviews)</span>\n              </div>\n              <span class=\"text-success text-xs font-medium\">Top Rated</span>\n            </div>\n\n            <div class=\"text-muted-foreground flex items-start gap-2 text-xs\">\n              <MapPin class=\"text-primary mt-0.5 size-3.5 shrink-0\" />\n              <span class=\"line-clamp-2 leading-relaxed\">{{ clinicAddress }}</span>\n            </div>\n\n            <div class=\"text-muted-foreground flex items-start gap-2 text-xs\">\n              <ShieldCheck class=\"text-success mt-0.5 size-3.5 shrink-0\" />\n              <span class=\"line-clamp-2 leading-relaxed\"> Accepts BlueCross, Aetna, UnitedHealthcare, Medicare </span>\n            </div>\n          </div>\n        </div>\n      </CardContent>\n    </Card>\n\n    <!-- 2. Interactive Booking Flow (2-Column) -->\n    <div class=\"grid grid-cols-1 items-start gap-6 lg:grid-cols-12\">\n      <!-- Left Column: Calendar & Slot Picker (7 Cols) -->\n      <div class=\"space-y-6 lg:col-span-7\">\n        <!-- Step 1: Visit Type Selection -->\n        <div class=\"space-y-3\">\n          <div class=\"flex items-center gap-2\">\n            <div\n              class=\"bg-primary/10 text-primary flex size-6 items-center justify-center rounded-full text-xs font-bold\"\n            >\n              1\n            </div>\n            <h2 class=\"text-foreground text-sm font-semibold\">Select Visit Type</h2>\n          </div>\n\n          <RadioGroup v-model=\"visitType\" class=\"grid grid-cols-1 gap-3 sm:grid-cols-2\">\n            <label\n              for=\"visit-in-person\"\n              :class=\"\n                cn(\n                  'flex cursor-pointer items-start gap-3.5 rounded-xl border p-4 transition-colors duration-150',\n                  visitType === 'in-person'\n                    ? 'border-primary bg-primary/5 ring-primary/30 shadow-xs ring-1'\n                    : 'border-border bg-card hover:bg-muted/40',\n                )\n              \"\n            >\n              <RadioGroupItem id=\"visit-in-person\" value=\"in-person\" class=\"mt-0.5\" />\n              <div class=\"min-w-0 flex-1 space-y-1\">\n                <div class=\"flex items-center gap-1.5\">\n                  <Building2 class=\"text-primary size-4 shrink-0\" />\n                  <span class=\"text-foreground text-sm font-semibold\">In-Person Visit</span>\n                </div>\n                <p class=\"text-muted-foreground text-xs leading-relaxed\">\n                  Cedars-Sinai Medical Plaza, Suite 400 · In-office diagnostics & exam\n                </p>\n              </div>\n            </label>\n\n            <label\n              for=\"visit-telehealth\"\n              :class=\"\n                cn(\n                  'flex cursor-pointer items-start gap-3.5 rounded-xl border p-4 transition-colors duration-150',\n                  visitType === 'telehealth'\n                    ? 'border-primary bg-primary/5 ring-primary/30 shadow-xs ring-1'\n                    : 'border-border bg-card hover:bg-muted/40',\n                )\n              \"\n            >\n              <RadioGroupItem id=\"visit-telehealth\" value=\"telehealth\" class=\"mt-0.5\" />\n              <div class=\"min-w-0 flex-1 space-y-1\">\n                <div class=\"flex items-center gap-1.5\">\n                  <Video class=\"text-primary size-4 shrink-0\" />\n                  <span class=\"text-foreground text-sm font-semibold\">Video Telehealth</span>\n                </div>\n                <p class=\"text-muted-foreground text-xs leading-relaxed\">\n                  HD video consultation · HIPAA link sent via SMS & email\n                </p>\n              </div>\n            </label>\n          </RadioGroup>\n        </div>\n\n        <!-- Step 2: Reason for Visit -->\n        <div class=\"space-y-3\">\n          <div class=\"flex items-center gap-2\">\n            <div\n              class=\"bg-primary/10 text-primary flex size-6 items-center justify-center rounded-full text-xs font-bold\"\n            >\n              2\n            </div>\n            <h2 class=\"text-foreground text-sm font-semibold\">Reason for Visit</h2>\n          </div>\n\n          <Select v-model=\"selectedReason\">\n            <SelectTrigger class=\"bg-card border-border h-11 w-full rounded-xl px-4 text-sm font-medium\">\n              <SelectValue placeholder=\"Choose a clinical reason for consultation\" />\n            </SelectTrigger>\n            <SelectContent class=\"border-border bg-popover rounded-xl\">\n              <SelectItem\n                v-for=\"reason in visitReasons\"\n                :key=\"reason.value\"\n                :value=\"reason.value\"\n                class=\"cursor-pointer px-3 py-2.5 text-sm\"\n              >\n                <div class=\"flex flex-col gap-0.5\">\n                  <span class=\"text-foreground font-medium\">{{ reason.label }}</span>\n                  <span class=\"text-muted-foreground text-xs\">{{ reason.description }}</span>\n                </div>\n              </SelectItem>\n            </SelectContent>\n          </Select>\n        </div>\n\n        <!-- Step 3: Date Carousel / Week Selector -->\n        <div class=\"space-y-3\">\n          <div class=\"flex items-center justify-between\">\n            <div class=\"flex items-center gap-2\">\n              <div\n                class=\"bg-primary/10 text-primary flex size-6 items-center justify-center rounded-full text-xs font-bold\"\n              >\n                3\n              </div>\n              <h2 class=\"text-foreground text-sm font-semibold\">Select Date</h2>\n            </div>\n\n            <div class=\"flex items-center gap-2\">\n              <span class=\"text-muted-foreground text-xs font-medium\">August 2026</span>\n              <div class=\"flex items-center gap-1\">\n                <Button\n                  variant=\"outline\"\n                  size=\"icon-sm\"\n                  class=\"border-border size-7 rounded-lg\"\n                  aria-label=\"Previous week\"\n                >\n                  <ChevronLeft class=\"size-3.5\" />\n                </Button>\n                <Button variant=\"outline\" size=\"icon-sm\" class=\"border-border size-7 rounded-lg\" aria-label=\"Next week\">\n                  <ChevronRight class=\"size-3.5\" />\n                </Button>\n              </div>\n            </div>\n          </div>\n\n          <!-- 6-Day Carousel Strip -->\n          <div class=\"grid grid-cols-3 gap-2 sm:grid-cols-6\">\n            <button\n              v-for=\"day in weekDays\"\n              :key=\"day.id\"\n              type=\"button\"\n              :class=\"\n                cn(\n                  'focus-visible:ring-primary flex cursor-pointer flex-col items-center justify-center rounded-xl border p-3 text-center transition-colors duration-150 outline-none focus-visible:ring-2',\n                  selectedDate === day.id\n                    ? 'border-primary bg-primary text-primary-foreground ring-primary/20 font-semibold shadow-xs ring-2'\n                    : 'border-border bg-card hover:bg-muted/50 text-foreground',\n                )\n              \"\n              @click=\"selectedDate = day.id\"\n            >\n              <span\n                :class=\"\n                  cn(\n                    'text-xs font-medium tracking-wider uppercase',\n                    selectedDate === day.id ? 'text-primary-foreground/90' : 'text-muted-foreground',\n                  )\n                \"\n              >\n                {{ day.weekday }}\n              </span>\n              <span class=\"my-0.5 text-xl font-bold tabular-nums\">\n                {{ day.day }}\n              </span>\n              <span\n                :class=\"\n                  cn('text-xs font-medium', selectedDate === day.id ? 'text-primary-foreground/80' : 'text-success')\n                \"\n              >\n                {{ day.slotsCount }} slots\n              </span>\n            </button>\n          </div>\n        </div>\n\n        <!-- Step 4: Available Time Slots Grid -->\n        <div class=\"space-y-4\">\n          <div class=\"flex items-center justify-between\">\n            <div class=\"flex items-center gap-2\">\n              <div\n                class=\"bg-primary/10 text-primary flex size-6 items-center justify-center rounded-full text-xs font-bold\"\n              >\n                4\n              </div>\n              <h2 class=\"text-foreground text-sm font-semibold\">Available Time Slots</h2>\n            </div>\n            <span class=\"text-muted-foreground text-xs tabular-nums\">\n              8 slots on {{ currentDateObj.weekday }}, {{ currentDateObj.month }} {{ currentDateObj.day }}\n            </span>\n          </div>\n\n          <!-- Morning Section -->\n          <div class=\"border-border/70 bg-card space-y-2 rounded-xl border p-4\">\n            <div class=\"text-foreground flex items-center gap-1.5 text-xs font-semibold tracking-wide uppercase\">\n              <Sun class=\"text-warning size-3.5\" />\n              <span>Morning Slots</span>\n            </div>\n            <div class=\"grid grid-cols-2 gap-2 pt-1 sm:grid-cols-4\">\n              <button\n                v-for=\"slot in morningSlots\"\n                :key=\"slot\"\n                type=\"button\"\n                :class=\"\n                  cn(\n                    'focus-visible:ring-primary flex cursor-pointer items-center justify-center rounded-lg border px-3 py-2.5 text-sm font-medium tabular-nums transition-colors duration-150 outline-none focus-visible:ring-2',\n                    selectedTime === slot\n                      ? 'border-primary bg-primary text-primary-foreground ring-primary/30 font-semibold shadow-xs ring-2'\n                      : 'border-border bg-background hover:bg-muted/60 text-foreground',\n                  )\n                \"\n                @click=\"selectedTime = slot\"\n              >\n                {{ slot }}\n              </button>\n            </div>\n          </div>\n\n          <!-- Afternoon Section -->\n          <div class=\"border-border/70 bg-card space-y-2 rounded-xl border p-4\">\n            <div class=\"text-foreground flex items-center gap-1.5 text-xs font-semibold tracking-wide uppercase\">\n              <Sunset class=\"size-3.5 text-orange-500\" />\n              <span>Afternoon Slots</span>\n            </div>\n            <div class=\"grid grid-cols-2 gap-2 pt-1 sm:grid-cols-4\">\n              <button\n                v-for=\"slot in afternoonSlots\"\n                :key=\"slot\"\n                type=\"button\"\n                :class=\"\n                  cn(\n                    'focus-visible:ring-primary flex cursor-pointer items-center justify-center rounded-lg border px-3 py-2.5 text-sm font-medium tabular-nums transition-colors duration-150 outline-none focus-visible:ring-2',\n                    selectedTime === slot\n                      ? 'border-primary bg-primary text-primary-foreground ring-primary/30 font-semibold shadow-xs ring-2'\n                      : 'border-border bg-background hover:bg-muted/60 text-foreground',\n                  )\n                \"\n                @click=\"selectedTime = slot\"\n              >\n                {{ slot }}\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Right Column: Appointment Summary Card (5 Cols) -->\n      <div class=\"lg:col-span-5\">\n        <div class=\"sticky top-6\">\n          <!-- State A: Active Booking Form Summary -->\n          <Card v-if=\"!isBooked\" class=\"border-border bg-card overflow-hidden shadow-xs\">\n            <CardHeader class=\"border-border/70 bg-muted/20 border-b pb-3\">\n              <div class=\"flex items-center justify-between\">\n                <div class=\"space-y-0.5\">\n                  <CardTitle class=\"text-foreground text-base font-bold\"> Appointment Summary </CardTitle>\n                  <CardDescription class=\"text-muted-foreground text-xs\">\n                    Live schedule & patient registration\n                  </CardDescription>\n                </div>\n                <Badge\n                  wrap\n                  variant=\"outline\"\n                  class=\"border-success/30 bg-success/10 text-success gap-1.5 text-xs font-medium\"\n                >\n                  <span class=\"bg-success size-1.5 animate-pulse rounded-full\" />\n                  <span>Slot Held: 09:48</span>\n                </Badge>\n              </div>\n            </CardHeader>\n\n            <CardContent class=\"space-y-4 p-5\">\n              <!-- Selected Slot Readout Banner -->\n              <div class=\"border-primary/25 bg-primary/5 space-y-2.5 rounded-xl border p-4\">\n                <div class=\"flex items-start gap-2.5\">\n                  <CalendarCheck class=\"text-primary mt-0.5 size-4 shrink-0\" />\n                  <div class=\"space-y-0.5\">\n                    <p class=\"text-muted-foreground text-xs font-medium\">Selected Slot</p>\n                    <p class=\"text-foreground text-sm font-bold tabular-nums\">\n                      {{ selectedSlotFormatted }}\n                    </p>\n                  </div>\n                </div>\n\n                <div class=\"border-primary/15 flex items-start gap-2.5 border-t pt-1\">\n                  <Building2 v-if=\"visitType === 'in-person'\" class=\"text-primary mt-0.5 size-4 shrink-0\" />\n                  <Video v-else class=\"text-primary mt-0.5 size-4 shrink-0\" />\n                  <div class=\"space-y-0.5\">\n                    <p class=\"text-muted-foreground text-xs font-medium\">Location / Mode</p>\n                    <p class=\"text-foreground text-xs font-medium\">\n                      {{ locationText }}\n                    </p>\n                  </div>\n                </div>\n\n                <div class=\"border-primary/15 flex items-start gap-2.5 border-t pt-1\">\n                  <Stethoscope class=\"text-primary mt-0.5 size-4 shrink-0\" />\n                  <div class=\"space-y-0.5\">\n                    <p class=\"text-muted-foreground text-xs font-medium\">Visit Type</p>\n                    <p class=\"text-foreground text-xs font-medium\">\n                      {{ currentReasonObj.label }}\n                    </p>\n                  </div>\n                </div>\n              </div>\n\n              <!-- Estimated Copay Readout -->\n              <div class=\"border-border/80 bg-muted/40 flex items-center justify-between rounded-xl border p-3.5\">\n                <div class=\"flex items-center gap-2\">\n                  <ShieldCheck class=\"text-success size-4 shrink-0\" />\n                  <div class=\"space-y-0.5\">\n                    <p class=\"text-muted-foreground text-xs font-medium\">Estimated Copay</p>\n                    <p class=\"text-foreground text-xs font-semibold\">BlueCross PPO In-Network</p>\n                  </div>\n                </div>\n                <div class=\"text-right\">\n                  <span class=\"text-foreground text-base font-bold tabular-nums\">\n                    {{ currentReasonObj.copay }}\n                  </span>\n                  <p class=\"text-muted-foreground text-xs\">Covered at 90%</p>\n                </div>\n              </div>\n\n              <Separator class=\"my-2\" />\n\n              <!-- Patient Details Form -->\n              <div class=\"space-y-3\">\n                <p class=\"text-muted-foreground text-xs font-semibold tracking-wider uppercase\">Patient Information</p>\n\n                <div class=\"space-y-1.5\">\n                  <label for=\"sched-patient-name\" class=\"text-foreground text-xs font-medium\">\n                    Full Name <span class=\"text-destructive\">*</span>\n                  </label>\n                  <Input\n                    id=\"sched-patient-name\"\n                    v-model=\"patientName\"\n                    placeholder=\"e.g. Sarah Jenkins\"\n                    class=\"h-9 text-xs\"\n                  />\n                </div>\n\n                <div class=\"grid grid-cols-1 gap-2.5 sm:grid-cols-2\">\n                  <div class=\"space-y-1.5\">\n                    <label for=\"sched-patient-phone\" class=\"text-foreground text-xs font-medium\">\n                      Phone Number <span class=\"text-destructive\">*</span>\n                    </label>\n                    <Input\n                      id=\"sched-patient-phone\"\n                      v-model=\"patientPhone\"\n                      placeholder=\"+1 (555) 382-9104\"\n                      class=\"h-9 text-xs tabular-nums\"\n                    />\n                  </div>\n\n                  <div class=\"space-y-1.5\">\n                    <label for=\"sched-insurance\" class=\"text-foreground text-xs font-medium\">\n                      Insurance Policy #\n                    </label>\n                    <Input\n                      id=\"sched-insurance\"\n                      v-model=\"insurancePolicy\"\n                      placeholder=\"BCBS-90481240\"\n                      class=\"h-9 font-mono text-xs uppercase\"\n                    />\n                  </div>\n                </div>\n\n                <div class=\"space-y-1.5\">\n                  <label for=\"sched-notes\" class=\"text-foreground text-xs font-medium\">\n                    Clinical Symptoms / Notes\n                  </label>\n                  <Textarea\n                    id=\"sched-notes\"\n                    v-model=\"notes\"\n                    rows=\"2\"\n                    placeholder=\"Briefly describe your symptoms or current medications...\"\n                    class=\"text-xs leading-relaxed\"\n                  />\n                </div>\n              </div>\n            </CardContent>\n\n            <CardFooter class=\"border-border/60 bg-muted/10 flex flex-col gap-3 border-t p-5 pt-0\">\n              <Button class=\"h-11 w-full rounded-xl text-sm font-semibold shadow-xs\" @click=\"handleBook\">\n                <CalendarCheck class=\"mr-2 size-4 shrink-0\" />\n                <span>Confirm & Book Appointment</span>\n              </Button>\n\n              <div class=\"text-muted-foreground flex items-center justify-center gap-1.5 text-xs\">\n                <Lock class=\"text-success size-3 shrink-0\" />\n                <span>256-bit encrypted · HIPAA compliant · Free cancellation up to 24h</span>\n              </div>\n            </CardFooter>\n          </Card>\n\n          <!-- State B: Confirmed Appointment Screen -->\n          <Card v-else class=\"border-success/30 bg-success/5 overflow-hidden shadow-xs\">\n            <CardHeader class=\"pt-6 pb-3 text-center\">\n              <div\n                class=\"border-success/30 bg-success/10 text-success ring-success/10 text-success mx-auto mb-2 flex size-12 items-center justify-center rounded-full border ring-4\"\n              >\n                <CheckCircle2 class=\"size-6\" />\n              </div>\n              <CardTitle class=\"text-foreground text-lg font-bold\"> Appointment Confirmed! </CardTitle>\n              <CardDescription class=\"text-muted-foreground text-xs\">\n                Confirmation #{{ bookingReference }} dispatched to {{ patientPhone }}\n              </CardDescription>\n            </CardHeader>\n\n            <CardContent class=\"space-y-4 p-5\">\n              <div class=\"border-border bg-card space-y-3 rounded-xl border p-4 text-xs\">\n                <div class=\"border-border/80 flex items-center justify-between border-b pb-2\">\n                  <span class=\"text-muted-foreground\">Physician</span>\n                  <span class=\"text-foreground font-semibold\">{{ doctorName }}</span>\n                </div>\n                <div class=\"border-border/80 flex items-center justify-between border-b pb-2\">\n                  <span class=\"text-muted-foreground\">Date & Time</span>\n                  <span class=\"text-foreground font-semibold tabular-nums\">{{ selectedSlotFormatted }}</span>\n                </div>\n                <div class=\"border-border/80 flex items-center justify-between border-b pb-2\">\n                  <span class=\"text-muted-foreground\">Location</span>\n                  <span class=\"text-foreground font-semibold\">{{ locationText }}</span>\n                </div>\n                <div class=\"border-border/80 flex items-center justify-between border-b pb-2\">\n                  <span class=\"text-muted-foreground\">Visit Type</span>\n                  <span class=\"text-foreground font-semibold\">{{ currentReasonObj.label }}</span>\n                </div>\n                <div class=\"border-border/80 flex items-center justify-between border-b pb-2\">\n                  <span class=\"text-muted-foreground\">Patient</span>\n                  <span class=\"text-foreground font-semibold\">{{ patientName }}</span>\n                </div>\n                <div class=\"flex items-center justify-between\">\n                  <span class=\"text-muted-foreground\">Est. Copay Due</span>\n                  <span class=\"text-foreground font-bold tabular-nums\">{{ currentReasonObj.copay }}</span>\n                </div>\n              </div>\n\n              <div class=\"bg-muted/40 border-border/80 text-muted-foreground space-y-1 rounded-xl border p-3 text-xs\">\n                <p class=\"text-foreground flex items-center gap-1.5 font-medium\">\n                  <Info class=\"text-primary size-3.5 shrink-0\" />\n                  Pre-Appointment Instructions\n                </p>\n                <p class=\"leading-relaxed\">\n                  Please arrive 15 minutes early with your photo ID and active insurance card. For telehealth, join link\n                  activates 10 minutes prior to visit.\n                </p>\n              </div>\n            </CardContent>\n\n            <CardFooter class=\"flex flex-col gap-2.5 p-5 pt-0\">\n              <Button\n                variant=\"outline\"\n                class=\"border-border h-10 w-full rounded-xl text-xs font-semibold\"\n                :disabled=\"calendarAdded\"\n                @click=\"handleAddToCalendar\"\n              >\n                <Check v-if=\"calendarAdded\" class=\"text-success mr-1.5 size-3.5\" />\n                <Calendar v-else class=\"mr-1.5 size-3.5\" />\n                <span>{{ calendarAdded ? 'Added to Calendar' : 'Add to Google / Apple Calendar' }}</span>\n              </Button>\n\n              <Button\n                variant=\"ghost\"\n                class=\"text-muted-foreground hover:text-foreground h-9 w-full text-xs font-medium\"\n                @click=\"handleReset\"\n              >\n                <RotateCcw class=\"mr-1.5 size-3\" />\n                <span>Schedule Another Appointment</span>\n              </Button>\n            </CardFooter>\n          </Card>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/DoctorAppointmentScheduler.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/avatar.json",
    "https://uipkge.dev/r/vue/badge.json",
    "https://uipkge.dev/r/vue/button.json",
    "https://uipkge.dev/r/vue/card.json",
    "https://uipkge.dev/r/vue/input.json",
    "https://uipkge.dev/r/vue/radio-group.json",
    "https://uipkge.dev/r/vue/select.json",
    "https://uipkge.dev/r/vue/separator.json",
    "https://uipkge.dev/r/vue/textarea.json"
  ],
  "description": "Zocdoc and Epic style specialist doctor appointment booking scheduler: physician profile hero card with rating, clinic address, and insurance badges, interactive visit type selector, reason for visit dropdown, date carousel with daily availability indicators, morning and afternoon time slot picker, live appointment summary readout with copay estimate, patient registration inputs, and booking confirmation flow.",
  "categories": [
    "healthcare",
    "app",
    "clinical",
    "forms"
  ]
}