{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "patient-intake-form",
  "title": "Patient Intake Form",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/patient-intake-form/PatientIntakeForm.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed, reactive, ref } from 'vue'\nimport type { HTMLAttributes } from 'vue'\nimport {\n  Activity,\n  AlertTriangle,\n  Building2,\n  Calendar,\n  Check,\n  ChevronLeft,\n  ChevronRight,\n  CreditCard,\n  Download,\n  FileCheck,\n  FileText,\n  Lock,\n  Phone,\n  RotateCcw,\n  ShieldCheck,\n  Stethoscope,\n  User,\n  UserCheck,\n} from 'lucide-vue-next'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Checkbox } from '@/components/ui/checkbox'\nimport { Input } from '@/components/ui/input'\nimport { Label } from '@/components/ui/label'\nimport { SectionCard } from '@/components/ui/section-card'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'\nimport { Separator } from '@/components/ui/separator'\nimport { Stepper } from '@/components/ui/stepper'\nimport { Textarea } from '@/components/ui/textarea'\n\nexport interface PatientIntakeData {\n  // Step 1: Personal Information\n  firstName: string\n  middleName: string\n  lastName: string\n  preferredName: string\n  dob: string\n  biologicalSex: string\n  maritalStatus: string\n  phone: string\n  email: string\n  streetAddress: string\n  city: string\n  state: string\n  zipCode: string\n  emergencyName: string\n  emergencyRelationship: string\n  emergencyPhone: string\n\n  // Step 2: Medical History\n  chronicConditions: string[]\n  hasAllergies: boolean\n  allergyDetails: string\n  currentMedications: string\n  pastSurgeries: string\n  primaryCarePhysician: string\n  clinicPhone: string\n\n  // Step 3: Insurance & Billing\n  insuranceCarrier: string\n  memberId: string\n  groupNumber: string\n  policyholderName: string\n  policyholderRelationship: string\n  frontCardUploaded: boolean\n  backCardUploaded: boolean\n\n  // Step 4: Consent & Sign\n  hipaaConsent: boolean\n  treatmentConsent: boolean\n  telehealthConsent: boolean\n  signatureName: string\n  signatureDate: string\n  signerRole: string\n}\n\ninterface Props {\n  initialStep?: number\n  initialData?: Partial<PatientIntakeData>\n  class?: HTMLAttributes['class']\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  initialStep: 1,\n  initialData: () => ({}),\n})\n\nconst emits = defineEmits<{\n  (e: 'submit', data: PatientIntakeData): void\n  (e: 'step-change', step: number): void\n}>()\n\nconst steps = [\n  { id: 1, title: 'Personal Information', description: 'Demographics & Contact' },\n  { id: 2, title: 'Medical History', description: 'Conditions & Medications' },\n  { id: 3, title: 'Insurance & Billing', description: 'Coverage & Card Photos' },\n  { id: 4, title: 'Consent & Sign', description: 'HIPAA & Authorization' },\n]\n\nconst CHRONIC_CONDITIONS = [\n  { id: 'hypertension', label: 'Hypertension (High Blood Pressure)' },\n  { id: 'diabetes', label: 'Diabetes (Type 1 or Type 2)' },\n  { id: 'asthma', label: 'Asthma / Respiratory Conditions' },\n  { id: 'heart_disease', label: 'Coronary Artery / Heart Disease' },\n  { id: 'arthritis', label: 'Arthritis / Chronic Joint Pain' },\n  { id: 'cancer', label: 'Cancer / Remission History' },\n  { id: 'thyroid', label: 'Thyroid / Endocrine Disorder' },\n  { id: 'anxiety_depression', label: 'Depression / Clinical Anxiety' },\n  { id: 'kidney_disease', label: 'Chronic Kidney Disease' },\n  { id: 'gerd', label: 'Acid Reflux / GERD' },\n]\n\nconst INSURANCE_CARRIERS = [\n  { id: 'bcbs', label: 'BlueCross BlueShield' },\n  { id: 'aetna', label: 'Aetna Health' },\n  { id: 'cigna', label: 'Cigna Healthcare' },\n  { id: 'united', label: 'UnitedHealthcare' },\n  { id: 'medicare', label: 'Medicare Part A / B' },\n  { id: 'medicaid', label: 'Medicaid' },\n  { id: 'humana', label: 'Humana' },\n  { id: 'kaiser', label: 'Kaiser Permanente' },\n  { id: 'self_pay', label: 'Self-Pay (Uninsured)' },\n]\n\nconst step = ref(props.initialStep)\nconst submitted = ref(false)\nconst intakeId = ref('INTAKE-2026-8942')\n\nconst formData = reactive<PatientIntakeData>({\n  firstName: props.initialData.firstName ?? 'Eleanor',\n  middleName: props.initialData.middleName ?? 'Rose',\n  lastName: props.initialData.lastName ?? 'Vance',\n  preferredName: props.initialData.preferredName ?? 'Ellie',\n  dob: props.initialData.dob ?? '1988-10-14',\n  biologicalSex: props.initialData.biologicalSex ?? 'female',\n  maritalStatus: props.initialData.maritalStatus ?? 'married',\n  phone: props.initialData.phone ?? '(555) 234-8921',\n  email: props.initialData.email ?? 'eleanor.vance@example.com',\n  streetAddress: props.initialData.streetAddress ?? '742 Evergreen Terrace',\n  city: props.initialData.city ?? 'Springfield',\n  state: props.initialData.state ?? 'OR',\n  zipCode: props.initialData.zipCode ?? '97477',\n  emergencyName: props.initialData.emergencyName ?? 'Marcus Vance',\n  emergencyRelationship: props.initialData.emergencyRelationship ?? 'spouse',\n  emergencyPhone: props.initialData.emergencyPhone ?? '(555) 987-6543',\n\n  chronicConditions: props.initialData.chronicConditions ?? ['hypertension', 'asthma'],\n  hasAllergies: props.initialData.hasAllergies ?? true,\n  allergyDetails:\n    props.initialData.allergyDetails ?? 'Penicillin (Anaphylaxis/hives), Sulfa antibiotics (severe skin rash)',\n  currentMedications:\n    props.initialData.currentMedications ??\n    'Lisinopril 10mg PO once daily in morning, Albuterol HFA 90mcg inhaler 1-2 puffs Q4H PRN for bronchospasm, Multivitamin daily',\n  pastSurgeries:\n    props.initialData.pastSurgeries ??\n    'Appendectomy (Laparoscopic, 2016), Right knee arthroscopy / meniscus debridement (2021)',\n  primaryCarePhysician: props.initialData.primaryCarePhysician ?? 'Dr. Robert Chen, MD',\n  clinicPhone: props.initialData.clinicPhone ?? '(555) 601-2290 — Northwest Health Partners',\n\n  insuranceCarrier: props.initialData.insuranceCarrier ?? 'bcbs',\n  memberId: props.initialData.memberId ?? 'XEH-902814891',\n  groupNumber: props.initialData.groupNumber ?? 'GRP-44028',\n  policyholderName: props.initialData.policyholderName ?? 'Eleanor Vance',\n  policyholderRelationship: props.initialData.policyholderRelationship ?? 'self',\n  frontCardUploaded: props.initialData.frontCardUploaded ?? true,\n  backCardUploaded: props.initialData.backCardUploaded ?? true,\n\n  hipaaConsent: props.initialData.hipaaConsent ?? true,\n  treatmentConsent: props.initialData.treatmentConsent ?? true,\n  telehealthConsent: props.initialData.telehealthConsent ?? true,\n  signatureName: props.initialData.signatureName ?? 'Eleanor R. Vance',\n  signatureDate: props.initialData.signatureDate ?? '2026-08-21',\n  signerRole: props.initialData.signerRole ?? 'patient',\n})\n\nconst selectedCarrierLabel = computed(() => {\n  const found = INSURANCE_CARRIERS.find((c) => c.id === formData.insuranceCarrier)\n  return found ? found.label : formData.insuranceCarrier\n})\n\nfunction toggleCondition(conditionId: string, checked: boolean | 'indeterminate') {\n  if (checked === true) {\n    if (!formData.chronicConditions.includes(conditionId)) {\n      formData.chronicConditions.push(conditionId)\n    }\n  } else {\n    formData.chronicConditions = formData.chronicConditions.filter((id) => id !== conditionId)\n  }\n}\n\nfunction onStepperInput(value: number) {\n  if (value < step.value && step.value !== 5) {\n    step.value = value\n    emits('step-change', value)\n  }\n}\n\nfunction goNext() {\n  if (step.value < 4) {\n    step.value += 1\n    emits('step-change', step.value)\n  }\n}\n\nfunction handleSubmit() {\n  submitted.value = true\n  step.value = 5\n  emits('submit', { ...formData })\n  emits('step-change', 5)\n}\n\nfunction resetForm() {\n  step.value = 1\n  submitted.value = false\n  emits('step-change', 1)\n}\n</script>\n\n<template>\n  <SectionCard\n    data-slot=\"patient-intake-form\"\n    title=\"New Patient Registration\"\n    description=\"HIPAA-compliant digital intake questionnaire & clinical onboarding portal.\"\n    :class=\"['max-w-4xl', props.class]\"\n  >\n    <template #header-action>\n      <div class=\"flex items-center gap-2\">\n        <Badge\n          wrap\n          variant=\"outline\"\n          class=\"border-success/30 bg-success/10 text-success gap-1 py-0.5 text-xs font-medium\"\n        >\n          <ShieldCheck class=\"size-3.5\" aria-hidden=\"true\" />\n          HIPAA Protected\n        </Badge>\n        <Badge wrap variant=\"secondary\" class=\"hidden font-mono text-xs sm:inline-flex\"> Form #PHI-2026-894 </Badge>\n      </div>\n    </template>\n\n    <!-- Stepper Navigation -->\n    <Stepper v-if=\"step <= 4\" :steps=\"steps\" :model-value=\"step\" class=\"mb-6\" @update:model-value=\"onStepperInput\" />\n\n    <!-- ================================================================= -->\n    <!-- STEP 1: Personal Information                                      -->\n    <!-- ================================================================= -->\n    <div v-if=\"step === 1\" class=\"space-y-6\">\n      <!-- PHI Notice Banner -->\n      <div class=\"border-border/80 bg-muted/40 flex items-start gap-3 rounded-lg border p-3.5 text-xs\">\n        <ShieldCheck class=\"text-primary mt-0.5 size-4 shrink-0\" aria-hidden=\"true\" />\n        <div class=\"space-y-0.5\">\n          <p class=\"text-foreground font-semibold\">Protected Health Information (PHI) Notice</p>\n          <p class=\"text-muted-foreground leading-relaxed\">\n            All legal demographics and medical history submitted through this portal are encrypted in accordance with\n            federal HIPAA Omnibus rules and directly synchronized with the clinic's Electronic Health Record (EHR).\n          </p>\n        </div>\n      </div>\n\n      <!-- Legal Name Section -->\n      <div class=\"space-y-3\">\n        <h3 class=\"text-foreground flex items-center gap-2 text-xs font-semibold\">\n          <User class=\"text-primary size-3.5\" aria-hidden=\"true\" />\n          Legal Patient Identification\n        </h3>\n        <div class=\"grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-4\">\n          <div class=\"space-y-1.5 sm:col-span-1\">\n            <Label for=\"pi-first-name\" class=\"text-xs\">Legal First Name *</Label>\n            <Input id=\"pi-first-name\" v-model=\"formData.firstName\" placeholder=\"First name\" size=\"small\" />\n          </div>\n          <div class=\"space-y-1.5 sm:col-span-1\">\n            <Label for=\"pi-middle-name\" class=\"text-xs\">Middle Name</Label>\n            <Input id=\"pi-middle-name\" v-model=\"formData.middleName\" placeholder=\"Middle name\" size=\"small\" />\n          </div>\n          <div class=\"space-y-1.5 sm:col-span-1\">\n            <Label for=\"pi-last-name\" class=\"text-xs\">Legal Last Name *</Label>\n            <Input id=\"pi-last-name\" v-model=\"formData.lastName\" placeholder=\"Last name\" size=\"small\" />\n          </div>\n          <div class=\"space-y-1.5 sm:col-span-1\">\n            <Label for=\"pi-preferred-name\" class=\"text-xs\">Preferred Name</Label>\n            <Input\n              id=\"pi-preferred-name\"\n              v-model=\"formData.preferredName\"\n              placeholder=\"Nickname / Preferred\"\n              size=\"small\"\n            />\n          </div>\n        </div>\n      </div>\n\n      <Separator />\n\n      <!-- Demographics Section -->\n      <div class=\"space-y-3\">\n        <h3 class=\"text-foreground flex items-center gap-2 text-xs font-semibold\">\n          <Calendar class=\"text-primary size-3.5\" aria-hidden=\"true\" />\n          Birth & Clinical Demographics\n        </h3>\n        <div class=\"grid grid-cols-1 gap-3 sm:grid-cols-3\">\n          <div class=\"space-y-1.5\">\n            <Label for=\"pi-dob\" class=\"text-xs\">Date of Birth *</Label>\n            <Input id=\"pi-dob\" v-model=\"formData.dob\" type=\"date\" size=\"small\" />\n          </div>\n          <div class=\"space-y-1.5\">\n            <Label for=\"pi-biological-sex\" class=\"text-xs\">Biological Sex Assigned at Birth *</Label>\n            <Select v-model=\"formData.biologicalSex\">\n              <SelectTrigger id=\"pi-biological-sex\" size=\"sm\" class=\"h-8 text-xs\">\n                <SelectValue placeholder=\"Select sex\" />\n              </SelectTrigger>\n              <SelectContent>\n                <SelectItem value=\"female\">Female</SelectItem>\n                <SelectItem value=\"male\">Male</SelectItem>\n                <SelectItem value=\"intersex\">Intersex</SelectItem>\n                <SelectItem value=\"undisclosed\">Prefer not to disclose</SelectItem>\n              </SelectContent>\n            </Select>\n          </div>\n          <div class=\"space-y-1.5\">\n            <Label for=\"pi-marital-status\" class=\"text-xs\">Marital Status</Label>\n            <Select v-model=\"formData.maritalStatus\">\n              <SelectTrigger id=\"pi-marital-status\" size=\"sm\" class=\"h-8 text-xs\">\n                <SelectValue placeholder=\"Select status\" />\n              </SelectTrigger>\n              <SelectContent>\n                <SelectItem value=\"single\">Single</SelectItem>\n                <SelectItem value=\"married\">Married</SelectItem>\n                <SelectItem value=\"divorced\">Divorced</SelectItem>\n                <SelectItem value=\"widowed\">Widowed</SelectItem>\n                <SelectItem value=\"other\">Other</SelectItem>\n              </SelectContent>\n            </Select>\n          </div>\n        </div>\n      </div>\n\n      <Separator />\n\n      <!-- Contact & Residential Address -->\n      <div class=\"space-y-3\">\n        <h3 class=\"text-foreground flex items-center gap-2 text-xs font-semibold\">\n          <Phone class=\"text-primary size-3.5\" aria-hidden=\"true\" />\n          Contact & Residential Address\n        </h3>\n        <div class=\"grid grid-cols-1 gap-3 sm:grid-cols-2\">\n          <div class=\"space-y-1.5\">\n            <Label for=\"pi-phone\" class=\"text-xs\">Mobile Phone Number *</Label>\n            <Input id=\"pi-phone\" v-model=\"formData.phone\" type=\"tel\" placeholder=\"(555) 234-8921\" size=\"small\" />\n          </div>\n          <div class=\"space-y-1.5\">\n            <Label for=\"pi-email\" class=\"text-xs\">Email Address *</Label>\n            <Input id=\"pi-email\" v-model=\"formData.email\" type=\"email\" placeholder=\"patient@example.com\" size=\"small\" />\n          </div>\n          <div class=\"space-y-1.5 sm:col-span-2\">\n            <Label for=\"pi-address\" class=\"text-xs\">Street Address *</Label>\n            <Input id=\"pi-address\" v-model=\"formData.streetAddress\" placeholder=\"Street, Apt / Suite\" size=\"small\" />\n          </div>\n          <div class=\"grid grid-cols-1 gap-3 sm:col-span-2 sm:grid-cols-3\">\n            <div class=\"col-span-1 space-y-1.5\">\n              <Label for=\"pi-city\" class=\"text-xs\">City</Label>\n              <Input id=\"pi-city\" v-model=\"formData.city\" placeholder=\"City\" size=\"small\" />\n            </div>\n            <div class=\"col-span-1 space-y-1.5\">\n              <Label for=\"pi-state\" class=\"text-xs\">State</Label>\n              <Input id=\"pi-state\" v-model=\"formData.state\" placeholder=\"State / Province\" size=\"small\" />\n            </div>\n            <div class=\"col-span-1 space-y-1.5\">\n              <Label for=\"pi-zip\" class=\"text-xs\">ZIP Code</Label>\n              <Input id=\"pi-zip\" v-model=\"formData.zipCode\" placeholder=\"ZIP code\" size=\"small\" />\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <Separator />\n\n      <!-- Emergency Contact Box -->\n      <div class=\"border-border bg-muted/20 space-y-3 rounded-lg border p-4\">\n        <div class=\"flex flex-wrap items-center justify-between\">\n          <div class=\"flex items-center gap-2\">\n            <UserCheck class=\"text-primary size-4\" aria-hidden=\"true\" />\n            <h4 class=\"text-foreground text-xs font-semibold\">Emergency Contact (Designated Healthcare Surrogate)</h4>\n          </div>\n          <Badge wrap variant=\"secondary\" class=\"text-xs\">Required</Badge>\n        </div>\n        <div class=\"grid grid-cols-1 gap-3 sm:grid-cols-3\">\n          <div class=\"space-y-1.5\">\n            <Label for=\"pi-emg-name\" class=\"text-xs\">Contact Full Name *</Label>\n            <Input id=\"pi-emg-name\" v-model=\"formData.emergencyName\" placeholder=\"Full legal name\" size=\"small\" />\n          </div>\n          <div class=\"space-y-1.5\">\n            <Label for=\"pi-emg-rel\" class=\"text-xs\">Relationship to Patient *</Label>\n            <Select v-model=\"formData.emergencyRelationship\">\n              <SelectTrigger id=\"pi-emg-rel\" size=\"sm\" class=\"h-8 text-xs\">\n                <SelectValue placeholder=\"Relationship\" />\n              </SelectTrigger>\n              <SelectContent>\n                <SelectItem value=\"spouse\">Spouse</SelectItem>\n                <SelectItem value=\"parent\">Parent / Guardian</SelectItem>\n                <SelectItem value=\"child\">Adult Child</SelectItem>\n                <SelectItem value=\"sibling\">Sibling</SelectItem>\n                <SelectItem value=\"friend\">Friend / Relative</SelectItem>\n                <SelectItem value=\"other\">Other Legal Representative</SelectItem>\n              </SelectContent>\n            </Select>\n          </div>\n          <div class=\"space-y-1.5\">\n            <Label for=\"pi-emg-phone\" class=\"text-xs\">Emergency Phone *</Label>\n            <Input\n              id=\"pi-emg-phone\"\n              v-model=\"formData.emergencyPhone\"\n              type=\"tel\"\n              placeholder=\"(555) 987-6543\"\n              size=\"small\"\n            />\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- ================================================================= -->\n    <!-- STEP 2: Medical History                                           -->\n    <!-- ================================================================= -->\n    <div v-else-if=\"step === 2\" class=\"space-y-6\">\n      <!-- Chronic Conditions Checklist -->\n      <div class=\"space-y-3\">\n        <div class=\"flex flex-wrap items-center justify-between\">\n          <div class=\"flex items-center gap-2\">\n            <Activity class=\"text-primary size-4\" aria-hidden=\"true\" />\n            <h3 class=\"text-foreground text-xs font-semibold\">Chronic & Pre-Existing Health Conditions</h3>\n          </div>\n          <Badge wrap variant=\"secondary\" class=\"font-mono text-xs tabular-nums\">\n            {{ formData.chronicConditions.length }} selected\n          </Badge>\n        </div>\n        <p class=\"text-muted-foreground text-xs\">\n          Select any conditions diagnosed or treated in the past 5 years. If none apply, leave unchecked.\n        </p>\n        <div class=\"grid grid-cols-1 gap-2.5 sm:grid-cols-2\">\n          <div\n            v-for=\"cond in CHRONIC_CONDITIONS\"\n            :key=\"cond.id\"\n            class=\"border-border hover:bg-muted/30 flex items-center gap-2.5 rounded-lg border p-2.5 transition-colors\"\n          >\n            <Checkbox\n              :id=\"`condition-${cond.id}`\"\n              :model-value=\"formData.chronicConditions.includes(cond.id)\"\n              @update:model-value=\"(val) => toggleCondition(cond.id, val)\"\n            />\n            <Label :for=\"`condition-${cond.id}`\" class=\"flex-1 cursor-pointer text-xs font-normal select-none\">\n              {{ cond.label }}\n            </Label>\n          </div>\n        </div>\n      </div>\n\n      <Separator />\n\n      <!-- Known Allergies -->\n      <div class=\"border-border bg-muted/20 space-y-3 rounded-lg border p-4\">\n        <div class=\"flex flex-wrap items-center justify-between\">\n          <div class=\"flex items-center gap-2\">\n            <AlertTriangle class=\"text-warning size-4\" aria-hidden=\"true\" />\n            <h4 class=\"text-foreground text-xs font-semibold\">Known Drug, Latex, or Food Allergies</h4>\n          </div>\n          <div class=\"flex items-center gap-2\">\n            <Checkbox id=\"mh-has-allergies\" v-model=\"formData.hasAllergies\" label=\"I have known allergies\" />\n          </div>\n        </div>\n        <div v-if=\"formData.hasAllergies\" class=\"space-y-1.5 pt-1\">\n          <Label for=\"mh-allergy-details\" class=\"text-xs\"> List Specific Allergens & Adverse Reactions * </Label>\n          <Input\n            id=\"mh-allergy-details\"\n            v-model=\"formData.allergyDetails\"\n            placeholder=\"e.g., Penicillin (Anaphylaxis), Sulfa (Severe Rash), Peanuts (Hives), Latex\"\n            size=\"small\"\n          />\n        </div>\n        <p v-else class=\"text-muted-foreground text-xs italic\">No known drug, latex, or food allergies reported.</p>\n      </div>\n\n      <Separator />\n\n      <!-- Current Medications -->\n      <div class=\"space-y-2\">\n        <div class=\"flex items-center gap-2\">\n          <Stethoscope class=\"text-primary size-4\" aria-hidden=\"true\" />\n          <Label for=\"mh-medications\" class=\"text-xs font-semibold\"> Current Prescription & OTC Medications </Label>\n        </div>\n        <Textarea\n          id=\"mh-medications\"\n          v-model=\"formData.currentMedications\"\n          :rows=\"3\"\n          placeholder=\"Include drug name, dosage, and schedule (e.g., Lisinopril 10mg once daily in AM, Metformin 500mg BID with meals)...\"\n          class=\"text-xs\"\n        />\n        <p class=\"text-muted-foreground text-xs\">\n          Include all daily vitamins, herbal supplements, inhalers, and injections.\n        </p>\n      </div>\n\n      <Separator />\n\n      <!-- Past Surgeries -->\n      <div class=\"space-y-2\">\n        <div class=\"flex items-center gap-2\">\n          <FileText class=\"text-primary size-4\" aria-hidden=\"true\" />\n          <Label for=\"mh-surgeries\" class=\"text-xs font-semibold\">\n            Past Surgeries, Major Injuries & Hospitalizations\n          </Label>\n        </div>\n        <Textarea\n          id=\"mh-surgeries\"\n          v-model=\"formData.pastSurgeries\"\n          :rows=\"2\"\n          placeholder=\"List approximate year and procedure (e.g., Appendectomy 2016, Knee Arthroscopy 2021)...\"\n          class=\"text-xs\"\n        />\n      </div>\n\n      <Separator />\n\n      <!-- Primary Care Physician -->\n      <div class=\"space-y-3\">\n        <h4 class=\"text-foreground text-xs font-semibold\">Primary Care Provider / Referring Clinic</h4>\n        <div class=\"grid grid-cols-1 gap-3 sm:grid-cols-2\">\n          <div class=\"space-y-1.5\">\n            <Label for=\"mh-pcp-name\" class=\"text-xs\">Physician or Practice Name</Label>\n            <Input\n              id=\"mh-pcp-name\"\n              v-model=\"formData.primaryCarePhysician\"\n              placeholder=\"Dr. Robert Chen, MD\"\n              size=\"small\"\n            />\n          </div>\n          <div class=\"space-y-1.5\">\n            <Label for=\"mh-clinic-phone\" class=\"text-xs\">Clinic Contact / Phone</Label>\n            <Input id=\"mh-clinic-phone\" v-model=\"formData.clinicPhone\" placeholder=\"(555) 601-2290\" size=\"small\" />\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- ================================================================= -->\n    <!-- STEP 3: Insurance & Billing                                       -->\n    <!-- ================================================================= -->\n    <div v-else-if=\"step === 3\" class=\"space-y-6\">\n      <!-- Primary Insurance Carrier -->\n      <div class=\"space-y-3\">\n        <div class=\"flex flex-wrap items-center justify-between\">\n          <div class=\"flex items-center gap-2\">\n            <Building2 class=\"text-primary size-4\" aria-hidden=\"true\" />\n            <h3 class=\"text-foreground text-xs font-semibold\">Primary Medical Insurance Carrier</h3>\n          </div>\n          <Badge wrap variant=\"outline\" class=\"text-xs\">Primary Plan</Badge>\n        </div>\n        <div class=\"grid grid-cols-1 gap-3 sm:grid-cols-3\">\n          <div class=\"space-y-1.5\">\n            <Label for=\"ins-carrier\" class=\"text-xs\">Insurance Carrier *</Label>\n            <Select v-model=\"formData.insuranceCarrier\">\n              <SelectTrigger id=\"ins-carrier\" size=\"sm\" class=\"h-8 text-xs\">\n                <SelectValue placeholder=\"Select carrier\" />\n              </SelectTrigger>\n              <SelectContent>\n                <SelectItem v-for=\"carrier in INSURANCE_CARRIERS\" :key=\"carrier.id\" :value=\"carrier.id\">\n                  {{ carrier.label }}\n                </SelectItem>\n              </SelectContent>\n            </Select>\n          </div>\n          <div class=\"space-y-1.5\">\n            <Label for=\"ins-member-id\" class=\"text-xs\">Member / Subscriber ID *</Label>\n            <Input id=\"ins-member-id\" v-model=\"formData.memberId\" placeholder=\"e.g. XEH-902814891\" size=\"small\" />\n          </div>\n          <div class=\"space-y-1.5\">\n            <Label for=\"ins-group-num\" class=\"text-xs\">Group Number</Label>\n            <Input id=\"ins-group-num\" v-model=\"formData.groupNumber\" placeholder=\"e.g. GRP-44028\" size=\"small\" />\n          </div>\n        </div>\n      </div>\n\n      <Separator />\n\n      <!-- Policyholder Details -->\n      <div class=\"space-y-3\">\n        <h3 class=\"text-foreground flex items-center gap-2 text-xs font-semibold\">\n          <User class=\"text-primary size-3.5\" aria-hidden=\"true\" />\n          Primary Policyholder Information\n        </h3>\n        <div class=\"grid grid-cols-1 gap-3 sm:grid-cols-2\">\n          <div class=\"space-y-1.5\">\n            <Label for=\"ins-holder-name\" class=\"text-xs\">Primary Insured Full Legal Name *</Label>\n            <Input\n              id=\"ins-holder-name\"\n              v-model=\"formData.policyholderName\"\n              placeholder=\"Policyholder name\"\n              size=\"small\"\n            />\n          </div>\n          <div class=\"space-y-1.5\">\n            <Label for=\"ins-holder-rel\" class=\"text-xs\">Relationship to Patient *</Label>\n            <Select v-model=\"formData.policyholderRelationship\">\n              <SelectTrigger id=\"ins-holder-rel\" size=\"sm\" class=\"h-8 text-xs\">\n                <SelectValue placeholder=\"Relationship\" />\n              </SelectTrigger>\n              <SelectContent>\n                <SelectItem value=\"self\">Self (Patient is Policyholder)</SelectItem>\n                <SelectItem value=\"spouse\">Spouse</SelectItem>\n                <SelectItem value=\"child\">Child / Dependent</SelectItem>\n                <SelectItem value=\"other\">Other Legal Custodian</SelectItem>\n              </SelectContent>\n            </Select>\n          </div>\n        </div>\n      </div>\n\n      <Separator />\n\n      <!-- Insurance Card Photo Upload Placeholders -->\n      <div class=\"space-y-3\">\n        <div class=\"flex flex-wrap items-center justify-between\">\n          <div class=\"flex items-center gap-2\">\n            <CreditCard class=\"text-primary size-4\" aria-hidden=\"true\" />\n            <h3 class=\"text-foreground text-xs font-semibold\">Insurance Card Photo Verification</h3>\n          </div>\n          <span class=\"text-muted-foreground text-xs\">PNG, JPG, PDF up to 10MB</span>\n        </div>\n        <p class=\"text-muted-foreground text-xs\">\n          Provide high-resolution photos of both front and back sides of your insurance card for optical character\n          recognition (OCR) and benefit eligibility verification.\n        </p>\n\n        <div class=\"grid grid-cols-1 gap-4 sm:grid-cols-2\">\n          <!-- Front Card Dropzone -->\n          <div\n            class=\"border-border bg-card hover:bg-muted/20 flex flex-col justify-between rounded-xl border p-4 text-center transition-colors\"\n          >\n            <div class=\"space-y-2 py-3\">\n              <div class=\"bg-primary/10 text-primary mx-auto flex size-10 items-center justify-center rounded-full\">\n                <CreditCard class=\"size-5\" aria-hidden=\"true\" />\n              </div>\n              <div class=\"space-y-0.5\">\n                <p class=\"text-foreground text-xs font-semibold\">Front of Insurance Card</p>\n                <p class=\"text-muted-foreground text-xs\">Subscriber ID & carrier logo visible</p>\n              </div>\n            </div>\n            <div\n              class=\"border-border/60 bg-muted/40 flex flex-wrap items-center justify-between rounded-md border px-3 py-2 text-xs\"\n            >\n              <span v-if=\"formData.frontCardUploaded\" class=\"text-success flex items-center gap-1.5 font-medium\">\n                <Check class=\"size-3.5\" aria-hidden=\"true\" />\n                card_front_scan.jpg (2.4 MB)\n              </span>\n              <span v-else class=\"text-muted-foreground\">No file selected</span>\n              <Button\n                type=\"button\"\n                variant=\"outline\"\n                size=\"sm\"\n                class=\"h-7 text-xs font-medium\"\n                @click=\"formData.frontCardUploaded = !formData.frontCardUploaded\"\n              >\n                {{ formData.frontCardUploaded ? 'Replace' : 'Upload Front' }}\n              </Button>\n            </div>\n          </div>\n\n          <!-- Back Card Dropzone -->\n          <div\n            class=\"border-border bg-card hover:bg-muted/20 flex flex-col justify-between rounded-xl border p-4 text-center transition-colors\"\n          >\n            <div class=\"space-y-2 py-3\">\n              <div class=\"bg-primary/10 text-primary mx-auto flex size-10 items-center justify-center rounded-full\">\n                <CreditCard class=\"size-5\" aria-hidden=\"true\" />\n              </div>\n              <div class=\"space-y-0.5\">\n                <p class=\"text-foreground text-xs font-semibold\">Back of Insurance Card</p>\n                <p class=\"text-muted-foreground text-xs\">Claims address & Rx BIN visible</p>\n              </div>\n            </div>\n            <div\n              class=\"border-border/60 bg-muted/40 flex flex-wrap items-center justify-between rounded-md border px-3 py-2 text-xs\"\n            >\n              <span v-if=\"formData.backCardUploaded\" class=\"text-success flex items-center gap-1.5 font-medium\">\n                <Check class=\"size-3.5\" aria-hidden=\"true\" />\n                card_back_scan.jpg (1.9 MB)\n              </span>\n              <span v-else class=\"text-muted-foreground\">No file selected</span>\n              <Button\n                type=\"button\"\n                variant=\"outline\"\n                size=\"sm\"\n                class=\"h-7 text-xs font-medium\"\n                @click=\"formData.backCardUploaded = !formData.backCardUploaded\"\n              >\n                {{ formData.backCardUploaded ? 'Replace' : 'Upload Back' }}\n              </Button>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- ================================================================= -->\n    <!-- STEP 4: Consent & Sign                                            -->\n    <!-- ================================================================= -->\n    <div v-else-if=\"step === 4\" class=\"space-y-6\">\n      <!-- Legal Notice Accordion Box -->\n      <div class=\"space-y-2\">\n        <div class=\"flex flex-wrap items-center justify-between\">\n          <div class=\"flex items-center gap-2\">\n            <FileText class=\"text-primary size-4\" aria-hidden=\"true\" />\n            <h3 class=\"text-foreground text-xs font-semibold\">Regulatory Disclosures & Legal Notice</h3>\n          </div>\n          <Badge wrap variant=\"secondary\" class=\"text-xs\">Mandatory Acknowledgement</Badge>\n        </div>\n        <div\n          class=\"border-border bg-muted/20 text-muted-foreground max-h-40 space-y-3 overflow-y-auto rounded-lg border p-3.5 text-xs leading-relaxed\"\n        >\n          <div>\n            <span class=\"text-foreground font-semibold\">1. HIPAA Notice of Privacy Practices:</span>\n            I acknowledge receipt and review of the Notice of Privacy Practices, which describes how my Protected Health\n            Information (PHI) may be used and disclosed for clinical treatment, payment processing, and healthcare\n            operations in strict compliance with the HIPAA Omnibus Rule (45 CFR § 164.520).\n          </div>\n          <div>\n            <span class=\"text-foreground font-semibold\">2. Informed Consent for Outpatient Treatment:</span>\n            I voluntarily authorize the clinical physicians and allied healthcare team to perform diagnostic\n            evaluations, blood tests, physical examinations, and outpatient clinical care deemed medically necessary.\n          </div>\n          <div>\n            <span class=\"text-foreground font-semibold\">3. Assignment of Benefits & Financial Agreement:</span>\n            I assign all medical insurance benefits directly to the provider. I acknowledge that I remain financially\n            responsible for copayments, deductibles, and non-covered services not adjudicated by my carrier.\n          </div>\n        </div>\n      </div>\n\n      <!-- Consent Checkboxes -->\n      <div class=\"divide-border divide-y rounded-lg border\">\n        <div class=\"flex items-start gap-3 p-3.5\">\n          <Checkbox id=\"cs-hipaa-consent\" v-model=\"formData.hipaaConsent\" class=\"mt-0.5\" />\n          <div class=\"space-y-0.5\">\n            <Label for=\"cs-hipaa-consent\" class=\"cursor-pointer text-xs font-medium\">\n              HIPAA Privacy Practices Acknowledgement *\n            </Label>\n            <p class=\"text-muted-foreground text-xs\">\n              I have read, understood, and accept the HIPAA Notice of Privacy Practices and consent to electronic\n              medical record management.\n            </p>\n          </div>\n        </div>\n\n        <div class=\"flex items-start gap-3 p-3.5\">\n          <Checkbox id=\"cs-treatment-consent\" v-model=\"formData.treatmentConsent\" class=\"mt-0.5\" />\n          <div class=\"space-y-0.5\">\n            <Label for=\"cs-treatment-consent\" class=\"cursor-pointer text-xs font-medium\">\n              Informed Treatment Consent & Benefit Assignment *\n            </Label>\n            <p class=\"text-muted-foreground text-xs\">\n              I authorize medical evaluation and agree to the assignment of insurance benefits to the clinical care\n              provider.\n            </p>\n          </div>\n        </div>\n\n        <div class=\"flex items-start gap-3 p-3.5\">\n          <Checkbox id=\"cs-telehealth-consent\" v-model=\"formData.telehealthConsent\" class=\"mt-0.5\" />\n          <div class=\"space-y-0.5\">\n            <Label for=\"cs-telehealth-consent\" class=\"cursor-pointer text-xs font-medium\">\n              Telehealth & Encrypted Digital Communications (Optional)\n            </Label>\n            <p class=\"text-muted-foreground text-xs\">\n              I consent to virtual video consultations and automated SMS/email appointment notifications and lab report\n              alerts.\n            </p>\n          </div>\n        </div>\n      </div>\n\n      <Separator />\n\n      <!-- Electronic Signature Pad -->\n      <div class=\"space-y-4\">\n        <div class=\"flex flex-wrap items-center justify-between\">\n          <div class=\"flex items-center gap-2\">\n            <Lock class=\"text-primary size-4\" aria-hidden=\"true\" />\n            <h3 class=\"text-foreground text-xs font-semibold\">Electronic Signature & Digital Certification</h3>\n          </div>\n          <Badge wrap variant=\"outline\" class=\"border-primary/30 text-primary font-mono text-xs\">\n            256-bit Certified\n          </Badge>\n        </div>\n\n        <div class=\"grid grid-cols-1 gap-3 sm:grid-cols-3\">\n          <div class=\"space-y-1.5 sm:col-span-1\">\n            <Label for=\"cs-signer-name\" class=\"text-xs\">Type Full Legal Name as Signature *</Label>\n            <Input\n              id=\"cs-signer-name\"\n              v-model=\"formData.signatureName\"\n              placeholder=\"e.g. Eleanor R. Vance\"\n              size=\"small\"\n            />\n          </div>\n          <div class=\"space-y-1.5 sm:col-span-1\">\n            <Label for=\"cs-signer-role\" class=\"text-xs\">Signer Capacity / Role *</Label>\n            <Select v-model=\"formData.signerRole\">\n              <SelectTrigger id=\"cs-signer-role\" size=\"sm\" class=\"h-8 text-xs\">\n                <SelectValue placeholder=\"Select role\" />\n              </SelectTrigger>\n              <SelectContent>\n                <SelectItem value=\"patient\">Patient (Self)</SelectItem>\n                <SelectItem value=\"parent_guardian\">Parent / Legal Guardian</SelectItem>\n                <SelectItem value=\"poa\">Medical Power of Attorney</SelectItem>\n              </SelectContent>\n            </Select>\n          </div>\n          <div class=\"space-y-1.5 sm:col-span-1\">\n            <Label for=\"cs-sig-date\" class=\"text-xs\">Signature Date *</Label>\n            <Input id=\"cs-sig-date\" v-model=\"formData.signatureDate\" type=\"date\" size=\"small\" />\n          </div>\n        </div>\n\n        <!-- Live Digital Signature Stamp Preview -->\n        <div class=\"border-primary/30 bg-primary/5 space-y-3 rounded-xl border p-4\">\n          <div class=\"flex flex-wrap items-center justify-between\">\n            <span class=\"text-muted-foreground text-xs font-medium\"> Legal Digital Signature Stamp </span>\n            <span class=\"text-primary flex items-center gap-1 font-mono text-xs\">\n              <ShieldCheck class=\"size-3.5\" aria-hidden=\"true\" />\n              Verified & Timestamped\n            </span>\n          </div>\n\n          <div class=\"border-primary/20 border-b pt-1 pb-3\">\n            <p class=\"text-primary text-2xl font-medium tracking-wide italic\">\n              {{ formData.signatureName || 'Your Signature' }}\n            </p>\n          </div>\n\n          <div class=\"text-muted-foreground flex flex-wrap items-center justify-between gap-2 font-mono text-xs\">\n            <span>Signer: {{ formData.signatureName || 'Eleanor Vance' }} ({{ formData.signerRole }})</span>\n            <span>Date: {{ formData.signatureDate }} · Ref #SIG-49102-HIPAA</span>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- ================================================================= -->\n    <!-- STEP 5: Success / Confirmation Receipt                            -->\n    <!-- ================================================================= -->\n    <div v-else-if=\"step === 5\" class=\"space-y-6 py-4 text-center\">\n      <div\n        class=\"border-success/30 bg-success/10 text-success mx-auto flex size-16 items-center justify-center rounded-full border shadow-xs\"\n      >\n        <Check class=\"size-8\" aria-hidden=\"true\" />\n      </div>\n\n      <div class=\"space-y-1\">\n        <h3 class=\"text-foreground text-xl font-bold tracking-tight\">Patient Intake Submitted Successfully</h3>\n        <p class=\"text-muted-foreground mx-auto max-w-md text-xs sm:text-sm\">\n          Your new patient registration and encrypted medical disclosures have been received and queued for clinical\n          triage.\n        </p>\n      </div>\n\n      <div class=\"border-border inline-flex items-center gap-2 rounded-full border px-3 py-1 text-xs\">\n        <span class=\"text-muted-foreground\">Confirmation ID:</span>\n        <span class=\"text-foreground font-mono font-bold\">{{ intakeId }}</span>\n      </div>\n\n      <!-- Registration Summary Card -->\n      <div class=\"border-border bg-muted/30 mx-auto max-w-xl space-y-3 rounded-xl border p-4 text-left text-xs\">\n        <div class=\"grid grid-cols-1 gap-3 sm:grid-cols-2\">\n          <div>\n            <span class=\"text-muted-foreground block\">Patient Name:</span>\n            <span class=\"text-foreground font-semibold\"\n              >{{ formData.firstName }} {{ formData.middleName }} {{ formData.lastName }}</span\n            >\n          </div>\n          <div>\n            <span class=\"text-muted-foreground block\">Date of Birth:</span>\n            <span class=\"text-foreground font-medium tabular-nums\"\n              >{{ formData.dob }} ({{ formData.biologicalSex }})</span\n            >\n          </div>\n          <div>\n            <span class=\"text-muted-foreground block\">Primary Insurance:</span>\n            <span class=\"text-foreground font-medium\">{{ selectedCarrierLabel }} (ID: {{ formData.memberId }})</span>\n          </div>\n          <div>\n            <span class=\"text-muted-foreground block\">Emergency Contact:</span>\n            <span class=\"text-foreground font-medium\"\n              >{{ formData.emergencyName }} ({{ formData.emergencyPhone }})</span\n            >\n          </div>\n          <div\n            class=\"border-border/60 col-span-1 flex flex-wrap items-center justify-between border-t pt-2 sm:col-span-2\"\n          >\n            <span class=\"text-muted-foreground\">Legal Signature:</span>\n            <span class=\"text-primary font-medium tracking-wide italic\"\n              >{{ formData.signatureName }} ({{ formData.signatureDate }})</span\n            >\n          </div>\n        </div>\n      </div>\n\n      <!-- Action Buttons -->\n      <div class=\"flex flex-wrap items-center justify-center gap-3 pt-2\">\n        <Button aria-label=\"Download attachment\" variant=\"outline\" size=\"sm\" class=\"gap-1.5 text-xs font-medium\">\n          <Download class=\"size-3.5\" aria-hidden=\"true\" />\n          Download Intake PDF\n        </Button>\n        <Button size=\"sm\" class=\"gap-1.5 text-xs font-medium\" @click=\"resetForm\">\n          <RotateCcw class=\"size-3.5\" aria-hidden=\"true\" />\n          Register Another Patient\n        </Button>\n      </div>\n    </div>\n\n    <!-- ================================================================= -->\n    <!-- FOOTER CONTROLS                                                   -->\n    <!-- ================================================================= -->\n    <template #footer>\n      <div class=\"border-border bg-muted/20 flex w-full items-center justify-between border-t px-6 py-4\">\n        <Button\n          v-if=\"step > 1 && step <= 4\"\n          variant=\"ghost\"\n          size=\"sm\"\n          class=\"gap-1.5 text-xs font-medium\"\n          @click=\"step -= 1\"\n        >\n          <ChevronLeft class=\"size-4\" aria-hidden=\"true\" />\n          Back\n        </Button>\n        <span v-else aria-hidden=\"true\" />\n\n        <span v-if=\"step <= 4\" class=\"text-muted-foreground text-xs font-medium\">\n          Step {{ step }} of 4 — {{ steps[step - 1]?.title }}\n        </span>\n        <span v-else class=\"text-muted-foreground text-xs font-medium\">Registration Complete</span>\n\n        <Button\n          v-if=\"step < 4\"\n          size=\"sm\"\n          class=\"gap-1.5 text-xs font-medium\"\n          :disabled=\"step === 1 && (formData.firstName.trim() === '' || formData.lastName.trim() === '')\"\n          @click=\"goNext\"\n        >\n          Continue\n          <ChevronRight class=\"size-4\" aria-hidden=\"true\" />\n        </Button>\n        <Button\n          v-else-if=\"step === 4\"\n          size=\"sm\"\n          class=\"bg-primary text-primary-foreground gap-1.5 text-xs font-medium\"\n          :disabled=\"!formData.hipaaConsent || !formData.treatmentConsent || formData.signatureName.trim() === ''\"\n          @click=\"handleSubmit\"\n        >\n          <FileCheck class=\"size-4\" aria-hidden=\"true\" />\n          Submit Registration\n        </Button>\n        <span v-else aria-hidden=\"true\" />\n      </div>\n    </template>\n  </SectionCard>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/PatientIntakeForm.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/badge.json",
    "https://uipkge.dev/r/vue/button.json",
    "https://uipkge.dev/r/vue/checkbox.json",
    "https://uipkge.dev/r/vue/input.json",
    "https://uipkge.dev/r/vue/label.json",
    "https://uipkge.dev/r/vue/section-card.json",
    "https://uipkge.dev/r/vue/select.json",
    "https://uipkge.dev/r/vue/separator.json",
    "https://uipkge.dev/r/vue/stepper.json",
    "https://uipkge.dev/r/vue/textarea.json"
  ],
  "description": "HIPAA-compliant new patient registration and medical history questionnaire in a SectionCard. Features a 4-step Stepper (Personal Information → Medical History → Insurance & Billing → Consent & Sign), demographic inputs with biological sex and emergency contact, chronic conditions checklist with allergy details and medication textareas, insurance carrier selection with card photo upload dropzones, regulatory HIPAA disclosure accordion with electronic signature pad, and a post-submission confirmation receipt with patient ID.",
  "categories": [
    "healthcare",
    "app",
    "forms"
  ]
}